<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- Google Material Icons -->
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
<title>ilstagram</title>
</head>
<style>
.main_body {
display: flex;
justify-content: center;
padding-top: 50px;
background-color: #FAFAFA;
}
.left_body {
{#background-color: skyblue;#} margin-right: 100px;
width: 500px;
height: 2000px;
display: flex;
flex-direction: column;
}
.right_body {
{#background-color: yellow;#} padding-top: 20px;
width: 300px;
height: 1000px;
left: 72%;
position: fixed
}
.feed_box {
background-color: white;
width: 480px;
margin: 10px;
min-height: auto;
padding-bottom: 10px;
}
.feed_img {
width: 100%;
object-fit: contain;
}
.feed_content {
padding: 0px 10px;
}
.feed_like {
padding: 0px 10px;
}
.feed_reply {
padding: 0px 10px;
display: flex;
flex-direction: column;
}
.feed_txt {
font-size: 14px;
}
.feed_icon {
padding: 5px 5px 0px 5px;
display: flex;
justify-content: space-between;
}
span {
padding-right: 5px;
}
.feed_name {
padding: 10px;
display: flex;
align-items: center;
}
.feed_name_txt {
font-size: 14px;
padding: 0px 10px;
font-weight: bold;
}
.profile_box {
width: 40px;
height: 40px;
border-radius: 70%;
overflow: hidden;
}
.profile_img {
width: 100%;
height: 100%;
object-fit: cover;
}
.name_content {
display: flex;
flex-direction: column;
}
.name_content_txt {
font-size: 12px;
padding: 0px 10px;
font-weight: bold;
color: lightgray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 190px;
}
.big_profile_box {
width: 60px;
height: 60px;
border-radius: 70%;
overflow: hidden;
}
.link_txt {
font-size: 14px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
.recommend_box {
display: flex;
justify-content: space-between;
padding: 5px;
font-size: 14px;
font-weight: bold;
align-items: center;
}
.comment_box {
margin: 40px 0 0 5px;
font-size: 12px;
font-weight: bold;
color: lightgray;
display: flex;
flex-direction: column;
}
</style>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom"
style="width: 100%;height: 50px;position: fixed;">
<div class="container">
<img style="height: 30px; object-fit: contain"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
<input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
<div>
<span class="material-icons-outlined">home</span>
<span class="material-icons-outlined">send</span>
<span class="material-icons-outlined">add_box</span>
<span class="material-icons-outlined">travel_explore</span>
<span class="material-icons-outlined">favorite_border</span>
<span class="material-icons-outlined">account_circle</span>
</div>
</div>
</nav>
<!-- Body -->
<div class="main_body">
<div class="left_body">
<div class="border feed_box">
<div class="feed_name">
<div class="profile_box">
<img class="profile_img"
src="https://img1.yna.co.kr/photo/yna/YH/2019/07/15/PYH2019071512780001300_P4.jpg">
</div>
<span class="feed_name_txt">ilstagram</span>
</div>
<img class="feed_img"
src="https://img7.yna.co.kr/etc/inner/KR/2022/09/14/AKR20220914110000005_03_i_P4.jpg">
<div class="feed_icon">
<div>
<span class="material-icons-outlined">favorite_border</span>
<span class="material-icons-outlined">mode_comment</span>
<span class="material-icons-outlined">send</span>
</div>
<div>
<span class="material-icons-outlined">turned_in_not</span>
</div>
</div>
<div class="feed_like">
<p class="feed_txt"><b>좋아요 1004개</b></p>
</div>
<div class="feed_content">
<p class="feed_txt"><b> ilstagram </b> 잘생긴 대랑이 </p>
</div>
<div class="feed_reply">
<span class="feed_txt"> <b> gracegoh </b> 혜바라기는 나만 좋아혜 </span>
<span class="feed_txt"> <b> psalms1_3 </b> He is like a tree near water; whatever he does prospers. </span>
</div>
</div>
<div class="border feed_box">
<div class="feed_name">
<div class="profile_box">
<img class="profile_img"
src="https://img1.yna.co.kr/photo/yna/YH/2019/07/15/PYH2019071512780001300_P4.jpg">
</div>
<span class="feed_name_txt">ilstagram</span>
</div>
<img class="feed_img"
src="https://img5.yna.co.kr/etc/inner/KR/2020/09/21/AKR20200921106600064_01_i_P4.jpg">
<div class="feed_icon">
<div>
<span class="material-icons-outlined">favorite_border</span>
<span class="material-icons-outlined">mode_comment</span>
<span class="material-icons-outlined">send</span>
</div>
<div>
<span class="material-icons-outlined">turned_in_not</span>
</div>
</div>
<div class="feed_like">
<p class="feed_txt"><b>좋아요 10개</b></p>
</div>
<div class="feed_content">
<p class="feed_txt"><b>ilstagram</b> 'BTS 뮤비 촬영' 제천비행장</p>
</div>
<div class="feed_reply">
<span class="feed_txt"> <b> hye1004 </b> 혜바라기는 나만 좋아혜?</span>
<span class="feed_txt"> <b> pig_tiger </b> 하튜!
</div>
</div>
</div>
<div class="right_body">
<div class="feed_name" style="justify-content: space-between">
<div style="display: flex; align-items: center; ">
<div class="big_profile_box">
<img class="profile_img"
src="https://img1.yna.co.kr/photo/yna/YH/2019/07/15/PYH2019071512780001300_P4.jpg">
</div>
<div class="name_content">
<span class="feed_name_txt">ilstagram</span>
<span class="name_content_txt">Rafael Nadal</span>
</div>
</div>
<a class="link_txt">
전환
</a>
</div>
<div class="recommend_box">
<span style="color: gray"> 회원님을 위한 추천</span>
<span style="font-size: 12px"> 모두 보기 </span>
</div>
<div>
<div class="feed_name" style="justify-content: space-between">
<div class="profile_box">
<img class="profile_img"
src="https://img8.yna.co.kr/photo/yna/YH/2018/12/05/PYH2018120505470006100_P4.jpg">
</div>
<div class="name_content">
<span class="feed_name_txt">gracegoh</span>
<span class="name_content_txt"> 회원님을 팔로우합니다 </span>
</div>
<a class="link_txt">
팔로우
</a>
</div>
<div class="feed_name" style="justify-content: space-between">
<div class="profile_box">
<img class="profile_img"
src="https://img3.yna.co.kr/photo/yna/YH/2018/12/05/PYH2018120505400006100_P4.jpg">
</div>
<div class="name_content">
<span class="feed_name_txt">orangeyoung</span>
<span class="name_content_txt"> ilstargram 신규 가입 </span>
</div>
<a class="link_txt">
팔로우
</a>
</div>
<div class="feed_name" style="justify-content: space-between">
<div class="profile_box">
<img class="profile_img"
src="https://img4.yna.co.kr/etc/inner/KR/2022/07/27/AKR20220727180500005_02_i_P4.jpg">
</div>
<div class="name_content">
<span class="feed_name_txt"> rosa3434 </span>
<span class="name_content_txt"> 회원님을 팔로우합니다 </span>
</div>
<a class="link_txt">
팔로우
</a>
</div>
<div class="feed_name" style="justify-content: space-between">
<div class="profile_box">
<img class="profile_img"
src="https://img2.yna.co.kr/photo/yna/YH/2022/07/20/PYH2022072002780006200_P4.jpg">
</div>
<div class="name_content">
<span class="feed_name_txt"> sunflower </span>
<span class="name_content_txt"> ilstagram 신규 가입 </span>
</div>
<a class="link_txt">
팔로우
</a>
</div>
<div class="feed_name" style="justify-content: space-between">
<div class="profile_box">
<img class="profile_img"
src="https://img4.yna.co.kr/photo/yna/YH/2021/12/28/PYH2021122804500001300_P4.jpg">
</div>
<div class="name_content">
<span class="feed_name_txt"> happygoh </span>
<span class="name_content_txt"> 회원님을 위한 추천 </span>
</div>
<a class="link_txt">
팔로우
</a>
</div>
</div>
<div class="comment_box">
<span> 소개·도움말·홍보 센터·API·채용 정보 </span>
<span> 개인정보처리방침·약관·위치·언어 </span>
<br>
<span> © 2022 ILSTAGRAM FROM META </span>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
</body>
</html>
Español, Inglés, Coreano y Python