Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/car.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/profile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
179 changes: 179 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Twitter Clone</title>
<link rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
</head>
<body>
<!-- sidebar starts -->
<div class="sidebar">
<i class="fab fa-twitter"></i>
<div class="sidebarOption active">
<span class="material-icons"> home </span>
<h2>Home</h2>
</div>

<div class="sidebarOption">
<span class="material-icons"> search </span>
<h2>Explore</h2>
</div>

<div class="sidebarOption">
<span class="material-icons"> notifications_none </span>
<h2>Notifications</h2>
</div>

<div class="sidebarOption">
<span class="material-icons"> mail_outline </span>
<h2>Messages</h2>
</div>

<div class="sidebarOption">
<span class="material-icons"> bookmark_border </span>
<h2>Bookmarks</h2>
</div>

<div class="sidebarOption">
<span class="material-icons"> list_alt </span>
<h2>Lists</h2>
</div>

<div class="sidebarOption">
<span class="material-icons"> perm_identity </span>
<h2>Profile</h2>
</div>

<div class="sidebarOption">
<span class="material-icons"> more_horiz </span>
<h2>More</h2>
</div>
<button class="sidebar__tweet">Tweet</button>
</div>
<!-- sidebar ends -->

<!-- feed starts -->
<div class="feed">
<div class="feed__header">
<h2>Home</h2>
</div>

<!-- tweetbox starts -->
<div class="tweetBox">
<form>
<div class="tweetbox__input">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be careful with case sensitivity. This class is tweetbox, but the others are tweetBox.

Stick with kebab-case for CSS, not camelCase

<img
src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png"
alt=""
/>
<input type="text" placeholder="What's happening?" />
</div>
<button class="tweetBox__tweetButton">Tweet</button>
</form>
</div>
<!-- tweetbox ends -->

<!-- post starts -->
<div class="post">
<div class="post__avatar">
<img
src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png"
alt=""
/>
</div>

<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>
<a href="https://twitter.com/fasc1nate">Fascinating</a>
<span class="post__headerSpecial"
><span class="material-icons post__badge"> verified </span>@fasc1nate</span
>
</h3>
</div>
<div class="post__headerDescription">
<p>The leader of the street gang the Crips, Stanley Williams lived an<br>extreme double life — during the day, he was an anti-gang youth<br>counselor, and at night he was the boss of the Crips, committing violent<br>gang crimes against a rival gang, the Bloods.</p>

<p>So during his normal life the man lived a nine to five existence, mundane,<br>a stand-up citizen who was influencing the youth positively… or, so it<br>seemed. Meanwhile, in actuality, Mr. Williams was actually recruiting<br>these young, vulnerable kids to join his gang.</p>

<p>They were then made to run drugs, pimp or be pimped out or commit<br>acts of unspeakable violence against rivals in the street. The perfect<br>cover, no doubt. But deeply, deeply cynical.</p>

<p>Williams was eventually given the death penalty. He went to jail<br>and was executed in December 2005, aged 51.</p>
</div>
</div>
<img
src="https://pbs.twimg.com/media/GI5YTRnbkAAmPjk?format=jpg&name=small"
alt=""
/>
<div class="post__footer">
<span class="material-icons"> repeat </span>
<span class="material-icons"> favorite_border </span>
<span class="material-icons"> publish </span>
</div>
</div>
</div>
<!-- post ends -->

<!-- post starts -->
<div class="post">
<div class="post__avatar">
<img
src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png"
alt=""
/>
</div>

<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>
Somanath Goudar
<span class="post__headerSpecial"
><span class="material-icons post__badge"> verified </span>@somanathg</span
>
</h3>
</div>
<div class="post__headerDescription">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<img
src="https://pbs.twimg.com/media/GDus1QhXQAAoe7a?format=jpg&name=small"
alt=""
/>
<div class="post__footer">
<span class="material-icons"> repeat </span>
<span class="material-icons"> favorite_border </span>
<span class="material-icons"> publish </span>
</div>
</div>
</div>
<!-- post ends -->
</div>
<!-- feed ends -->

<!-- widgets starts -->
<div class="widgets">
<div class="widgets__input">
<span class="material-icons widgets__searchIcon"> search </span>
<input type="text" placeholder="Search Twitter" />
</div>

<div class="widgets__widgetContainer">
<h2>What's happening?</h2>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">At dawn from the gateway to Mars, the launch of Starship’s second flight test <a href="https://t.co/ffKnsVKwG4">pic.twitter.com/ffKnsVKwG4</a></p>&mdash; SpaceX (@SpaceX) <a href="https://twitter.com/SpaceX/status/1732824684683784516?ref_src=twsrc%5Etfw">December 7, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<!-- widgets ends -->
</body>
</html>
Loading