<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="https://www.instagram.com/static/images/ico/favicon-192.png/68d99ba29cc8.png" rel="shortcut icon">
 <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> 
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="menu">
<div><i class='fas fa-home' style='font-size:24px'></i></div>
<div><img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"></div>
<div><i class='far fa-envelope' style='font-size:24px;'></i></div>
</div>
<div class="story">
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRDvSvtACpiqtEAI-JHK-Wj6nbBzTYyu8wMXR5alaR0GgTiayC_&usqp=CAU" id="story-pic">Add story</div>
<div><img src="https://i.pinimg.com/236x/16/11/4c/16114c649efa88a927aaa1a01420f0fa.jpg" id="story-pic">Lionie</div>
<div><img src="https://i.pinimg.com/236x/8e/4b/a1/8e4ba1eed0ef14361513776aeeb7ec3c.jpg" id="story-pic">Barbie_fan</div>
<div><img src="https://i.pinimg.com/236x/d5/af/ec/d5afecdb14c93a3be12b2e7b21be9f22.jpg" id="story-pic">miss_shay</div>
<div><img src="https://i.pinimg.com/236x/1b/33/ac/1b33aced6e8fd2c1c3e821c6c6c3fe2c.jpg" id="story-pic">niamo23</div>
<div><img src="https://i.pinimg.com/236x/bd/43/7c/bd437c3b2934da4bfd43c20a6b979c31.jpg" id="story-pic">beach_babes321</div>
<div><img src="https://i.pinimg.com/236x/7c/4f/2d/7c4f2d4e7717c782fd4462dcd98c7dfa.jpg" id="story-pic">madmax</div>
<div><img src="https://i.pinimg.com/236x/b3/47/f9/b347f9bc0a80d0ef90dba62c92a528e2.jpg" id="story-pic">sunny21</div>
<div><img src="https://i.pinimg.com/236x/6c/12/a8/6c12a8359754acb9f176c9155637c912.jpg" id="story-pic">elif_demezir</div>
<div><img src="https://i.pinimg.com/236x/cb/40/91/cb40915ec1655a9b58942372e2279514.jpg" id="story-pic">samy_slimani</div>
<div><img src="https://i.pinimg.com/236x/6b/f1/7c/6bf17c41554e4ad22d959a546d90fe78.jpg" id="story-pic">lanaNicholson</div>
<div><img src="https://i.pinimg.com/236x/1b/c3/ba/1bc3bae1a7579b136fd30d98d39cc1d5.jpg" id="story-pic">jasmintabatai78</div>
<div><img src="https://i.pinimg.com/236x/60/10/a8/6010a87ff09ded1d4e64ede5487206b7.jpg" id="story-pic">snow-queen-ella</div>
<div><img src="https://i.pinimg.com/236x/01/bd/56/01bd56f15a16116dfe6ed8d9c7aca2a1.jpg" id="story-pic">wanted_adventure</div>
<div><img src="https://i.pinimg.com/236x/d1/be/b0/d1beb03c9579a91ad5d68d31930956d1.jpg" id="story-pic">itz_me_lee</div>
</div>
<article>
<div class="user">
<div><img src="https://i.pinimg.com/236x/e7/fe/2e/e7fe2eca346f6928a33605e932ec0b7b.jpg" id="story-pic"></div>
<div><h>Sandra_bandra</h></div>
<div><i style="font-size:24px;">...</i></div>
</div>
<div class="post">
<img src="https://i.pinimg.com/236x/80/64/10/806410ea571b60d6a7c25b87adad9667.jpg" id="post-img">
</div>
<div class="reaction">
<div><i class='far fa-heart' style='font-size:24px' onclick="toggleLike(this)"></i></div>
<div><i class='far fa-comment' style='font-size:24px'></i></div>
<div><i class='far fa-paper-plane' style='font-size:24px'></i></div>
<span style="display:inline-block;margin-left:50%;"></span><div><i class="fa fa-bookmark-o" style="font-size:24px;"></i></div>
</div>
<div class="caption">
<img src="https://i.pinimg.com/236x/e7/fe/2e/e7fe2eca346f6928a33605e932ec0b7b.jpg" id="user-caption-img"><h>Sandra_bandra</h> <p>Vibrate good energy into others soul; making them never forget the beauty of yours.</p><br>
<a href="#">#summervibes</a> <a href="#">#itssummer</a> <a href="#">#crazygurl</a> <a href="#">#orangeisthenewblack</a></p>
</div>

<div class="user">
<div><img src="https://i.pinimg.com/236x/67/de/43/67de434a0454315add86f8aaf63205de.jpg" id="story-pic"></div>
<div><h>Sofie Buchanon</h></div>
<div><i style="font-size:24px;">...</i></div>
</div>
<div class="post">
<img src="https://i.pinimg.com/236x/3e/c4/59/3ec459f04d57804d7589f2007df7dc41.jpg" id="post-img">
</div>
<div class="reaction">
<div><i class='far fa-heart' style='font-size:24px' onclick="toggleLike(this)"></i></div>
<div><i class='far fa-comment' style='font-size:24px'></i></div>
<div><i class='far fa-paper-plane' style='font-size:24px'></i></div>
<span style="display:inline-block;margin-left:50%;"></span><div><i class="fa fa-bookmark-o" style="font-size:24px;"></i></div>
</div>
<div class="caption">
<img src="https://i.pinimg.com/236x/67/de/43/67de434a0454315add86f8aaf63205de.jpg" id="user-caption-img"><h>Sofie Buchanon</h> <p>My little one turns 1 year old today! πŸ‘£Thank God for blessing me with this beautiful baby boy.πŸ’– He lights up my life. I don't know what I'd do without him.😘<br>
<a href="#">#babyboy</a> <a href="#">#love</a> <a href="#">#mysunshine</a> <a href="#">#proudmama</a></p>
</div>

<div class="user">
<div><img src="https://i.pinimg.com/236x/71/bd/07/71bd07434d3ef2d0fd1b00a21a4f3796.jpg" id="story-pic"></div>
<div><h>Will Lawson</h></div>
<div><i style="font-size:24px;">...</i></div>
</div>
<div class="post-multiple">
<div><img src="https://i.pinimg.com/236x/aa/d9/a6/aad9a6e759efeaa6e292077d4df5f1f1.jpg" id="post-multiple-img"></div>
<div>
<img src="https://i.pinimg.com/236x/80/53/18/8053189342314003fb91e35113be0810.jpg" id="post-multiple-img"></div>
</div>
<div class="reaction">
<div><i class='far fa-heart' style='font-size:24px' onclick="toggleLike(this)"></i></div>
<div><i class='far fa-comment' style='font-size:24px'></i></div>
<div><i class='far fa-paper-plane' style='font-size:24px'></i></div>
<span style="display:inline-block;margin-left:50%;"></span><div><i class="fa fa-bookmark-o" style="font-size:24px;"></i></div>
</div>
<div class="caption">
<img src="https://i.pinimg.com/236x/71/bd/07/71bd07434d3ef2d0fd1b00a21a4f3796.jpg" id="user-caption-img"><h>Will Lawson</h> <p>Just moved in! After all the hustle and bustle my wife <a href="#">@mira_bella210</a> and I are proud owners of a sea-side condo in California.<br>
<a href="#">#blessedwiththebest</a> <a href="#">#homesweethome</a> <a href="#">#happy</a> <a href="#">#california</a></p>
</div>


<div class="user">
<div><img src="https://i.pinimg.com/736x/d1/f9/72/d1f97241ddf520437e7b0bc1d3cf82ae.jpg" id="story-pic"></div>
<div><h>Lorenzo_di_medici012</h></div>
<div><i style="font-size:24px;">...</i></div>
</div>
<div class="post-video">
<video controls  id="post-img">
<source src="https://player.vimeo.com/external/122786633.mobile.mp4?s=5c4319084a74c2ccae08b3e3a68136c5d291fdd8&profile_id=116&oauth2_token_id=57447761" type="video/mp4">
</video>
</div>
<div class="reaction">
<div><i class='far fa-heart' style='font-size:24px' onclick="toggleLike(this)"></i></div>
<div><i class='far fa-comment' style='font-size:24px'></i></div>
<div><i class='far fa-paper-plane' style='font-size:24px'></i></div>
<span style="display:inline-block;margin-left:50%;"></span><div><i class="fa fa-bookmark-o" style="font-size:24px;"></i></div>
</div>
<div class="caption">
<img src="https://i.pinimg.com/736x/d1/f9/72/d1f97241ddf520437e7b0bc1d3cf82ae.jpg" id="user-caption-img"><h>Lorenzo_di_medici012</h> <p>
che fine settimana! 😎la banda e io ci siamo divertiti molto. Facciamolo di nuovo.😁<br>
<a href="#">#thegang</a> <a href="#">#ragazzi</a> <a href="#">#tempifelici</a> <a href="#">#roma</a></p>
</div>

<div class="user">
<div><img src="https://i.pinimg.com/236x/6b/ce/df/6bcedf31da3829ea1d92d596f43901fa.jpg" id="story-pic"></div>
<div><h>Ella_bella</h></div>
<div><i style="font-size:24px;">...</i></div>
</div>
<div class="post">
<img src="https://media2.giphy.com/media/KDtSUuoNCReM7eTWHy/giphy.webp" id="post-img">
</div>
<div class="reaction">
<div><i class='far fa-heart' style='font-size:24px' onclick="toggleLike(this)"></i></div>
<div><i class='far fa-comment' style='font-size:24px'></i></div>
<div><i class='far fa-paper-plane' style='font-size:24px'></i></div>
<span style="display:inline-block;margin-left:50%;"></span><div><i class="fa fa-bookmark-o" style="font-size:24px;"></i></div>
</div>
<div class="caption">
<img src="https://i.pinimg.com/236x/6b/ce/df/6bcedf31da3829ea1d92d596f43901fa.jpg" id="user-caption-img"><h>Ella_bella</h><p>Hey guys, here's a motivational quote for ya'll:<br>
  <q>Unity is strength. . . when there is teamwork and collaboration, wonderful things can be achieved.     
</q>
<br>
<a href="#">#togetherwearestrong</a> <a href="#">#humanity</a> <a href="#">#unity</a> <a href="#">#quarantine</a></p>
</div>

</article>
* {
 box-sizing: border-box;
}
a {
 text-decoration: none;
 color: blue;
}
body {
 padding: 0;
 margin: 0;
 font-family: 'Open Sans', sans-serif;
 background-color: #f1f1f1;
}
h {
 font-size: 1em;
 font-weight: 600;
}
p {
 font-size: 0.9em;
 font-weight: 500;
}
.dummy {
 position: relative;
 height: 100vh;
 width: 100vw;
 margin: 0 auto;
 max-width: 85%;
}
.menu  {
 width: 50%;
 position: relative;
 margin: 0 auto;
 height: 60px;
 padding: 10px;
}
.menu>div {
 padding: 10px;
 width: 45px;
 display: inline-block;
}
.menu>div:nth-child(3){
 float: right;
}
.story {
  height: 15%; 
  width: 50%;
 margin: 0 auto;
 display: flex;
 justify-content: flex-start;  
 margin-bottom: 0;
 overflow-x: scroll;
 overflow-y:hidden;
 -webkit-overflow-scrolling: touch;
 -ms-overflow-scrolling: touch;

}
.story>div {
margin-bottom:0;
 text-align: center;
 font-size: 0.7em;
}

#story-pic {
 height: 70px;
 width: 70px;
 border-radius: 50%;
 margin-right: 15px;
 margin-left: 15px;
 margin-top: 15px;
}

article {
 position: relative;
 max-width: 80%;
 margin: 0 auto;
 margin-top: 40px;
}
.user {
 display: inline-block
 height: 100px;
 max-width: 50%;
 margin: 0 auto;
 margin-bottom: 20px;
}
.user>div {
 height: inherit;
 width: auto;
 display: inline-block;
}
.user>div:nth-child(2) {
 padding-top: 35px;
 width: 150px;
}
.user>div:nth-child(3) {
 float: right;
 padding-top: 20px;
 padding-right: 20px;
}
.post {
 box-shadow:  31px 31px 69px #535353, 
             -31px -31px 69px #adadad;
 max-width: 40%;
 margin: 0 auto;
 height: 60vh;
 border-radius: 10px;
}
.post-multiple {
 box-shadow:  31px 31px 69px #535353, 
             -31px -31px 69px #adadad;
 max-width: 40%;
 margin: 0 auto;
 height: 60vh;
 border-radius: 10px;
 display: flex;
 flex-direction: row;
 overflow-x: scroll;
 overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
 -ms-overflow-scrolling: touch;
 justify-content: flex-start;
}
.post-multiple>div {
 margin-right: 5px;
 width: 600px;
 height: 58vh;
}
#post-multiple-img {
 height: 100%;
 width: 420px;
 margin-right: 15px;
}
#post-img {
 height: 100%;
 width: 100%;
 border-radius: 10px;
}
#post-like {
 height: 50%;
 width: 50%;
 background-color: red;
 margin: o auto;
 display: flex;
  align-items: center;
 justify-content: center; 
}

.post-video {
 box-shadow:  31px 31px 69px #535353, 
             -31px -31px 69px #adadad;
 max-width: 40%;
 margin: 0 auto;
 height: 40vh;
 border-radius: 10px;
}
.reaction {
 max-width: 40%;
 height: 55px;
 padding: 10px;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 margin: 0 auto;
}
.reaction>div {
 padding: 10px;
}
.reaction>div:nth-child(4) {
 float: right;
}
.caption {
 max-width: 40%;
 padding: 10px;
 margin: 0 auto;
}
#user-caption-img {
 height: 40px;
 width:40px;
 border-radius: 50%;
 margin-right: 5px;
}
@media  (max-width: 768px) { 
.menu {
 min-width: 100%;
}
.story {
 min-width: 100%;
}
#story-pic {
 margin-left: 10px;
 margin-right: 10px;
}
.user {
 min-width: 100%;
}
.post {
 min-width: 100%;
 height: 50vh;
}
.post-multiple {
 min-width: 100%;
}
.post-multiple>div {
 width: 500px;
}
.reaction {
 min-width: 100%;
}
.caption { 
 min-width: 100%;
}
.post-video {
 height: 30vh;
 min-width: 100%;
}
/*My version of Instagram.Looks best on mobiles

Icons by fontawesome*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.