diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/Thumbs.db b/1-exercise-solutions/twitter-default-page-clone/icons/Thumbs.db new file mode 100644 index 0000000..2d6c6ee Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/icons/Thumbs.db differ diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/icons8-apple-logo.svg b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-apple-logo.svg new file mode 100644 index 0000000..4a4394f --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-apple-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/icons8-ellipsis-90.png b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-ellipsis-90.png new file mode 100644 index 0000000..0f24db1 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-ellipsis-90.png differ diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/icons8-google.svg b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-google.svg new file mode 100644 index 0000000..6875bd5 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/icons8-hashtag-100.png b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-hashtag-100.png new file mode 100644 index 0000000..23cee32 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-hashtag-100.png differ diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/icons8-settings-128 (1).png b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-settings-128 (1).png new file mode 100644 index 0000000..d33eb96 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-settings-128 (1).png differ diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/icons8-settings.svg b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-settings.svg new file mode 100644 index 0000000..e30e19e --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/icons8-twitter-240.svg b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-twitter-240.svg new file mode 100644 index 0000000..cb35d4c --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/icons8-twitter-240.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/noun-comment-4598095.svg b/1-exercise-solutions/twitter-default-page-clone/icons/noun-comment-4598095.svg new file mode 100644 index 0000000..810b0a6 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/noun-comment-4598095.svg @@ -0,0 +1,4 @@ + + + + diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/noun-heart-5684728.svg b/1-exercise-solutions/twitter-default-page-clone/icons/noun-heart-5684728.svg new file mode 100644 index 0000000..d3412c7 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/noun-heart-5684728.svg @@ -0,0 +1,4 @@ + + + + diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/noun-retweet-1158617.svg b/1-exercise-solutions/twitter-default-page-clone/icons/noun-retweet-1158617.svg new file mode 100644 index 0000000..d5f1b88 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/noun-retweet-1158617.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/noun-stats-3836488.svg b/1-exercise-solutions/twitter-default-page-clone/icons/noun-stats-3836488.svg new file mode 100644 index 0000000..fc3ed65 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/noun-stats-3836488.svg @@ -0,0 +1,4 @@ + + + + diff --git a/1-exercise-solutions/twitter-default-page-clone/icons/noun-upload-292145.svg b/1-exercise-solutions/twitter-default-page-clone/icons/noun-upload-292145.svg new file mode 100644 index 0000000..8d18d10 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/icons/noun-upload-292145.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/1-exercise-solutions/twitter-default-page-clone/index.html b/1-exercise-solutions/twitter-default-page-clone/index.html new file mode 100644 index 0000000..17aa89f --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/index.html @@ -0,0 +1,358 @@ + + + Twitter explore page clone + + + + + + + + + + + + + +
+ +
+
+
Explore
+
+ +
+
+ +
+ + +
+
+
+ +
+
+
+
+ supersimple.dev + @supersimple.dev · + Sep 14, 2021 +
+
+ +
+
+
+ If you're unable to afford a good laptop for coding, consider a chromebook. I was experimenting with web development on a chromebook today (this one's $180 USD after tax) and it actually runs very smoothly. + #CodeNewbie #freeCodeCamp #LearnToCode + +
+ +
+
+
+
+
+ +
+ +
+
+ +
+ + +
+ +
+
+ 2 +
+ + + +
+ +
+
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+
+ supersimple.dev + @supersimple.dev · + Sep 14, 2021 +
+
+ +
+
+
+ Working on a JavaScript video course now +
+ +
+
+
+
+
+
+ +
+
+ 54 +
+
+ +
+
+ 10 +
+ + +
+ +
+
+ +
+ + +
+
+ +
+
+
+ +
+
+
+
+ Fabrizio Romano + ✓ + @FabrizioRomano + · 19h +
+
+ +
+
+
+ Napoli are Serie A champions after 33 years! +
+ It’s the third Serie A title in their history. +
+ It’s also the first one after the legendary Diego Maradona era. +
+ Congrats, Napoli! +
+ +
+
+
+
+
+
+ +
+
+ 990 +
+
+ +
+
+ 19K +
+ + +
+ +
+
+ 5M +
+ + +
+
+
+
+
+ +
+
+
+
+ Erling Haaland ✓ + @ErlingHaaland · 16h +
+
+ +
+
+
+ Friend: how many league goals have you scored?
+ Me: +
+ +
+
+
+
+
+
+ +
+
+ 4,707 +
+
+ +
+
+ 14K +
+ + +
+ +
+
+ 21.6M +
+ + +
+
+
+
+ + + +
+
+
+
+ Don't miss what's happening. +
+
+ People on Twitter are the first to know. +
+
+
+ + +
+
+
+ + \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/3ifAqala_400x400.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/3ifAqala_400x400.jpg new file mode 100644 index 0000000..e321870 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/3ifAqala_400x400.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/FvT7v8mWcAQsLKm.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/FvT7v8mWcAQsLKm.jpg new file mode 100644 index 0000000..a5b490e Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/FvT7v8mWcAQsLKm.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/Thumbs.db b/1-exercise-solutions/twitter-default-page-clone/photos/Thumbs.db new file mode 100644 index 0000000..8f1c291 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/Thumbs.db differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/banner-index.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/banner-index.jpg new file mode 100644 index 0000000..2b5ea60 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/banner-index.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/dog1.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/dog1.jpg new file mode 100644 index 0000000..9fcb150 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/dog1.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/dog2.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/dog2.jpg new file mode 100644 index 0000000..7a0ffe8 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/dog2.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/hPVprxgb_400x400.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/hPVprxgb_400x400.jpg new file mode 100644 index 0000000..49c380d Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/hPVprxgb_400x400.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/m0yzCdOe_400x400.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/m0yzCdOe_400x400.jpg new file mode 100644 index 0000000..5b9b708 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/m0yzCdOe_400x400.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/photo_2023-05-05_20-19-14.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/photo_2023-05-05_20-19-14.jpg new file mode 100644 index 0000000..787b760 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/photo_2023-05-05_20-19-14.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/profile-pic.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/profile-pic.jpg new file mode 100644 index 0000000..3580ac1 Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/profile-pic.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/photos/tweetpic.jpg b/1-exercise-solutions/twitter-default-page-clone/photos/tweetpic.jpg new file mode 100644 index 0000000..113b3da Binary files /dev/null and b/1-exercise-solutions/twitter-default-page-clone/photos/tweetpic.jpg differ diff --git a/1-exercise-solutions/twitter-default-page-clone/styles/general.css b/1-exercise-solutions/twitter-default-page-clone/styles/general.css new file mode 100644 index 0000000..3b73764 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/styles/general.css @@ -0,0 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); +body { + margin: 0; + padding-bottom: 2000px; /* for testing the position:fixed; values */ + margin-left: 100px; +} \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/styles/main-content.css b/1-exercise-solutions/twitter-default-page-clone/styles/main-content.css new file mode 100644 index 0000000..cad6a55 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/styles/main-content.css @@ -0,0 +1,136 @@ +/* main page code */ +.tweet-link { + text-decoration: none; +} +.main-page { + border-right: 1px solid rgb(241, 236, 236); + width: 600px; + bottom: 0; + top: 0; + position: relative; + height: auto; +} +.explore { + font-family: Arial, Helvetica, sans-serif; + font-weight: 600; + font-size: 20px; + display: flex; + justify-content: space-between; + height: 45px; + background-color: rgba(255, 255, 255, 0.952); + position: fixed; + width: 600px; +} + +.explore div { + padding: 15px 0px 0px 20px; +} + +.explore img { + padding-right: 15px; +} +.main-page-settings-icon { + width: 23px; +} + +.spacing { + padding-top: 70px; +} +.tweet-container { + border-bottom: 1px solid rgb(241, 236, 236); + display: grid; + grid-row: 1fr; + transition: background-color 0.5s; +} +.tweet-container:hover { + background-color: rgba(211, 211, 211, 0.39); + cursor: pointer; +} +.tweet { + margin-top: 5px; + display: flex; +} +.profile-picture img { + width: 45px; + margin-left: 15px; + border-radius: 25px; + margin-top: 5px; +} +.profile-info { + padding-left: 15px; + display: flex; + flex-direction: column; +} +.name-id-time { + width: 509px; + justify-content: space-between; + display: flex; +} +.name-id-time img { + margin-right: 3px; + width: 15px; +} +.profile-name { + font-family: Arial, Helvetica, sans-serif; + font-size: 17px; + font-weight: 600; +} +.id-and-time { + margin-left: 2px; + font-size: 15px; + font-family: Arial, Helvetica, sans-serif; + color: rgb(129, 123, 123); +} +.tweet-text { + width: 90%; + margin-top: 5px; + font-family: Arial, Helvetica, sans-serif; + font-size: 17px; +} +.tweet-photo { + margin-top: 20px; + display: flex; +} +.tweet-photo img { + border-radius: 15px; + width: 400px; + object-fit: cover; + height: 510px; +} +.tweet-stats { + margin-top: 10px; + margin-left: 80px; + float: left; + display: flex; + justify-content: space-between; + width: 430px; + margin-bottom: 5px; +} +.comments span, .retweets span, .likes span, .views span { + font-size: 13px; + margin-left: -24px; + font-family: Montserrat; + font-weight: 600; + color: rgb(145, 145, 144); +} +.tweet-stats img { + width: 21px; + display: inline-block; +} +.comments-img, .comments, .retweets-img, .retweets, .likes-img, .likes, .views-img, .views, .share-img { + transition: filter 0.5s; +} +.comments-img:hover, .comments:hover, .views-img:hover, .views:hover, .share-img:hover { + filter: invert(74%) sepia(51%) saturate(4819%) hue-rotate(181deg) brightness(93%) contrast(90%); +} +.retweets-img:hover, .retweets:hover { + filter: invert(39%) sepia(88%) saturate(411%) hue-rotate(71deg) brightness(99%) contrast(98%); +} +.likes-img:hover, .likes:hover { + filter: invert(28%) sepia(62%) saturate(1566%) hue-rotate(332deg) brightness(95%) contrast(92%); +} + +.tweet-stats .share-img img { + width: 24px; + display: inline-block; +} \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/styles/overlay.css b/1-exercise-solutions/twitter-default-page-clone/styles/overlay.css new file mode 100644 index 0000000..2b1d582 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/styles/overlay.css @@ -0,0 +1,54 @@ +.overlay { + width: 100%; + height: 70px; + background-color: rgb(76, 159, 226); + position: fixed; + bottom: 0; + left: 0; + z-index: 3; + display: flex; + justify-content: center; + +} +.overlay-flexbox { + display: flex; + justify-content: space-between; + position: relative; + align-items: center; + width: 55%; /* problem */ +} +.overlay-texts { + display: flex; + flex-direction: column; + color: white; +} +.Title { + font-weight: bold; + font-family: Arial, Helvetica, sans-serif; + font-size: 24px; +} +.description { + font-family: Arial, Helvetica, sans-serif; +} +.overlay-buttons { + position: relative; +} +.log-in { + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: transparent; + color: white; + padding: 9px 14px 9px 14px; + font-weight: bold; + font-size: 15px; +} +.sign-up { + margin-left: 10px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: white; + color: black; + padding: 7px 16px 7px 16px; + font-weight: 800; + font-size: 14px; +} \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/styles/responsive.css b/1-exercise-solutions/twitter-default-page-clone/styles/responsive.css new file mode 100644 index 0000000..0933d01 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/styles/responsive.css @@ -0,0 +1,386 @@ +@media (min-width: 1px) and (max-width: 1299px) { + .icons-text { + display: none; + } +} +@media (min-width: 1022px) { + .navbar { + width: 100px; + display: flex; + align-items: center; + flex-direction: column; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + border-right: 1px solid rgb(241, 236, 236); + } + .navbar img { + padding-top: 10px; + width: 35px; + } + .navbar .search-icon, .navbar .settings-icon { + padding-top: 20px; + } +} + +@media (max-width: 1026px) { + .navbar-2 { + display: none; + } +} + +@media (min-width: 1125px) { + .navbar { + width: 193px; + display: flex; + align-items: flex-end; + float: right; + flex-direction: column; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + border-right: 1px solid rgb(241, 236, 236); + } + .navbar img { + padding-top: 10px; + padding-right: 30px; + width: 35px; + } + .navbar .search-icon, .navbar .settings-icon { + padding-top: 20px; + } + + .main-page { + padding-left: 94px; + } +} + +/* too big */ +@media (min-width: 1299px) { + .navbar { + width: 260px; + display: flex; + align-items: flex-start; + float: left; + flex-direction: column; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + border-right: 1px solid rgb(241, 236, 236); + } + .icons-text { + font-size: 20px; + position: relative; + bottom: 10px; + right: 15px; + } + .navbar div:nth-child(2) { + font-weight: bold; + } + .navbar img { + padding-top: 10px; + padding-left: 30px; + width: 35px; + } + .navbar .search-icon, .navbar .settings-icon { + padding-top: 20px; + } + + /* main page */ + .main-page { + padding-left: 160px; + } + + /* second navbar */ + .navbar-2 { + top: 12px; + right: 65px; + position: fixed; + } + + .first-navbar2-sidebar { + border: 1px solid rgb(231, 225, 225); + width: 340px; + border-radius: 14px; + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 15px; + } + + .buttons { + margin-top: 5px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + width: 285px; + } + +} + +@media (max-width: 960px) { + .overlay-flexbox { + display: flex; + justify-content: center; + position: relative; + align-items: center; + width: 100%; /* problem */ + } + /* .overlay-buttons { + position: relative; + } */ + .log-in { + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: transparent; + color: white; + padding: 10px 100px 10px 100px; + font-weight: bold; + font-size: 15px; + } + .sign-up { + margin-left: 10px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: white; + color: black; + padding: 10px 100px 10px 100px; + font-weight: 800; + font-size: 14px; + + } +} + +@media (max-width: 540px) { + .overlay-flexbox { + display: flex; + justify-content: center; + position: relative; + align-items: center; + width: 100%; /* problem */ + } + /* .overlay-buttons { + position: relative; + } */ + .log-in { + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: transparent; + color: white; + padding: 8px 50px 8px 50px; + font-weight: bold; + font-size: 15px; + } + .sign-up { + margin-left: 10px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: white; + color: black; + padding: 8px 50px 8px 50px; + font-weight: 800; + font-size: 14px; + + } +} + +@media (max-width: 450px) { + .overlay-flexbox { + display: flex; + justify-content: center; + position: relative; + align-items: center; + width: 100%; /* problem */ + } + /* .overlay-buttons { + position: relative; + } */ + .log-in { + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: transparent; + color: white; + padding: 8px 8px 8px 8px; + font-weight: bold; + font-size: 15px; + } + .sign-up { + margin-left: 10px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.349); + background-color: white; + color: black; + padding: 8px 8px 8px 8px; + font-weight: 800; + font-size: 14px; + + } +} + +@media (max-width: 960px) { + .Title, .description { + display: none; + } + +} + +@media (max-width: 500px) { + .Title, .description { + display: none; + } +} + +@media (max-width: 720px) { + /* main page code */ +.main-page { + border-right: 1px solid rgb(241, 236, 236); + width: 400px; + bottom: 0; + top: 0; + position: relative; + height: auto; +} +.explore { + margin-left: -35px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 600; + font-size: 20px; + display: flex; + justify-content: space-between; + height: 45px; + background-color: rgba(255, 255, 255, 0.952); + position: fixed; + width: 400px; +} + +.explore div { + padding: 15px 0px 0px 20px; +} + +.explore img { + padding-right: 15px; +} +.main-page-settings-icon { + width: 23px; +} + +.spacing { + padding-top: 70px; +} +.tweet-container { + margin-left: -35px; + border-bottom: 1px solid rgb(241, 236, 236); + display: grid; + grid-row: 1fr; + transition: background-color 0.5s; +} +.tweet-container:hover { + background-color: rgba(211, 211, 211, 0.39); + cursor: pointer; +} +.tweet { + margin-top: 5px; + display: flex; +} +.profile-picture img { + width: 45px; + margin-left: 15px; + border-radius: 25px; + margin-top: 5px; +} +.profile-info { + padding-left: 15px; + display: flex; + flex-direction: column; +} +.name-id-time { + width: 309px; + justify-content: space-between; + display: flex; +} +.name-id-time img { + margin-right: 3px; + width: 15px; +} +.profile-name { + font-family: Arial, Helvetica, sans-serif; + font-size: 17px; + font-weight: 600; +} +.id-and-time { + margin-left: 2px; + font-size: 15px; + font-family: Arial, Helvetica, sans-serif; + color: rgb(129, 123, 123); +} +.tweet-text { + width: 70%; + margin-top: 5px; + font-family: Arial, Helvetica, sans-serif; + font-size: 17px; +} +.tweet-photo { + margin-top: 20px; + display: flex; +} +.tweet-photo img { + border-radius: 15px; + width: 300px; + object-fit: cover; + height: 510px; +} +.tweet-stats { + margin-top: 10px; + margin-left: 80px; + float: left; + display: flex; + justify-content: space-between; + width: 430px; + margin-bottom: 5px; +} +.comments span, .retweets span, .likes span, .views span { + font-size: 13px; + margin-left: -24px; + font-family: Montserrat; + font-weight: 600; + color: rgb(145, 145, 144); +} +.tweet-stats img { + + width: 21px; + display: inline-block; +} +.tweet-stats .share-img img { + width: 24px; + display: inline-block; +} +/* navbar check */ +.navbar { + width: 65px; + display: flex; + align-items: center; + flex-direction: column; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + border-right: 1px solid rgb(241, 236, 236); +} +.navbar img { + padding-top: 10px; + width: 30px; +} +.navbar .search-icon, .navbar .settings-icon { + padding-top: 20px; +} +.main-page { + padding-left: 4px; +} +} \ No newline at end of file diff --git a/1-exercise-solutions/twitter-default-page-clone/styles/sidebar1.css b/1-exercise-solutions/twitter-default-page-clone/styles/sidebar1.css new file mode 100644 index 0000000..70dc41d --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/styles/sidebar1.css @@ -0,0 +1,20 @@ +.navbar { + width: 100px; + display: flex; + align-items: center; + flex-direction: column; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + border-right: 1px solid rgb(241, 236, 236); +} +.navbar img { + padding-top: 10px; + width: 35px; +} +.navbar .search-icon, .navbar .settings-icon { + padding-top: 20px; +} + diff --git a/1-exercise-solutions/twitter-default-page-clone/styles/sidebar2.css b/1-exercise-solutions/twitter-default-page-clone/styles/sidebar2.css new file mode 100644 index 0000000..85a5023 --- /dev/null +++ b/1-exercise-solutions/twitter-default-page-clone/styles/sidebar2.css @@ -0,0 +1,122 @@ + +.navbar-2 { + top: 12px; + right: 15px; + position: fixed; +} + +.first-navbar2-sidebar { + border: 1px solid rgb(231, 225, 225); + width: 290px; + border-radius: 14px; + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 15px; +} + +.new-to-twitter { + font-family: Verdana, Geneva, Tahoma, sans-serif; + margin: 5px auto auto 15px; + font-weight: 600; + font-size: 18px; +} + +.signup-text { + padding-top: 7px; + font-family: Roboto; + font-size: 14px; + margin: 5px auto auto 15px; + width: 270px; +} + +.navbar-2 img { + width: 20px; +} + +.buttons { + margin-top: 5px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + width: 245px; +} + +.signin-button { + font-family: Roboto; + margin-top: 10px; + border: 1px solid lightgrey; + border-radius: 20px; + background-color: white; + height: 35px; + font-size: 15px; +} + +.signin-button a { + text-decoration: none; + color: black; +} + +.buttons button { + transition: background-color 0.15s; +} + +.buttons button:hover { + background-color: rgba(211, 211, 211, 0.39); +} + +.signin-button span { + position: relative; + bottom: 3px; +} +.signin-button img { + position: relative; + top: 1px; +} +.buttons button:nth-child(2), +.buttons button:nth-child(3) { + font-weight: bold; +} + +.Privacy-Policy { + padding-top: 1px; + font-family: Roboto; + font-size: 12px; + margin: 5px auto auto 15px; + width: 270px; +} +.Privacy-Policy a, .tweet-text span { + text-decoration: none; + color: rgb(90, 138, 240); +} + +.Privacy-Policy a:hover { + text-decoration: underline; +} + +.second-navbar2-sidebar { + margin-top: 15px; + width: 270px; + grid-template-rows: 20px 10px; + display: grid; +} +.second-navbar2-sidebar span { + display: flex; + font-size: 13px; + width: 180px; + white-space: nowrap; +} + +.second-navbar2-sidebar span div { + margin-left: 10px; +} + +.second-navbar2-sidebar span div a { + text-decoration: none; + color: rgb(124, 118, 118); +} + +.second-navbar2-sidebar span div a:hover { + text-decoration: underline; + color: rgb(124, 118, 118); +}