diff --git a/1-exercise-solutions/instagram-project/icons/Instagram_Stories_ring.svg b/1-exercise-solutions/instagram-project/icons/Instagram_Stories_ring.svg new file mode 100644 index 0000000..669e30b --- /dev/null +++ b/1-exercise-solutions/instagram-project/icons/Instagram_Stories_ring.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/1-exercise-solutions/instagram-project/icons/Thumbs.db b/1-exercise-solutions/instagram-project/icons/Thumbs.db new file mode 100644 index 0000000..8db7b98 Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/Thumbs.db differ diff --git a/1-exercise-solutions/instagram-project/icons/chat.png b/1-exercise-solutions/instagram-project/icons/chat.png new file mode 100644 index 0000000..5057532 Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/chat.png differ diff --git a/1-exercise-solutions/instagram-project/icons/compass.png b/1-exercise-solutions/instagram-project/icons/compass.png new file mode 100644 index 0000000..011a964 Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/compass.png differ diff --git a/1-exercise-solutions/instagram-project/icons/heart.png b/1-exercise-solutions/instagram-project/icons/heart.png new file mode 100644 index 0000000..bbf0d9f Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/heart.png differ diff --git a/1-exercise-solutions/instagram-project/icons/home.png b/1-exercise-solutions/instagram-project/icons/home.png new file mode 100644 index 0000000..88a94be Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/home.png differ diff --git a/1-exercise-solutions/instagram-project/icons/icons8-ellipsis-90.png b/1-exercise-solutions/instagram-project/icons/icons8-ellipsis-90.png new file mode 100644 index 0000000..0f24db1 Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/icons8-ellipsis-90.png differ diff --git a/1-exercise-solutions/instagram-project/icons/illo-confirm-refresh-light.png b/1-exercise-solutions/instagram-project/icons/illo-confirm-refresh-light.png new file mode 100644 index 0000000..ede73d2 Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/illo-confirm-refresh-light.png differ diff --git a/1-exercise-solutions/instagram-project/icons/instagram-text-logo.png b/1-exercise-solutions/instagram-project/icons/instagram-text-logo.png new file mode 100644 index 0000000..8dbd66a Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/instagram-text-logo.png differ diff --git a/1-exercise-solutions/instagram-project/icons/instagram.png b/1-exercise-solutions/instagram-project/icons/instagram.png new file mode 100644 index 0000000..105b6bf Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/instagram.png differ diff --git a/1-exercise-solutions/instagram-project/icons/menu.png b/1-exercise-solutions/instagram-project/icons/menu.png new file mode 100644 index 0000000..c8f355e Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/menu.png differ diff --git a/1-exercise-solutions/instagram-project/icons/noun-search-3184147.svg b/1-exercise-solutions/instagram-project/icons/noun-search-3184147.svg new file mode 100644 index 0000000..fd6f1d9 --- /dev/null +++ b/1-exercise-solutions/instagram-project/icons/noun-search-3184147.svg @@ -0,0 +1,4 @@ + + + + diff --git a/1-exercise-solutions/instagram-project/icons/save-instagram.png b/1-exercise-solutions/instagram-project/icons/save-instagram.png new file mode 100644 index 0000000..059ad8b Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/save-instagram.png differ diff --git a/1-exercise-solutions/instagram-project/icons/search-interface-symbol.png b/1-exercise-solutions/instagram-project/icons/search-interface-symbol.png new file mode 100644 index 0000000..9075295 Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/search-interface-symbol.png differ diff --git a/1-exercise-solutions/instagram-project/icons/send.png b/1-exercise-solutions/instagram-project/icons/send.png new file mode 100644 index 0000000..13c7bb2 Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/send.png differ diff --git a/1-exercise-solutions/instagram-project/icons/svgexport-9.svg b/1-exercise-solutions/instagram-project/icons/svgexport-9.svg new file mode 100644 index 0000000..04a4bbb --- /dev/null +++ b/1-exercise-solutions/instagram-project/icons/svgexport-9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-exercise-solutions/instagram-project/icons/tab.png b/1-exercise-solutions/instagram-project/icons/tab.png new file mode 100644 index 0000000..048f84b Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/tab.png differ diff --git a/1-exercise-solutions/instagram-project/icons/user.png b/1-exercise-solutions/instagram-project/icons/user.png new file mode 100644 index 0000000..8cb805a Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/user.png differ diff --git a/1-exercise-solutions/instagram-project/icons/video.png b/1-exercise-solutions/instagram-project/icons/video.png new file mode 100644 index 0000000..5e6a4cc Binary files /dev/null and b/1-exercise-solutions/instagram-project/icons/video.png differ diff --git a/1-exercise-solutions/instagram-project/images/Thumbs.db b/1-exercise-solutions/instagram-project/images/Thumbs.db new file mode 100644 index 0000000..a65ffa3 Binary files /dev/null and b/1-exercise-solutions/instagram-project/images/Thumbs.db differ diff --git a/1-exercise-solutions/instagram-project/images/banner-index.jpg b/1-exercise-solutions/instagram-project/images/banner-index.jpg new file mode 100644 index 0000000..2b5ea60 Binary files /dev/null and b/1-exercise-solutions/instagram-project/images/banner-index.jpg differ diff --git a/1-exercise-solutions/instagram-project/images/dog2.jpg b/1-exercise-solutions/instagram-project/images/dog2.jpg new file mode 100644 index 0000000..7a0ffe8 Binary files /dev/null and b/1-exercise-solutions/instagram-project/images/dog2.jpg differ diff --git a/1-exercise-solutions/instagram-project/images/profile-pic.jpg b/1-exercise-solutions/instagram-project/images/profile-pic.jpg new file mode 100644 index 0000000..3580ac1 Binary files /dev/null and b/1-exercise-solutions/instagram-project/images/profile-pic.jpg differ diff --git a/1-exercise-solutions/instagram-project/index.html b/1-exercise-solutions/instagram-project/index.html new file mode 100644 index 0000000..5340735 --- /dev/null +++ b/1-exercise-solutions/instagram-project/index.html @@ -0,0 +1,509 @@ + + + Instagram main page clone + + + + + + + + + + + +
+ + +
+
+ +
+
+ +
+
+ +
+ + + +
+
+
+
+ + +
supersimpl
+
+
+ + +
supersimpl
+
+
+ + +
supersimpl
+
+
+ + +
supersimpl
+
+
+ + +
supersimpl
+
+
+ + +
supersimpl
+
+
+ + +
supersimpl
+
+
+ + + > +
supersimpl
+
+
+ +
+ +
+ +
+ +
+ + +
+ SuperSimpleDev · 1d +
+
Original audio
+
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ +
+ + + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus numquam, magni laborum voluptas odio molestiae hic illum... + more +
+ +
+ View all 125 comments +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ + +
+ SuperSimpleDev · 1d +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ +
+ + + + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus numquam, magni laborum voluptas odio molestiae hic illum... + more +
+ +
+ View all 125 comments +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
You're all caught up
+
You've seen all new posts from the past 3 days.
+ View older posts +
+
+ +
+ +
+ +
+ + +
+ SuperSimpleDev · 1d +
+
Original audio
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ +
+ + + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus numquam, magni laborum voluptas odio molestiae hic illum... + more +
+ +
+ View all 125 comments +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ + +
+ SuperSimpleDev · 1d +
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ + + +
+ +
+ +
+ +
+ + + + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus numquam, magni laborum voluptas odio molestiae hic illum... + more +
+ +
+ View all 125 comments +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ + + + +
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/1-exercise-solutions/instagram-project/styles/general.css b/1-exercise-solutions/instagram-project/styles/general.css new file mode 100644 index 0000000..14d823f --- /dev/null +++ b/1-exercise-solutions/instagram-project/styles/general.css @@ -0,0 +1,6 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); +body { + padding-bottom: 2000px; + margin: 0; + font-family: Roboto; +} \ No newline at end of file diff --git a/1-exercise-solutions/instagram-project/styles/middle-page.css b/1-exercise-solutions/instagram-project/styles/middle-page.css new file mode 100644 index 0000000..6e7e3a6 --- /dev/null +++ b/1-exercise-solutions/instagram-project/styles/middle-page.css @@ -0,0 +1,214 @@ +.middle-page { + position: relative; + padding-left: 231px; +} +.stories { + padding-top: 45px; + padding-left: 0px; + width: 720px; + height: 120px; + display: flex; + justify-content: center; +} +.story { + padding: 0px 10px 0px 10px; + position: relative; + width: 60px; + display: flex; + align-items: center; + flex-direction: column; +} +.story-ring { + width: 60px; +} +.profile-picture { + position: absolute; + width: 53px; + top: 4px; + border-radius: 25px; +} +.profile-name { + padding-top: 6px; + font-size: 13px; +} +/* Again, since the elements have the same class name, i put 'style="position: relative;"' only inside the last HTML element that includes the icon, aka 'more stories' */ +.more-stories { + position: absolute; + background-color: rgba(255, 255, 255, 0.89); + color: rgba(0, 0, 0, 0.336); + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + top: 20px; + right: 25px; + padding: 1px 4.75px; + border-radius: 10px; +} + +.spacing { + margin-top: 1px; + margin-bottom: 1px; +} + +.posts-container { + width: 490px; + margin-left: 115px; + position: relative; + border-bottom: 1px solid rgb(214, 212, 212); + padding-bottom: 15px; + padding-top: 20px; +} +.post-header { + width: 490px; + height: 45px; + display: flex; + justify-content: space-between; +} +.left-section { + position: relative; + top: 3px; + left: 3px; + display: flex; + flex-direction: column; +} +.post-ring { + position: absolute; + width: 38px; + border-radius: 32px; +} +.posts-profile-picture { + position: absolute; + width: 34px; + border-radius: 32px; + top: 2.4px; + left: 2.1px; +} +.post-author { + margin-left: 45px; + /* + display: grid; + grid-template-columns: 120px 150px; */ +} +#single-post-author { + margin-top: 10px; +} +.optional-tag { + margin-left: 45px; +} +.right-section img { + width: 16px; + position: absolute; + top: 34px; + right: 8px; +} +#favourite { + position: absolute; + right: 40px; +} +.post-content { + margin-top: 7px; + width: 490px; +} + +.post-image img { + border-radius: 5px; + width: 490px; + object-fit: cover; + height: 500px; +} + +.post-actions-icons { + padding-top: 6px; + width: 490px; +} + +.post-actions-icons { + display: flex; + justify-content: space-between; +} + +.post-actions-icons img { + width: 20px; +} + +.likes-summary { + padding-top: 10px; + display: flex; + width: 235px; +} + +.likes-summary div { + font-size: 12px; +} + +.likes-summary img { + width: 17px; + border-radius: 10px; + margin-right: 10px; +} + +.post-description { + display: flex; + flex-direction: column; + margin-top: 11px; +} + +.post-description a { + border: none; + width: 45px; + background-color: none; + text-decoration: none; + color: rgb(180, 180, 180); +} + +.view-comments, .add-comment { + padding-top: 11px; +} +.view-comments a { + text-decoration: none; + color: rgb(180, 180, 180); + font-size: 14px; +} + +.add-comment { + color: rgb(180, 180, 180); + font-size: 14px; + display: flex; + justify-content: space-between; +} +.add-comment a { + text-decoration: none; + color: rgb(180, 180, 180); + font-size: 14px; +} +.add-comment img { + width: 15px; +} + +.all-caught-up-container { + padding-bottom: 50px; + margin-top: 40px; + width: 490px; + margin-left: 115px; + border-bottom: 1px solid rgb(214, 212, 212); +} +.all-caught-up { + line-height: 25px; + text-align: center; + align-items: center; + display: flex; + flex-direction: column; +} +.all-caught-up img { + width: 100px; + margin-bottom: 15px; +} +/* all-caught-up */ #headline { + font-size: 19px; +} +/* all-caught-up */ #text { + font-size: 15px; + color: grey; +} +.all-caught-up a { + color: rgb(0, 149, 246); + text-decoration: none; +} diff --git a/1-exercise-solutions/instagram-project/styles/mobile-footer-menu.css b/1-exercise-solutions/instagram-project/styles/mobile-footer-menu.css new file mode 100644 index 0000000..ae9696b --- /dev/null +++ b/1-exercise-solutions/instagram-project/styles/mobile-footer-menu.css @@ -0,0 +1,25 @@ +.footer { + border-top: 1px solid rgb(214, 212, 212); + background-color: white; + z-index: 400; + height: 50px; + position: fixed; + bottom: 0; + right: 0; + left: 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.footer-images { + margin-right: 20px; + margin-left: 20px; +} +.footer-images img { + width: 25px; +} +@media (min-width: 805px) { + .footer { + display: none; + } +} \ No newline at end of file diff --git a/1-exercise-solutions/instagram-project/styles/mobile-header-menu.css b/1-exercise-solutions/instagram-project/styles/mobile-header-menu.css new file mode 100644 index 0000000..128b380 --- /dev/null +++ b/1-exercise-solutions/instagram-project/styles/mobile-header-menu.css @@ -0,0 +1,39 @@ + +.header { + z-index: 200; + width: 100%; + background-color: white; + top: 0; + right: 0; + left: 0; + position: fixed; + height: 60px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgb(214, 212, 212);; +} +.instagram-mobile-logo img { + width: 110px; +} +.icon img { + width: 27px; + margin-right: 15px; +} +.section-right { + display: flex; + align-items: center; +} + +.input input { + margin-right: 15px; + border-radius: 5px; + background-color: rgb(239, 239, 239); + border: none; + padding: 10px 85px 10px 10px; +} +@media (min-width: 805px) { + .header { + display: none; + } +} diff --git a/1-exercise-solutions/instagram-project/styles/responsive.css b/1-exercise-solutions/instagram-project/styles/responsive.css new file mode 100644 index 0000000..43e747e --- /dev/null +++ b/1-exercise-solutions/instagram-project/styles/responsive.css @@ -0,0 +1,163 @@ + +@media (min-width: 1277px) { + .instagram-logo1 { + display: none; + } + +} + +@media (max-width: 1160px) { + .middle-page { + position: relative; + margin-left: 130px; + } + .sidebar2 { + display: none; + } + +} + +@media (max-width: 920px) { + .middle-page { + margin-left: 30px; + } + +} + +@media (max-width: 740px) { + .middle-page { + position: relative; + margin-left: 10px; + } + .sidebar1 { + display: none; + } +} + +@media (max-width: 1304px) { + .middle-page { + padding-left: 211px; + } +} + +@media (max-width: 1277px) { + .sidebar1 { + width: 70px; + } + .nav-text { + display: none; + } + .instagram-logo2 { + display: none; + } + + /* middle page responsivness */ + + .middle-page { + position: relative; + padding-left: 60px; + } +} + +@media (max-width: 805px) { + .middle-page { + position: relative; + padding-left: 1px; + margin-top: 50px; + } + .sidebar1 { + display: none; + } +} +@media (max-width: 703px) { + .posts-container { + margin-left: 50px; + } + .stories { + width: 580px; + } + .story { + padding: 0px 5px 0px 5px; + position: relative; + width: 60px; + display: flex; + align-items: center; + flex-direction: column; + } + .story-ring { + width: 50px; + } + .profile-picture { + position: absolute; + width: 43px; + top: 4px; + border-radius: 25px; + } + .profile-name { + padding-top: 6px; + font-size: 13px; + } +} +@media (max-width: 600px) { + .posts-container { + margin-left: 5px; + padding-top: 10px; + } + .stories { + width: 460px; + height: 90px; + } + .story { + padding: 0px 5px 0px 5px; + position: relative; + width: 45px; + display: flex; + align-items: center; + flex-direction: column; + } + .story-ring { + width: 35px; + } + .profile-picture { + position: absolute; + width: 28px; + top: 4px; + border-radius: 25px; + } + .profile-name { + padding-top: 6px; + font-size: 9.5px; + } + .more-stories { + position: absolute; + background-color: rgba(255, 255, 255, 0.89); + color: rgba(0, 0, 0, 0.336); + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + top: 9px; + right: 13px; + font-size: 12.5px; + padding: 1px 4.75px; + border-radius: 10px; + } + .posts-container { + width: 450px; + } + .post-image img { + border-radius: 5px; + width: 450px; + object-fit: cover; + height: 500px; + } + .all-caught-up-container { + padding-bottom: 50px; + margin-top: 40px; + width: 280px; + border-bottom: 1px solid rgb(214, 212, 212); + margin-bottom: 20px; + } + .right-section img { + top: 14px; + right: 8px; + } +} + diff --git a/1-exercise-solutions/instagram-project/styles/sidebar1.css b/1-exercise-solutions/instagram-project/styles/sidebar1.css new file mode 100644 index 0000000..b3d39ac --- /dev/null +++ b/1-exercise-solutions/instagram-project/styles/sidebar1.css @@ -0,0 +1,58 @@ +.sidebar1 { + background-color: white; + border-right: 1px solid rgb(224, 216, 216); + width: 230px; + position: fixed; + display: flex; + top: 0; + bottom: 0; + flex-direction: column; +} + +.instagram-logo1 img { + width: 35px; + margin-left: 20px; + padding-top: 10px; + padding-bottom: 10px; +} + +.instagram-logo2 img { + width: 100px; + margin-left: 25px; +} + +.nav-element { + display: flex; +} + +.nav-element img { + margin-left: 25px; + width: 27px; + padding-bottom: 18.5px; +} + +.nav-text { + margin-left: 15px; + margin-top: 5px; + font-family: Arial, Helvetica, sans-serif; +} + +/* since the elements have the same class name, i put 'style="position: relative;"' only inside the elements with a alert, aka the red spans */ +.messages-count { + position: absolute; + top: -3px; + left: 44px; + padding: 1px 5px; + color: white; + font-size: 12px; + border-radius: 20px; + background-color: rgb(228, 60, 60); +} +.notificationst-alert { + width: 8px; + height: 8px; + border-radius: 4px; + background-color: rgb(228, 60, 60); + position: absolute; + left: 46px; +} \ No newline at end of file diff --git a/1-exercise-solutions/instagram-project/styles/sidebar2.css b/1-exercise-solutions/instagram-project/styles/sidebar2.css new file mode 100644 index 0000000..682a740 --- /dev/null +++ b/1-exercise-solutions/instagram-project/styles/sidebar2.css @@ -0,0 +1,111 @@ +.sidebar2 { + position: absolute; + right: 0; + top: 0; + right: 15px; + margin-right: 20px; + width: 340px; +} +.first-sidebar2 { + padding-top: 50px; +} +.account-indicator { + display: grid; + grid-template-columns: 80px 1fr 56px; + justify-content: space-between; +} +.account-indicator img { + margin-left: 12px; + width: 55px; + border-radius: 40px; + border: 1px solid rgb(179, 169, 169); +} +.account-info, .switch { + font-size: 16px; + display: flex; + flex-direction: column; + justify-content: center; +} +.account-info { + line-height: 20px; +} +.switch a { + font-size: 12px; + text-decoration: none; + color: rgb(49, 142, 218); +} + +.suggested-for-you { + margin-top: 16px; + margin-bottom: 1px; + display: grid; + grid-template-columns: 150px 56px; + justify-content: space-between; +} + +.sfy-text { /* .suggested-for-you text */ + margin-left: 12px; +} + +.sfy-see { /* .suggested-for-you see all link */ + font-size: 12px; + text-decoration: none; +} +.sfy-see a { + color: black; + font-size: 12px; + text-decoration: none; +} + + +.suggestions img { + width: 35px; + border-radius: 25px; + margin-left: 12px; + border-radius: 40px; + border: 1px solid rgb(179, 169, 169); +} + +.suggestions { + padding-top: 20px; + display: grid; + grid-template-columns: 65px 1fr 56px; + justify-content: space-between; + align-items: center; +} + +.information { + color: rgb(145, 145, 145); + font-size: 12px; +} + +.follow a { + font-size: 12px; + text-decoration: none; + color: rgb(49, 142, 218); +} + +.second-sidebar2 { + padding-top: 30px; + display: grid; + grid-template-rows: 40px 50px; + position: relative; + font-size: 14px; +} +.links-section, .copyright { + width: 360px; + word-wrap: break-word; + font-size: 12px; + color: rgb(185, 180, 180); +} +.links-section a { + text-decoration: none; + font-size: 12px; + color: rgb(185, 180, 180); +} +.links-section a:hover { + text-decoration: underline; +} +.copyright { + padding-top: 12px; +} \ No newline at end of file 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); +}