Instagram Clone

* { margin: 0 padding: 0 box-sizing: border-box}body { font-family: -apple-system_, system_-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif background: #fafafa}.navbar { position: fixed a-index 100000 display: flex align-items: center justify-content: center background: rgb(255, 255, 255) width: 100% border: 1px solid rgb(218, 217, 217)}.navbar .container { /* background-color: #555 */ padding: 15px 0 width: 75% display: flex align-items: center justify-content: space-between /* margin: 0 auto */}.container .logo { display: inline-block cursor: pointer}.searchbar { width: -10% text-align: end}.searchbar input { background-color: #fafafa padding: 5px text-indent: 21px outline: none border: 1px solid rgb(218, 217, 217) border-radius: 2px color: rgb(77, 77, 77)}.searchbar img { position: absolute margin-left: -10.5rem margin-top: 0.25rem}.searchbar input::placeholder { font-weight: lighter color: rgb(172, 172, 172)}.nav-links { font-weight: lighter color: rgb(172, 172, 172) /* background: #333 */}.nav-group .nav-item { list-style-type: none margin: 0 8px}.nav-group .nav-item a { font-size: 22px display: block color: black}.nav-group { display: flex align-items: center justify-content: center}.action .profile { position: relative width: 25px height: 25px border-radius: 50% overflow: hidden cursor: pointer display: flex align-items: center justify-content: center}.action .profile img { width: 100% height: 100% object-fit: cover}main { width: 100% display: flex align-items: center justify-content: center}main .container { position: relative margin-top: 60px width: 75% display: flex align-items: flex-start justify-content: space-between /* background: #ddd */}.col-9 { width: 65% margin-top: 30px}.statuses { margin-bottom: 30px width: 100% background-color: #fff display: flex align-items: center justify-content: start padding: 20px 0 border-radius: 2px border: 1px solid rgb(218, 217, 217) overflow: auto}.statuses .status { display: inline-block border-radius: 50% overflow: auto width: 70px height: 70px min-width: 70px min-height: 70px background: linear-gradient(to right, red, orange) padding: 2px margin-left: 15px cursor: pointer}.statuses .status .image { position: relative width: 100% height: 100% border-radius: 50% overflow: hidden cursor: pointer display: flex align-items: center justify-content: center border: 2px solid white}.statuses .status img { width: 100% height: 100% object-fit: cover}.col-3 { width: 33% position: -webkit-sticky position: sticky top: 90px}.col-3 h4 { color: rgb(100, 100, 100)}.col-3 .card { margin-bottom: 20px position: relative width: 100% /* min-height: 400px */ display: inline-block}.col-3 .card .top { padding: 10px 0px display: flex justify-content: space-between align-items: center}.col-3 .card .top a { color: #1d92ff}.col-3 .card .bottom { padding: 10px 20px}.col-3 .card .top .userDetails { width: 100% display: flex align-items: center}.col-3 .card .top .userDetails h3 { font-size: 16px color: #4d4d4f font-weight: 500 line-height: 1em}.col-3 .card .top .userDetails h3 span { font-size: 0.75em}.col-3 .card .top .userDetails h3 span { font-size: 0.75em}.col-9 .card { margin-bottom: 20px position: relative width: 100% /* min-height: 400px */ display: inline-block border: 1px solid rgba(7, 7, 7, 0.24)}.col-9 .card .top { padding: 10px 20px display: flex justify-content: space-between align-items: center}.col-9 .card .bottom { padding: 10px 20px}.col-9 .card .top .userDetails { width: 100% display: flex align-items: center}.profilepic { display: inline-block cursor: pointer}.profilepic .profile_img { display: flex align-items: center justify-content: center border-radius: 50% overflow: hidden width: 30px height: 30px background: linear-gradient(to right, red, orange) padding: 2px margin-right: 8px cursor: pointer}.profilepic .profile_img .image { position: relative width: 100% height: 100% border-radius: 50% overflow: hidden cursor: pointer display: flex align-items: center justify-content: center border: 2px solid white}.profilepic .profile_img img { width: 100% height: 100% object-fit: cover}.cover { position: absolute top: 0 left: 0 width: 100% height: 100% object-fit: cover}.col-9 .card .top .userDetails h3 { /* width: 100% */ font-size: 16px color: #4d4d4f font-weight: 500 line-height: 1em}.col-9 .card .top .userDetails h3 span { font-size: 0.75em}.col-9 .card .top .userDetails h3 span { font-size: 0.75em}.dot { transform: scale(0.6) cursor: pointer}.imgBx { position: relative width: 100% min-height: 600px margin: 10px 0 15px}.actionBtns { display: flex justify-content: space-between align-items: center}.actionBtns svg { cursor: pointer}.actionBtns .left svg { margin-right: 8px}.likes { font-weight: 500 margin-top: 5px font-size: 14px color: #4d4d4f}.message { font-weight: 400 margin-top: 5px font-size: 14px color: #777 line-height: 1.5em}.message b { color: #262626}.message span { cursor: pointer color: #1d92ff}.comments { margin-top: 10px font-weight: 400 color: #999}.addComments { display: flex align-items: center margin-top: 20px border-top: 1px solid #ddd padding: 10px 0}.addComments a { color: #1d92ffcb font-weight: 500}.addComments .reaction { position: relative font-size: 1.3rem margin-right: 10px color: rgb(88, 88, 88)}input.text { width: 100% border: none outline: none font-weight: 400 font-size: 14px color: #262626 background: none}input.text::placeholder { color: #777}.postTime { margin-top: 8px font-weight: lighter color: rgb(163, 163, 163) font-size: 12px text-transform: uppercase}a { text-decoration: none}.hidden { }@media screen and (max-width: 1000px) { .col-9 { width: 100% background: #fafafa } .col-3 { }}@media screen and (max-width: 600px) { .container { width: 100% !important } .navbar .container { padding: 15px 10px !important } .col-9 { margin-top: 4px min-width: 100% } .statuses { margin-bottom: 0px } .col-9 .card { margin-bottom: 0px width: 100% border: none } .imgBx { position: relative width: 100% min-height: 400px margin: 10px 0 15px } .searchbar { }}.footer .footer-section { margin-left: 0.5rem color: #999999 font-size: 14px font-family: sans-serif}.footer a:hover { color: #ff0000} * { margin: 0; padding: 0; box-sizing: border-box;}body { font-family: -apple-system_, system_-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background: #fafafa;}.navbar { position: fixed; a-index 100000; display: flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); width: 100%; border: 1px solid rgb(218, 217, 217);}.navbar .container { /* background-color: #555; */ padding: 15px 0; width: 75%; display: flex; align-items: center; justify-content: space-between; /* margin: 0 auto; */}.container .logo { display: inline-block; cursor: pointer;}.searchbar { width: -10%; text-align: end;}.searchbar input { background-color: #fafafa; padding: 5px; text-indent: 21px; outline: none; border: 1px solid rgb(218, 217, 217); border-radius: 2px; color: rgb(77, 77, 77);}.searchbar img { position: absolute; margin-left: -10.5rem; margin-top: 0.25rem;}.searchbar input::placeholder { font-weight: lighter; color: rgb(172, 172, 172);}.nav-links { font-weight: lighter; color: rgb(172, 172, 172); /* background: #333 ; */}.nav-group .nav-item { list-style-type: none; margin: 0 8px;}.nav-group .nav-item a { font-size: 22px; display: block; color: black;}.nav-group { display: flex; align-items: center; justify-content: center;}.action .profile { position: relative; width: 25px; height: 25px; border-radius: 50%; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center;}.action .profile img { width: 100%; height: 100%; object-fit: cover;}main { width: 100%; display: flex; align-items: center; justify-content: center;}main .container { position: relative; margin-top: 60px; width: 75%; display: flex; align-items: flex-start; justify-content: space-between; /* background: #ddd; */}.col-9 { width: 65%; margin-top: 30px;}.statuses { margin-bottom: 30px; width: 100%; background-color: #fff; display: flex; align-items: center; justify-content: start; padding: 20px 0; border-radius: 2px; border: 1px solid rgb(218, 217, 217); overflow: auto;}.statuses .status { display: inline-block; border-radius: 50%; overflow: auto; width: 70px; height: 70px; min-width: 70px; min-height: 70px; background: linear-gradient(to right, red, orange); padding: 2px; margin-left: 15px; cursor: pointer;}.statuses .status .image { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 2px solid white;}.statuses .status img { width: 100%; height: 100%; object-fit: cover;}.col-3 { width: 33%; position: -webkit-sticky; position: sticky; top: 90px;}.col-3 h4 { color: rgb(100, 100, 100);}.col-3 .card { margin-bottom: 20px; position: relative; width: 100%; /* min-height: 400px; */ display: inline-block;}.col-3 .card .top { padding: 10px 0px; display: flex; justify-content: space-between; align-items: center;}.col-3 .card .top a { color: #1d92ff;}.col-3 .card .bottom { padding: 10px 20px;}.col-3 .card .top .userDetails { width: 100%; display: flex; align-items: center;}.col-3 .card .top .userDetails h3 { font-size: 16px; color: #4d4d4f; font-weight: 500; line-height: 1em;}.col-3 .card .top .userDetails h3 span { font-size: 0.75em;}.col-3 .card .top .userDetails h3 span { font-size: 0.75em;}.col-9 .card { margin-bottom: 20px; position: relative; width: 100%; /* min-height: 400px; */ display: inline-block; border: 1px solid rgba(7, 7, 7, 0.24);}.col-9 .card .top { padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;}.col-9 .card .bottom { padding: 10px 20px;}.col-9 .card .top .userDetails { width: 100%; display: flex; align-items: center;}.profilepic { display: inline-block; cursor: pointer;}.profilepic .profile_img { display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; width: 30px; height: 30px; background: linear-gradient(to right, red, orange); padding: 2px; margin-right: 8px; cursor: pointer;}.profilepic .profile_img .image { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 2px solid white;}.profilepic .profile_img img { width: 100%; height: 100%; object-fit: cover;}.cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}.col-9 .card .top .userDetails h3 { /* width: 100%; */ font-size: 16px; color: #4d4d4f; font-weight: 500; line-height: 1em;}.col-9 .card .top .userDetails h3 span { font-size: 0.75em;}.col-9 .card .top .userDetails h3 span { font-size: 0.75em;}.dot { transform: scale(0.6); cursor: pointer;}.imgBx { position: relative; width: 100%; min-height: 600px; margin: 10px 0 15px;}.actionBtns { display: flex; justify-content: space-between; align-items: center;}.actionBtns svg { cursor: pointer;}.actionBtns .left svg { margin-right: 8px;}.likes { font-weight: 500; margin-top: 5px; font-size: 14px; color: #4d4d4f;}.message { font-weight: 400; margin-top: 5px; font-size: 14px; color: #777; line-height: 1.5em;}.message b { color: #262626;}.message span { cursor: pointer; color: #1d92ff;}.comments { margin-top: 10px; font-weight: 400; color: #999;}.addComments { display: flex; align-items: center; margin-top: 20px; border-top: 1px solid #ddd; padding: 10px 0;}.addComments a { color: #1d92ffcb; font-weight: 500;}.addComments .reaction { position: relative; font-size: 1.3rem; margin-right: 10px; color: rgb(88, 88, 88);}input.text { width: 100%; border: none; outline: none; font-weight: 400; font-size: 14px; color: #262626; background: none;}input.text::placeholder { color: #777;}.postTime { margin-top: 8px; font-weight: lighter; color: rgb(163, 163, 163); font-size: 12px; text-transform: uppercase;}a { text-decoration: none;}.hidden { ;}@media screen and (max-width: 1000px) { .col-9 { width: 100%; background: #fafafa; } .col-3 { ; }}@media screen and (max-width: 600px) { .container { width: 100% !important; } .navbar .container { padding: 15px 10px !important; } .col-9 { margin-top: 4px; min-width: 100%; } .statuses { margin-bottom: 0px; } .col-9 .card { margin-bottom: 0px; width: 100%; border: none; } .imgBx { position: relative; width: 100%; min-height: 400px; margin: 10px 0 15px; } .searchbar { ; }}.footer .footer-section { margin-left: 0.5rem; color: #999999; font-size: 14px; font-family: sans-serif;}.footer a:hover { color: #ff0000;} Instagram Clone