diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/images/twitterr.jpg b/images/twitterr.jpg new file mode 100644 index 00000000..daaa680b Binary files /dev/null and b/images/twitterr.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..3755d824 --- /dev/null +++ b/index.html @@ -0,0 +1,176 @@ + + + + + + + Twitter clone + + + + + +
+ + +
+ home +

Home

+
+ +
+ search +

Explore

+
+ +
+ notifications_none +

Notifications

+
+ +
+ mail_outline +

Messages

+
+ +
+ bookmark_border +

Bookmark

+
+ +
+ list_alt +

Lists

+
+ +
+ perm_identity +

Profiles

+
+ +
+ more_horiz +

More

+ +
+ +
+ + + +
+
+

Home

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

Oluwagbemi Abiodun + + verified @alakowee + +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

Oluwagbemi Abiodun + + verified @alakowee + +

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

What's Happening

+ +
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..bbd5d7c2 --- /dev/null +++ b/style.css @@ -0,0 +1,234 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + --twitter-color: ; + --twitter-background: #e6ecf0; + display: grid; + grid-template-columns: minmax(250px, 1fr) minmax(300px, 2fr) minmax(300px, 1fr); + grid-template-rows: auto; + grid-template-areas: + "sidebar feed widgets"; +} + +.sidebarOption { + display: grid; + align-items: center; + cursor: pointer; + grid-template-columns: auto 1fr; +} + +.sidebarOption .material-icons +{ + padding: 20px; +} + +.fa-twitter { + padding: 10px; + color: #1DA1F2; +} + +.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: #1DA1F2; + border: none; + color: white; + font-weight: 900; + border-radius: 30px; + height: 50px; + margin-top: 20px; +} + +.sidebar { + grid-area: sidebar; + border-right: 1px solid var(--twitter-background); + padding: 20px; + grid-template-rows: repeat(auto-fill, minmax(auto, 1fr)); + row-gap: 20px; +} + +.fa-twitter { + color: #1DA1F2; + font-size: 30px; +} + +.feed { + grid-area: feed; + border-right: 1px solid var(--twitter-background); + overflow-y: scroll; + padding: 20px; +} + +.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; +} + +.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: grid; + grid-template-columns: 1fr auto; +} + +.tweetbox_input { + display: grid; + grid-template-columns: auto 1fr; + padding: 20px; +} + +.tweetbox_input input { + margin-left: 20px; + font-size: 20px; + border: none; + outline: none; +} + +.tweetBox_tweetButton { + background-color: #1DA1F2; + border: none; + color: white; + font-weight: 900; + border-radius: 30px; + width: 80px; + height: 40px; + margin-top: 20px; +} + +.post_avatar img { + border-radius: 50%; + height: 40px; +} + +.post { + display: grid; + align-items: flex-start; + border-bottom: 1px solid var(--twitter-background); + padding: 10px; + grid-template-columns: auto 1fr; +} + +.post_body img { + width: 450px; + object-fit: contain; + border-radius: 20px; +} + +.post_footer { + justify-content: space-between; + margin-top: 10px; +} + +.post_badge { + font-size: 14px !important; + color: #1DA1F2; + 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_body { + padding: 10px; +} + +.post_avatar { + padding: 20px; +} + +.widgets { + grid-area: widgets; + padding: 20px; + display: grid; + grid-template-rows: auto 1fr; + row-gap: 20px; +} + +.widgets_input { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + padding: 10px; + border-radius: 20px; +} + +.widgets_input input { + border: none; + background-color: #1DA1F2; + outline: none; +} + +.widgets_searchIcon { + color: gray; +} + +.widgets_container { + padding: 20px; + background-color: whitesmoke; + border-radius: 20px; +} + +.widgets_container h2 { + font-size: 18px; + font-weight: 800; +}