diff --git a/svgs/bell.svg b/svgs/bell.svg new file mode 100644 index 00000000..013fc37d --- /dev/null +++ b/svgs/bell.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/svgs/bookmark.svg b/svgs/bookmark.svg new file mode 100644 index 00000000..ba56c0d5 --- /dev/null +++ b/svgs/bookmark.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/svgs/email.svg b/svgs/email.svg new file mode 100644 index 00000000..48e72786 --- /dev/null +++ b/svgs/email.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/svgs/explore.svg b/svgs/explore.svg new file mode 100644 index 00000000..0e5f8919 --- /dev/null +++ b/svgs/explore.svg @@ -0,0 +1,14 @@ + + + + explore + + + + + + + + + + \ No newline at end of file diff --git a/svgs/home.svg b/svgs/home.svg new file mode 100644 index 00000000..d9f3ee33 --- /dev/null +++ b/svgs/home.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/svgs/home2.svg b/svgs/home2.svg new file mode 100644 index 00000000..f0eb711f --- /dev/null +++ b/svgs/home2.svg @@ -0,0 +1,19 @@ + + + + + home [#1391] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/svgs/more.svg b/svgs/more.svg new file mode 100644 index 00000000..08604472 --- /dev/null +++ b/svgs/more.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/svgs/profile.svg b/svgs/profile.svg new file mode 100644 index 00000000..5d33fac6 --- /dev/null +++ b/svgs/profile.svg @@ -0,0 +1,19 @@ + + + + + profile_round [#1342] + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/svgs/search.svg b/svgs/search.svg new file mode 100644 index 00000000..63693d48 --- /dev/null +++ b/svgs/search.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/svgs/stars.svg b/svgs/stars.svg new file mode 100644 index 00000000..30f49346 --- /dev/null +++ b/svgs/stars.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/svgs/twitter.svg b/svgs/twitter.svg new file mode 100644 index 00000000..70b5288a --- /dev/null +++ b/svgs/twitter.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/tweet-svgs/chart.svg b/tweet-svgs/chart.svg new file mode 100644 index 00000000..eb1dae9b --- /dev/null +++ b/tweet-svgs/chart.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/tweet-svgs/chat.svg b/tweet-svgs/chat.svg new file mode 100644 index 00000000..7f15bc6e --- /dev/null +++ b/tweet-svgs/chat.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/tweet-svgs/emoji.svg b/tweet-svgs/emoji.svg new file mode 100644 index 00000000..a66aca47 --- /dev/null +++ b/tweet-svgs/emoji.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/tweet-svgs/export.svg b/tweet-svgs/export.svg new file mode 100644 index 00000000..128487ad --- /dev/null +++ b/tweet-svgs/export.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/tweet-svgs/gif.svg b/tweet-svgs/gif.svg new file mode 100644 index 00000000..90549e1b --- /dev/null +++ b/tweet-svgs/gif.svg @@ -0,0 +1,12 @@ + + + + ic_fluent_gif_24_regular + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tweet-svgs/heart.svg b/tweet-svgs/heart.svg new file mode 100644 index 00000000..7b293ca4 --- /dev/null +++ b/tweet-svgs/heart.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/tweet-svgs/images.svg b/tweet-svgs/images.svg new file mode 100644 index 00000000..3feeb32a --- /dev/null +++ b/tweet-svgs/images.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/tweet-svgs/retweet.svg b/tweet-svgs/retweet.svg new file mode 100644 index 00000000..bfbdb02c --- /dev/null +++ b/tweet-svgs/retweet.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tweet-svgs/schedule.svg b/tweet-svgs/schedule.svg new file mode 100644 index 00000000..6f73bb91 --- /dev/null +++ b/tweet-svgs/schedule.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/twitter.css b/twitter.css new file mode 100644 index 00000000..cbe60925 --- /dev/null +++ b/twitter.css @@ -0,0 +1,216 @@ +* { + margin: 0px; + box-sizing: border-box; +} + + +.layout-container { + height: 100vh; + /* width: 100%; */ + background-color: lightblue; + display: grid; + grid-template-columns: 250px minmax(400px, 1fr) 300px; + gap: 2px; +} + +.layout-container > * { + background-color: white; +} + +.logo { + /* background-color: lightblue; */ + padding: 10px; +} + +.nav-container { + display: grid; + grid-template-columns: 50px 1fr; + /* background-color: lightcoral; */ + /* height: 100%; */ + margin: 10px 20px; + align-items: center; + gap: 40px 10px; +} + +img { + width: 40px; + /* color: lightblue; */ +} + +a { + text-decoration: none; + color: black; + font-weight: 600; + font-size: 22px; +} + +a:hover, a:focus { + color: lightblue; +} + +.left > button { + background-color: lightblue; + color: white; + /* padding: 10px 20px; */ + /* border-radius: ; */ + height: 60px; + width: 80%; + margin-left: 20px; + font-weight: 600; + font-size: 16px; + border-radius: 30px; + border: none; +} + +.right > div { + background-color: lightblue; + height: 60px; + margin: 10px 20px 10px 10px; + border-radius: 10px; + +} + +#search-container { + display: grid; + grid-template-columns: 50px 1fr; + align-items: center; + height: 40px; + border-radius: 20px; +} + +#search-container img { + height: 25px; + padding-left: 10px; +} + +hr { + background-color: grey; + /* padding: 0px; */ + /* color: black; */ + height: 1px; + border: none; +} + +h3 { + padding: 5px; +} + +.large-hr { + background-color: lightblue; + height: 10px +} + +.home { + display: grid; + grid-template-columns: 100px 1fr 40px; + align-items: center; + border-bottom: 2px lightblue solid; + padding: 10px 0px 10px 10px +} + +.home > img { + height: 30px; +} + +.tweet { + display: grid; + grid-template-columns: 70px 1fr; +} + +.tweet > img, .pp { + width: 50px; + margin: 10px; + border-radius: 50%; +} + +.tweet-bottom { + /* background-color: aquamarine; */ + display: grid; + grid-template-columns: 1fr 100px; +} + +.tweet-text { + color: grey; + margin: 10px 0px 20px; + font-size: large; +} + +main hr { + background-color: lightblue; + height: 2px +} + +.tweet-button { + padding: 5px; + font-weight: 600; + color: white; + background-color: lightblue; + border: none; + height: 30px; + border-radius: 15px; + margin: 5px; +} + +.tools > img { + width: 30px; + margin-top: 5px; + margin-right: 10px; + +} + +.post { + border-bottom: solid lightblue 2px; + /* height: 140px; */ + display: grid; + grid-template-columns: 70px 1fr; + +} + + +.reactions { + display: grid; + grid-template-columns: repeat(4, 1fr); + margin-top: 20px; + margin-bottom: 10px; +} + +.reactions > img { + width: 20px; +} + +.grey { + color: grey; + margin: 5px 0px; +} + +.name { + font-weight: 600; + color: black; +} + +.blue { + color: lightblue +} + +p { + margin-right: 5px; +} + +@media screen and (min-width: 750px) and (max-width: 1100px) { + .layout-container { + grid-template-columns: 250px minmax(400px, 1fr); + } + + .right { + display: none; + } +} + +@media screen and (max-width: 750px) { + .layout-container { + grid-template-columns: minmax(400px, 1fr); + } + .right, .left { + display: none; + } +} \ No newline at end of file diff --git a/twitter.html b/twitter.html new file mode 100644 index 00000000..776185fc --- /dev/null +++ b/twitter.html @@ -0,0 +1,135 @@ + + + + + + + + Twitter + + +
+ + +
+
+
+

Home

+
+ Stars icon +
+
+ A person smiling +
+

What's happening?

+
+
+
+ images icon + gif icon + Chart icon + Emoji selector + Schedule icon +
+ +
+
+
+
+
+
+
+ Laughing guy +
+

John @PersonOnSocialMedia - 5m

+

@Steve @Bob I made a Twitter clone, is this breaking copyright?

+
+ Comment icon + Retweet icon + Like icon + Export icon +
+
+
+
+ Laughing guy +
+

Steve @GuyWithAJob - 23m

+

@Bob I haven't slept in 3 days!

+
+ Comment icon + Retweet icon + Like icon + Export icon +
+
+
+
+ Laughing guy +
+

Bob @LeaveMeAlone - 1h

+

Why do people keep tagging me in posts? Your memes are cool but I get way too many notifications.

+
+ Comment icon + Retweet icon + Like icon + Export icon +
+
+
+
+ Laughing guy +
+

Billy @xXQuickScopeKingXx - 2h

+

@PersonOnSocialMedia Legend has it; you are brewing something up in that room of yours. When was the last time you saw sunlight?

+
+ Comment icon + Retweet icon + Like icon + Export icon +
+
+
+ +
+
+ + +
+ + \ No newline at end of file