diff --git a/header-image.png b/header-image.png new file mode 100644 index 00000000..f5a0b25c Binary files /dev/null and b/header-image.png differ diff --git a/kermit-the-frog.jpeg b/kermit-the-frog.jpeg new file mode 100644 index 00000000..dc23f489 Binary files /dev/null and b/kermit-the-frog.jpeg differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..22d6619a --- /dev/null +++ b/style.css @@ -0,0 +1,331 @@ +* { + box-sizing: border-box; + margin: 0px; + padding: 0px; +} + +main { + height: 100vh; + display: grid; + grid-template-columns: minmax(70px, 300px) 600px 300px; + max-width: 1200px; + margin: 0 auto; +} +.left-hand-menu { + grid-column: 1 / span 1; + display: grid; + grid-template-rows: 60px 1fr 80px; + grid-template-columns: auto; +} +.tweet-feed { + grid-column: 2 / span 1; + border-left: 2px solid lightgray; + border-right: 2px solid lightgray; + display: grid; + grid-template-rows: 60px 130px auto auto auto; + overflow-y: scroll; + overflow-x: hidden; +} +.right-hand-sidebar { + grid-template-columns: 3 / span 1; + display: grid; + grid-template-rows: 50px auto auto; + height: max-content; +} +.home-header { + grid-template-rows: 1 / span 1; + display: grid; + grid-template-columns: 1fr 50px; + border-bottom: 1px solid lightgray; + align-items: center; +} +.home-header h3 { + margin-left: 10px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} +.home-header img { + margin-right: 10px; +} +.start-a-post { + display: grid; + grid-template-rows: 80px 40px; + border-bottom: 1px solid lightgray; +} +.upper-post-box { + grid-row: 1 / span 1; + display: grid; + grid-template-columns: 60px 1fr; + margin: 10px; +} +.write-post { + display: grid; + align-items: center; + margin-left: 10px; + border-bottom: 1px solid lightgray; +} +.user-post-input { + width: 100%; + height: 50%; + font-size: 22px; + border: none; + outline: none; +} +.post-options { + display: inline-block; + padding-left: 85px; + position: relative; + align-content: center; +} + +.post-options svg { + height: 30px; + margin-left: 10px; + margin-top: 2px; + cursor: pointer; + fill: rgb(42, 181, 228);; +} +.post-button { + display: inline-block; + background-color: rgb(42, 181, 228); + border-radius: 20px; + border: none; + color: white; + padding: 12px 25px; + text-decoration: none; + font-size: 14px; + cursor: pointer; + position: absolute; + right: 10px; + bottom: 1px; + font-weight: bold; +} +.menu-section { + display: grid; + grid-template-rows: repeat(7, 50px) auto 1fr; + grid-template-columns: 1fr; + gap: 20px; + justify-content: start; + align-items: center; + text-align: start; + margin: 10px 15px 0px 15px; + cursor: pointer; +} +.menu-section svg { + max-width: 100%; +} +.menu-button { + display: grid; + grid-template-columns: 35px auto; + align-items: center; + max-width: fit-content; + padding: 5px; + border-radius: 20px; +} +.menu-section a { + text-decoration: none; + margin: 7px 7px 7px 7px; + font-size: 20px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: black; + font-weight: bold; +} +.tweet-button { + background-color: rgb(42, 181, 228); + border-radius: 30px; + border: none; + color: white; + padding: 15px; + text-decoration: none; + font-size: 20px; + cursor: pointer; + font-weight: bold; + max-width: 100%; +} +.twitter-header img { + max-height: 100%; + padding: 10px; +} +.menu-button:hover { + background-color: lightgray; +} +.menu-button :active { + color: rgb(42, 181, 228); +} +.search-bar { + height: 45px; + width: auto; + background-color:lightgray; + border-radius: 20px; + margin: 4px 15px 20px 15px; + display: grid; + grid-template-columns: auto 1fr; + align-content: center; +} +.search-bar svg { + height: 25px; + padding: 0px 10px 0px 10px; + stroke: gray; +} +.search-bar-input { + height: 100%; + width: 80%; + border: none; + background-color: lightgray; + outline: none; + font-size: 15px; +} +.whats-happening-section { + margin: 15px; + padding: 10px 15px; + border-radius: 20px; + gap: 10px; + background-color: rgba(206, 204, 204, 0.282); + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + display: grid; + grid-auto-flow: row; + height: max-content; +} +.who-to-follow-section { + margin: 0px 15px; + padding: 10px 15px; + border-radius: 20px; + gap: 10px; + background-color: rgba(206, 204, 204, 0.282); + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + display: grid; + grid-auto-flow: row; + height: max-content; +} +.follow-profile { + display: grid; + grid-template-columns: 40px 1fr 70px; + grid-template-rows: 40px; + align-items: center; +} +.follow-button { + background-color: rgb(42, 181, 228); + border-radius: 20px; + border: none; + color: white; + text-decoration: none; + font-size: 12px; + cursor: pointer; + font-weight: bold; + height: 40px; +} +.follow-profile p { + font-size: 14px; + margin-left: 3px; +} +.follow-profile span { + font-weight: bold; +} +.user-profile { + display: grid; + grid-template-columns: 70px 1fr; + grid-template-rows: 70px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 15px; + color: gray; +} +.profile-image2 { + grid-column: 1 / span 1; + border-radius: 50%; + margin: 10px; +} +.profile-image2 img, .profile-image img, .profile-image3 img { + height: 100%; + width: 100%; + border-radius: 50%; +} +.user-profile p { + grid-column: 2 / span 1; + margin: 15px 5px; +} +.user-profile span { + color: black; + font-weight: bold; +} +.Tweet1, .Tweet2 { + display: grid; + grid-template-columns: 80px 1fr; + height: max-content; + border-top: 1px solid lightgray; + border-bottom: 1px solid lightgray;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; +} +.Tweet1 { + border-top: 10px solid rgb(240, 239, 239); +} +.Tweet1 img, .Tweet2 img { + grid-column: 1 / span 1; + border-radius: 50%; + margin: 10px; + height: 60px; +} +.Tweet1 p, .Tweet2 p { + grid-column: 2 / span 1; + grid-row: 1/ span 1; + margin: 20px 5px; +} +.Tweet1 span, .Tweet2 span { + font-weight: bold; +} +.Tweet1 span1, .Tweet2 span1 { + color: grey; +} +.Tweet1 span2, .Tweet2 span2 { + color: rgb(42, 181, 228); +} +.tweet-options{ + grid-column: 2 / span 1; + grid-row: 2/ span 1; + align-content: center; +} +.tweet-options svg { + height: 20px; + margin-right: 100px; + margin-bottom: 10px; +} + +@media (max-width: 1095px) { + main { + grid-template-columns: 70px 600px 300px; + } +.menu-button { + grid-template-columns: 35px; +} +.menu-button a { + display: none; + } + .user-profile { + grid-template-columns: 70px; + } +.user-profile p { + display: none; +} +.tweet-button { + font-size: smaller; + padding: 20px 5px; +} +} +@media (max-width: 960px) { +main { + grid-template-columns: 70px 600px + } + .right-hand-sidebar { + display: none; + } +} +@media (max-width: 680px) { + main { + grid-template-columns: 70px auto + } + .Tweet1 svg, .Tweet2 svg { + margin-right: auto; + } +} +@media (max-width: 550px) { + .location-icon { + display: none; + } +} \ No newline at end of file diff --git a/twitter-logo.jpeg b/twitter-logo.jpeg new file mode 100644 index 00000000..c589ba60 Binary files /dev/null and b/twitter-logo.jpeg differ diff --git a/twitter.html b/twitter.html new file mode 100644 index 00000000..2b34e706 --- /dev/null +++ b/twitter.html @@ -0,0 +1,551 @@ + + + + + + + + Twitter.com + + +
+ +
+
+

Home

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

+ Kermit @Kermit_the_frog 2h
+ @Rico What do you think of my twitter clone? +

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

+ Kermit @Kermit_the_frog
+ @Rico What do you think of my twitter clone? +

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

+ Kermit @Kermit_the_frog
+ @Rico What do you think of my twitter clone? +

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

+ Kermit @Kermit_the_frog
+ @Rico What do you think of my twitter clone? +

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

+ Kermit @Kermit_the_frog
+ @Rico What do you think of my twitter clone? +

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

+ Kermit @Kermit_the_frog
+ @Rico What do you think of my twitter clone? +

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

+ Kermit @Kermit_the_frog
+ @Rico What do you think of my twitter clone? +

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