Twitter gönderi oluşturma ve gönderi bölümü nasıl yapılır?

Fleure · 18 Temmuz 2023

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.

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%;
}

Twitter gönderi oluşturma ve gönderi bölümü nasıl yapılır?

Fleure

Decapat