Instagram Journey/practice space

In this example below you will see how to do a Instagram Journey/practice space with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Instagram Journey/practice space</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <head>
    <header class = 'site-header'>
      <div class='intro-text'>

       <p><center>My Journey to the Photographer World of Instagram</center>          </p>

      </div>
      </head>

      <body>
        <div class="logo" style="background-image:url('https://image.freepik.com/free-vector/instagram-logo_1045-436.jpg');">
 
        </div>
        
        <br>
        <p>My first thought when I woke up in the USA was that <strong><i class='quote1'>'damn the roads are very clean'</i></strong>. I started using Instagram when I was 17 years old, my first picture upload was of my eye with the slight edit using the saturation and the shading. That was picture one and now its 2017 and I have uploaded almost a thousand pictures. In my bio tag my caption is <i class='quote2'><strong>'every picture is a memory, ok not everything but you get the point'</i></strong>.</h1></p>



    




      </body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/instagram-journeypractice-space-YZyjNx */
.intro-text{
    text-decoration: none;
    color: #345678;
    list-style: none;
    margin: 0;
    font-family: helvetica;
    font-weight: bold;
    padding: 0;
    width:100%;
    height:auto;

}

.quote1{
  font-family: helvetica;
}

.quote2{
  
  font-family: helvetica;
}

.logo { position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;             }

Comments