diff --git a/images/icons8-twitter-32.png b/images/icons8-twitter-32.png new file mode 100644 index 0000000..bd4a5cb Binary files /dev/null and b/images/icons8-twitter-32.png differ diff --git a/images/post-img-1.jpg b/images/post-img-1.jpg new file mode 100644 index 0000000..fdd194e Binary files /dev/null and b/images/post-img-1.jpg differ diff --git a/images/post-img-2.jpg b/images/post-img-2.jpg new file mode 100644 index 0000000..85b4297 Binary files /dev/null and b/images/post-img-2.jpg differ diff --git a/images/post-img-3.jpg b/images/post-img-3.jpg new file mode 100644 index 0000000..ac021dc Binary files /dev/null and b/images/post-img-3.jpg differ diff --git a/images/post-img-4.jpg b/images/post-img-4.jpg new file mode 100644 index 0000000..279e265 Binary files /dev/null and b/images/post-img-4.jpg differ diff --git a/images/post-img-5.jpg b/images/post-img-5.jpg new file mode 100644 index 0000000..c7d6812 Binary files /dev/null and b/images/post-img-5.jpg differ diff --git a/images/user1.jpg b/images/user1.jpg new file mode 100644 index 0000000..1770055 Binary files /dev/null and b/images/user1.jpg differ diff --git a/images/user2.jpg b/images/user2.jpg new file mode 100644 index 0000000..035fecc Binary files /dev/null and b/images/user2.jpg differ diff --git a/images/user3.jpg b/images/user3.jpg new file mode 100644 index 0000000..1694ed0 Binary files /dev/null and b/images/user3.jpg differ diff --git a/images/user4.jpg b/images/user4.jpg new file mode 100644 index 0000000..4cb37e9 Binary files /dev/null and b/images/user4.jpg differ diff --git a/images/user5.jpg b/images/user5.jpg new file mode 100644 index 0000000..7ee899f Binary files /dev/null and b/images/user5.jpg differ diff --git a/images/user6.jpg b/images/user6.jpg new file mode 100644 index 0000000..33676b1 Binary files /dev/null and b/images/user6.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c01bf12 --- /dev/null +++ b/index.html @@ -0,0 +1,470 @@ + + + + + + + + + + + + Twitter Clone + + + +
+ +
+
+
+ +

Find your interests

+
+
+ +

+ Explorer what people are talking about +

+
+
+ +

Join the people

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

Explore what's happening in the world

+

Join Twitter Today

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

The username and password you entered did not match our records. + Please double check and try again. +

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

Home

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

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut + facere iste quo, nostrum voluptatem saepe accusamus deleniti, + possimus quae corporis eaque perferendis fugit, sunt tenetur + corrupti cupiditate voluptas in consequatur! +

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

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut + facere iste quo, nostrum voluptatem saepe accusamus deleniti, + possimus quae corporis eaque perferendis fugit, sunt tenetur + corrupti cupiditate voluptas in consequatur! +

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

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut + facere iste quo, nostrum voluptatem saepe accusamus deleniti, + possimus quae corporis eaque perferendis fugit, sunt tenetur + corrupti cupiditate voluptas in consequatur! +

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

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut + facere iste quo, nostrum voluptatem saepe accusamus deleniti, + possimus quae corporis eaque perferendis fugit, sunt tenetur + corrupti cupiditate voluptas in consequatur! +

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

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut + facere iste quo, nostrum voluptatem saepe accusamus deleniti, + possimus quae corporis eaque perferendis fugit, sunt tenetur + corrupti cupiditate voluptas in consequatur! +

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

Account info

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

+ 711 Following +

+

+ 7.7K Followers +

+
+
+ +
+
+ +
+ + +
+

Dark mode

+
+
+ +
+
+
+ +
+
+ +
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7bfafe1 --- /dev/null +++ b/script.js @@ -0,0 +1,132 @@ +// DOM Elements +const mainPage = document.querySelector('.main-page'); +const loginPage = document.querySelector('.login-page'); +const middleContent = document.querySelector('.middle-content'); +const btnTop = document.querySelector('.btn-top'); +const newsFeedPage = document.querySelector('.feeds-page'); +const loginModal = document.querySelector('.login-modal'); +const modalX = document.querySelector('.login-modal i'); +const loginFormBtn = document.querySelector('.login-form-btn'); +const postBtn = document.querySelector('.post-btn'); +const modalWrapper = document.querySelector('.modal-wrapper'); +const modal = document.querySelector('.modal'); +const postModalX = document.querySelector('.modal-header i'); +const modalPostBtn = document.querySelector('.modal-header button'); +const modalFooterPlus = document.querySelector('.modal-footer span'); +const modalInput = document.querySelector('.modal-input'); +const user = document.querySelector('.user'); +const sidebar = document.querySelector('.sidebar'); +const sidebarWrapper = document.querySelector('.sidebar-wrapper'); +const xBtn = document.querySelector('.sidebar-header i'); +const toggle = document.querySelector('.toggle'); +const circle = document.querySelector('.circle'); + +const goToLoginPage = () => { + mainPage.style.display = 'none'; + loginPage.style.display = 'grid'; +}; + +middleContent.addEventListener('click', e => { + + if (e.target.classList[1] === 'main-btn') { + goToLoginPage(); + } +}); + +btnTop.addEventListener('click', () => { + const inputUserInfo = document.querySelector('.user-info'); + const inputPassword = document.querySelector('.password'); + + if (inputUserInfo.value !== "" && inputPassword.value !== "") { + mainPage.style.display = 'none'; + newsFeedPage.style.display = 'block'; + } else { + goToLoginPage(); + loginModal.style.display = 'block'; + } +}); + +//login page +modalX.addEventListener('click', () => { + loginModal.style.display = 'none'; +}) + +loginFormBtn.addEventListener('click', () => { + const loginUserInfo = document.querySelector('.login-user-info'); + const loginPassword = document.querySelector('.login-password'); + + if(loginUserInfo.value !== "" && loginPassword !== ""){ + loginPage.style.display = 'none'; + newsFeedPage.style.display = 'block'; + } else { + loginModal.style.display = 'block'; + } +}) + +//News feed page +// Post modal +postBtn.addEventListener('click', () => { + modal.style.display = 'block'; + modalWrapper.classList.add('modal-wrapper-display'); +}); + +const changeOpacity = (x) => { + modalPostBtn.style.opacity = x; + modalFooterPlus.style.opacity = x; +}; + +postModalX.addEventListener('click', () => { + modal.style.display = 'none'; + modalWrapper.classList.remove('modal-wrapper-display'); + + if(modalInput.value !== ""){ + modalInput.value = ""; + changeOpacity(0.5); + } +}); + +modalInput.addEventListener('keypress', (e) => { + if (e.target.value !== '') { + changeOpacity(1); + } +}); + +modalInput.addEventListener('blur', (e) => { + if(e.target.value === ''){ + changeOpacity(0.5); + } +}); + +// Sidebar +user.addEventListener('click', () => { + sidebar.classList.add('sidebar-display'); + sidebarWrapper.classList.add('sidebar-wrapper-display'); +}); + +xBtn.addEventListener('click', () => { + sidebar.classList.remove('sidebar-display'); + sidebarWrapper.classList.remove('sidebar-wrapper-display'); +}); + +//dark mode +const darkElements1 = document.querySelectorAll('.dark-mode-1'); +const darkElements2 = document.querySelectorAll('.dark-mode-2'); +const lightTexts = document.querySelectorAll('.light-text'); +const borders = document.querySelectorAll('.border'); + +toggle.addEventListener('click', () => { + circle.classList.toggle('move'); + Array.from(darkElements1).map((darkEl1) => darkEl1.classList.toggle('dark-1')); + Array.from(darkElements2).map((darkEl2) => darkEl2.classList.toggle('dark-2')); + Array.from(lightTexts).map(lightText => lightText.classList.toggle('light')); + Array.from(borders).map(border => border.classList.toggle('border-color')); + +}); + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..0875c7d --- /dev/null +++ b/style.css @@ -0,0 +1,1420 @@ +/* common style */ +* { + margin: 0; + padding: 0; + font-family: "Josefin Sans", sans-serif; + outline: none; +} + +html { + font-size: 62.5%; +} + +body { + background-color: #f0f8fd; +} +/* end of common style */ + +/* main page */ +.main-page { + width: 100%; + height: 100vh; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr min-content; +} +/* left*/ +.left { + grid-column: 1 / 2; + grid-row: 1 / 2; + background-color: #1aa1f5; + display: flex; + justify-content: center; + align-items: center; +} + +.left-content div { + display: flex; + align-items: center; + margin: 4rem; + color: #ffff; +} + +.left-content i { + font-size: 3rem; + margin-right: 2rem; +} + +.left-content-heading { + font-size: 2rem; +} +/* end of left*/ + +/* right*/ +.right { + grid-column: 2 / -1; + grid-row: 1 / 2; + position: relative; +} + +.right-content-form { + display: flex; + justify-content: center; + margin-top: 3rem; +} + +.right-content-form div { + position: relative; +} + +.right-content-form input { + width: 20rem; + height: 4.5rem; + margin-right: 1rem; + font-size: 1.6rem; + padding: 0 1rem; + border: 0.1rem solid #ddd; + border-radius: 0.5rem; + background-color: #fff; + transition: background-color 0.3s; +} + +.right-content-form input:focus { + background-color: #d9ebf7; +} + +.right-content-form label { + position: absolute; + top: 5.5rem; + left: 0; + font-size: 1.6rem; + font-weight: 300; + color: #a7a6a6; +} + +.btn-top { + width: 8rem; + background-color: #fff; + color: #1aa1f5; + border: 0.1rem solid #1aa1f5; + border-radius: 3rem; + font-size: 1.4rem; + font-weight: bold; + cursor: pointer; + transition: background-color 0.3s; +} + +.btn-top:hover { + background-color: #d9ebf7; +} + +.middle-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + width: 40%; +} + +.middle-content i { + font-size: 4rem; + color: #1aa1f5; + margin-bottom: 2rem; +} + +.middle-content h1 { + font-size: 2.8rem; + margin-bottom: 4rem; + line-height: 4rem; +} + +.middle-content h4 { + font-size: 2rem; + margin-bottom: 2rem; +} + +.middle-content button { + margin: 0.8rem 0; + padding: 0.5rem; + border: 0.1rem solid #1aa1f5; + border-radius: 4rem; + font-size: 1.6rem; + cursor: pointer; + transition: background-color 0.3s; +} + +.sign-up { + background-color: #1aa1f5; + color: #fff; +} + +.sign-up:hover { + background-color: #0f5d8d; +} + +.log-in { + background-color: #fff; +} + +.log-in:hover { + background-color: #d9ebf7; +} + +/* end of right*/ + +/* footer*/ +.main-page-footer { + grid-column: 1 / -1; + grid-row: 2 / -1; + background-color: #f5f4f4; + padding: 1.5rem; + border-top: 0.1rem solid #ddd; +} + +.main-page-footer ul { + display: flex; + justify-content: center; + list-style: none; +} + +.main-page-footer a { + font-size: 1.6rem; + margin: 0 2rem; + text-decoration: none; + color: #444; + font-weight: 300; +} +/* end of footer*/ + +.login-page { + width: 100%; + height: 100vh; + display: none; + grid-template-columns: minmax(5rem, 1fr) 2fr minmax(5rem, 1fr); + grid-template-rows: repeat(2, min-content) 1fr; + grid-row-gap: 1.5rem; +} + +/* login page nav */ +.login-page-nav { + grid-column: 1 / -1; + grid-row: 1 / 2; + background-color: #fff; + padding: 2.5rem 0; + box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.3); + z-index: 1; +} + +.login-page-nav ul { + width: 100rem; + margin: auto; + display: flex; + align-items: flex-end; + list-style: none; +} + +.login-page-nav li { + margin: 0 1rem; + position: relative; +} + +.login-page-nav li:last-child { + margin-left: auto; +} + +.login-page-nav li::after { + content: ""; + width: 100%; + height: 0.4rem; + background-color: #1aa1f5; + position: absolute; + bottom: -2.5rem; + left: 0; + opacity: 0; + transition: opacity 0.3s; +} + +.login-page-nav li:hover::after { + opacity: 1; +} + +.login-page-nav a { + font-size: 1.6rem; + text-decoration: none; + color: #555; + transition: color 0.3s; +} + +.login-page-nav li:hover a { + color: #1aa1f5; +} + +.login-page-nav i { + color: #1aa1f5; + font-size: 2rem; +} +/* end of login page nav */ + +/* login */ +.login { + grid-column: 2 / 3; + grid-row: 2 / 3; + background-color: #fff; + width: 100rem; + margin: 2.5rem auto; + display: grid; + grid-template-columns: 10rem 8fr; + grid-template-rows: 2fr 1fr; + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); +} + +.login-content { + grid-column: 2 / -1; + grid-row: 1 / 2; + padding: 5rem 0 1rem 0; +} + +.login-content h2 { + font-size: 2.4rem; + margin-bottom: 3rem; +} + +.login-form { + display: flex; + flex-direction: column; +} + +.login-form input:not(.login-form-checkbox) { + width: 30rem; + height: 3.5rem; + margin-bottom: 1rem; + border: 0.1rem solid #ddd; + border-radius: 0.5rem; + padding-left: 1rem; + font-size: 1.5rem; + transition: background-color 0.3s; +} + +.login-form input:focus { + background-color: #d9ebf7; +} + +.login-form div { + margin-top: 2rem; +} + +.login-form button { + padding: 1rem 1.5rem; + background-color: #1aa1f5; + color: #fff; + border-radius: 4rem; + border: 0.1rem solid #1aa1f5; + font-size: 1.5rem; + font-weight: bold; + margin-right: 1rem; + cursor: pointer; +} + +.login-form label { + font-size: 1.6rem; + font-weight: 300; + margin-right: 1rem; +} + +.login-form a { + text-decoration: none; + font-size: 1.6rem; + color: #1aa1f5; +} + +.login-footer { + grid-column: 1 / -1; + grid-row: 2 / -1; + background-color: #edf3f7; + padding-left: 100px; + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 2rem; +} + +.login-footer p { + font-size: 1.6rem; + font-weight: 300; + margin: 0.5rem 0; +} + +.login-footer a { + text-decoration: none; + color: #1aa1f5; +} +/* end of login */ + +/*Login modal*/ +.login-modal { + position: fixed; + top: 11.5rem; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + width: 70rem; + padding: 2rem; + text-align: center; + box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.3); + border-radius: 0 0 1rem 1rem; + display: none; +} + +.login-modal i { + position: absolute; + top: 2rem; + right: 2rem; + font-size: 1.3rem; + color: #868383; + cursor: pointer; +} + +.login-modal p { + margin: 2rem 1rem 0 1rem; + font-size: 1.6rem; + color: #868383; +} +/*end of Login modal*/ +/* end of main page */ + +/* feeds page */ +.feeds-page { + width: 100%; + height: 100vh; + display: none; +} + +/* feeds nav */ +.feeds-nav { + position: fixed; + width: 100%; + height: 6.5rem; + background-color: #fff; + display: flex; + justify-content: center; + box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.3); +} + +.icons { + display: flex; + align-items: center; +} + +.icons a { + text-decoration: none; + margin-right: 7rem; + font-size: 2.5rem; + color: #9e9a9a; +} + +.icons .active { + color: #1aa1f5; +} + +.search-bar { + display: flex; + align-items: center; + position: relative; +} + +.search-bar-input { + width: 35rem; + height: 3rem; + border: 0.1rem solid #d6e1e9; + border-radius: 3rem; + background-color: #d6e1e9; + padding-left: 5rem; + transition: all 0.3s; +} + +.search-bar-input:focus { + background-color: #fff; + border-color: #1aa1f5; +} + +.search-bar i { + position: absolute; + font-size: 1.6rem; + left: 1.5rem; + color: #9e9a9a; +} + +.user { + margin-left: 3rem; + display: flex; + align-items: center; + cursor: pointer; +} + +.user-img-wrapper { + width: 4rem; + height: 4rem; +} + +.user-img-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.user-link { + margin: 0 1rem; + text-decoration: none; + font-size: 1.8rem; + color: #444; +} + +.user i { + color: #444; + font-size: 1.6rem; +} +/* end of feeds nav */ + +/* feeds content */ +.feeds-content { + display: grid; + grid-template-columns: minmax(5rem, 1fr) 60rem 40rem minmax(5rem, 1fr); + grid-template-rows: repeat(2, min-content); + padding-top: 6.5rem; +} + +.feeds-header { + grid-column: 2 / 3; + grid-row: 1 / 2; + background-color: #fff; + margin-top: 1.5rem; +} + +.header-top { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 0.1rem solid #eee; + padding: 1.5rem; +} + +.header-top h4 { + font-size: 2.2rem; +} + +.header-top i { + font-size: 2rem; + color: #1aa1f5; +} + +.header-post { + display: flex; + align-items: center; + padding: 1rem; + border-bottom: 0.1rem solid #eee; +} + +.header-img-wrapper { + width: 4rem; + height: 4rem; + margin-right: 1.5rem; +} + +.header-img-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.header-post input { + width: 35rem; + height: 3rem; + border: 0.1rem solid #d6e1e9; + border-radius: 3rem; + background-color: #d6e1e9; + padding: 0.4rem 1.5rem; +} + +.header-post i { + font-size: 2.5rem; + color: #1aa1f5; + margin: 1rem; +} + +.posts { + grid-column: 2 / 3; + grid-row: 2 / -1; + background-color: #fff; +} + +.post { + display: flex; + padding: 1.5rem; + border-bottom: 0.1rem solid #eee; +} + +.user-avatar { + width: 6rem; + height: 6rem; + flex-shrink: 0; + margin-right: 1.5rem; +} + +.user-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.post-user-info { + display: flex; + align-items: center; + margin: 1rem 0; +} + +.post-user-info h4 { + font-size: 1.6rem; + margin-right: 0.5rem; +} + +.post-user-info i { + font-size: 1.6rem; + color: #1aa1f5; + margin-right: 0.5rem; +} + +.post-user-info span { + font-size: 1.6rem; +} + +.post-text { + font-size: 1.6rem; + margin-bottom: 1rem; +} + +.post-img { + width: 48rem; + height: 30rem; +} + +.post-img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 1rem; +} + +.post-icons { + margin-top: 1rem; +} + +.post-icons i { + font-size: 1.8rem; + color: #868383; + margin-right: 6rem; +} + +.follow { + position: fixed; + top: 8rem; + left: 57%; + background-color: #fff; + width: 35rem; +} + +.follow-heading { + padding: 1rem; + font-size: 1.8rem; + border-bottom: 0.1rem solid #eee; +} + +.follow-user { + display: flex; + align-items: center; + padding: 1.5rem; + border-bottom: 0.1rem solid #eee; +} + +.follow-user-img { + width: 6rem; + height: 6rem; + margin-right: 2rem; +} + +.follow-user-img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.follow-user-info h4, +.follow-user-info p { + font-size: 1.6rem; + margin-bottom: 0.5rem; +} + +.follow-btn { + margin-left: auto; + width: 9rem; + background-color: #fff; + color: #1aa1f5; + padding: 0.7rem 0.5rem; + border: 0.1rem solid #1aa1f5; + border-radius: 2rem; + font-size: 1.6rem; + cursor: pointer; +} + +.follow-link { + margin: 2rem 1rem; +} + +.follow-link a { + text-decoration: none; + color: #1aa1f5; + font-size: 1.5rem; +} + +.follow-footer { + background-color: #f0f8fd; +} + +.follow-footer ul { + list-style: none; + display: flex; + padding: 2rem 0; +} + +.follow-footer a { + text-decoration: none; + font-size: 1.5rem; + color: #868383; + margin: 0 0.7rem; +} +/* end of feeds content */ + +.post-btn { + position: fixed; + bottom: 2rem; + left: 69%; + width: 12rem; + padding: 1.5rem 1rem; + background-color: #1aa1f5; + color: #fff; + font-size: 2rem; + border: 0.1rem solid #1aa1f5; + border-radius: 3rem; + cursor: pointer; + box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3); + transition: background-color 0.3s; +} + +.post-btn:hover { + background-color: #117abb; +} + +/*post modal*/ +.modal-wrapper { + position: fixed; + background-color: rgba(0, 0, 0, 0.5); + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + visibility: hidden; +} + +.modal-wrapper-display { + opacity: 1; + visibility: visible; +} + +.modal { + width: 60rem; + background-color: #fff; + position: absolute; + top: 25%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 1.5rem; + display: none; +} + +.modal-header { + padding: 1.5rem 2.5rem; + display: flex; + align-items: center; + border-bottom: 0.1rem solid #eee; +} + +.modal-header i { + font-size: 2.4rem; + color: #1aa1f5; + cursor: pointer; +} + +.modal-header button { + margin-left: auto; + width: 8rem; + padding: 0.8rem 0.5rem; + background-color: #1aa1f5; + color: #fff; + font-size: 1.6rem; + border: 0.1rem solid #1aa1f5; + border-radius: 3rem; + opacity: 0.5; +} + +.modal-body { + display: flex; + padding: 2rem 1.5rem 1rem 1.5rem; +} + +.modal-img { + width: 4rem; + height: 4rem; + margin-right: 1.5rem; +} + +.modal-img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.modal-input { + width: 53rem; + padding: 1rem 0 8rem 1rem; + background-color: #d6e1e9; + border: 0.1rem solid #eee; + border-radius: 1.5rem; + font-size: 1.6rem; +} + +.modal-input:focus { + background-color: #fff; + border-color: #1aa1f5; +} + +.modal-body i { + position: absolute; + bottom: 8.5rem; + right: 2.8rem; + font-size: 2rem; + color: #1aa1f5; +} + +.modal-footer { + padding: 0 2rem 2rem 8rem; +} + +.modal-icons { + display: flex; + align-items: center; +} + +.modal-icons i { + margin-right: 2rem; + font-size: 2.7rem; + color: #1aa1f5; +} + +.modal-icons span { + margin-left: auto; + font-size: 5rem; + width: 4rem; + height: 4rem; + border: 0.1rem solid #1aa1f5; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + color: #1aa1f5; + opacity: 0.5; +} +/*end of post modal*/ + +/*sidebar*/ +.sidebar-wrapper { + position: fixed; + background-color: rgba(0, 0, 0, 0.5); + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + visibility: hidden; + transition: all 0.5s; +} + +.sidebar-wrapper-display { + opacity: 1; + visibility: visible; +} + +.sidebar { + position: fixed; + top: 0; + right: -30rem; + width: 30rem; + height: 100vh; + background-color: #fff; + padding: 2.5rem; + box-sizing: border-box; + box-shadow: -0.1rem 0 0.5rem rgba(0, 0, 0, 0.3); + transition: right 0.5s cubic-bezier(1, 0, 0, 1); +} + +.sidebar-display { + right: 0; +} + +.sidebar-header { + display: flex; + align-items: center; + padding-bottom: 1.5rem; + border-bottom: 0.1rem solid #eee; +} + +.sidebar-header h2 { + font-size: 2rem; +} + +.sidebar-header i { + margin-left: auto; + font-size: 2.5rem; + color: #1aa1f5; + cursor: pointer; +} + +.sidebar-user { + display: flex; + align-items: center; + padding-top: 1.5rem; +} + +.sidebar-user-img { + width: 4rem; + height: 4rem; +} + +.sidebar-user-img img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.sidebar-user span { + margin-left: auto; + width: 3.5rem; + height: 3.5rem; + font-size: 5rem; + border: 0.1rem solid #1aa1f5; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + color: #1aa1f5; +} + +.sidebar-user-info { + padding: 1.5rem 0; + font-size: 1.8rem; +} + +.sidebar-user-info h4 { + margin-bottom: 0.5rem; +} + +.following { + display: flex; + padding: 1.5rem 0; +} + +.following-paragraph { + font-size: 1.8rem; +} + +.following-paragraph:first-child { + margin-right: 2.5rem; +} + +.following-paragraph span { + font-weight: bold; +} + +.sidebar-list-1 { + border-bottom: 0.1rem solid #eee; +} + +.sidebar-list-1 ul { + list-style: none; + padding: 1.5rem 0; +} + +.sidebar-list-1 li { + margin-bottom: 2.5rem; +} + +.sidebar-list-1 a { + text-decoration: none; + font-size: 1.6rem; + color: #868383; +} + +.sidebar-list-1 i { + margin-right: 1rem; +} + +.sidebar-list-2 ul { + list-style: none; + padding: 3rem 0; +} + +.sidebar-list-2 li { + margin-bottom: 2.5rem; +} + +.sidebar-list-2 a { + text-decoration: none; + font-size: 1.6rem; + color: #868383; +} + +/* dark mode */ +.dark-mode{ + display: flex; + align-items: center; + +} + +.dark-mode p { + margin-right: 8rem; + font-size: 1.6rem; + color: #868383; +} + +.toggle { + width: 4.5rem; + height: 1.5rem; + background-color: #777; + border-radius: 3rem; + box-shadow: inset 0 0.2rem 1rem rgba(0, 0, 0, 0.3); + position: relative; +} + +.circle { + width: 2rem; + height: 2rem; + background-color: #ddd; + border-radius: 50%; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3); + transition: all 0.2s linear; +} + +.move { + left: 2.5rem; + background-color: #117abb; +} + +.dark-1 { + background-color: #1c2938; +} + +.dark-2 { + background-color: #10171e !important; +} + +.light { + color: #fff; +} + +.border-color { + border-color: #444 !important; +} +/* end of dark mode */ +/*end of sidebar*/ +/* end of feeds page */ + +@media(max-width: 1600px){ + /* news feed page */ + .follow { + left: 58.5%; + } +} + +@media (max-width: 1300px) { + /* main page */ + .middle-content { + width: 60%; + } + + .main-page-footer ul { + flex-wrap: wrap; + } + + .main-page-footer li { + margin-bottom: 1rem; + } + + /* news feed page */ + .follow { + left: 60%; + } +} + +@media(max-width: 1100px) { + /* main page */ + .main-page { + grid-template-columns: 1fr; + grid-template-rows: repeat(2, 1fr) min-content; + } + + .right { + grid-column: 1 / 2; + grid-row: 1 / 2; + width: 70%; + margin: auto; + } + + .right-content-form { + display: none; + } + + .left { + grid-row: 2 / 3; + } + + .left-content { + width: 50%; + margin: auto; + } + + .left-content h3 { + line-height: 3rem; + } + + .main-page-footer { + grid-row: 3 / 4; + } + + /*login page*/ + .login-page-nav ul { + width: 80rem; + } + + .login { + width: 80rem; + } + + .login-modal { + width: 60rem; + } + + /* news feed page */ + .feeds-content { + grid-template-columns: minmax(5rem, 1fr) 2fr minmax(5rem, 1fr); + } + + .search-bar { + display: none; + } + + .follow { + display: none; + } + + .post-btn { + left: 80%; + } + +} + +@media(max-width: 800px) { + /* main page */ + .right { + width: 80%; + } + + .middle-content i { + display: none; + } + + .middle-content h1 { + margin-bottom: 2rem; + } + + .middle-content h4 { + margin-bottom: 1rem; + } + + .left-content { + width: 60%; + } +} + +@media(max-width: 900px){ + /* login page*/ + .login-page-nav ul { + width: 60rem; + } + + .login { + width: 60rem; + } + + .login-modal { + width: 50rem; + } +} + +@media(max-width: 700px){ + /* login page*/ + .login-page-nav ul { + width: 50rem; + } + + .login { + width: 50rem; + } + + .login-modal { + width: 40rem; + } + + /* news feed page */ + .feeds-content { + grid-template-rows: 1fr; + } + + .feeds-header { + grid-column: 1 / -1; + } + + .posts { + grid-column: 1 / -1; + } + + .modal { + width: 90%; + } + + .modal-img { + flex-shrink: 0; + } + + .post-btn { + left: 75%; + font-size: 1.8rem; + width: 11rem; + padding: 1.2rem 0.8rem; + } + + .sidebar-list-1 li, .sidebar-list-2 li { + margin-bottom: 1.5rem; + } +} + +@media(max-width: 600px) { + /* main page*/ + .main-page { + grid-template-rows: 1fr min-content; + } + + .left { + display: none; + } + + .right { + grid-row: 1 / 2; + width: 90%; + } + + /* login page*/ + .login-page-nav ul { + width: 40rem; + } + + .login { + width: 40rem; + grid-template-columns: 5rem 8fr; + } + + .login-form label { + font-size: 1.4rem; + } + + .login-form a { + font-size: 1.4rem; + } + + .login-footer { + padding-left: 5rem; + } + + .login-footer p { + font-size: 1.4rem; + } + + .login-modal { + width: 30rem; + } + + .login-modal i { + top: 2.5rem; + } + + .login-modal p { + font-size: 1.4rem; + } + + /* news feed page */ + .user a, .user i { + display: none; + } + + .header-post input { + width: 27rem; + } + + .post-text { + width: 90%; + } + + .post-img { + width: 90%; + height: 25rem; + } + + .post-btn { + left: 70%; + } + +} + +@media(max-width: 500px){ + /* main page */ + .middle-content h1 { + font-size: 2.5rem; + } + + /* login page */ + .login-page-nav ul { + width: 30rem; + } + + .login { + width: 30rem; + grid-template-columns: 2rem 8fr; + } + + .login-form input:not(.login-form-checkbox){ + width: 20rem; + } + + .login-form a{ + display: block; + margin-top: 1.5rem; + } + + .login-footer { + padding-left: 2rem; + } + + /*news feed pages*/ + .icons a { + margin-right: 5rem; + } + + .header-img-wrapper { + display: none; + } + + .header-post { + justify-content: center; + } + + .header-post input { + width: 20rem; + } + + .post { + padding: 1rem; + } + + .user-avatar { + width: 4rem; + height: 4rem; + margin-right: 1rem; + } +} + + +@media(max-width: 400px){ + /* login page */ + .login-page { + grid-template-columns: 2rem 2fr 2rem; + } + + .login { + width: 100%; + } + + .login-modal { + width: 25rem; + } + + /* news feed page */ + .icons i { + font-size: 2rem; + } + + .icons a { + margin-right: 4rem; + } + + .user { + margin-left: 1rem; + } + + .header-post input { + width: 16rem; + } + + .header-post i { + font-size: 2rem; + } + + .post-icons i { + margin-right: 4rem; + } + + .post-btn { + left: 60%; + } +} + + + + + + + + + + + +