Hey, guys welcome to this blog, In today's blog, we are going to see how to create a Twitter Clone UI using Html and Css. Before that, we could see what is the Twitter client.
The Twitter client is a great management tool that is represented as one column display... That contains powerful and impressive tweets which we can read, send, mark as favorites, and manage the tweets that came.
Likewise, we are going to create this Twitter client project with html and css.
So now let's get started with the html code.
Html Code For Twitter Clone:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Client</title>
<link href='https://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<span class="first">
@marceloag
<span class="icon-edit new"></span>
</span>
<ul class="timeline">
<li>
<div class="avatar">
<img src="http://www.croop.cl/UI/twitter/images/doug.jpg">
<div class="hover">
<div class="icon-twitter"></div>
</div>
</div>
<div class="bubble-container">
<div class="bubble">
<div class="retweet">
<div class="icon-retweet"></div>
</div>
<h3>@russel</h3> retweeted <h3>@doug</h3><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, iusto, maxime, ullam autem a voluptate rem quos repudiandae.
<div class="over-bubble">
<div class="icon-mail-reply action"></div>
<div class="icon-retweet action"></div>
<div class="icon-star"></div>
</div>
</div>
<div class="arrow"></div>
</div>
</li>
<li>
<div class="avatar">
<img src="http://www.croop.cl/UI/twitter/images/carl.jpg">
<div class="hover">
<div class="icon-twitter"></div>
</div>
</div>
<div class="bubble-container">
<div class="bubble">
<h3>@carlf</h3><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, iusto, maxime, ullam autem a voluptate rem quos repudiandae.
<div class="over-bubble">
<div class="icon-mail-reply action"></div>
<div class="icon-retweet action"></div>
<div class="icon-star"></div>
</div>
</div>
<div class="arrow"></div>
</div>
</li>
<li>
<div class="avatar">
<img src="http://www.croop.cl/UI/twitter/images/russel.jpg">
<div class="hover">
<div class="icon-twitter"></div>
</div>
</div>
<div class="bubble-container">
<div class="bubble">
<h3>@russel</h3><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, iusto, maxime, ullam autem a voluptate rem quos repudiandae.
<div class="over-bubble">
<div class="icon-mail-reply action"></div>
<div class="icon-retweet action"></div>
<div class="icon-star"></div>
</div>
</div>
<div class="arrow"></div>
</div>
</li>
<li>
<div class="avatar">
<img src="http://www.croop.cl/UI/twitter/images/carl.jpg">
<div class="hover">
<div class="icon-twitter"></div>
</div>
</div>
<div class="bubble-container">
<div class="bubble">
<h3>@carlf</h3><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, iusto, maxime, ullam autem a voluptate rem quos repudiandae.
<div class="over-bubble">
<div class="icon-mail-reply action"></div>
<div class="icon-retweet action"></div>
<div class="icon-star"></div>
</div>
</div>
<div class="arrow"></div>
</div>
</li>
</ul>
</div>
</body>
</html>
Now we have added the html code successfully. In his code, we first included the link tag for css code and the title tag for the project name. Then inside the body tag, we started adding div elements inside by giving them separate names for each element. Now we add the icons for purposes like send, favorite, share, etc... Using the img tags.
With heading tags like h1, and h2 we have given the title wherever it is necessary and several places contained by div elements are specified by separate names with every element. Lastly, we are giving the images with some values and alt names for specifying it and making it adjusts with screen sizes.
We have now completed our html code, so let's begin with css code for styling.
CSS Code For Twitter Clone:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: 'Quicksand';
color: #7f8c8d;
font-size: 14px;
background-color: #ededed; }
.bubble {
width: 100%;
padding: .5em 1em;
line-height: 1.4em;
padding: 20px;
background-color: #ecf0f1;
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
text-align: left;
display: inline-block; }
.bubble:hover > .over-bubble {
opacity: 1; }
.bubble-container {
width: 75%;
display: block;
position: relative;
padding-left: 20px;
vertical-align: top;
display: inline-block; }
.arrow {
content: '';
display: block;
position: absolute;
left: 12px;
bottom: 25%;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #ecf0f1; }
.timeline {
width: 560px;
display: block;
margin: auto;
background-color: #dde1e2;
padding-bottom: 2em;
-webkit-box-shadow: #bdc3c7 0 5px 5px;
-moz-box-shadow: #bdc3c7 0 5px 5px;
box-shadow: #bdc3c7 0 5px 5px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
margin-bottom: 2em; }
.timeline li {
padding: 1em 0; }
.timeline li:nth-child(even) {
background-color: #d3d7d8; }
.avatar {
width: 18%;
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
margin-left: 2%; }
.avatar img {
width: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #ecf0f1;
position: relative; }
.avatar:hover > .hover {
cursor: pointer;
opacity: 1; }
.hover {
position: absolute;
width: 100%;
height: 100%;
background-color: #3498db;
top: 0;
font-size: 1.8em;
border: 5px solid #5cc0ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
text-align: center;
color: white;
padding-top: 24%;
opacity: 0;
font-family: 'FontAwesome';
font-weight: 300;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease; }
.first {
width: 560px;
display: block;
margin: auto;
background-color: #3498db;
text-shadow: #2084c7 1px 1px 0;
padding: 1em 0 !important;
color: white;
text-align: center;
margin-top: 1em;
font-family: "Lato";
font-size: 1.6em;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
position: relative; }
.icon-twitter {
font-size: 1.5em; }
.new {
position: absolute;
right: 5%; }
.over-bubble {
line-height: 1.4em;
padding-top: 10%;
background-color: rgba(236, 240, 241, 0.8);
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
text-align: center;
display: inline-block;
position: absolute !important;
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
z-index: 999;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
font-size: 2.8em;
text-shadow: white 1px 1px 0; }
.action {
margin-right: .3em;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in; }
.icon-star {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease; }
.icon-star:hover {
cursor: pointer;
color: #f39c12; }
.icon-retweet {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease; }
.icon-retweet:hover {
cursor: pointer;
color: #16a085; }
.icon-mail-reply {
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease; }
.icon-mail-reply:hover {
cursor: pointer;
color: #3498db; }
h3 {
font-size: 1.2em;
font-weight: bold;
font-family: 'Lato';
display: inline-block;
margin-bottom: .2em;
color: #95a5a6; }
.retweet {
position: absolute;
opacity: 1;
top: 0;
right: 1em;
display: block;
background-color: #16a085;
padding: 4px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px; }
.retweet .icon-retweet {
color: white;
margin: auto;
width: 100%;
display: block;
font-size: 1.2em; }
Now we have added our css code successfully. In this code we first making he margin and padding values from default to zero and applying sizes to border-box with he universal mark(*). Now in body section we are adding the font family , background , color , font size for all the elements presented here to match the body properties.
Here moreover the animation properties takes place in all the elements throughout the css to make an interactive animations and exciting looks. Some common animation properties wee included below.
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
Transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
So then we started styling each and every elements as per interactions and responsiveness needed with css properties in the code mentioned above.
Now we have successfully completed our css code.
Now we have successfully created our Twitter clone page ui project with the help of html and css. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
So if you find out this blog helpful? , then make sure to search code with random on google for front-end projects with source codes and make sure to follow the codewithrandom Instagram page.
Refer code - marceloag
Written by - ragunathan s
Top comments (0)