diff --git a/images/car.jpg b/images/car.jpg new file mode 100644 index 00000000..b9190506 Binary files /dev/null and b/images/car.jpg differ diff --git a/images/profile.png b/images/profile.png new file mode 100644 index 00000000..97dd3210 Binary files /dev/null and b/images/profile.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..5ebc6625 --- /dev/null +++ b/index.html @@ -0,0 +1,179 @@ + + + + + + + Twitter Clone + + + + + + +
+ +
+ home +

Home

+
+ +
+ search +

Explore

+
+ +
+ notifications_none +

Notifications

+
+ +
+ mail_outline +

Messages

+
+ +
+ bookmark_border +

Bookmarks

+
+ +
+ list_alt +

Lists

+
+ +
+ perm_identity +

Profile

+
+ +
+ more_horiz +

More

+
+ +
+ + + +
+
+

Home

+
+ + +
+
+
+ + +
+ +
+
+ + + +
+
+ +
+ +
+
+
+

+ Fascinating + verified @fasc1nate +

+
+
+

The leader of the street gang the Crips, Stanley Williams lived an
extreme double life — during the day, he was an anti-gang youth
counselor, and at night he was the boss of the Crips, committing violent
gang crimes against a rival gang, the Bloods.

+ +

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

+ +

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

+ +

Williams was eventually given the death penalty. He went to jail
and was executed in December 2005, aged 51.

+
+
+ +
+ repeat + favorite_border + publish +
+
+
+ + + +
+
+ +
+ +
+
+
+

+ Somanath Goudar + verified @somanathg +

+
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

+
+
+ +
+ repeat + favorite_border + publish +
+
+
+ +
+ + + +
+
+ search + +
+ +
+

What's happening?

+ +
+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..8b1a115a --- /dev/null +++ b/styles.css @@ -0,0 +1,243 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + --twitter-color: #50b7f5; + --twitter-background: #e6ecf0; +} + +.sidebarOption { + display: flex; + align-items: center; + cursor: pointer; +} + +.sidebarOption .material-icons, +.fa-twitter { + padding: 20px; +} + +.sidebarOption h2 { + font-weight: 800; + font-size: 20px; + margin-right: 20px; +} + +.sidebarOption:hover { + background-color: var(--twitter-background); + border-radius: 30px; + color: var(--twitter-color); + transition: color 100ms ease-out; +} + +.sidebarOption.active { + color: var(--twitter-color); +} + +.sidebar__tweet { + width: 100%; + background-color: var(--twitter-color); + border: none; + color: white; + font-weight: 900; + border-radius: 30px; + height: 50px; + margin-top: 20px; +} + +body { + display: flex; + height: 100vh; + max-width: 1300px; + margin-left: auto; + margin-right: auto; + padding: 0 10px; +} + +.sidebar { + border-right: 1px solid var(--twitter-background); + flex: 0.2; + + min-width: 250px; + margin-top: 20px; + padding-left: 20px; + padding-right: 20px; +} + +.fa-twitter { + color: var(--twitter-color); + font-size: 30px; +} + +/* feed */ +.feed { + flex: 0.5; + border-right: 1px solid var(--twitter-background); + min-width: fit-content; + overflow-y: scroll; +} + +.feed__header { + position: sticky; + top: 0; + background-color: white; + z-index: 100; + border: 1px solid var(--twitter-background); + padding: 15px 20px; +} + +.feed__header h2 { + font-size: 20px; + font-weight: 800; +} + +.feed::-webkit-scrollbar { + display: none; +} + +.feed { + -ms-overflow-style: none; + scrollbar-width: none; +} + +/* tweet box */ +.tweetbox__input img { + border-radius: 50%; + height: 40px; +} + +.tweetBox { + padding-bottom: 10px; + border-bottom: 8px solid var(--twitter-background); + padding-right: 10px; +} + +.tweetBox form { + display: flex; + flex-direction: column; +} + +.tweetbox__input { + display: flex; + padding: 20px; +} + +.tweetbox__input input { + flex: 1; + margin-left: 20px; + font-size: 20px; + border: none; + outline: none; +} + +.tweetBox__tweetButton { + background-color: var(--twitter-color); + border: none; + color: white; + font-weight: 900; + + border-radius: 30px; + width: 80px; + height: 40px; + margin-top: 20px; + margin-left: auto; +} + +/* post */ +.post__avatar img { + border-radius: 50%; + height: 40px; +} + +.post { + display: flex; + align-items: flex-start; + border-bottom: 1px solid var(--twitter-background); + padding-bottom: 10px; +} + +.post__body img { + width: 450px; + object-fit: contain; + border-radius: 20px; +} + +.post__footer { + display: flex; + justify-content: space-between; + margin-top: 10px; +} + +.post__badge { + font-size: 14px ; + color: var(--twitter-color); + margin-right: 5px; +} + +.post__headerSpecial { + font-weight: 600; + font-size: 12px; + color: gray; +} + +.post__headerText h3 { + font-size: 15px; + margin-bottom: 5px; +} + +.post__headerDescription { + margin-bottom: 10px; + font-size: 15px; +} +.post__headerDescription p { + margin-bottom: 15px; +} + +.post__body { + flex: 1; + padding: 10px; +} + +.post__avatar { + padding: 20px; +} + +/* widgets */ +.widgets { + flex: 0.3; +} + +.widgets__input { + display: flex; + align-items: center; + background-color: var(--twitter-background); + padding: 10px; + border-radius: 20px; + margin-top: 10px; + margin-left: 20px; +} + +.widgets__input input { + border: none; + background-color: var(--twitter-background); +} + +.widgets__searchIcon { + color: gray; +} + +.widgets__widgetContainer { + margin-top: 15px; + margin-left: 20px; + padding: 20px; + background-color: #f5f8fa; + border-radius: 20px; +} + +.widgets__widgetContainer h2 { + font-size: 18px; + font-weight: 800; +}