diff --git a/README.md b/README.md index 9afc742da..18fb2a649 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,47 @@ # css-frameworks-ca -Replace this text with a description of your social media project. + +# Your project title + +Looking For Group + +## Description + +A place to find groups to play with, build and share experiences with fellow gamers. +You would ideally be able to sort the games you're interested in, and only see the type of game content that interests you. + +## Built With + +- [Node.js](https://nodejs.org/) +- [Bootstrap](https://getbootstrap.com) + +## Getting Started + +### Installing + +1. Clone the repo: + +clone https://github.com/Pockitt/css-frameworks-ca + +2. Install the dependencies: + +``` +npm install +``` + +### Running + +To run the app, run the following commands: + +Open in Visual Studio Code, go to the base level index.html and open that in live server. + +## Contributing + +## Contact + +[My LinkedIn page](https://www.linkedin.com/in/simen-magnussen-a01123265/) + +## License + +## Acknowledgments + +Battery and Monster energy drinks has held my hand firmly through this project. diff --git a/feed/index.html b/feed/index.html new file mode 100644 index 000000000..734a2f7fb --- /dev/null +++ b/feed/index.html @@ -0,0 +1,146 @@ + + + + + + + + + + Feed + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ Post Thumbnail +
+

Post Title

+

Brief description of the post...

+ Read More +
+
+
+
+
+
+
+ Post Thumbnail +
+

Post Title

+

Brief description of the post...

+ Read More +
+
+
+
+
+
+
+ Post Thumbnail +
+

Post Title

+

Brief description of the post...

+ Read More +
+
+
+
+
+
+
+ Post Thumbnail +
+

Post Title

+

Brief description of the post...

+ Read More +
+
+
+
+
+
+
+ Post Thumbnail +
+

Post Title

+

Brief description of the post...

+ Read More +
+
+
+
+
+
+
+ Post Thumbnail +
+

Post Title

+

Brief description of the post...

+ Read More +
+
+
+
+
+
+ + diff --git a/img/Magni-profile-pic-css.webp b/img/Magni-profile-pic-css.webp new file mode 100644 index 000000000..c67d96e6e Binary files /dev/null and b/img/Magni-profile-pic-css.webp differ diff --git a/img/SHAMNICON-CSS.jpg b/img/SHAMNICON-CSS.jpg new file mode 100644 index 000000000..97b9df927 Binary files /dev/null and b/img/SHAMNICON-CSS.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..9d241b7c9 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + Document + + +
+

Looking For Group

+
+
+
+ +
+
+ +
+
+ + +
+ Forgot password? +
+
+
+ + diff --git a/js/script.js b/js/script.js new file mode 100644 index 000000000..dfa75aad0 --- /dev/null +++ b/js/script.js @@ -0,0 +1,15 @@ +document + .getElementById("hamburger-menu") + .addEventListener("click", function () { + const sidebar = document.getElementById("sidebar"); + sidebar.classList.toggle("active"); + + // Change the hamburger to an 'X' + const bar1 = document.getElementById("bar1"); + const bar2 = document.getElementById("bar2"); + const bar3 = document.getElementById("bar3"); + + bar1.classList.toggle("rotate1"); + bar2.classList.toggle("hide"); + bar3.classList.toggle("rotate2"); + }); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..d8f8cb862 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,107 @@ +{ + "name": "npm-bootstrap", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "npm-bootstrap", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "bootstrap": "^5.3.3", + "sass": "^1.79.2" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, + "node_modules/chokidar": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.0.tgz", + "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==", + "license": "MIT", + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/immutable": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "license": "MIT" + }, + "node_modules/readdirp": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz", + "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==", + "license": "MIT", + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass": { + "version": "1.79.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.2.tgz", + "integrity": "sha512-YmT1aoF1MwHsZEu/eXhbAJNsPGAhNP4UixW9ckEwWCvPcVdVF0/C104OGDVEqtoctKq0N+wM20O/rj+sSPsWeg==", + "license": "MIT", + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + } + } +} diff --git a/package.json b/package.json index 4086f0f7b..0596cbae7 100644 --- a/package.json +++ b/package.json @@ -1,26 +1,17 @@ { - "name": "css-frameworks-ca", - "version": "0.0.1", - "description": "A starting point for the CSS Frameworks CA project", + "name": "npm-bootstrap", + "version": "1.0.0", + "main": "index.js", "scripts": { - "test": "echo \"We will learn more about testing in the Workflow course\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "sass": "sass --watch src/scss/styles.scss src/css/styles.css" }, - "repository": { - "type": "git", - "url": "git+https://github.com/NoroffFEU/css-frameworks-ca.git" - }, - "keywords": [ - "CSS", - "CSS", - "Frameworks", - "Bootstrap", - "SCSS", - "SASS" - ], - "author": "Oliver Dipple ", + "author": "", "license": "ISC", - "bugs": { - "url": "https://github.com/NoroffFEU/css-frameworks-ca/issues" - }, - "homepage": "https://github.com/NoroffFEU/css-frameworks-ca#readme" + "description": "", + "dependencies": { + "bootstrap": "^5.3.3", + "sass": "^1.79.2" + } + } diff --git a/profile/index.html b/profile/index.html new file mode 100644 index 000000000..cb761899c --- /dev/null +++ b/profile/index.html @@ -0,0 +1,120 @@ + + + + + + + + + + Profile + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ Profile picture +
+
+
+

Profile name

+ +
+
+

Followers: 152

+

Following: 357

+
+
+
+ +
+
+
+ Post thumbnail +
+
+

Post Title

 +

Some pre-displayed text...

+
+
+
+
+ Post thumbnail +
+
+

Post Title

 +

Some pre-displayed text...

+
+
+
+
+ Post thumbnail +
+
+

Post Title

 +

Some pre-displayed text...

+
+
+
+
+ Post thumbnail +
+
+

Post Title

 +

Some pre-displayed text...

+
+
+
+
+ + diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 000000000..4b08c6670 --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,303 @@ +@import url(../../node_modules/bootstrap/scss/bootstrap.scss); +.title { + font-size: 3rem; + color: white; +} + +main { + margin-left: 250px; + padding: 20px; +} + +body { + background-color: #008080; + height: 100vh; +} + +.profile-header { + background-color: #0f1442; + padding: 20px; + border-radius: 10px; + color: white; +} +.profile-header .profile-picture img { + width: 150px; + height: 150px; + border-radius: 50%; +} +.profile-header .profile-name { + font-size: 2rem; + font-weight: bold; +} +.profile-header .btn-follow { + background-color: #00ff00; + border: none; + padding: 10px 20px; + color: black; + font-weight: bold; + border-radius: 5px; + transition: background-color 0.3s ease; +} +.profile-header .btn-follow:hover { + background-color: #00cc00; +} +.profile-header p { + font-size: 1.5rem; +} + +.posts { + margin-top: 20px; +} +.posts .post { + display: flex; + background-color: #1d2d50; + color: white; + margin-bottom: 15px; + border-radius: 10px; +} +.posts .post .post-thumbnail img { + display: inline-block; + width: 100%; + min-width: 80px; + border-radius: 5px; +} +.posts .post .post-title { + display: flex; + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 5px; +} +.posts .post .post-text { + font-size: 1rem; + color: #bbbbbb; +} + +@media (max-width: 770px) { + .profile-header { + text-align: center; + } + .profile-header .btn-follow { + display: block; + margin: 10px auto; + } + .posts .post .post-thumbnail { + display: none; + } + .posts .post .post-content .post-title { + font-size: 1rem; + } + .posts .post .post-content .post-text { + font-size: 0.875rem; + } +} +.sidebar { + background-color: #0f1442; + width: 250px; + height: 100vh; + display: flex; + position: fixed; + top: 0; + left: 0; + flex-direction: column; + justify-content: space-between; + z-index: 5; +} +.sidebar .sidebar-header h2 { + color: white; + text-align: center; + font-size: 24px; + font-weight: bold; +} +.sidebar .search-bar { + text-align: center; +} +.sidebar .search-bar .btn-search { + background-color: #f5f5f5; + border: none; + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} +.sidebar .search-bar .btn-search:hover { + background-color: rgba(158, 214, 2, 0.8352941176); +} +.sidebar .sidebar-nav ul { + list-style-type: none; +} +.sidebar .sidebar-nav ul li { + margin: 15px 0; +} +.sidebar .sidebar-nav ul li a { + color: white; + text-decoration: none; + font-size: 18px; + display: flex; + justify-content: center; +} +.sidebar .sidebar-nav ul li a.active { + color: #00ff00; + font-weight: bold; +} +.sidebar .sidebar-nav ul li a:hover { + color: rgba(158, 214, 2, 0.8352941176); +} +.sidebar .create-post { + text-align: center; + margin-bottom: 60px; +} +.sidebar .create-post .btn-create { + background-color: #00ff00; + border: none; + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + color: black; + font-weight: bold; +} +.sidebar .create-post .btn-create:hover { + background-color: #00cc00; +} + +@media (min-width: 571px) { + .hamburger-container { + display: none; + } + .hamburger-menu { + display: none; + } +} +@media (max-width: 570px) { + .sidebar { + width: 100%; + height: 100vh; + position: fixed; + bottom: 0; + left: 0; + transform: translateY(100%); + transition: all 0.3s ease; + z-index: 5; + } + .sidebar.active { + transform: translateY(0); + } + .content { + margin-left: 0; + width: 100%; + } + main { + margin: 0; + } + .hamburger-container { + display: flex; + position: fixed; + bottom: 50; + left: 5; + width: 100%; + background-color: #14142b; + padding: 10px 0; + justify-content: center; + z-index: 999; + } + .hamburger-menu { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background-color: #14142b; + border-radius: 10px; + cursor: pointer; + z-index: 999; + } + .hamburger-menu .bar { + width: 35px; + height: 4px; + background-color: white; + margin: 5px 0; + } +} +.rotate1 { + transform: rotate(45deg) translate(6px, 6px); +} + +.hide { + opacity: 0; +} + +.rotate2 { + transform: rotate(-45deg) translate(6px, -6px); +} + +.login-container { + text-align: center; +} + +.login-box { + background-color: white; + border-radius: 15px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +.login-btn { + background-color: #00ff00; + border: none; + color: black; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} +.login-btn:hover { + background-color: #00cc00; +} + +.login-body { + font-family: Arial, sans-serif; + background-color: #1c3a5b; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +input[type=text], +input[type=password] { + width: 100%; + padding: 10px; + border: 2px solid #ccc; + border-radius: 5px; + font-size: 1rem; +} + +.button-group { + display: flex; + justify-content: space-between; +} + +.register-btn { + background-color: #007bff; + border: none; + color: white; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} +.register-btn:hover { + background-color: #0056b3; +} + +.forgot-password { + display: block; + margin-top: 15px; + color: #007bff; + text-decoration: none; + font-size: 0.9rem; +} + +.forgot-password:hover { + text-decoration: underline; +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/src/css/styles.css.map b/src/css/styles.css.map new file mode 100644 index 000000000..9e5b97186 --- /dev/null +++ b/src/css/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/styles.scss"],"names":[],"mappings":"AAAQ;AAMR;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC,kBAfS;EAgBT;;;AAGD;EACC,kBAnBW;EAoBX;EACA;EACA;;AAGC;EACC;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC,kBArCI;EAsCJ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;AAKH;EACC;IACC;;EAEA;IACC;IACA;;EAMA;IACC;;EAGA;IACC;;EAGD;IACC;;;AAOL;EACC,kBAtHW;EAuHX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAMF;EACC;;AACA;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC,OAxKA;EAyKA;;AAGD;EACC;;AAOL;EACC;EACA;;AAEA;EACC,kBAzLG;EA0LH;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAKJ;EACC;IACC;;EAED;IACC;;;AAIF;EACC;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;;EAGD;IACC;IACA;;EAED;IACC;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;IACA;IACA;IACA;;;AAKH;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC,kBA/RK;EAgSL;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC","file":"styles.css"} \ No newline at end of file diff --git a/src/scss/_login.scss b/src/scss/_login.scss new file mode 100644 index 000000000..c6cdd70ec --- /dev/null +++ b/src/scss/_login.scss @@ -0,0 +1,78 @@ +.login-container { + text-align: center; +} + +.login-box { + background-color: white; + padding: 40px; + border-radius: 15px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); + width: 300px; +} + +.login-btn { + background-color: #00ff00; + border: none; + color: black; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + + &:hover { + background-color: #00cc00; + } +} + +.login-body { + font-family: Arial, sans-serif; + background-color: #1c3a5b; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.input-group { + margin-bottom: 20px; +} + +input[type="text"], +input[type="password"] { + width: 100%; + padding: 10px; + border: 2px solid #ccc; + border-radius: 5px; + font-size: 1rem; +} + +.button-group { + display: flex; + justify-content: space-between; +} + +.register-btn { + background-color: #007bff; + border: none; + color: white; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + + &:hover { + background-color: #0056b3; + } +} + +.forgot-password { + display: block; + margin-top: 15px; + color: #007bff; + text-decoration: none; + font-size: 0.9rem; +} + +.forgot-password:hover { + text-decoration: underline; +} diff --git a/src/scss/_sidebar.scss b/src/scss/_sidebar.scss new file mode 100644 index 000000000..4537e73f1 --- /dev/null +++ b/src/scss/_sidebar.scss @@ -0,0 +1,170 @@ +.sidebar { + background-color: #0f1442; + width: 250px; + height: 100vh; + display: flex; + position: fixed; + top: 0; + left: 0; + flex-direction: column; + justify-content: space-between; + padding: 20px; + z-index: 5; + + .sidebar-header { + h2 { + color: white; + text-align: center; + font-size: 24px; + font-weight: bold; + } + } + + .search-bar { + text-align: center; + + .btn-search { + background-color: #f5f5f5; + border: none; + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + + &:hover { + background-color: #9ed602d5; + } + } + } + + .sidebar-nav { + ul { + list-style-type: none; + padding: 0; + li { + margin: 15px 0; + + a { + color: white; + text-decoration: none; + font-size: 18px; + padding: 10px; + display: block; + + &.active { + color: #00ff00; + font-weight: bold; + } + + &:hover { + color: #9ed602d5; + } + } + } + } + } + + .create-post { + text-align: center; + + .btn-create { + background-color: #00ff00; + border: none; + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + color: black; + font-weight: bold; + + &:hover { + background-color: #00cc00; + } + } + } +} +@media (width > 571px) { + .hamburger-container { + display: none; + } + .hamburger-menu { + display: none; + } +} + +@media (max-width: 570px) { + .sidebar { + width: 100%; + height: 100vh; + position: fixed; + bottom: 0; + left: 0; + transform: translateY(100%); + transition: all 0.3s ease; + z-index: 5; + } + + .sidebar.active { + transform: translateY(0); // Slide up when the sidebar is active + } + + .content { + margin-left: 0; + width: 100%; + } + + .hamburger-container { + display: flex; + position: fixed; + bottom: 50; + left: 5; + width: 100%; + background-color: #14142b; + padding: 10px 0; + justify-content: center; + z-index: 10; + } + + .hamburger-menu { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background-color: #14142b; + padding: 10px; + border-radius: 10px; + cursor: pointer; + z-index: 10; + + .bar { + width: 35px; + height: 4px; + background-color: white; + margin: 5px 0; + } + } +} + +.content { + margin-left: 250px; + padding: 20px; + width: calc(100% - 250px); + background-color: #1c3a5b; + height: 100vh; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.rotate1 { + transform: rotate(45deg) translate(5px, 5px); +} + +.hide { + opacity: 0; +} + +.rotate2 { + transform: rotate(-45deg) translate(5px, -5px); +} diff --git a/src/scss/index.scss b/src/scss/index.scss deleted file mode 100644 index 8b1378917..000000000 --- a/src/scss/index.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/scss/styles.scss b/src/scss/styles.scss new file mode 100644 index 000000000..7a97fd549 --- /dev/null +++ b/src/scss/styles.scss @@ -0,0 +1,352 @@ +@import url(../../node_modules/bootstrap/scss/bootstrap.scss); + +$primary: #008080; +$secondary: #0f1442; +$cta: #00ff00; + +.title { + font-size: 3rem; + color: white; +} + +main { + margin-left: 250px; + padding: 20px; +} + +body { + background-color: $primary; + height: 100vh; +} + +.profile-header { + background-color: $secondary; + padding: 20px; + border-radius: 10px; + color: white; + + .profile-picture { + img { + width: 150px; + height: 150px; + border-radius: 50%; + } + } + + .profile-name { + font-size: 2rem; + font-weight: bold; + } + + .btn-follow { + background-color: $cta; + border: none; + padding: 10px 20px; + color: black; + font-weight: bold; + border-radius: 5px; + transition: background-color 0.3s ease; + + &:hover { + background-color: #00cc00; + } + } + + p { + font-size: 1.5rem; + } +} + +.posts { + margin-top: 20px; + + .post { + display: flex; + background-color: #1d2d50; + color: white; + margin-bottom: 15px; + border-radius: 10px; + + .post-thumbnail { + img { + display: inline-block; + width: 100%; + min-width: 80px; + border-radius: 5px; + } + } + + .post-title { + display: flex; + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 5px; + } + + .post-text { + font-size: 1rem; + color: #bbbbbb; + } + } +} + +@media (max-width: 770px) { + .profile-header { + text-align: center; + + .btn-follow { + display: block; + margin: 10px auto; + } + } + + .posts { + .post { + .post-thumbnail { + display: none; + } + .post-content { + .post-title { + font-size: 1rem; + } + + .post-text { + font-size: 0.875rem; + } + } + } + } +} + +.sidebar { + background-color: $secondary; + width: 250px; + height: 100vh; + display: flex; + position: fixed; + top: 0; + left: 0; + flex-direction: column; + justify-content: space-between; + z-index: 5; + + .sidebar-header { + h2 { + color: white; + text-align: center; + font-size: 24px; + font-weight: bold; + } + } + + .search-bar { + text-align: center; + + .btn-search { + background-color: #f5f5f5; + border: none; + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + + &:hover { + background-color: #9ed602d5; + } + } + } + + .sidebar-nav { + ul { + list-style-type: none; + li { + margin: 15px 0; + + a { + color: white; + text-decoration: none; + font-size: 18px; + display: flex; + justify-content: center; + + &.active { + color: $cta; + font-weight: bold; + } + + &:hover { + color: #9ed602d5; + } + } + } + } + } + + .create-post { + text-align: center; + margin-bottom: 60px; + + .btn-create { + background-color: $cta; + border: none; + border-radius: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + color: black; + font-weight: bold; + + &:hover { + background-color: #00cc00; + } + } + } +} +@media (min-width: 571px) { + .hamburger-container { + display: none; + } + .hamburger-menu { + display: none; + } +} + +@media (max-width: 570px) { + .sidebar { + width: 100%; + height: 100vh; + position: fixed; + bottom: 0; + left: 0; + transform: translateY(100%); + transition: all 0.3s ease; + z-index: 5; + } + + .sidebar.active { + transform: translateY(0); // Slide up when the sidebar is active + } + + .content { + margin-left: 0; + width: 100%; + } + main { + margin: 0; + } + + .hamburger-container { + display: flex; + position: fixed; + bottom: 50; + left: 5; + width: 100%; + background-color: #14142b; + padding: 10px 0; + justify-content: center; + z-index: 999; + } + + .hamburger-menu { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background-color: #14142b; + border-radius: 10px; + cursor: pointer; + z-index: 999; + + .bar { + width: 35px; + height: 4px; + background-color: white; + margin: 5px 0; + } + } +} + +.rotate1 { + transform: rotate(45deg) translate(6px, 6px); +} + +.hide { + opacity: 0; +} + +.rotate2 { + transform: rotate(-45deg) translate(6px, -6px); +} + +.login-container { + text-align: center; +} + +.login-box { + background-color: white; + border-radius: 15px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +.login-btn { + background-color: $cta; + border: none; + color: black; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + + &:hover { + background-color: #00cc00; + } +} + +.login-body { + font-family: Arial, sans-serif; + background-color: #1c3a5b; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +input[type="text"], +input[type="password"] { + width: 100%; + padding: 10px; + border: 2px solid #ccc; + border-radius: 5px; + font-size: 1rem; +} + +.button-group { + display: flex; + justify-content: space-between; +} + +.register-btn { + background-color: #007bff; + border: none; + color: white; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + + &:hover { + background-color: #0056b3; + } +} + +.forgot-password { + display: block; + margin-top: 15px; + color: #007bff; + text-decoration: none; + font-size: 0.9rem; +} + +.forgot-password:hover { + text-decoration: underline; +}