Create Twitter Clone Client In HTML & CSS (Source Code) (2023)

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.

Code by	marceloag
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	Yes
Responsive	No

Likewise, we are going to create this Twitter client project with html and css.

So now let’s get started with the html code.

Table of Contents

Create Twitter Clone Client In HTML & CSS (Source Code) (1)

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.

(Video) How To Build A Twitter Clone - React Next JS - Appwrite Crash Course

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

Portfolio Website using HTML and CSS (Source Code)

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 , so it’s time to preview our project in the output section given below.

Final output:

Create Twitter Clone Client In HTML & CSS (Source Code) (2)

Now we have successfully created our Twitter client 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.

10+ HTML CSS Projects For Beginners (Source Code)

(Video) Build and Deploy: TWITTER clone with React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023)

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

Which code editor do you use for this Twitter Clone Client Ui coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

(Video) Twitter Clone built with NextJS TailwindCss Firebase and Google Cloud Client

is this project responsive or not?

No! this is Not a responsive project

Do you use any external links to create this project?

Yes!

(Video) Full Stack Next.js & Supabase Twitter Clone – Full Course

FAQs

How to make twitter login page using HTML and CSS? ›

HTML

<! 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"/>

More items...

See Details ›

Is Twitter source code open source? ›

Twitter is what's happening and what people are talking about right now. It's where news breaks and communities converge. And it's all powered by open source, made by a team of amazing Tweeps.

Read On ›

How to create HTML and CSS login form? ›

Example

/* 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 */

More items...

Get More Info Here ›

How do you clone a website step by step? ›

2. Install a Cloning Plugin

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.

Explore More ›

Is it legal to copy CSS from a website? ›

Generally speaking, copying the HTML or CSS of another site is copyright infringement.

Know More ›

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.

Get More Info ›

Is it illegal to make fake Twitter accounts? ›

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.

Read On ›

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.

Get More Info Here ›

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? ›

Go to https://publish.twitter.com/.

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!

Learn More ›

How to create responsive login page using CSS? ›

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.

View Details ›

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 ".