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
FAQs
How to make twitter login page using HTML and CSS? ›
- <! DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Twitter Login Form</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta name="keywords" content="Form,flex, ,Twitter form ,sachindusahan,html,css" />
- <link rel="stylesheet" href="./style.css"/>
Twitter has officially posted parts of its source code in two main repositories on the code-sharing platform GitHub.
How to create HTML and CSS login form? ›- /* Bordered form */ form { ...
- /* Full-width inputs */ input[type=text], input[type=password] { ...
- /* Set a style for all buttons */ ...
- /* Add a hover effect for buttons */ ...
- /* Extra style for the cancel button (red) */ ...
- /* Center the avatar image inside this container */ ...
- /* Avatar image */ ...
- /* Add padding to containers */
While creating a fake account on social media in itself usually isn't a crime, what the person does with the account might be. Most fake accounts are created for parody and satire. That is not illegal in U.S. law.
What is a Twitter clone? ›This will be called “Twitter Clone” or Twic for short. Twic will allow interested. persons to subscribe to download the application to their PC and/or mobile device and subscribe to the service. The service allows a user to post short updates and subscribe to updates by specific persons.
Is clone app illegal? ›App cloning is legal as long as it does not breach existing business intellectual property (IP) rights, such as copyright, patents, or trademarks. However, the term “cloning” can be misleading, as it does not mean copying the entire app but rather taking inspiration from it to create something new.
How do you clone a website step by step? ›- Step 1: Download a Duplicator Package. On your original website, install and activate the Duplicator plugin. ...
- Step 2: Upload the Cloned Files. You'll need to upload these files to their new location for the next step. ...
- Step 3: Create a Database. ...
- Step 4: Run the Duplicator Installer.
Press Ctrl + A (PC) or ⌘ Cmd + A (Mac). This highlights all of the code on the page. Press Ctrl + C (PC) or ⌘ Cmd + C (Mac). Now the selected source code is pasted to your clipboard.
Where is Twitter source code? ›On GitHub, you'll find two new repositories (main repo, ml repo) containing the source code for many parts of Twitter, including our recommendations algorithm, which controls the Tweets you see on the For You timeline.
What code does Twitter use? ›Facebook's technology stack consists of applications written in many languages, including PHP, C, C++, Erlang and others. At this point Twitter mostly runs on Scala (though with some Ruby on Rails thrown in) (cite). Facebook runs mostly PHP, but also uses some C++, Java, Python and Erlang on the back-end (cite).
Who leaked Twitter source code? ›
"GitHub operates a website to which the infringing party or parties (identified by their GitHub username as FreeSpeechEnthusiast) posted various excerpts of Twitter source code, which posting infringes copyrights held by Twitter in those materials."
How do I create a twitter login on my website? ›Go to twitter.com/signup. Click the sign up button. A Create your account pop up box will appear, and you'll be guided through our sign up experience. You'll be prompted to enter information such as your name and phone number or email address.
How do I embed a twitter account in html? ›- Enter the URL of the timeline you'd like to embed.
- Customize the design by specifying the height and theme (light or dark) to match your website.
- Copy and paste the code into the HTML of your website wherever you would like the timeline to appear.
- You're done!
We use Css basic code to style our login Page form. We style the form and then use input type email and password styling together. Then styling our social media icon using font awesome classes. Then use a media query for a responsive Login Page form.
How to make a transparent login form in html with CSS? ›Create an <div> element with the class named "login-container". Inside that, create another two <div> elements with the class named "textbox" for the username and password fields. Then, add an <input> element with the class "btn" for the login button. Then to make the login form transparent, we styled the ".