From 584a89508fc080a59f6db4374997b557934941bd Mon Sep 17 00:00:00 2001 From: capybara001 <rahlawat903@gmail.com> Date: Tue, 18 Jun 2024 01:29:08 +0530 Subject: [PATCH] separated html css and js files. refined the stylings of modal and color palette. --- developers.css | 98 ------- developers.html | 28 -- index.html | 359 +++++++------------------ js/modal.js | 20 ++ js/palette.js | 32 +++ styles-about.css | 0 styles/about.css | 60 +++++ styles-footer.css => styles/footer.css | 0 styles-header.css => styles/header.css | 59 ---- styles/modal.css | 98 +++++++ palette.css => styles/palette.css | 0 styles-type.css => styles/type.css | 0 12 files changed, 310 insertions(+), 444 deletions(-) delete mode 100644 developers.css delete mode 100644 developers.html create mode 100644 js/modal.js create mode 100644 js/palette.js delete mode 100644 styles-about.css create mode 100644 styles/about.css rename styles-footer.css => styles/footer.css (100%) rename styles-header.css => styles/header.css (52%) create mode 100644 styles/modal.css rename palette.css => styles/palette.css (100%) rename styles-type.css => styles/type.css (100%) diff --git a/developers.css b/developers.css deleted file mode 100644 index 70b6ba4..0000000 --- a/developers.css +++ /dev/null @@ -1,98 +0,0 @@ - @import url('variables.css'); - -body { - font-family: 'Courier New', Courier, monospace; - background-color: rgb(255 238 197); - margin: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} -.poppins-bold { - font-family: "Poppins", sans-serif; - font-weight: 700; - font-style: normal; - } -.back-button { - position: absolute; - top: 20px; - left: 20px; - background-color: #fff5d7; - color: #be0065; - padding: 10px 20px; - border-radius: 5px; - text-decoration: none; - transition: background-color 0.3s, transform 0.3s; -} - -.back-button:hover { - background-color: #ffe8a4; - transform: scale(1.05); -} - -.back-button:active { - background-color: #fff5d7; -} - -.contact-container { - background-color: #fff5d7; - padding: 50px; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - width: 80%; - max-width: 800px; - max-height: 900px; - text-align: center; -} - -h1 { - color: #be0065; - font-size: 2em; - margin-bottom: 40px; - text-align: left; -} - -.button-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; - margin-top: 10px; -} - -.button { - background-color: #f5e3c3; - padding: 20px; - border-radius: 10px; - color: #be0065; - text-decoration: none; - display: flex; - justify-content: flex-start; - align-items: center; - border: 2px solid #e0d2b8; - transition: background-color 0.3s, transform 0.3s; -} - -.button i { - margin-right: 10px; -} - -.button:hover { - background-color: #e0d2b8; - transform: scale(1.05); -} - -.button:active { - background-color: #d1c4a5; -} - -/* Media query for responsiveness */ - @media (max-width: 600px) { - .button-grid { - grid-template-columns: 1fr; - } - - h1 { - text-align: center; - } -} diff --git a/developers.html b/developers.html deleted file mode 100644 index 438d41c..0000000 --- a/developers.html +++ /dev/null @@ -1,28 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Contact</title> - <link rel="stylesheet" href="developers.css"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -</head> -<body> - <body class="poppins-bold"> - <a href="index.html" class="back-button">Back</a> - <div class="contact-container"> - <h1>Developers</h1> - <div class="button-grid"> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Riya Ahlawat</a> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Pulak Srivastava</a> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Advika Singhal</a> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Samridhhi Tiwari</a> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Tanvi Bisht</a> - <a href="https://www.linkedin.com/in/akansha-chaurasia-47235b260/" class="button"><i class="fas fa-user"></i> Akansha Chaurasia</a> - </div> - </div> -</body> -</body> -</html> - - diff --git a/index.html b/index.html index d7287b0..f2c646b 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html lang="en"> - <head> + <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-4FVJXEZ1TV"></script> <script> @@ -12,10 +12,12 @@ gtag('config', 'G-4FVJXEZ1TV'); </script> + <!-- html boilerplate --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AWS TypeSmart</title> + <!-- Poppins font and svg awesome font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" @@ -28,111 +30,17 @@ <!-- CSS sheets --> <link rel="stylesheet" href="variables.css"> - <link rel="stylesheet" href="styles-header.css"> - <link rel="stylesheet" href="./styles-type.css"> - <link rel="stylesheet" href="styles-footer.css"> - <link rel="stylesheet" href="palette.css"> - <style> -/* developers popup style */ -/* The Modal */ -.modal { - display: none; - position: fixed; - z-index: 1000; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgb(0, 0, 0); - background-color: rgba(0, 0, 0, 0.4); - padding-top: 60px; -} - -.contact-container p{ - text-align: center; -} -.modal-content { - background-color:beige; - margin: 5% auto; - padding: 20px; - border: 1px solid #888; - width: 80%; - max-width: 800px; - border-radius: 10px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); -} - - - -/* layout for the buttons */ -.contact-container { - text-align: center; - -.button-grid { - display: flex; - justify-content: center; -} - -.left-buttons, -.right-buttons { - display: flex; - flex-direction: column; - flex: 1; - gap: 10px; -} - -.left-buttons { - margin-right: 10px; -} - -.button { - display: flex; - align-items: center; - padding: 10px; - background-color: #be0065; - color: white; - text-align: center; - border-radius: 5px; - text-decoration: none; - font-size: 16px; - transition: background-color 0.3s; -} - -.button i { - margin-right: 8px; -} - -.button:hover { - background-color: rgb(138, 113, 56); -} - -@media screen and (max-width: 600px) { - .contact-container { - text-align: center; - } - - .button-grid { - flex-direction: column; - align-items: center; - } - - .left-buttons, - .right-buttons { - flex: auto; - } - - .button { - width: auto; - } -} - - </style> - <!-- developers style end --> + <link rel="stylesheet" href="styles/header.css"> + <link rel="stylesheet" href="styles/type.css"> + <link rel="stylesheet" href="styles/footer.css"> + <link rel="stylesheet" href="styles/palette.css"> + <link rel="stylesheet" href="styles/modal.css"> + <link rel="stylesheet" href="styles/about.css"> </head> <body> - <!-- Tanvi Bisht and Samriddhi--> + + <!-- Header (Tanvi Bisht and Samriddhi)--> <div class="header"> <div class="logo-and-title"> <div style="padding: 10px;"><i class="fab fa-aws"></i></div> @@ -140,7 +48,7 @@ </div> <div class="header-icons"> <div class="footer-item"> - <a class="footer-icons" href="void:javascrpit(0)" > + <a class="footer-icons" href="void:javascrpit(0)"> <i class="fa fa-paint-brush"></i> </a> </div> @@ -157,14 +65,13 @@ <!-- <img src="i-icon.svg" class=" alt="Icon 2"> --> <!-- <img src="keyboard.svg" class=" alt="Icon 3"> --> - - </div> -</div> -<!-- Colour palette by Advika and Pulak --> + </div> + </div> -<style> - .theme-selector { + <!-- Color palette (Advika and Pulak) --> + <style> + .theme-selector { display: none; position: fixed; top: 50px; @@ -175,131 +82,96 @@ border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; - } + } - .theme-selector.show { + .theme-selector.show { display: block; - } -</style> + } + </style> -<div class="theme-selector"> - <div class="container"> - <div class="search-bar"> - <i class="fa-solid fa-magnifying-glass"></i> - <input type="text" placeholder="Search..." id="search-input"> - </div> + <div class="theme-selector"> + <div class="container"> + <!-- <div class="search-bar"> + <i class="fa-solid fa-magnifying-glass"></i> + <input type="text" placeholder="Search..." id="search-input"> + </div> --> <ul id="theme-list"> - <li class="theme-item" data-theme-class="theme-bento"> - <span class="theme-name"><b>bento</b></span> - <div class="color-palette"> - <span class="color-button" style="background: #2d394d;"></span> - <span class="color-button" style="background: #ff7a90;"></span> - <span class="color-button" style="background: #fffaf8;"></span> - </div> - </li> + <li class="theme-item" data-theme-class="theme-bento"> + <span class="theme-name"><b>bento</b></span> + <div class="color-palette"> + <span class="color-button" style="background: #2d394d;"></span> + <span class="color-button" style="background: #ff7a90;"></span> + <span class="color-button" style="background: #fffaf8;"></span> + </div> + </li> - <li class="theme-item" data-theme-class="theme-blue-dolphin"> - <span class="theme-name">blue dolphin</span> - <div class="color-palette"> - <span class="color-button" style="background: #00e4ff;"></span> - <span class="color-button" style="background: #014961;"></span> - <span class="color-button" style="background: #ffcefb;"></span> - </div> - </li> + <li class="theme-item" data-theme-class="theme-blue-dolphin"> + <span class="theme-name">blue dolphin</span> + <div class="color-palette"> + <span class="color-button" style="background: #00e4ff;"></span> + <span class="color-button" style="background: #014961;"></span> + <span class="color-button" style="background: #ffcefb;"></span> + </div> + </li> - <li class="theme-item" data-theme-class="theme-monokai"> - <span class="theme-name">monokai</span> - <div class="color-palette"> - <span class="color-button" style="background: #a6e22e;"></span> - <span class="color-button" style="background: #e6db74;"></span> - <span class="color-button" style="background: #e2e2dc;"></span> - </div> + <li class="theme-item" data-theme-class="theme-monokai"> + <span class="theme-name">monokai</span> + <div class="color-palette"> + <span class="color-button" style="background: #a6e22e;"></span> + <span class="color-button" style="background: #e6db74;"></span> + <span class="color-button" style="background: #e2e2dc;"></span> + </div> </li> - + <li class="theme-item" data-theme-class="theme-fledling"> <span class="theme-name">fledling</span> <div class="color-palette"> - <span class="color-button" style="background: #fc6e83;"></span> - <span class="color-button" style="background: #474747;"></span> - <span class="color-button" style="background: #e6d5d3;"></span> + <span class="color-button" style="background: #fc6e83;"></span> + <span class="color-button" style="background: #474747;"></span> + <span class="color-button" style="background: #e6d5d3;"></span> </div> - </li> + </li> - <li class="theme-item" data-theme-class="theme-lavender"> + <li class="theme-item" data-theme-class="theme-lavender"> <span class="theme-name">lavender</span> <div class="color-palette"> - <span class="color-button" style="background: #ada6c2;"></span> - <span class="color-button" style="background: #e4e3e9;"></span> - <span class="color-button" style="background: #2f2a41;"></span> + <span class="color-button" style="background: #ada6c2;"></span> + <span class="color-button" style="background: #e4e3e9;"></span> + <span class="color-button" style="background: #2f2a41;"></span> </div> - </li> + </li> - <li class="theme-item" data-theme-class="theme-dark"> + <li class="theme-item" data-theme-class="theme-dark"> <span class="theme-name">dark</span> <div class="color-palette"> - <span class="color-button" style="background: #eee;"></span> - <span class="color-button" style="background: #444;"></span> - <span class="color-button" style="background: #191919;"></span> + <span class="color-button" style="background: #eee;"></span> + <span class="color-button" style="background: #444;"></span> + <span class="color-button" style="background: #191919;"></span> </div> - </li> + </li> - <li class="theme-item" data-theme-class="theme-bushido"> + <li class="theme-item" data-theme-class="theme-bushido"> <span class="theme-name">bushido</span> <div class="color-palette"> - <span class="color-button" style="background: #ec4c56;"></span> - <span class="color-button" style="background: #596172;"></span> - <span class="color-button" style="background: #f6f0e9;"></span> + <span class="color-button" style="background: #ec4c56;"></span> + <span class="color-button" style="background: #596172;"></span> + <span class="color-button" style="background: #f6f0e9;"></span> </div> - </li> + </li> - <li class="theme-item" data-theme-class="theme-lime"> + <li class="theme-item" data-theme-class="theme-lime"> <span class="theme-name">lime</span> <div class="color-palette"> - <span class="color-button" style="background: #93c247;"></span> - <span class="color-button" style="background: #4b5257;"></span> - <span class="color-button" style="background: #bfcfdc;"></span> + <span class="color-button" style="background: #93c247;"></span> + <span class="color-button" style="background: #4b5257;"></span> + <span class="color-button" style="background: #bfcfdc;"></span> </div> - </li> + </li> </ul> + </div> </div> -</div> - -<script> - document.addEventListener('DOMContentLoaded', function() { - const themeItems = document.querySelectorAll('.theme-item'); - - themeItems.forEach(item => { - item.addEventListener('click', function() { - themeItems.forEach(item => item.classList.remove('selected')); - this.classList.add('selected'); - const themeClass = this.getAttribute('data-theme-class'); - document.body.className = themeClass; - }); - }); - - const searchInput = document.getElementById('search-input'); - if (searchInput) { - searchInput.addEventListener('input', function() { - const filter = searchInput.value.toLowerCase(); - themeItems.forEach(item => { - const themeName = item.querySelector('.theme-name').textContent.toLowerCase(); - if (themeName.includes(filter)) { - item.style.display = ''; - } else { - item.style.display = 'none'; - } - }); - }); - } - - document.querySelector('.fa-paint-brush').addEventListener('click', function() { - document.querySelector('.theme-selector').classList.toggle('show'); - }); - }); -</script> - - <!-- Type started (Riya Ahlawat and Samriddhi) --> + <!-- Typing section (Riya Ahlawat and Samriddhi) --> <main> <!-- <div id="header"> <div id="info"></div> @@ -348,11 +220,8 @@ </div> </div> </main> - <!-- Type ended. --> - - <!-- About section --> - + <!-- About section (Tanvi Bisht and Riya Ahlawat)--> <div class="about-section"> <h1>ABOUT US</h1> <h2>AWS Cloud Clubs</h2> @@ -362,7 +231,9 @@ <h2>AWS Cloud Clubs</h2> develop new skills, and work on real-world projects. By participating in AWS Cloud Clubs, individuals can gain hands-on experience with AWS services, attend workshops and seminars, and connect with industry experts and peers. The clubs aim to foster innovation, enhance technical knowledge, and prepare members for cloud-related careers by - offering resources, mentorship, and networking opportunities. To know more about AWS CC, <a href = "https://aws.amazon.com/developer/community/students/cloudclubs/?community-captains-all.sort-by=item.additionalFields.sortPosition&community-captains-all.sort-order=asc&awsf.filter-location=*all&awsf.filter-year=*all" _target = blank> click here!</a></p> + offering resources, mentorship, and networking opportunities. To know more about AWS CC, <a + href="https://aws.amazon.com/developer/community/students/cloudclubs/?community-captains-all.sort-by=item.additionalFields.sortPosition&community-captains-all.sort-order=asc&awsf.filter-location=*all&awsf.filter-year=*all" + _target=blank> click here!</a></p> <h2>AWS Services</h2> <p>AWS Services encompass a wide array of cloud computing products that offer solutions for computing power, storage, and networking, tailored to meet the needs of businesses of all sizes. These services enable companies to @@ -402,9 +273,7 @@ <h3>Amazon DynamoDB 📊</h3> </ul> </div> - <!-- About ended --> - - <!-- Footer starts(Samriddhi) --> + <!-- Footer (Samriddhi) --> <footer id="footer"> <div class="footer-container"> <div class="footer-container-left"> @@ -433,64 +302,40 @@ <h3>Amazon DynamoDB 📊</h3> </a> </div> <div class="footer-item"> - <a class="footer-icons" target="_blank" id="developerIcon"> - <i class="fa fa-user" ></i> + <a class="footer-icons" target="_blank" id="developerIcon"> + <i class="fa fa-user"></i> Developers </a> </div> - - <!-- Developer Popup Tanvi--> + + <!-- Developers Popup (Tanvi Bisht)--> <div id="developerModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <div class="contact-container"> <h1>Meet the Developers</h1> - <p>Thank you for visiting our website! we're a dedicated team who collaborated closely to bring this website to life. Here's our development team:</p> + <p>Thank you for visiting our website! We're a dedicated team who collaborated closely to bring this + website to life. Here's our Development Team:</p> <div class="button-grid"> <div class="left-buttons"> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Riya Ahlawat</a> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Pulak Srivastava</a> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Advika Singhal</a> + <a href="https://www.linkedin.com/in/tech-explorer-riyaaa/" class="button" target="_blank"><i class="fas fa-user"></i> Riya Ahlawat (TL)</a> + <a href="LINKEDIN PROFILE" class="button" target="_blank"><i class="fas fa-user"></i> Pulak Srivastava</a> + <a href="LINKEDIN PROFILE" class="button" target="_blank"><i class="fas fa-user"></i> Advika Singhal</a> </div> <div class="right-buttons"> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Samridhhi Tiwari</a> - <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Tanvi Bisht</a> - <a href="https://www.linkedin.com/in/akansha-chaurasia-47235b260/" class="button"><i class="fas fa-user"></i> Akansha Chaurasia</a> + <a href="LINKEDIN PROFILE" class="button" target="_blank"><i class="fas fa-user"></i> Samridhhi Tiwari</a> + <a href="LINKEDIN PROFILE" class="button" target="_blank"><i class="fas fa-user"></i> Tanvi Bisht</a> + <a href="https://www.linkedin.com/in/akansha-chaurasia-47235b260/" class="button" target="_blank"><i + class="fas fa-user"></i> Akansha Chaurasia</a> </div> </div> - <p>You can connect with us through LinkedIn. - We hope you enjoy using our website as much we enjoyed creating it! + <p>You can connect with us through LinkedIn. + We hope you enjoy using our website as much we enjoyed creating it! </p> </div> </div> </div> - <!-- developers popeup end --> - <!-- Developers popeup script start --> -<script> - - document.addEventListener('DOMContentLoaded', function () { - const developerIcon = document.getElementById('developerIcon'); - const modal = document.getElementById('developerModal'); - const closeButton = document.querySelector('.close'); - - developerIcon.addEventListener('click', function (event) { - event.preventDefault(); - modal.style.display = 'block'; - }); - - closeButton.addEventListener('click', function () { - modal.style.display = 'none'; - }); - - window.addEventListener('click', function (event) { - if (event.target == modal) { - modal.style.display = 'none'; - } - }); - }); - - </script> - <!-- modal script end --> + <!-- developers pop-up end --> </div> <div class="footer-container-right"> @@ -513,16 +358,12 @@ <h1>Meet the Developers</h1> </div> </div> </footer> - <!-- Footer ends (Samriddhi) --> - <!-- <script src="typing.js"></script> --> <script src="js/paragraphs.js"></script> <script src="js/script.js"></script> - - - - + <script src="js/palette.js"></script> + <script src="js/modal.js"></script> </body> diff --git a/js/modal.js b/js/modal.js new file mode 100644 index 0000000..85f7421 --- /dev/null +++ b/js/modal.js @@ -0,0 +1,20 @@ +document.addEventListener('DOMContentLoaded', function () { + const developerIcon = document.getElementById('developerIcon'); + const modal = document.getElementById('developerModal'); + const closeButton = document.querySelector('.close'); + + developerIcon.addEventListener('click', function (event) { + event.preventDefault(); + modal.style.display = 'block'; + }); + + closeButton.addEventListener('click', function () { + modal.style.display = 'none'; + }); + + window.addEventListener('click', function (event) { + if (event.target == modal) { + modal.style.display = 'none'; + } + }); +}); \ No newline at end of file diff --git a/js/palette.js b/js/palette.js new file mode 100644 index 0000000..40d7e5f --- /dev/null +++ b/js/palette.js @@ -0,0 +1,32 @@ +document.addEventListener('DOMContentLoaded', function () { + const themeItems = document.querySelectorAll('.theme-item'); + + themeItems.forEach(item => { + item.addEventListener('click', function () { + themeItems.forEach(item => item.classList.remove('selected')); + this.classList.add('selected'); + + const themeClass = this.getAttribute('data-theme-class'); + document.body.className = themeClass; + }); + }); + + const searchInput = document.getElementById('search-input'); + if (searchInput) { + searchInput.addEventListener('input', function () { + const filter = searchInput.value.toLowerCase(); + themeItems.forEach(item => { + const themeName = item.querySelector('.theme-name').textContent.toLowerCase(); + if (themeName.includes(filter)) { + item.style.display = ''; + } else { + item.style.display = 'none'; + } + }); + }); + } + + document.querySelector('.fa-paint-brush').addEventListener('click', function () { + document.querySelector('.theme-selector').classList.toggle('show'); + }); + }); \ No newline at end of file diff --git a/styles-about.css b/styles-about.css deleted file mode 100644 index e69de29..0000000 diff --git a/styles/about.css b/styles/about.css new file mode 100644 index 0000000..ef220fd --- /dev/null +++ b/styles/about.css @@ -0,0 +1,60 @@ +.about-section { + margin: 2rem; + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .about-section h1 { + font-size: 32px; + color: var(--textColor); + margin-bottom: 20px; + text-align: center; + text-decoration: underline; + } + + .about-section p { + font-size: 16px; + color: var(--black); + line-height: 1.6; + margin-bottom: 20px; + text-align: justify; + max-width: 800px; + } + + .about-section h2{ + color: var(--black); + text-align: center; + } + + .aws-services { + list-style: none; + padding: 0; + max-width: 800px; + margin: 0 auto; + } + + .aws-services li { + margin-bottom: 20px; + } + + .aws-services h3 { + font-size: 20px; + color: var(--textColor); + margin-bottom: 10px; + text-align: left; + } + + .aws-services p { + font-size: 16px; + color: var(--hover); + line-height: 1.6; + } + + .header-icons i, + .logo-and-title i { + font-size: 1.5rem; + } + \ No newline at end of file diff --git a/styles-footer.css b/styles/footer.css similarity index 100% rename from styles-footer.css rename to styles/footer.css diff --git a/styles-header.css b/styles/header.css similarity index 52% rename from styles-header.css rename to styles/header.css index f799908..243769f 100644 --- a/styles-header.css +++ b/styles/header.css @@ -62,62 +62,3 @@ -.about-section { - margin: 2rem; - padding: 2rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.about-section h1 { - font-size: 32px; - color: var(--textColor); - margin-bottom: 20px; - text-align: center; - text-decoration: underline; -} - -.about-section p { - font-size: 16px; - color: var(--black); - line-height: 1.6; - margin-bottom: 20px; - text-align: justify; - max-width: 800px; -} - -.about-section h2{ - color: var(--black); - text-align: center; -} - -.aws-services { - list-style: none; - padding: 0; - max-width: 800px; - margin: 0 auto; -} - -.aws-services li { - margin-bottom: 20px; -} - -.aws-services h3 { - font-size: 20px; - color: var(--textColor); - margin-bottom: 10px; - text-align: left; -} - -.aws-services p { - font-size: 16px; - color: var(--hover); - line-height: 1.6; -} - -.header-icons i, -.logo-and-title i { - font-size: 1.5rem; -} diff --git a/styles/modal.css b/styles/modal.css new file mode 100644 index 0000000..b80ec43 --- /dev/null +++ b/styles/modal.css @@ -0,0 +1,98 @@ +@import url('variables.css'); + +.modal { + font-weight: 500; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + /* background-color: rgb(0, 0, 0); */ + background-color: rgba(0, 0, 0, 0.4); + /* padding-top: 60px; */ +} + +.contact-container h1 { + color: var(--black); +} + +.contact-container p { + font-size: 1rem; +} + +.modal-content { + background-color: var(--bgColor); + margin: 5% auto; + padding: 20px; + border: 3px solid var(--black); + width: 80vw; + height: auto; + max-width: 800px; + border-radius: 10px; + box-shadow: 0 5px 15px var(--black); +} + +/* layout for the buttons */ +.contact-container { + text-align: center; +} + +.button-grid { + display: flex; + justify-content: center; + align-items: center; +} + +.left-buttons, +.right-buttons { + display: flex; + flex-direction: column; + flex: 1; + gap: 10px; + margin: 10px; +} + +.button { + display: flex; + align-items: center; + padding: 10px; + background-color: var(--bgColor); + color: var(--textColor); + /* text-align: center; */ + border: 2px solid var(--black); + border-radius: 5px; + text-decoration: none; + font-size: 1rem; + transition: background-color 0.3s; +} + +.button i { + margin: 8px; +} + +.button:hover { + background-color: var(--wrong-highlighted); +} + +@media screen and (max-width: 600px) { + /* .contact-container { + text-align: center; + } */ + + .button-grid { + flex-direction: column; + align-items: center; + } + + /* .left-buttons, + .right-buttons { + flex: auto; + } */ + + .button { + /* width: auto; */ + width: 40vw; + } +} diff --git a/palette.css b/styles/palette.css similarity index 100% rename from palette.css rename to styles/palette.css diff --git a/styles-type.css b/styles/type.css similarity index 100% rename from styles-type.css rename to styles/type.css