https://twitter.com/home benzetmeye çalıştığım site:
Benim sitem:
Amacım: Arkadaşlar şu anki amacım Twitter'da resimde attığım bölümü yapmak. Editlerinizi benim attığım kodu düzenleyip atarsanız sevinirim.
Benim sitem:
Amacım: Arkadaşlar şu anki amacım Twitter'da resimde attığım bölümü yapmak. Editlerinizi benim attığım kodu düzenleyip atarsanız sevinirim.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home / Twitter</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="disdiv">
<div class="leftmenu">
<div class="div1">
<i class="fa-brands fa-twitter fa-xl"></i>
</div>
<div class="div2">
<br><br>
<div><img src="png/home.png" class="menu">Home</div>
<div><img src="png/search.png" class="menu">Explore</div>
<div><img src="png/notifications.png" class="menu">Notifications</div>
<div><img src="png/messages.png" class="menu">Messages</div>
<div><img src="png/lists.png" class="menu">Lists</div>
<div><img src="png/bookmarks.png" class="menu">Bookmarks</div>
<div><img src="png/communuties.png" class="menu">Communuties</div>
<div><img src="png/verified.png" class="menu">Verified</div>
<div><img src="png/profile.png" class="menu">Profile</div>
<div><img src="png/more.png" class="menu">More</div>
<br>
<button
style="width: 230px; height: 50px; border-radius: 30px ; background: #2587be; color: white;">Tweet</button>
<br>
<br><br>
</div>
<div class="div3">
<img src="png/pp.jpg" class="pp" style="border: 1px solid black;">
<strong> Admin</strong><br>
@Administrator
</div>
</div>
<div class="midmenu"></div>
<div class="home1"><strong></strong></div>
<div class="row">
</div>
</div>
<div class="rightmenu">
<div class="search-main">
<input type="text" class="tbox-search" placeholder=" Search Twitter">
<a class="btn-search">
<i class="fa fa-search"></i>
</a></div>
<br><div class="menuler">
<div class="divright1">
<span><strong>Trends For You</strong></span>
<br><p class="trend1">Trending in Turkey</p>
<p class="trend2"><strong>#yarın</strong> </p>
<p class="trend1">68945 Tweet</p>
<br><p class="trend1">Trending in Turkey</p>
<p class="trend2"><strong>#ekonomi</strong></p>
<p class="trend1">68945 Tweet</p>
<br><p class="trend1">Trending in Turkey</p>
<p class="trend2"><strong>#siyaset</strong></p>
<p class="trend1">68945 Tweet</p>
<br><p class="trend1">Trending in Turkey</p>
<p class="trend2"><strong>#dün</strong></p>
<p class="trend1">68945 Tweet</p>
</div>
</div>
</div>
</body>
</html>
CSS:
.fa-twitter{
color: #3584fc
}
body{
margin-left: 140px;
margin-right: 140px;
font-size: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.menu{
width: 24px;
margin-right: 24px;
margin-top: 18px;
}
.disdiv{
width: 100%;
min-height: 500px;
display: flow-root;
}
.leftmenu{
width: 25%;
float: left;
height: 1000px;
}
.midmenu{
margin-left: 200px;
width: 1%;
height: 10px;
}
.rightmenu{
width: 36%;
height: 100px;
float: right;
}
.div1{
float: left;
}
.pp{
height: 40px;
width: 40px;
border-radius: 100%;
float: left;
}
strong{
margin-left: 10px;
}
.tbox-search{
width: 350px;
height: 40px;
border-radius: 25px;
float: right;
}
.fa-search{
margin-left: 150px;
margin-top: 15px;
}
.menuler{
float: right;
}
.divright1{
float: none;
background: #faf8f7;
border-radius: 20px ;
height: 600px;
width: 350px;
}
.trend1{
font-size: 12px;
color: #696868;
}
.trend2{
font-size: 16px;
}
.home1{
margin-top: -30px;
margin-left: -140px;
float: left;
}
.following{
width: 50%;
}
Son düzenleyen: Moderatör:
