~/Projects/ui
git clone https://code.lsong.org/ui
Commit
- Commit
- dc50fdc73ec8c87defcf6bb90416b25670a61742
- Author
- David Mraz <[email protected]>
- Date
- 2023-08-31 22:06:00 +0200 +0200
- Diffstat
accordion-01/index.html | 23 +++ accordion-01/script.js | 2 accordion-01/style.css | 3 accordion-02/index.html | 14 ++ accordion-02/style.css | 3 buttons-01/index.html | 7 + buttons-01/style.css | 4 buttons-02/index.html | 7 + buttons-02/style.css | 2 cards-01/cards.html | 77 ++++++------- cards-01/style.css | 4 carousel-01/index.html | 86 +++++++------- carousel-01/style.css | 2 custom-cursor-01/index.html | 11 + dropdown-menu-01/index.html | 62 +++++++++++ dropdown-menu-01/script.js | 20 +++ dropdown-menu-01/style.css | 164 +++++++++++++++++++++++++++++ | 0 | 0 | 0 | 0 | 0 dropdown-menu-02/index.html | 122 +++++++++++++++------ dropdown-menu-02/script.js | 8 dropdown-menu-02/style.css | 177 +++++++++++++++++-------------- | 0 | 0 | 0 | 0 dropdown-menu-03/index.html | 159 ++++++++++++++------------- dropdown-menu-03/script.js | 21 +-- dropdown-menu-03/style.css | 201 ++++++++++++++++++++--------------- dropdown-menu-04/index.html | 80 -------------- dropdown-menu-04/script.js | 14 -- dropdown-menu-04/style.css | 158 ---------------------------- footer-02/assets/instagram.svg | 1 footer-02/assets/linkedin.svg | 1 footer-02/assets/twitter.svg | 1 footer-02/assets/youtube.svg | 1 footer-02/index.html | 73 ------------- footer-02/style.css | 90 ---------------- | 0 | 0 | 0 | 0 | 0 | 2 | 0 gallery-01/index.html | 50 ++++---- gallery-02/index.html | 37 +++-- gallery-03/index.html | 14 + input-01/material-ui.html | 24 +++- input-02/material-ui.html | 7 login-01/index.html | 27 +++ | 0 | 0 | 0 | 0 | 0 menu-01/index.html | 23 ++- | 16 ++ | 0 | 2 scrolling-01/index.html | 85 +++++++------- search-input-01/index.html | 18 ++-
fixes
diff --git a/accordion-01/index.html b/accordion-01/index.html index 91a59866b5b312ea38e96ad37ae6e9861238521a..a4d69c8eebbaace20b214934bc00ddd2933ab93c 100644 --- a/accordion-01/index.html +++ b/accordion-01/index.html @@ -1,9 +1,22 @@ <!DOCTYPE html> <html> + <header> + <head> + <meta charset="UTF-8"> + <title>Accordion 01</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="preconnect" href="https://fonts.googleapis.com"> <header> + <link + href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" + rel="stylesheet" + type='text/css' + <header> <title>Accordion FAQ</title> + <header> <link rel="stylesheet" href="style.css"> + <header> </header> <body> <div class="faq-container"> @@ -12,7 +25,7 @@<span class="faq-title"> How long does the course take? </span> - <img src="assets/plus.svg" class="expand-icon" /> + <img src="assets/plus.svg" class="expand-icon" alt="Plus"> </summary> <div class="faq-content"> The video content takes more than 4.5 hours. ... @@ -23,7 +36,7 @@ <span class="faq-title"> Who teaches courses on Atheros Learning? </span> - <img src="assets/plus.svg" class="expand-icon" /> + <img src="assets/plus.svg" class="expand-icon" alt="Plus"> </summary> <div class="faq-content"> The authors of the courses are mostly ... @@ -32,21 +45,21 @@ <details> <summary> <span class="faq-title">How is the course different from other UX/UI design courses?</span> - <img src="assets/plus.svg" class="expand-icon" /> + <img src="assets/plus.svg" class="expand-icon" alt="Plus"> </summary> <div class="faq-content">The key aspect is that this course provides a clear overview of the whole design process and principles, that represent necessary information for being successful within the industry. You will also get direct support from the author of this course, who is ready to answer all your questions and care about your next steps. Last but not least is the fact, that it's not only about video content, but you will also get access to the unique database of design resources and special offers from the partners of the course.</div> </details> <details> <summary> <span class="faq-title">Do I get a certificate after completing a course?</span> - <img src="assets/plus.svg" class="expand-icon" /> + <img src="assets/plus.svg" class="expand-icon" alt="Plus"> </summary> <div class="faq-content">Yes, after successfully finishing the quizzes within the course, you can download a certificate, proving all gained knowledge and skills.</div> </details> <details> <summary> <span class="faq-title">Are there any hidden fees within the course?</span> - <img src="assets/plus.svg" class="expand-icon" /> + <img src="assets/plus.svg" class="expand-icon" alt="Plus"> </summary> <div class="faq-content"> Absolutely not! You will gain all benefits and features with the one-time payment, unlocking the course.</div> </details> diff --git a/accordion-01/script.js b/accordion-01/script.js index 842d5270bc061d57a3b5344321cdf1bae4672b65..c41cce714b1f16017dce3951efafb726de4a64ad 100644 --- a/accordion-01/script.js +++ b/accordion-01/script.js @@ -4,8 +4,6 @@ //? of summary component and slightly modified //? https://css-tricks.com/how-to-animate-the- //? details-element-using-waapi/ - - class Accordion { constructor(el) { this.el = el; diff --git a/accordion-01/style.css b/accordion-01/style.css index 30911ccc743536b27ac65f18493b3a86737386af..d7718e1641d54e66c05854f1c6270fbcd16f893d 100644 --- a/accordion-01/style.css +++ b/accordion-01/style.css @@ -1,8 +1,7 @@ -@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); - html { font-size: 16px; font-family: "Mulish"; + background: white; } body { diff --git a/accordion-02/index.html b/accordion-02/index.html index 9b7b7a4c42b476e973f93ec161d480ea675149da..552133193abdc3205deafe8f7a0f74ba193f4fc7 100644 --- a/accordion-02/index.html +++ b/accordion-02/index.html @@ -1,10 +1,24 @@ <!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Accordion 02</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <title>Accordion</title> <html> + <title>Accordion</title> <header> <title>Accordion</title> + <title>Accordion</title> + <title>Accordion</title> <link rel="stylesheet" href="style.css"> + <title>Accordion</title> </header> + > + <link rel="stylesheet" type="text/css" href="style.css"> + </head> <body> <nav class="accordion-container"> <div class="main-item"> diff --git a/accordion-02/style.css b/accordion-02/style.css index bd785c3bf595af26f9608068c57dbc803cef1692..7dc7177c020e3aecaddc4f05ba6bc78ea2dec59e 100644 --- a/accordion-02/style.css +++ b/accordion-02/style.css @@ -1,4 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); :root { --primary-violet: #6238E2; @@ -9,7 +8,7 @@ } html { font-size: 16px; - font-family: "Mulish"; + font-family: "Poppins"; } body { diff --git a/buttons-01/index.html b/buttons-01/index.html index edc5c5d0707f1b256267cef086bb2bf86f385415..8ea0238d64be4241082a4367901937c66f478f71 100644 --- a/buttons-01/index.html +++ b/buttons-01/index.html @@ -5,6 +5,13 @@ <meta charset="UTF-8"> <title>Buttons</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link + href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" + rel="stylesheet" + type='text/css' + > <link rel="stylesheet" href="style.css"> </head> <body> diff --git a/buttons-01/style.css b/buttons-01/style.css index 5d14ea1c3ddb0400aac69ab3ecd22ab52d6970b0..903df93832a606ba5b9f2b3340f74b5b50b99f3d 100644 --- a/buttons-01/style.css +++ b/buttons-01/style.css @@ -1,7 +1,3 @@ - -@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); - - :root { --background: #2C2C2C; } diff --git a/buttons-02/index.html b/buttons-02/index.html index dd2a70f45a1b36f065ebe62026dc4ed9f1fe3733..f62d24ee281d585f17d4da080732cee7fa95a510 100644 --- a/buttons-02/index.html +++ b/buttons-02/index.html @@ -8,6 +8,13 @@ name="viewport" content="width=device-width, initial-scale=1.0" > + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link + href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" + rel="stylesheet" + type='text/css' + > <link rel="stylesheet" href="style.css"> </head> <body> diff --git a/buttons-02/style.css b/buttons-02/style.css index f9c7dff6d0b45bddadee6d0f69fba1df5eedf103..f1ee64e49cc9aca670535c14be8d0fc3a94e9bcc 100644 --- a/buttons-02/style.css +++ b/buttons-02/style.css @@ -1,5 +1,3 @@ - -@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); :root { --background: #2C2C2C; diff --git a/cards-01/cards.html b/cards-01/cards.html index 7957315ffa388adf8db85b8ad383b12c217a04e5..f870cb8eede92b64f309003427176073dfe397bb 100644 --- a/cards-01/cards.html +++ b/cards-01/cards.html @@ -1,32 +1,46 @@ <!DOCTYPE html> -<html> + </header> <header> + </header> <title>Cards</title> + </header> <link rel="stylesheet" href="style.css"> + <title>Cards</title> + </header> </header> + </header> <body> + </header> <span class="background"> + </header> <span class="centering"> -<!DOCTYPE html> + <body> -<!DOCTYPE html> + <body> <!DOCTYPE html> -<!DOCTYPE html> + <body> <html> -<!DOCTYPE html> + <body> <header> -<!DOCTYPE html> + <body> <title>Cards</title> -<!DOCTYPE html> + type='text/css' + > <link rel="stylesheet" href="style.css"> -<!DOCTYPE html> + <body> </header> -<!DOCTYPE html> <body> -<!DOCTYPE html> + <div class="background"> + <body> <span class="background"> -<!DOCTYPE html> + <body> <span class="centering"> + <article> +<!DOCTYPE html> <html> + <img + <span class="background"> + alt="Preview" + > </figure> <div class="article-preview"> <h2>My Blog 1</h2> @@ -44,14 +58,10 @@ <article> <figure> <img - src="https://img.freepik.com/free-photo/beautiful-aerial-shot-fronalpstock- - mountains-switzerland-beautiful-pink-blue-sky_181624-9315.jpg?w=900&t= - st=1687123407~exp=1687124007~hmac=15a1b5a4d3a5af66dfba67bdcd577f769f813 - bf06fc8b5e50f32f6503099bbd8" + src="https://img.freepik.com/free-photo/beautiful-aerial-shot-fronalpstock-mountains-switzerland-beautiful-pink-blue-sky_181624-9315.jpg?w=900&t=st=1687123407~exp=1687124007~hmac=15a1b5a4d3a5af66dfba67bdcd577f769f813bf06fc8b5e50f32f6503099bbd8" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 2</h2> @@ -66,18 +76,13 @@ </p> </div> </article> - <!-- more cards here --> - - - <article> <figure> <img src="https://img.freepik.com/free-photo/tropical-beach_74190-188.jpg?w=1800&t=st=1687169672~exp=1687170272~hmac=b66f9b9c1e344cbfe6fe2e5f65e94ebb8d418dad2e2af2b892ad9ac60e9eb79c" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 3</h2> @@ -91,15 +96,13 @@ </p> </div> </article> - <article> <figure> <img src="https://img.freepik.com/free-photo/pathway-middle-green-leafed-trees-with-sun-shining-through-branches_181624-4539.jpg?w=900&t=st=1687123477~exp=1687124077~hmac=6e8b1735a2cb25be79f248b6a3307a37a15b080dee114565d01704b97d432a80" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 4</h2> @@ -118,9 +121,8 @@ <img src="https://img.freepik.com/free-photo/beautiful-paradise-island-with-beach-sea_74190-1023.jpg?w=1800&t=st=1687169691~exp=1687170291~hmac=7a65a4e5b2eb374e94e17fd7fb2ab0d1b7b7aaf83078cd62ed5d0a84b66d5beb" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 5</h2> @@ -128,7 +130,6 @@ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. <title>Cards</title> - <title>Cards</title> <link rel="stylesheet" href="style.css"> Read more </a> @@ -140,9 +141,8 @@
<img src="https://img.freepik.com/free-photo/empty-wood-chair-table-outdoor-patio-with-beautiful-tropical-beach-sea_74190-9961.jpg?w=1800&t=st=1687169720~exp=1687170320~hmac=0a77994214a9019510f28af43dab452ada527e96585d6e7f563a09995598851e" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 6</h2> @@ -161,9 +161,8 @@ <img src="https://img.freepik.com/free-photo/view-mountains-landscape-huesca_1398-5217.jpg?w=2000&t=st=1687169991~exp=1687170591~hmac=aa445998f8b6570cab3abc9d68853ab80ba944475fcbc05c70c6061f967ab9f7" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 7</h2> @@ -182,9 +181,8 @@ <img src="https://img.freepik.com/free-photo/beautiful-shot-snowy-hill-surrounded-by-mountains-with-light-pink-sky_181624-4102.jpg?w=2000&t=st=1687169963~exp=1687170563~hmac=b811dc16315ec7776b847588539208c1d57e43df80f7319aeb9b55ed7322784b" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 8</h2> @@ -203,9 +201,8 @@ <img src="https://img.freepik.com/free-photo/beautiful_1203-2633.jpg?w=2000&t=st=1687169925~exp=1687170525~hmac=4e1fdddf8ca048eaa100d431639d165f115cd16cea95feff591fbecdc3b28d4c" alt="Preview" + <span class="background"> <!DOCTYPE html> - <span class="centering"> - /> </figure> <div class="article-preview"> <h2>My Blog 9</h2> @@ -219,13 +216,11 @@ </p> </div> </article> - + </div> + <span class="background"> <title>Cards</title> - <link rel="stylesheet" href="style.css"> <span class="background"> <link rel="stylesheet" href="style.css"> - <span class="centering"> - </span> </body> </html> diff --git a/cards-01/style.css b/cards-01/style.css index 9ce2b1f527bc9368d7c18b51314205d6ca0f79bd..3333684dd4edd7521d7216c063e230b238391223 100644 --- a/cards-01/style.css +++ b/cards-01/style.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); - :root { --primary: #DD946F ; --secondary: #261E5A; @@ -9,11 +7,11 @@ * { margin: 0; padding: 0; box-sizing: border-box; - font-family: Mulish; } body { background-color: var(--secondary); + font-family: Mulish; } .background { diff --git a/carousel-01/index.html b/carousel-01/index.html index 2d57c99369a38c8565b59844fe1207c9e3ab24f3..b3be4b968dd8573c701ad0bc5f1e185fe8a9e4bc 100644 --- a/carousel-01/index.html +++ b/carousel-01/index.html @@ -1,86 +1,88 @@ <!DOCTYPE html> <html> - <header> - <title>Cards</title> - <link rel="stylesheet" href="style.css"> - <script src="script.js"></script> </header> +<html> <body> - + <header> - + <title>Cards</title> + <header> - + <header> <!DOCTYPE html> - + <header> <html> - + <header> <header> - + <header> <title>Cards</title> - + <header> <link rel="stylesheet" href="style.css"> - + <header> <script src="script.js"></script> - + <header> </header> - + <header> <body> -<!DOCTYPE html> + <title>Cards</title> -<!DOCTYPE html> + > + <link rel="stylesheet" href="style.css"> + <title>Cards</title> - </figure> - </article> + <body> + <title>Cards</title> <!DOCTYPE html> - + <title>Cards</title> <html> - <header> +<html> -<!DOCTYPE html> + <header> -<!DOCTYPE html> <title>Cards</title> - st=1687123407~exp=1687124007~hmac=15a1b5a4d3a5af66dfba67bdcd577f769f813 - bf06fc8b5e50f32f6503099bbd8" + <header> alt="Preview" title="Preview" - /> + > </figure> -<!DOCTYPE html> + </div> + <title>Cards</title> <html> - <article class="card"> <figure> <img - src="https://img.freepik.com/free-photo/tropical-beach_74190-188.jpg?w=1800& + src="https://img.freepik.com/free-photo/beautiful-aerial-shot-fronalpstock-mountains-switzerland-beautiful-pink-blue-sky_181624-9315.jpg?w=900&t=st=1687123407~exp=1687124007~hmac=15a1b5a4d3a5af66dfba67bdcd577f769f813bf06fc8b5e50f32f6503099bbd8" -<!DOCTYPE html> + <body> - 2e2af2b892ad9ac60e9eb79c" - alt="Preview" + > <!DOCTYPE html> <!DOCTYPE html> - - </figure> + </div> -<!DOCTYPE html> + <title>Cards</title> <html> - <article class="card"> <figure> <img -<html> + src="https://img.freepik.com/free-photo/tropical-beach_74190-188.jpg?w=1800&t=st=1687169672~exp=1687170272~hmac=b66f9b9c1e344cbfe6fe2e5f65e94ebb8d418dad2e2af2b892ad9ac60e9eb79c" + <body> + > -<html> +<!DOCTYPE html> <!DOCTYPE html> + </div> + <title>Cards</title> <html> + <html> - <body> + <header> - title="Preview" + src="https://img.freepik.com/free-photo/pathway-middle-green-leafed-trees-with-sun-shining-through-branches_181624-4539.jpg?w=900&t=st=1687123477~exp=1687124077~hmac=6e8b1735a2cb25be79f248b6a3307a37a15b080dee114565d01704b97d432a80" -<!DOCTYPE html> + <body> + > </figure> - </article> + </div> - </section> + </div> </div> + <script src="script.js"></script> </body> </html> diff --git a/carousel-01/style.css b/carousel-01/style.css index c02546695ee53a2a4402fbfabd165ecdfab37dc9..72779485d8dcdf65f178e5697945ac069b4280a3 100644 --- a/carousel-01/style.css +++ b/carousel-01/style.css @@ -6,7 +6,7 @@ } html { scroll-behavior: smooth; - font-family: 'Roboto', sans-serif; + font-family: 'Mullish', sans-serif; } diff --git a/custom-cursor-01/index.html b/custom-cursor-01/index.html index 45ed091ce6494fd26cbe25217c8154562b985c8f..92bb374c096bfe9b57efbc92f01676452f710020 100644 --- a/custom-cursor-01/index.html +++ b/custom-cursor-01/index.html @@ -1,14 +1,19 @@ <!DOCTYPE html> +<html lang="zxx"> + <head> + <meta charset="UTF-8"> + <title>Cursor Example</title> <html> - <header> + name="viewport" - <title>Cursor Example</title> + content="width=device-width, initial-scale=1.0" + > <link rel="stylesheet" href="style.css"> <style> html { cursor: url(spaceship.png), auto; } </style> - </header> + </head> <body> <h1>Cursor Pointer</h1> </body> diff --git a/dropdown-menu-01/assets/help.svg b/dropdown-menu-01/assets/help.svg new file mode 100644 index 0000000000000000000000000000000000000000..6d7b87ee4a5ef8de22373b184df57ca9176a2078 --- /dev/null +++ b/dropdown-menu-01/assets/help.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M9.879 7.519C11.05 6.494 12.95 6.494 14.121 7.519C15.293 8.544 15.293 10.206 14.121 11.231C13.918 11.41 13.691 11.557 13.451 11.673C12.706 12.034 12.001 12.672 12.001 13.5V14.25M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12ZM12 17.25H12.008V17.258H12V17.25Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/dropdown-menu-01/assets/joe-doe-profile.png b/dropdown-menu-01/assets/joe-doe-profile.png new file mode 100644 index 0000000000000000000000000000000000000000..5f0842decfcfe20c314194e1d7384191746395bb Binary files /dev/null and b/dropdown-menu-01/assets/joe-doe-profile.png differ diff --git a/dropdown-menu-01/assets/logout.svg b/dropdown-menu-01/assets/logout.svg new file mode 100644 index 0000000000000000000000000000000000000000..0e89ec3cb124b879f28e0c1608a3b3318ce411be --- /dev/null +++ b/dropdown-menu-01/assets/logout.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M15.749 6C15.749 6.99456 15.3539 7.94839 14.6507 8.65165C13.9474 9.35491 12.9936 9.75 11.999 9.75C11.0044 9.75 10.0506 9.35491 9.34735 8.65165C8.64409 7.94839 8.249 6.99456 8.249 6C8.249 5.00544 8.64409 4.05161 9.34735 3.34835C10.0506 2.64509 11.0044 2.25 11.999 2.25C12.9936 2.25 13.9474 2.64509 14.6507 3.34835C15.3539 4.05161 15.749 5.00544 15.749 6ZM4.5 20.118C4.53213 18.1504 5.33634 16.2742 6.73918 14.894C8.14202 13.5139 10.0311 12.7405 11.999 12.7405C13.9669 12.7405 15.856 13.5139 17.2588 14.894C18.6617 16.2742 19.4659 18.1504 19.498 20.118C17.1454 21.1968 14.5871 21.7535 11.999 21.75C9.323 21.75 6.783 21.166 4.5 20.118Z" stroke="#E3452F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/dropdown-menu-01/assets/message.svg b/dropdown-menu-01/assets/message.svg new file mode 100644 index 0000000000000000000000000000000000000000..32303ea4d5137052913b6fd47e87f521df781275 --- /dev/null +++ b/dropdown-menu-01/assets/message.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M8 9h8"></path> + <path d="M8 13h6"></path> + <path d="M9 18h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-3l-3 3l-3 -3z"></path> +</svg> \ No newline at end of file diff --git a/dropdown-menu-01/assets/notification.svg b/dropdown-menu-01/assets/notification.svg new file mode 100644 index 0000000000000000000000000000000000000000..931bb46e07f8e82562ed52e32e9ac0eb0c4fa697 --- /dev/null +++ b/dropdown-menu-01/assets/notification.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path> + <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path> +</svg> \ No newline at end of file diff --git a/dropdown-menu-01/assets/premium.svg b/dropdown-menu-01/assets/premium.svg new file mode 100644 index 0000000000000000000000000000000000000000..61f845ebbde834d21f4e6b3844120f136df486fe --- /dev/null +++ b/dropdown-menu-01/assets/premium.svg @@ -0,0 +1,4 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="24" height="24" rx="4" fill="#F1A511"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0214 4.68114C11.3831 3.77295 12.6169 3.77295 12.9786 4.68114L14.6597 8.90334L19.0232 9.26847C19.9631 9.34689 20.3442 10.5713 19.628 11.2122L16.3037 14.1864L17.3187 18.6329C17.5375 19.5908 16.5403 20.3472 15.7361 19.8345L12 17.4514L8.26392 19.8345C7.4597 20.3472 6.4625 19.59 6.68132 18.6329L7.69628 14.1864L4.37201 11.2122C3.6558 10.5713 4.03691 9.34689 4.97679 9.26847L9.34026 8.90334L11.0214 4.68114Z" fill="white"/> +</svg> diff --git a/dropdown-menu-01/assets/profile.svg b/dropdown-menu-01/assets/profile.svg new file mode 100644 index 0000000000000000000000000000000000000000..930711bd52fd2485754b6eece85e6ab3dd30bf8b --- /dev/null +++ b/dropdown-menu-01/assets/profile.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M15.749 6C15.749 6.99456 15.3539 7.94839 14.6507 8.65165C13.9474 9.35491 12.9936 9.75 11.999 9.75C11.0044 9.75 10.0506 9.35491 9.34735 8.65165C8.64409 7.94839 8.249 6.99456 8.249 6C8.249 5.00544 8.64409 4.05161 9.34735 3.34835C10.0506 2.64509 11.0044 2.25 11.999 2.25C12.9936 2.25 13.9474 2.64509 14.6507 3.34835C15.3539 4.05161 15.749 5.00544 15.749 6ZM4.5 20.118C4.53213 18.1504 5.33634 16.2742 6.73918 14.894C8.14202 13.5139 10.0311 12.7405 11.999 12.7405C13.9669 12.7405 15.856 13.5139 17.2588 14.894C18.6617 16.2742 19.4659 18.1504 19.498 20.118C17.1454 21.1968 14.5871 21.7535 11.999 21.75C9.323 21.75 6.783 21.166 4.5 20.118Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/dropdown-menu-01/assets/search.svg b/dropdown-menu-01/assets/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..36da3fdc21acddb13b432b5f2b98d0bb4e4e6ef5 --- /dev/null +++ b/dropdown-menu-01/assets/search.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z" stroke="#0F1F49" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> \ No newline at end of file diff --git a/dropdown-menu-01/assets/settings.svg b/dropdown-menu-01/assets/settings.svg new file mode 100644 index 0000000000000000000000000000000000000000..c89d96a1b55e43c9a7b88fc2c050cc0549352064 --- /dev/null +++ b/dropdown-menu-01/assets/settings.svg @@ -0,0 +1,4 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M9.59372 3.94C9.68372 3.398 10.1537 3 10.7037 3H13.2967C13.8467 3 14.3167 3.398 14.4067 3.94L14.6197 5.221C14.6827 5.595 14.9327 5.907 15.2647 6.091C15.3387 6.131 15.4117 6.174 15.4847 6.218C15.8087 6.414 16.2047 6.475 16.5597 6.342L17.7767 5.886C18.0261 5.79221 18.3007 5.78998 18.5516 5.87971C18.8025 5.96945 19.0134 6.14531 19.1467 6.376L20.4427 8.623C20.5758 8.8537 20.6227 9.12413 20.5751 9.38617C20.5275 9.6482 20.3884 9.88485 20.1827 10.054L19.1797 10.881C18.8867 11.121 18.7417 11.494 18.7487 11.873C18.7503 11.958 18.7503 12.043 18.7487 12.128C18.7417 12.506 18.8867 12.878 19.1787 13.118L20.1837 13.946C20.6077 14.296 20.7177 14.9 20.4437 15.376L19.1457 17.623C19.0126 17.8536 18.8019 18.0296 18.5512 18.1195C18.3005 18.2094 18.0261 18.2074 17.7767 18.114L16.5597 17.658C16.2047 17.525 15.8097 17.586 15.4837 17.782C15.4112 17.8261 15.3379 17.8688 15.2637 17.91C14.9327 18.093 14.6827 18.405 14.6197 18.779L14.4067 20.059C14.3167 20.602 13.8467 21 13.2967 21H10.7027C10.1527 21 9.68272 20.602 9.59272 20.06L9.37972 18.779C9.31772 18.405 9.06772 18.093 8.73572 17.909C8.66157 17.8681 8.58822 17.8258 8.51572 17.782C8.19072 17.586 7.79572 17.525 7.43972 17.658L6.22272 18.114C5.97345 18.2075 5.69908 18.2096 5.44842 18.1199C5.19775 18.0302 4.98703 17.8545 4.85372 17.624L3.55672 15.377C3.42366 15.1463 3.37676 14.8759 3.42437 14.6138C3.47198 14.3518 3.61101 14.1152 3.81672 13.946L4.82072 13.119C5.11272 12.879 5.25772 12.506 5.25072 12.127C5.24915 12.042 5.24915 11.957 5.25072 11.872C5.25772 11.494 5.11272 11.122 4.82072 10.882L3.81672 10.054C3.61126 9.88489 3.47239 9.64843 3.42479 9.38662C3.37719 9.12481 3.42393 8.8546 3.55672 8.624L4.85372 6.377C4.9869 6.14614 5.19773 5.97006 5.44863 5.88014C5.69953 5.79021 5.97421 5.79229 6.22372 5.886L7.43972 6.342C7.79572 6.475 8.19072 6.414 8.51572 6.218C8.58772 6.174 8.66172 6.131 8.73572 6.09C9.06772 5.907 9.31772 5.595 9.37972 5.221L9.59372 3.94Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/dropdown-menu-01/assets/tutorials.svg b/dropdown-menu-01/assets/tutorials.svg new file mode 100644 index 0000000000000000000000000000000000000000..572092a06d753f5c6b72b28f9344654adf899c87 --- /dev/null +++ b/dropdown-menu-01/assets/tutorials.svg @@ -0,0 +1,3 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M12 6.04201C10.3516 4.56337 8.2144 3.74695 6 3.75001C4.948 3.75001 3.938 3.93001 3 4.26201V18.512C3.96362 18.172 4.97816 17.9989 6 18C8.305 18 10.408 18.867 12 20.292M12 6.04201C13.6483 4.56328 15.7856 3.74686 18 3.75001C19.052 3.75001 20.062 3.93001 21 4.26201V18.512C20.0364 18.172 19.0218 17.9989 18 18C15.7856 17.997 13.6484 18.8134 12 20.292M12 6.04201V20.292" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/dropdown-menu-01/index.html b/dropdown-menu-01/index.html new file mode 100644 index 0000000000000000000000000000000000000000..988458c9ce3e0171f0f49f9f6258283f42a82a6b --- /dev/null +++ b/dropdown-menu-01/index.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Dropdown Menu 01</title> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link + href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" + rel="stylesheet" + > + <link rel="stylesheet" href="style.css"> + </head> + <body> + <header> + <span class="navigation__group"> + <img class="icon" src="assets/message.svg" alt="Message"> + <img class="icon" src="assets/notification.svg" alt="Notification"> + <img class="profile" src="assets/joe-doe-profile.png" alt="Joe Doe Picture"> + </span> + <div class="dropdown__wrapper hide dropdown__wrapper--fade-in none"> + <div class="dropdown__group"> + <div class="user-name">Joe Doe</div> + <div class="email">[email protected]</div> + </div> + <hr class="divider"> + <nav> + <ul> + <li> + <img src="assets/profile.svg" alt="Profile"> My Profile + </li> + <li> + <img src="assets/settings.svg" alt="Settings"> Settings + </li> + </ul> + <hr class="divider"> + <ul> + <li> + <img src="assets/tutorials.svg" alt="Tutorials"> Tutorials + </li> + <li> + <img src="assets/help.svg" alt="Help"> Help Center + </li> + </ul> + <hr class="divider"> + <ul> + <li> + <img src="assets/premium.svg" alt="Premium">Go Premium + </li> + <li style="color: #E3452F;"> + <img src="assets/logout.svg" alt="Log Out">Log out + </li> + </ul> + </nav> + </div> + </header> + <script src="script.js"></script> + </body> +</html> + + + diff --git a/dropdown-menu-01/script.js b/dropdown-menu-01/script.js new file mode 100644 index 0000000000000000000000000000000000000000..ae8c321f320d3e64917157d90dc1e01c458e906f --- /dev/null +++ b/dropdown-menu-01/script.js @@ -0,0 +1,20 @@ + +const profile = document.querySelector('.profile'); +const dropdown = document.querySelector('.dropdown__wrapper'); + +profile.addEventListener('click', () => { + dropdown.classList.remove('none'); + dropdown.classList.toggle('hide'); +}) + + +document.addEventListener("click", (event) => { + const isClickInsideDropdown = dropdown.contains(event.target); + const isProfileClicked = profile.contains(event.target); + + if (!isClickInsideDropdown && !isProfileClicked) { + dropdown.classList.add('hide'); + dropdown.classList.add('dropdown__wrapper--fade-in'); + } +}); + diff --git a/dropdown-menu-01/style.css b/dropdown-menu-01/style.css new file mode 100644 index 0000000000000000000000000000000000000000..19cccf2c4cbe8b1e971db8d415d4ced449a6dbe3 --- /dev/null +++ b/dropdown-menu-01/style.css @@ -0,0 +1,164 @@ + + +:root { + --primary: #625BFE; + --text: #0F192D; + --text-gray: #5A678C; + --gray: #c0bcff; + --error: #E3452F; +} + +body { + font-family: 'Red Hat Display', sans-serif; + margin: 0px; +} + +* { + box-sizing: border-box; +} + +header { + position: fixed; + height: 80px; + padding: 0 16px; + width: 100%; + display: flex; + align-items: center; + background-color: var(--primary); + justify-content: end; +} + +.navigation__group { + display: flex; + gap: 16px; + align-items: center; +} + +.navigation__group > .icon { + cursor: pointer; + width: 36px; + height: 36px; + transition: all 0.2s ease-in-out; +} + +.navigation__group > .icon:hover { + transform: scale(1.1); +} + +.user-name { + font-size: 14px; + font-weight: 700; + text-align: left; + color: var(--text); +} + +.profile { + display: block; + width: 50px; + height: 50px; + cursor: pointer; + border-radius: 50%; + border: 3px solid #f7f7f7; + filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1)); +} + +.profile:hover { + transform: scale(1.05); + transition: all 0.2s ease-in-out; +} + +.email { + color: var(--text-gray); +} + + +.dropdown__wrapper { + width: 240px; + top: 88px; + right: 16px; + position: absolute; + border-radius: 8px; + border: 1px solid var(--text-gray); + display: flex; + flex-direction: column; + gap: 4px; + animation: fadeOutAnimation ease-in-out 0.3s forwards; +} + +.dropdown__wrapper--fade-in { + animation: fadeInAnimation ease-in-out 0.3s forwards; +} + +.none { + display: none; +} + +.hide { + opacity: 0; + visibility: hidden; + animation: fadeOutAnimation ease-in-out 0.3s forwards; +} + + +@keyframes fadeInAnimation { + 0% { + opacity: 0; + visibility: hidden; + width: 160px; + } + 100% { + opacity: 1; + visibility: visible; + width: 240px; + } +} + +@keyframes fadeOutAnimation { + 0% { + opacity: 1; + width: 240px; + visibility: visible; + } + 100% { + opacity: 0; + width: 160px; + visibility: hidden; + } +} + +.dropdown__group { + padding: 12px; +} + +.divider { + width: 100%; + padding: 0px; + margin: 0px; +} + +nav > ul { + list-style-type: none; + padding: 0px; + margin: 0px; + gap: 4px; +} + +nav > ul > li { + height: 40px; + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; + padding-left: 8px; + width: 100%; +} + +nav > ul > li > img { + height: 24px; + width: 24px; +} + +nav > ul > li:hover { + cursor: pointer; + text-decoration: underline; +} diff --git a/dropdown-menu-02/assets/help.svg b/dropdown-menu-02/assets/help.svg deleted file mode 100644 index 6d7b87ee4a5ef8de22373b184df57ca9176a2078..0000000000000000000000000000000000000000 --- a/dropdown-menu-02/assets/help.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M9.879 7.519C11.05 6.494 12.95 6.494 14.121 7.519C15.293 8.544 15.293 10.206 14.121 11.231C13.918 11.41 13.691 11.557 13.451 11.673C12.706 12.034 12.001 12.672 12.001 13.5V14.25M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12ZM12 17.25H12.008V17.258H12V17.25Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> -</svg> diff --git a/dropdown-menu-02/assets/jason.jpg b/dropdown-menu-02/assets/jason.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e8bdb752b110b5009c8c55eb9ef045975ecac5c3 Binary files /dev/null and b/dropdown-menu-02/assets/jason.jpg differ diff --git a/dropdown-menu-02/assets/jennifer.jpg b/dropdown-menu-02/assets/jennifer.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0d1a2b5b92247d3b58098acd53646ac0a0bde9fc Binary files /dev/null and b/dropdown-menu-02/assets/jennifer.jpg differ diff --git a/dropdown-menu-02/assets/michelle.jpg b/dropdown-menu-02/assets/michelle.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7d3e5c584f496ad4b9a3fd8f463eada3527d6327 Binary files /dev/null and b/dropdown-menu-02/assets/michelle.jpg differ diff --git a/dropdown-menu-02/assets/premium.svg b/dropdown-menu-02/assets/premium.svg deleted file mode 100644 index 61f845ebbde834d21f4e6b3844120f136df486fe..0000000000000000000000000000000000000000 --- a/dropdown-menu-02/assets/premium.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<rect width="24" height="24" rx="4" fill="#F1A511"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0214 4.68114C11.3831 3.77295 12.6169 3.77295 12.9786 4.68114L14.6597 8.90334L19.0232 9.26847C19.9631 9.34689 20.3442 10.5713 19.628 11.2122L16.3037 14.1864L17.3187 18.6329C17.5375 19.5908 16.5403 20.3472 15.7361 19.8345L12 17.4514L8.26392 19.8345C7.4597 20.3472 6.4625 19.59 6.68132 18.6329L7.69628 14.1864L4.37201 11.2122C3.6558 10.5713 4.03691 9.34689 4.97679 9.26847L9.34026 8.90334L11.0214 4.68114Z" fill="white"/> -</svg> diff --git a/dropdown-menu-02/assets/ricahrd_taylor.jpg b/dropdown-menu-02/assets/ricahrd_taylor.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0012e9c07a5351bd375b579759843f379d7c1dc6 Binary files /dev/null and b/dropdown-menu-02/assets/ricahrd_taylor.jpg differ diff --git a/dropdown-menu-02/assets/search.svg b/dropdown-menu-02/assets/search.svg deleted file mode 100644 index 36da3fdc21acddb13b432b5f2b98d0bb4e4e6ef5..0000000000000000000000000000000000000000 --- a/dropdown-menu-02/assets/search.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z" stroke="#0F1F49" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> -</svg> \ No newline at end of file diff --git a/dropdown-menu-02/assets/settings.svg b/dropdown-menu-02/assets/settings.svg deleted file mode 100644 index c89d96a1b55e43c9a7b88fc2c050cc0549352064..0000000000000000000000000000000000000000 --- a/dropdown-menu-02/assets/settings.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M9.59372 3.94C9.68372 3.398 10.1537 3 10.7037 3H13.2967C13.8467 3 14.3167 3.398 14.4067 3.94L14.6197 5.221C14.6827 5.595 14.9327 5.907 15.2647 6.091C15.3387 6.131 15.4117 6.174 15.4847 6.218C15.8087 6.414 16.2047 6.475 16.5597 6.342L17.7767 5.886C18.0261 5.79221 18.3007 5.78998 18.5516 5.87971C18.8025 5.96945 19.0134 6.14531 19.1467 6.376L20.4427 8.623C20.5758 8.8537 20.6227 9.12413 20.5751 9.38617C20.5275 9.6482 20.3884 9.88485 20.1827 10.054L19.1797 10.881C18.8867 11.121 18.7417 11.494 18.7487 11.873C18.7503 11.958 18.7503 12.043 18.7487 12.128C18.7417 12.506 18.8867 12.878 19.1787 13.118L20.1837 13.946C20.6077 14.296 20.7177 14.9 20.4437 15.376L19.1457 17.623C19.0126 17.8536 18.8019 18.0296 18.5512 18.1195C18.3005 18.2094 18.0261 18.2074 17.7767 18.114L16.5597 17.658C16.2047 17.525 15.8097 17.586 15.4837 17.782C15.4112 17.8261 15.3379 17.8688 15.2637 17.91C14.9327 18.093 14.6827 18.405 14.6197 18.779L14.4067 20.059C14.3167 20.602 13.8467 21 13.2967 21H10.7027C10.1527 21 9.68272 20.602 9.59272 20.06L9.37972 18.779C9.31772 18.405 9.06772 18.093 8.73572 17.909C8.66157 17.8681 8.58822 17.8258 8.51572 17.782C8.19072 17.586 7.79572 17.525 7.43972 17.658L6.22272 18.114C5.97345 18.2075 5.69908 18.2096 5.44842 18.1199C5.19775 18.0302 4.98703 17.8545 4.85372 17.624L3.55672 15.377C3.42366 15.1463 3.37676 14.8759 3.42437 14.6138C3.47198 14.3518 3.61101 14.1152 3.81672 13.946L4.82072 13.119C5.11272 12.879 5.25772 12.506 5.25072 12.127C5.24915 12.042 5.24915 11.957 5.25072 11.872C5.25772 11.494 5.11272 11.122 4.82072 10.882L3.81672 10.054C3.61126 9.88489 3.47239 9.64843 3.42479 9.38662C3.37719 9.12481 3.42393 8.8546 3.55672 8.624L4.85372 6.377C4.9869 6.14614 5.19773 5.97006 5.44863 5.88014C5.69953 5.79021 5.97421 5.79229 6.22372 5.886L7.43972 6.342C7.79572 6.475 8.19072 6.414 8.51572 6.218C8.58772 6.174 8.66172 6.131 8.73572 6.09C9.06772 5.907 9.31772 5.595 9.37972 5.221L9.59372 3.94Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> -<path d="M15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> -</svg> diff --git a/dropdown-menu-02/assets/tutorials.svg b/dropdown-menu-02/assets/tutorials.svg deleted file mode 100644 index 572092a06d753f5c6b72b28f9344654adf899c87..0000000000000000000000000000000000000000 --- a/dropdown-menu-02/assets/tutorials.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M12 6.04201C10.3516 4.56337 8.2144 3.74695 6 3.75001C4.948 3.75001 3.938 3.93001 3 4.26201V18.512C3.96362 18.172 4.97816 17.9989 6 18C8.305 18 10.408 18.867 12 20.292M12 6.04201C13.6483 4.56328 15.7856 3.74686 18 3.75001C19.052 3.75001 20.062 3.93001 21 4.26201V18.512C20.0364 18.172 19.0218 17.9989 18 18C15.7856 17.997 13.6484 18.8134 12 20.292M12 6.04201V20.292" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> -</svg> diff --git a/dropdown-menu-02/index.html b/dropdown-menu-02/index.html index 8c11864b8cef842ce10e5bc49cabb3ac60263a1e..8f7a5cac26885c34d4400a503f24269b8b3f0566 100644 --- a/dropdown-menu-02/index.html +++ b/dropdown-menu-02/index.html @@ -1,84 +1,136 @@ <!DOCTYPE html> +<html lang="en"> + <head> + <title>Menu Example</title> <html> + <title>Menu Example</title> <header> + <title>Menu Example</title> <title>Menu Example</title> + <title>Menu Example</title> <link rel="stylesheet" href="style.css"> + <title>Menu Example</title> </header> + <title>Menu Example</title> <body> + <title>Menu Example</title> <header> + <title>Menu Example</title> <span class="navigation__group"> -<!DOCTYPE html> + <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="style.css"> + <body> + <header> + <link rel="stylesheet" href="style.css"> <!DOCTYPE html> -<!DOCTYPE html> + <div class="icon-wrapper"> + <img class="icon" src="assets/message.svg" alt="Message"> + </div> + <div class="icon-wrapper notifications"> + <img class="icon" src="assets/notification.svg" alt="Notification"> + <div class="notification-mark notification-mark--pulsing"></div> + </div> <img class="profile" src="assets/joe-doe-profile.png" alt="Joe Doe Picture"> -<!DOCTYPE html> <header> + <title>Menu Example</title> <div class="dropdown__wrapper hide dropdown__wrapper--fade-in none"> -<!DOCTYPE html> <link rel="stylesheet" href="style.css"> + <header> -<!DOCTYPE html> + <h2>Notifications</h2> + </div> </header> + </header> <!DOCTYPE html> + <div class="avatar-wrapper"> + <img class="avatar" src="assets/jason.jpg" alt="Jason Alexander"> + <div class="notification-mark"></div> + </div> + <div class="notification-item__body"> + </header> <body> -<!DOCTYPE html> + </header> <header> -<!DOCTYPE html> + </header> <span class="navigation__group"> -<html> + <body> -<html> + <body> <!DOCTYPE html> + <body> <html> -<html> + </div> -<html> + <body> <header> -<html> + <body> <title>Menu Example</title> -<html> + <div class="notification-item notification-item--recent"> + </header> <html> -<html> + <body> <link rel="stylesheet" href="style.css"> -<html> + </header> <title>Menu Example</title> -<html> </header> + <link rel="stylesheet" href="style.css"> -<html> + <div class="notification-item__body"> + </header> <body> - <ul> + <strong>Michelle Claude</strong> opened a new <strong>Issue 152</strong> + </div> + <time> + 8 min ago -<html> + <body> <html> - <img src="assets/tutorials.svg" alt="Tutorials"> Tutorials + </div> -<html> + <body> <title>Menu Example</title> -<html> + + <div class="notification-item"> + </header> <html> -<html> + <body> <span class="navigation__group"> - </li> + </div> -<html> + </header> </header> -<html> + </header> <body> - <ul> + <strong>Richard Taylor</strong> edited <strong>Road Map 2023</strong> - <li> + </div> - <header> + <body> + 1 week ago + <body> <html> + </div> + <body> <title>Menu Example</title> - <li style="color: #E3452F;"> + <div class="notification-item"> - <header> + </header> <html> + <header> <html> + </div> + <div class="notification-item__body"> + <div> + <strong>Jennifer Floyd</strong> created <strong>Road Map 2023</strong> + </div> + <time> + <header> <title>Menu Example</title> + <body> <html> </header> + <link rel="stylesheet" href="style.css"> - </nav> + </div> - <header> + <link rel="stylesheet" href="style.css"> <title>Menu Example</title> + </div> </header> - <header> + <header> </header> <header> - <body> + </header> </html> + diff --git a/dropdown-menu-02/script.js b/dropdown-menu-02/script.js index ae8c321f320d3e64917157d90dc1e01c458e906f..8a8b07479281bfd83997e8e3243a88b4dcf6e23c 100644 --- a/dropdown-menu-02/script.js +++ b/dropdown-menu-02/script.js @@ -1,8 +1,8 @@ -const profile = document.querySelector('.profile'); +const notifications = document.querySelector('.notifications'); const dropdown = document.querySelector('.dropdown__wrapper'); -profile.addEventListener('click', () => { +notifications.addEventListener('click', () => { dropdown.classList.remove('none'); dropdown.classList.toggle('hide'); }) @@ -10,11 +11,11 @@ document.addEventListener("click", (event) => { const isClickInsideDropdown = dropdown.contains(event.target); +document.addEventListener("click", (event) => { - + const isClickInsideDropdown = dropdown.contains(event.target); dropdown.classList.add('hide'); dropdown.classList.add('dropdown__wrapper--fade-in'); } }); - diff --git a/dropdown-menu-02/style.css b/dropdown-menu-02/style.css index 01499c8e8273f4b28786f98b35d8db00efb37f5f..3e3ee8e41588a4b669e5c66205674dfe73752ebf 100644 --- a/dropdown-menu-02/style.css +++ b/dropdown-menu-02/style.css @@ -4,10 +4,7 @@ @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); :root { --primary: #625BFE; - --text: #0F192D; - --text-gray: #5A678C; - --gray: #c0bcff; - --error: #E3452F; + --important: #F55E5E; } body { @@ -36,28 +33,39 @@ gap: 16px; align-items: center; } -.navigation__group > .icon { +.icon-wrapper { + position: relative; cursor: pointer; - width: 36px; + display: grid; -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); } + --text-gray: #5A678C; transition: all 0.2s ease-in-out; } -:root { +.icon-wrapper .icon { + width: 36px; + height: 36px; +} +.icon-wrapper:hover { transform: scale(1.1); } -.user-name { +.avatar { -:root { + width: 42px; + height: 42px; --primary: #625BFE; +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); -:root { +} --text: #0F192D; -:root { +} --text-gray: #5A678C; + object-fit: cover; +} + +body { :root { - --gray: #c0bcff; + position: relative; } .profile { @@ -67,7 +75,6 @@ height: 50px; cursor: pointer; border-radius: 50%; border: 3px solid #f7f7f7; - filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1)); } .profile:hover { @@ -75,140 +82,152 @@ transform: scale(1.05); transition: all 0.2s ease-in-out; } +body { --primary: #625BFE; - --gray: #c0bcff; - color: var(--text-gray); + position: absolute; +:root { } + --text: #0F192D; + --text-gray: #5A678C; + width: 10px; + height: 10px; --primary: #625BFE; +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); +body { } - --text: #0F192D; +} + + font-family: 'Red Hat Display', sans-serif; - --text: #0F192D; + font-family: 'Red Hat Display', sans-serif; - --text: #0F192D; + font-family: 'Red Hat Display', sans-serif; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); - --text: #0F192D; + font-family: 'Red Hat Display', sans-serif; :root { - --text: #0F192D; +} + + font-family: 'Red Hat Display', sans-serif; --primary: #625BFE; - --text: #0F192D; + display: flex; + cursor: pointer; + --error: #E3452F; --text: #0F192D; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + + font-family: 'Red Hat Display', sans-serif; --text: #0F192D; + font-family: 'Red Hat Display', sans-serif; --text-gray: #5A678C; - --text: #0F192D; + font-family: 'Red Hat Display', sans-serif; --gray: #c0bcff; - --text: #0F192D; + font-family: 'Red Hat Display', sans-serif; --error: #E3452F; } - --text: #0F192D; + font-family: 'Red Hat Display', sans-serif; } - --text-gray: #5A678C; + margin: 0px; } - --text-gray: #5A678C; + margin: 0px; - --text-gray: #5A678C; + margin: 0px; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); } - --text-gray: #5A678C; + margin: 0px; :root { - --text-gray: #5A678C; + margin: 0px; --primary: #625BFE; - visibility: hidden; - animation: fadeOutAnimation ease-in-out 0.3s forwards; } + gap: 16px; - --text-gray: #5A678C; + margin: 0px; --text-gray: #5A678C; - --text-gray: #5A678C; + margin: 0px; --gray: #c0bcff; - opacity: 0; - --text-gray: #5A678C; } - width: 160px; - --gray: #c0bcff; - 100% { - opacity: 1; - --gray: #c0bcff; --primary: #625BFE; - width: 240px; +} - --gray: #c0bcff; + width: 36px; + } + --text: #0F192D; -@keyframes fadeOutAnimation { + margin: 0px auto; - 0% { - --gray: #c0bcff; + --text: #0F192D; :root { - --gray: #c0bcff; --text: #0F192D; - --gray: #c0bcff; --primary: #625BFE; - } - --gray: #c0bcff; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + --text: #0F192D; --text-gray: #5A678C; - --error: #E3452F; - --gray: #c0bcff; +* { - --text-gray: #5A678C; + animation: fadeOutAnimation ease-in-out 0.5s forwards; } - --gray: #c0bcff; -} +.dropdown__wrapper h2 { +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); -.dropdown__group { + font-size: 1.25rem; - padding: 12px; + color: #192028; } - --gray: #c0bcff; + --text: #0F192D; } + font-weight: 700; } - padding: 0px; + + --text-gray: #5A678C; + --text-gray: #5A678C; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); } - --error: #E3452F; +.hide { + opacity: 0; + visibility: hidden; +* { - list-style-type: none; - padding: 0px; +} -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); - --text: #0F192D; +@keyframes fadeInAnimation { + --text-gray: #5A678C; --gray: #c0bcff; + opacity: 0; + --text-gray: #5A678C; } + --gray: #c0bcff; - --error: #E3452F; + 100% { + --gray: #c0bcff; :root { - --error: #E3452F; + --gray: #c0bcff; --primary: #625BFE; - display: flex; + } - flex-direction: row; +} -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); - gap: 16px; +@keyframes fadeOutAnimation { - --error: #E3452F; --text-gray: #5A678C; + --gray: #c0bcff; + opacity: 1; -} -} + visibility: visible; + --gray: #c0bcff; - --error: #E3452F; --gray: #c0bcff; +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); - --error: #E3452F; + --text-gray: #5A678C; --error: #E3452F; - width: 24px; + --text-gray: #5A678C; } + --gray: #c0bcff; } - cursor: pointer; -} -} diff --git a/dropdown-menu-03/assets/jason.jpg b/dropdown-menu-03/assets/jason.jpg deleted file mode 100644 index e8bdb752b110b5009c8c55eb9ef045975ecac5c3..0000000000000000000000000000000000000000 Binary files a/dropdown-menu-03/assets/jason.jpg and /dev/null differ diff --git a/dropdown-menu-03/assets/jennifer.jpg b/dropdown-menu-03/assets/jennifer.jpg deleted file mode 100644 index 0d1a2b5b92247d3b58098acd53646ac0a0bde9fc..0000000000000000000000000000000000000000 Binary files a/dropdown-menu-03/assets/jennifer.jpg and /dev/null differ diff --git a/dropdown-menu-03/assets/joe-doe-profile.png b/dropdown-menu-03/assets/joe-doe-profile.png deleted file mode 100644 index 5f0842decfcfe20c314194e1d7384191746395bb..0000000000000000000000000000000000000000 Binary files a/dropdown-menu-03/assets/joe-doe-profile.png and /dev/null differ diff --git a/dropdown-menu-03/assets/logout.svg b/dropdown-menu-03/assets/logout.svg deleted file mode 100644 index 0e89ec3cb124b879f28e0c1608a3b3318ce411be..0000000000000000000000000000000000000000 --- a/dropdown-menu-03/assets/logout.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M15.749 6C15.749 6.99456 15.3539 7.94839 14.6507 8.65165C13.9474 9.35491 12.9936 9.75 11.999 9.75C11.0044 9.75 10.0506 9.35491 9.34735 8.65165C8.64409 7.94839 8.249 6.99456 8.249 6C8.249 5.00544 8.64409 4.05161 9.34735 3.34835C10.0506 2.64509 11.0044 2.25 11.999 2.25C12.9936 2.25 13.9474 2.64509 14.6507 3.34835C15.3539 4.05161 15.749 5.00544 15.749 6ZM4.5 20.118C4.53213 18.1504 5.33634 16.2742 6.73918 14.894C8.14202 13.5139 10.0311 12.7405 11.999 12.7405C13.9669 12.7405 15.856 13.5139 17.2588 14.894C18.6617 16.2742 19.4659 18.1504 19.498 20.118C17.1454 21.1968 14.5871 21.7535 11.999 21.75C9.323 21.75 6.783 21.166 4.5 20.118Z" stroke="#E3452F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> -</svg> diff --git a/dropdown-menu-03/assets/message.svg b/dropdown-menu-03/assets/message.svg deleted file mode 100644 index 32303ea4d5137052913b6fd47e87f521df781275..0000000000000000000000000000000000000000 --- a/dropdown-menu-03/assets/message.svg +++ /dev/null @@ -1,6 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M8 9h8"></path> - <path d="M8 13h6"></path> - <path d="M9 18h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-3l-3 3l-3 -3z"></path> -</svg> \ No newline at end of file diff --git a/dropdown-menu-03/assets/michelle.jpg b/dropdown-menu-03/assets/michelle.jpg deleted file mode 100644 index 7d3e5c584f496ad4b9a3fd8f463eada3527d6327..0000000000000000000000000000000000000000 Binary files a/dropdown-menu-03/assets/michelle.jpg and /dev/null differ diff --git a/dropdown-menu-03/assets/notification.svg b/dropdown-menu-03/assets/notification.svg deleted file mode 100644 index 931bb46e07f8e82562ed52e32e9ac0eb0c4fa697..0000000000000000000000000000000000000000 --- a/dropdown-menu-03/assets/notification.svg +++ /dev/null @@ -1,5 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path> - <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path> -</svg> \ No newline at end of file diff --git a/dropdown-menu-03/assets/profile.svg b/dropdown-menu-03/assets/profile.svg deleted file mode 100644 index 930711bd52fd2485754b6eece85e6ab3dd30bf8b..0000000000000000000000000000000000000000 --- a/dropdown-menu-03/assets/profile.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M15.749 6C15.749 6.99456 15.3539 7.94839 14.6507 8.65165C13.9474 9.35491 12.9936 9.75 11.999 9.75C11.0044 9.75 10.0506 9.35491 9.34735 8.65165C8.64409 7.94839 8.249 6.99456 8.249 6C8.249 5.00544 8.64409 4.05161 9.34735 3.34835C10.0506 2.64509 11.0044 2.25 11.999 2.25C12.9936 2.25 13.9474 2.64509 14.6507 3.34835C15.3539 4.05161 15.749 5.00544 15.749 6ZM4.5 20.118C4.53213 18.1504 5.33634 16.2742 6.73918 14.894C8.14202 13.5139 10.0311 12.7405 11.999 12.7405C13.9669 12.7405 15.856 13.5139 17.2588 14.894C18.6617 16.2742 19.4659 18.1504 19.498 20.118C17.1454 21.1968 14.5871 21.7535 11.999 21.75C9.323 21.75 6.783 21.166 4.5 20.118Z" stroke="#0F192D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> -</svg> diff --git a/dropdown-menu-03/assets/ricahrd_taylor.jpg b/dropdown-menu-03/assets/ricahrd_taylor.jpg deleted file mode 100644 index 0012e9c07a5351bd375b579759843f379d7c1dc6..0000000000000000000000000000000000000000 Binary files a/dropdown-menu-03/assets/ricahrd_taylor.jpg and /dev/null differ diff --git a/dropdown-menu-03/index.html b/dropdown-menu-03/index.html index 4f9d9fe5ac503f6c58f41594eb8aed5abf7ae38a..0643fb3079d7c47686934b0e6681f9d42ad8fceb 100644 --- a/dropdown-menu-03/index.html +++ b/dropdown-menu-03/index.html @@ -1,136 +1,139 @@ + <!DOCTYPE html> + <link rel="stylesheet" href="style.css"> <html> + <link rel="stylesheet" href="style.css"> <header> + <link rel="stylesheet" href="style.css"> <title>Notification Dropdown Example</title> <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="style.css"> </header> + <link rel="stylesheet" href="style.css"> <body> + <link rel="stylesheet" href="style.css"> <header> + <link rel="stylesheet" href="style.css"> <span class="navigation__group"> -<!DOCTYPE html> + </header> -<!DOCTYPE html> + </header> <!DOCTYPE html> -<!DOCTYPE html> + </header> <html> -<!DOCTYPE html> + </header> <header> -<!DOCTYPE html> + <body> + </header> <title>Notification Dropdown Example</title> -<!DOCTYPE html> + </header> <link rel="stylesheet" href="style.css"> - </div> + <svg -<!DOCTYPE html> </header> -<!DOCTYPE html> <body> -<!DOCTYPE html> + </header> <header> -<!DOCTYPE html> + </header> <span class="navigation__group"> -<html> + <body> - </div> -<html> + <body> <!DOCTYPE html> -<html> + <body> <html> -<html> + <body> <header> -<html> + <body> <title>Notification Dropdown Example</title> -<html> + <body> <link rel="stylesheet" href="style.css"> -<html> + <body> </header> -<html> + <body> <body> -<html> + <body> <header> -<html> + <svg + <body> <span class="navigation__group"> - <header> + <header> - <header> + <header> <!DOCTYPE html> - <header> + <header> <html> - <header> + <header> <header> - <header> + <header> <title>Notification Dropdown Example</title> - <header> + <header> <link rel="stylesheet" href="style.css"> - <header> + <header> </header> - <div class="notification-item notification-item--recent"> - <div class="avatar-wrapper"> - <header> + <header> <body> - <div class="notification-mark"></div> + stroke-linejoin="round" - </div> -<html> <body> -<html> <header> + <span class="navigation__group"> - <strong>Michelle Claude</strong> opened a new <strong>Issue 152</strong> - <header> + <span class="navigation__group"> - <header> + </svg> + <span class="navigation__group"> <!DOCTYPE html> - <header> <span class="navigation__group"> +<html> - <header> + <span class="navigation__group"> <header> - <header> + <span class="navigation__group"> <title>Notification Dropdown Example</title> - </div> - - <div class="notification-item"> - <div class="avatar-wrapper"> - <img class="avatar" src="assets/ricahrd_taylor.jpg" alt="Richard Taylor"> + <div class="line-horizontal"></div> -<html> + <span class="navigation__group"> </header> -<html> + <span class="navigation__group"> <body> -<html> + <span class="navigation__group"> <header> - <strong>Richard Taylor</strong> edited <strong>Road Map 2023</strong> + </li> + <span class="navigation__group"> <header> - <time> - <title>Notification Dropdown Example</title> + <span class="navigation__group"> <title>Notification Dropdown Example</title> - </time> + <div class="line-horizontal"></div> - </span> + <a href="#expenses" title="Expense"> - <title>Notification Dropdown Example</title> +<!DOCTYPE html> +<!DOCTYPE html> - </div> + </a> - <div class="notification-item"> + </li> -<html> + <span class="navigation__group"> <header> + <span class="navigation__group"> <title>Notification Dropdown Example</title> + <span class="navigation__group"> <link rel="stylesheet" href="style.css"> + <div class="icon-wrapper"> <html> - </header> - <span class="notification-item__body"> + Statements -<html> + <span class="navigation__group"> <header> - <strong>Jennifer Floyd</strong> created <strong>Road Map 2023</strong> - </div> + </li> + <span class="navigation__group"> <header> -<!DOCTYPE html> - <title>Notification Dropdown Example</title> + <span class="navigation__group"> <title>Notification Dropdown Example</title> - </time> + <div class="line-horizontal"></div> - <header> + <div class="icon-wrapper"> <title>Notification Dropdown Example</title> - </div> <!DOCTYPE html> -<html> - </div> + <link rel="stylesheet" href="style.css"> - <title>Notification Dropdown Example</title> + <span class="navigation__group"> <header> - <title>Notification Dropdown Example</title> + <span class="navigation__group"> <span class="navigation__group"> - <link rel="stylesheet" href="style.css"> +<!DOCTYPE html> + </header> - <link rel="stylesheet" href="style.css"> <!DOCTYPE html> - <title>Notification Dropdown Example</title> + <body> - <title>Notification Dropdown Example</title> +<!DOCTYPE html> + <header> <title>Notification Dropdown Example</title> + <span class="navigation__group"> - <title>Notification Dropdown Example</title> +<!DOCTYPE html> + <span class="navigation__group"> diff --git a/dropdown-menu-03/script.js b/dropdown-menu-03/script.js index 8a8b07479281bfd83997e8e3243a88b4dcf6e23c..384affb7c3c222292d0bf2e23c212dd78809a57a 100644 --- a/dropdown-menu-03/script.js +++ b/dropdown-menu-03/script.js @@ -1,23 +1,20 @@ -const notifications = document.querySelector('.notifications'); -const dropdown = document.querySelector('.dropdown__wrapper'); + dropdown.classList.toggle('hide'); -notifications.addEventListener('click', () => { - dropdown.classList.remove('none'); - dropdown.classList.toggle('hide'); }) +document.addEventListener("click", (event) => { -document.addEventListener("click", (event) => { + const isClickInsideDropdown = dropdown.contains(event.target); - +const notifications = document.querySelector('.notifications'); +const notifications = document.querySelector('.notifications'); - if (!isClickInsideDropdown && !isClicked) { + 'main-item--open' + ); + }) -const notifications = document.querySelector('.notifications'); + dropdown.classList.remove('none'); -const dropdown = document.querySelector('.dropdown__wrapper'); -notifications.addEventListener('click', () => { - dropdown.classList.remove('none'); diff --git a/dropdown-menu-03/style.css b/dropdown-menu-03/style.css index 3e3ee8e41588a4b669e5c66205674dfe73752ebf..e1ce49c3d66c513925b1701394045ebc634c0b3d 100644 --- a/dropdown-menu-03/style.css +++ b/dropdown-menu-03/style.css @@ -1,225 +1,258 @@ +:root { + +* { @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); :root { +* { --primary: #625BFE; +} + +* { --important: #F55E5E; + font-size: 16px; + font-family: "Poppins", serif; } body { +* { font-family: 'Red Hat Display', sans-serif; +* { margin: 0px; -} * { + box-sizing: border-box; + align-items: center; } -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + :root { +} + box-sizing: border-box; --primary: #625BFE; + --important: #F55E5E; + width: 100%; + display: flex; + font-family: 'Red Hat Display', sans-serif; + background-color: var(--primary); - justify-content: end; } -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + justify-content: end; -body { +.navigation__group { + gap: 16px; - font-family: 'Red Hat Display', sans-serif; -} +* { .icon-wrapper { + align-items: center; + position: relative; + cursor: pointer; + display: grid; + place-items: center; - transition: all 0.2s ease-in-out; } + +.main-item:hover { + .icon-wrapper .icon { + width: 36px; +} + + height: 36px; + stroke: var(--item-non-hover); + transition: all ease-in-out 0.25s; } + :root { -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); +:root { -:root { + :root { + --primary: #625BFE; } -.avatar { + width: 42px; + border-radius: 8px; + background-color: var(--background-item); + height: 42px; + :root { -body { -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); } -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + + position: fixed; body { + :root { - font-family: 'Red Hat Display', sans-serif; + border-radius: 8px; + background-color: var(--background-item); } + :root { - margin: 0px; + font-family: 'Red Hat Display', sans-serif; -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + position: fixed; --primary: #625BFE; } +.accordion-container > ul { + .profile { + display: block; + width: 50px; + height: 50px; - cursor: pointer; - border-radius: 50%; + border: 3px solid #f7f7f7; -} .profile:hover { + transform: scale(1.05); - transition: all 0.2s ease-in-out; + transition: all ease-in-out 0.2s; } -.notification-mark { + position: absolute; - --primary: #625BFE; top: -2px; + right: -2px; + width: 10px; + height: 10px; - border-radius: 50%; + display: flex; + align-items: center; + background-color: var(--important); } + .notifications-top { + border-bottom: 2px solid #F1F3F6; + display: flex; + min-height: 56px; - padding: 16px; + align-items: center; } + --important: #F55E5E; - font-family: 'Red Hat Display', sans-serif; +body { +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); body { -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + --important: #F55E5E; + font-family: 'Red Hat Display', sans-serif; + flex-direction: row; - font-family: 'Red Hat Display', sans-serif; min-height: 64px; -} + -} + box-sizing: border-box; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); - border-top: 1px solid #F1F3F6; -} } - --primary: #625BFE; - background-color: #ecf3ff; -} -.notification-item:hover { - background-color: #F5F5F7; -} +header { } - font-family: 'Red Hat Display', sans-serif; - background-color: #c5dbff; + + } +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); -body { +:root { -body { -body { @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); -} - -body { :root { - max-width: 340px; width: 100%; - top: 88px; +:root { -body { } - position: absolute; - border-radius: 8px; -body { - flex-direction: column; - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; - animation: fadeOutAnimation ease-in-out 0.5s forwards; + } + --primary: #625BFE; + width: 36px; - font-family: 'Red Hat Display', sans-serif; - margin: 0px; - font-family: 'Red Hat Display', sans-serif; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); + margin: 0px; - color: #192028; + width: 100%; } -.dropdown__wrapper--fade-in { - font-family: 'Red Hat Display', sans-serif; + width: 100%; --important: #F55E5E; + width: 100%; } - font-family: 'Red Hat Display', sans-serif; } +body { + width: 100%; font-family: 'Red Hat Display', sans-serif; -body { } -.hide { - opacity: 0; + width: 100%; margin: 0px; - font-family: 'Red Hat Display', sans-serif; + display: flex; } - margin: 0px; + display: flex; - margin: 0px; + display: flex; @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap'); +header { margin: 0px; -:root { - visibility: hidden; + width: 2px; - margin: 0px; + padding: 0 16px; --important: #F55E5E; - margin: 0px; } - opacity: 1; + - visibility: visible; +.accordion-container > ul > - margin: 0px; + display: flex; --important: #F55E5E; + display: flex; } -@keyframes fadeOutAnimation { - 0% { - margin: 0px; +body { body { +} - margin: 0px; + display: flex; font-family: 'Red Hat Display', sans-serif; - } - 100% { + display: block; +header { margin: 0px; -:root { + display: flex; margin: 0px; - --primary: #625BFE; - } + min-width: 12px; } diff --git a/dropdown-menu-04/index.html b/dropdown-menu-04/index.html deleted file mode 100644 index 194ad86b66d519832867d4d0bfd43decaca58e76..0000000000000000000000000000000000000000 --- a/dropdown-menu-04/index.html +++ /dev/null @@ -1,80 +0,0 @@ - -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Dropdown Menu</title> - <link rel="preconnect" href="https://fonts.googleapis.com"> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link - href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" - rel="stylesheet" - > - <link rel="stylesheet" href="style.css"> - </head> - <body> - <nav class="accordion-container"> - <div class="main-item"> - <svg - xmlns="http://www.w3.org/2000/svg" width="24" height="24" - viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" - fill="none" stroke-linecap="round" stroke-linejoin="round" - > - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M9 14c0 1.657 2.686 3 6 3s6 -1.343 6 -3s-2.686 -3 -6 -3s-6 1.343 -6 3z"></path> - <path d="M9 14v4c0 1.656 2.686 3 6 3s6 -1.344 6 -3v-4"></path> - <path d="M3 6c0 1.072 1.144 2.062 3 2.598s4.144 .536 6 0c1.856 -.536 3 -1.526 3 -2.598c0 -1.072 -1.144 -2.062 -3 -2.598s-4.144 -.536 -6 0c-1.856 .536 -3 1.526 -3 2.598z"></path> - <path d="M3 6v10c0 .888 .772 1.45 2 2"></path> - <path d="M3 11c0 .888 .772 1.45 2 2"></path> - </svg> - Payments - <svg - xmlns="http://www.w3.org/2000/svg" - class="expand-icon" - width="44" - height="44" - viewBox="0 0 24 24" - stroke-width="1.5" - stroke="currentColor" - fill="none" - stroke-linecap="round" - stroke-linejoin="round" - > - <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <path d="M9 6l6 6l-6 6" /> - </svg> - </div> - <ul> - <li> - <div class="line-vertical"></div> - <div class="line-horizontal"></div> - <a href="#income" title="Income"> - Income - </a> - </li> - <li> - <div class="line-vertical"></div> - <div class="line-horizontal"></div> - <a href="#expenses" title="Expense"> - Expenses - </a> - </li> - <li> - <div class="line-vertical"></div> - <div class="line-horizontal"></div> - <a href="#statements" title="Statements"> - Statements - </a> - </li> - <li> - <div class="line-vertical"></div> - <div class="line-horizontal"></div> - <a href="#payouts" title="Payouts"> - Payouts - </a> - </li> - </ul> - </nav> - <script src="script.js"></script> - </body> -</html> \ No newline at end of file diff --git a/dropdown-menu-04/script.js b/dropdown-menu-04/script.js deleted file mode 100644 index 384affb7c3c222292d0bf2e23c212dd78809a57a..0000000000000000000000000000000000000000 --- a/dropdown-menu-04/script.js +++ /dev/null @@ -1,14 +0,0 @@ -const mainItems = document.querySelectorAll( - '.main-item' -); - -mainItems.forEach((mainItem) => { - mainItem.addEventListener('click', () => { - mainItem.classList.toggle( - 'main-item--open' - ); - }) -}); - - - diff --git a/dropdown-menu-04/style.css b/dropdown-menu-04/style.css deleted file mode 100644 index e1ce49c3d66c513925b1701394045ebc634c0b3d..0000000000000000000000000000000000000000 --- a/dropdown-menu-04/style.css +++ /dev/null @@ -1,158 +0,0 @@ -:root { - --primary-item: #3B3E40; - --background-item: #EFEFEF; - --gray: #D5D4D5; - --background: #2C2C2C; - --item-non-hover: #92969A -} - -html { - font-size: 16px; - font-family: "Poppins", serif; -} - -body { - background: var(--background); - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -* { - box-sizing: border-box; -} - -.accordion-container { - min-width: 330px; - padding: 16px; - border-radius: 16px; - overflow: hidden; - background-color: #FCFCFC; -} - -.main-item { - border-radius: 8px; - padding: 12px; - display: flex; - cursor: pointer; - align-items: center; - justify-content: start; - gap: 8px; - transition: all ease-in-out 0.25s; - color: var(--item-non-hover); -} - - -.main-item:hover { - background-color: var(--background-item); - color: var(--primary-item); -} - -.main-item svg { - stroke: var(--item-non-hover); - transition: all ease-in-out 0.25s; -} - -.main-item:hover svg { - stroke: var(--primary-item); -} - -.main-item--open { - border-radius: 8px; - background-color: var(--background-item); - transition: all 200ms; - color: var(--primary-item); -} - -.main-item--open:hover { - color: var(--primary-item); - border-radius: 8px; - background-color: var(--background-item); -} - -.main-item--open svg { - stroke: var(--primary-item); -} - -.accordion-container > ul { - max-height: 0px; - list-style-type: none; - margin: 0px; - padding-left: 14px; - opacity: 0; - font-size: smaller; - visibility: hidden; - transition: all ease-in-out 0.2s; -} - -.main-item--open + ul { - visibility: visible; - max-height: 400px; - padding-left: 22px; - opacity: 1; - display: flex; - align-items: center; - flex-direction: column; -} - -.accordion-container > ul > li { - height: 48px; - display: flex; - width: 100%; - align-items: center; -} - -.accordion-container > ul > li > a { - color: var(--item-non-hover); - padding: 16px 8px; - height: 38px; - line-height: 38px; - display: flex; - align-items: center; - text-decoration: none; - border-radius: 8px; -} - -.accordion-container > ul > li:hover { - color: var(--primary-item); - cursor: pointer; - font-weight: 700; -} - -.accordion-container > ul > li:hover > a { - color: var(--primary-item); - background-color: var(--background-item); - width: 100%; -} - -.expand-icon { - width: 24px; - height: 24px; - margin-left: auto; -} - -.main-item--open > .expand-icon { - transform: rotate(-90deg); -} - -.line-vertical { - display: block; - background-color: var(--background-item); - width: 2px; - height: 48px; -} - -.accordion-container > ul > -li:last-child > .line-vertical { - height: 25px; - align-self: flex-start; -} - -.line-horizontal { - display: block; - background-color: var(--background-item); - height: 2px; - min-width: 12px; -} - diff --git a/footer-01/assets/github.svg b/footer-01/assets/github.svg new file mode 100644 index 0000000000000000000000000000000000000000..949dd14c6e15640af46cbc2f716a3491dcdf6a5a --- /dev/null +++ b/footer-01/assets/github.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#111420" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path> +</svg> \ No newline at end of file diff --git a/footer-01/assets/instagram.svg b/footer-01/assets/instagram.svg new file mode 100644 index 0000000000000000000000000000000000000000..e68675a823b167df295a9973adc49dbe0e2474fe --- /dev/null +++ b/footer-01/assets/instagram.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg> \ No newline at end of file diff --git a/footer-01/assets/linkedin.svg b/footer-01/assets/linkedin.svg new file mode 100644 index 0000000000000000000000000000000000000000..310841c2d7ab292edb461e4eda6a113164b8e3aa --- /dev/null +++ b/footer-01/assets/linkedin.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg> \ No newline at end of file diff --git a/footer-01/assets/twitter.svg b/footer-01/assets/twitter.svg new file mode 100644 index 0000000000000000000000000000000000000000..88256383d89f2975ab41d0acf571fb3b9ed882da --- /dev/null +++ b/footer-01/assets/twitter.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg> \ No newline at end of file diff --git a/footer-01/assets/youtube.svg b/footer-01/assets/youtube.svg new file mode 100644 index 0000000000000000000000000000000000000000..a0e1701577226cbf9623c094d214fe3d04229e77 --- /dev/null +++ b/footer-01/assets/youtube.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg> \ No newline at end of file diff --git a/footer-01/index.html b/footer-01/index.html new file mode 100644 index 0000000000000000000000000000000000000000..2f5a51a088951ff8175be03b15d801955fb2f345 --- /dev/null +++ b/footer-01/index.html @@ -0,0 +1,161 @@ + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Footer 02</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <footer> + <div class="footer-line"></div> + <div class="footer-wrapper"> + <section class="footer-top"> + <div class="footer-headline"> + <h2>Sign up to our newsletter</h2> + <p> + Stay up to date with our news and articles + </p> + </div> + <div class="footer-subscribe"> + <input type="email" spellcheck="false" placeholder="Your Email"> + <button> + Sign Up + </button> + </div> + </section> + <div class="footer-columns"> + <section class="footer-logo"> + <svg xmlns="http://www.w3.org/2000/svg" class="logo" + fill="none" viewBox="30 30 126 126" + > + <path d="M82.646 37.0917C85.7401 35.3054 89.552 35.3054 92.646 37.0917L133.614 60.7445L105.286 77.3318C100.901 72.9296 94.8325 70.2051 88.128 70.2051C81.1554 70.2051 74.871 73.1519 70.4523 77.8681L41.4416 60.8811L82.646 37.0917Z" fill="white"></path> + <path d="M64.9303 87.4484L35.9141 70.4582V117.952L64.8222 101.025C64.2287 98.9258 63.9111 96.7109 63.9111 94.4219C63.9111 91.9977 64.2673 89.6567 64.9303 87.4484Z" fill="white"></path> + <path d="M70.1924 110.694L41.8975 127.262L82.646 150.788C85.74 152.574 89.552 152.574 92.646 150.788L133.158 127.398L105.556 111.236C101.152 115.8 94.9714 118.639 88.128 118.639C81.0175 118.639 74.6227 115.574 70.1924 110.694Z" fill="white"></path> + <path d="M111.22 101.739L139.376 118.226C139.377 118.162 139.378 118.098 139.378 118.034V70.1831L111.101 86.7403C111.908 89.154 112.345 91.7369 112.345 94.4219C112.345 96.9723 111.951 99.4305 111.22 101.739Z" fill="white"></path> + </svg> + <h2 class="hide">Astra</h2> + </section> + <section> + <h3>Product</h3> + <ul> + <li> + <a href="#" title="API">API</a> + </li> + <li> + <a href="#" title="Pricing">Pricing</a> + </li> + <li> + <a href="#" title="Documentation">Documentation</a> + </li> + <li> + <a href="#" title="Release Notes">Release Notes</a> + </li> + <li> + <a href="#" title="Status">Status</a> + </li> + </ul> + </section> + <section> + <h3>Resources</h3> + <ul> + <li> + <a href="#" title="Support">Support</a> + </li> + <li> + <a href="#" title="Sitemap">Sitemap</a> + </li> + <li> + <a href="#" title="Newsletter">Newsletter</a> + </li> + <li> + <a href="#" title="Help Centre">Help Centre</a> + </li> + <li> + <a href="#" title="Investor">Investor</a> + </li> + </ul> + </section> + <section> + <h3>Company</h3> + <ul> + <li> + <a href="#" title="About Us">About Us</a> + </li> + <li> + <a href="#" title="Blog">Blog</a> + </li> + <li> + <a href="#" title="Careers">Careers</a> + </li> + <li> + <a href="#" title="Press">Press</a> + </li> + <li> + <a href="#" title="Contact">Contact</a> + </li> + </ul> + </section> + <section> + <h3>Legal</h3> + <ul> + <li> + <a href="#" title="Terms and services"> + Terms + </a> + </li> + <li> + <a href="#" title="Privacy Policy"> + Privacy + </a> + </li> + <li> + <a href="#" title="Cookies"> + Cookies + </a> + </li> + <li> + <a href="#" title="Licenses"> + Licenses + </a> + </li> + <li> + <a href="#" title="Cookies"> + Contact + </a> + </li> + </ul> + </section> + </div> + <div class="footer-bottom"> + <small>© My Company Ltd. <span id="year"></span>, All rights reserved</small> + <span class='social-links'> + <a href="#" title="Instagram"> + <img src="assets/instagram.svg" alt='Instagram'> + </a> + <a href="#" title="Linkedin"> + <img src="assets/linkedin.svg" alt='Linkedin'> + </a> + <a href="#" title="Twitter"> + <img src="assets/twitter.svg" alt='Twitter'> + </a> + <a href="#" title="Youtube"> + <img src="assets/youtube.svg" alt='YouTube'> + </a> + <a href="#" title="GitHub"> + <img src="assets/github.svg" alt='GitHub'> + </a> + </span> + </div> + </div> + </footer> + <script> + document.getElementById("year").innerHTML = new Date().getFullYear(); + </script> + </body> +</html> + + + + \ No newline at end of file diff --git a/footer-01/style.css b/footer-01/style.css new file mode 100644 index 0000000000000000000000000000000000000000..6d0743f748922e7c054d74f866c34fffcaece855 --- /dev/null +++ b/footer-01/style.css @@ -0,0 +1,235 @@ + +@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&display=swap'); + +:root { + --footer-background: white; + --text-color: #111420; + --text-gray: #e1e1e1; + --text-heading-gray: #b9b9b9; +} + +html { + font-size: 16px; + font-family: 'Red Hat Display', sans-serif; +} + +/*? footer reset */ +*, *::after, *::before { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + margin: 0px; +} + +/*? footer containers */ + +footer { + position: absolute; + bottom: 0px; + background-color: var(--footer-background); + min-width: 300px; + width: 100vw; + bottom: 0px; + display: flex; + align-items: center; + flex-direction: column; +} + +.footer-wrapper { + display: flex; + background: var(--footer-background); + flex-direction: column; + max-width: 1320px; + padding: 16px; +} + + +/*? top section */ +.footer-top { + display: flex; + flex-wrap: wrap; + justify-content: start; + align-items: start; + padding: 16px 0px; + justify-content: space-between; +} + +.footer-line { + display: block; + width: 100%; + height: 8px; + background: linear-gradient( + 90deg,#5da8ff, + #605dff 50%,#ad63f6 + ); +} + +/*? footer subscribe */ +.footer-subscribe { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.footer-subscribe > input { + border: 1px solid var(--text-gray); + color: var(--text-color); + min-height: 36px; + font-size: 1.2rem; + flex: 1 0 120px; + padding: 8px 12px; + border-radius: 8px; +} + +.footer-subscribe > button { + cursor: pointer; + background-color: var(--text-color); + border-radius: 8px; + color: white; + font-size: 1.25rem; + min-width: 120px; + min-height: 36px; + flex: 1 0 80px; + white-space: nowrap; + padding: 8px 12px; + border: 0px; + outline: none; +} + +/*? footer columns */ +.footer-columns { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; + align-items: start; + flex: 2 0 140px; + width: 100%; + gap: 16px; + padding: 24px 8px 16px 8px; + margin: 0 auto; + border-top: 1px solid var(--text-gray); +} + +.footer-columns ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +.footer-columns ul a { + color: var(--text-color); + text-decoration: none; +} + +.footer-columns ul a:hover{ + text-decoration: underline; +} + +.footer-columns ul li { + margin-bottom: 16px; +} + +.footer-columns h3 { + color: var(--footer-heading-gray); + margin-top: 0; + margin-bottom: 25px; + font-size: 1.125rem; +} + +.footer-centering { + margin: 0 auto; +} + +.footer-columns > section { + min-width: 150px; +} + +.footer-logo { + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; + min-width: 180px; + gap: 8px; +} + +.footer-logo > svg { + stroke: var(--text-color); + stroke-width: 8px; + width: 50px; +} + +/*? Footer bottom */ + +.footer-bottom { + text-align: center; + border-top: 1px solid var( + --text-gray + ); + margin-top: 48px; + display: flex; + align-items: center; + width: 100%; + gap: 8px; + padding: 16px 0px; + flex-wrap: wrap; + justify-content: space-between; +} + +.footer-bottom > small { + font-size: 16px; + margin: 0 4px; +} + +.footer-headline > h2 { + margin: 0px; +} + +.footer-headline > p { + margin: 12px 0px; +} + +/*? socials */ + +.social-links { + display: flex; + flex-direction: row; + gap: 12px; +} + +.social-links img { + width: 24px; + height: 24px; + transition: all 0.2s ease-in-out; +} + +.social-links img:hover { + transform: scale(1.1); +} + +/*? mobile */ + +@media (max-width: 800px) { + .footer-top { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 16px 8px 32px 8px; + } + + .footer-bottom { + display: flex; + flex-direction: column-reverse; + align-items: space-between; + justify-content: center; + margin: 0 auto; + } +} + + + diff --git a/footer-02/assets/instagram.svg b/footer-02/assets/instagram.svg deleted file mode 100644 index 5e684bf39b85071203fcfa618a9690cc78b40eb6..0000000000000000000000000000000000000000 --- a/footer-02/assets/instagram.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg> \ No newline at end of file diff --git a/footer-02/assets/linkedin.svg b/footer-02/assets/linkedin.svg deleted file mode 100644 index 7068d826cb2485f11cc797471946952bbb7fe321..0000000000000000000000000000000000000000 --- a/footer-02/assets/linkedin.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg> \ No newline at end of file diff --git a/footer-02/assets/twitter.svg b/footer-02/assets/twitter.svg deleted file mode 100644 index b36d412fbd4b9719bd3e5a81207589aef16810f6..0000000000000000000000000000000000000000 --- a/footer-02/assets/twitter.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg> \ No newline at end of file diff --git a/footer-02/assets/youtube.svg b/footer-02/assets/youtube.svg deleted file mode 100644 index 23554f08b84effab546401b67ce80716db0b6c0c..0000000000000000000000000000000000000000 --- a/footer-02/assets/youtube.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg> \ No newline at end of file diff --git a/footer-02/index.html b/footer-02/index.html deleted file mode 100644 index 2da446481c3ae258dd542618179db315e2248263..0000000000000000000000000000000000000000 --- a/footer-02/index.html +++ /dev/null @@ -1,73 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <title>Footer Example</title> - <link rel="stylesheet" href="style.css"> - </head> - <footer> - <section class="footer-top-wrapper"> - <section class='footer-top'> - <img class="logo" src="logos/atheros_logo_white.png" title='Logo' alt='Logo' /> - <span class='social-links'> - <a> - <img src="assets/instagram.svg" title='Instagram' alt='Instagram' /> - </a> - <a> - <img src="assets/facebook.svg" title='Facebook' alt='Facebook' /> - </a> - <a> - <img src="assets/linkedin.svg" title='Linkedin' alt='Linkedin' /> - </a> - <a> - <img src="assets/twitter.svg" title='Twitter' alt='Twitter' /> - </a> - </span> - </section> - <section> - <menu> - <h2>Atheros Learning</h2> - <li> - <a>For Students</a> - </li> - <li> - <a>For Lectors</a> - </li> - <li> - <a>Sign-Up/Log-In</a> - </li> - </menu> - </section> - <section> - <menu> - <h2>Atheros Cloud</h2> - <li> - <a>Private Data Detector</a> - </li> - <li> - <a>Text Classification</a> - </li> - <li> - <a>Duplicates Detector</a> - </li> - </menu> - </section> - <section> - <menu> - <h2>Company</h2> - <li> - <a>Blog</a> - </li> - <li> - <a>About Us</a> - </li> - <li> - <a>Contact</a> - </li> - </menu> - </section> - </section> - <section class="footer-bottom"> - <small>© Atheros Intelligence Ltd. 2023 All rights reserved</small> - </section> - </footer> -</html> \ No newline at end of file diff --git a/footer-02/style.css b/footer-02/style.css deleted file mode 100644 index 3bdaf28a886ef14c8c6fe5b4cd0eacf8498009e8..0000000000000000000000000000000000000000 --- a/footer-02/style.css +++ /dev/null @@ -1,90 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&display=swap'); - -html { - font-size: 16px; - font-family: 'Red Hat Display', sans-serif; -} - -footer { - background: #0E1219; - color: white; - overflow: hidden; - display: flex; - flex-direction: column; - position: absolute; - width: 100%; - bottom: 0px; -} - -.footer-top-wrapper { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 48px; - margin: 0 auto; - padding: 16px; - min-height: 160px; -} - -.footer-top-wrapper > section { - width: 180px; -} - -h2 { - text-align: left; - color: #d2d0e6; - margin-top: 0px; - margin-bottom: 16px; - opacity: 0.7; - font-size: 16px; - font-weight: 600; -} - -menu { - list-style-type: none; - padding: 0; - margin: 0; -} - -menu li { - margin-bottom: 16px; -} - - -.logo { - width: 180px; - margin-bottom: 8px; -} - -.social-links { - display: flex; - flex-direction: row; - gap: 8px; - width: 180px; -} - -.social-links img { - width: 24px; - height: 24px; -} - -.footer-top { - max-width: 800px; -} - -.footer-bottom { - height: 60px; - margin-top: 48px; - display: flex; - text-align: center; - align-items: center; - justify-content: center; - width: 100%; - background-color: #1f1b3d; - padding: 4px; -} - -.footer-bottom > small { - font-size: 16px; - margin: 0 4px; -} \ No newline at end of file diff --git a/footer-03/assets/github.svg b/footer-03/assets/github.svg deleted file mode 100644 index 949dd14c6e15640af46cbc2f716a3491dcdf6a5a..0000000000000000000000000000000000000000 --- a/footer-03/assets/github.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#111420" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path> -</svg> \ No newline at end of file diff --git a/footer-03/assets/instagram.svg b/footer-03/assets/instagram.svg deleted file mode 100644 index e68675a823b167df295a9973adc49dbe0e2474fe..0000000000000000000000000000000000000000 --- a/footer-03/assets/instagram.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg> \ No newline at end of file diff --git a/footer-03/assets/linkedin.svg b/footer-03/assets/linkedin.svg deleted file mode 100644 index 310841c2d7ab292edb461e4eda6a113164b8e3aa..0000000000000000000000000000000000000000 --- a/footer-03/assets/linkedin.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg> \ No newline at end of file diff --git a/footer-03/assets/twitter.svg b/footer-03/assets/twitter.svg deleted file mode 100644 index 88256383d89f2975ab41d0acf571fb3b9ed882da..0000000000000000000000000000000000000000 --- a/footer-03/assets/twitter.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg> \ No newline at end of file diff --git a/footer-03/assets/youtube.svg b/footer-03/assets/youtube.svg deleted file mode 100644 index a0e1701577226cbf9623c094d214fe3d04229e77..0000000000000000000000000000000000000000 --- a/footer-03/assets/youtube.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111420" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg> \ No newline at end of file diff --git a/footer-03/index.html b/footer-03/index.html deleted file mode 100644 index 09dd8d4262b4cc6496fbc54bf39f1ae2864be546..0000000000000000000000000000000000000000 --- a/footer-03/index.html +++ /dev/null @@ -1,161 +0,0 @@ - -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>Footer 03 Example</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <footer> - <div class="footer-line"></div> - <div class="footer-wrapper"> - <section class="footer-top"> - <div class="footer-headline"> - <h2>Sign up to our newsletter</h2> - <p> - Stay up to date with our news and articles - </p> - </div> - <div class="footer-subscribe"> - <input type="email" spellcheck="false" placeholder="Your Email"> - <button> - Sign Up - </button> - </div> - </section> - <div class="footer-columns"> - <section class="footer-logo"> - <svg xmlns="http://www.w3.org/2000/svg" class="logo" - fill="none" viewBox="30 30 126 126" - > - <path d="M82.646 37.0917C85.7401 35.3054 89.552 35.3054 92.646 37.0917L133.614 60.7445L105.286 77.3318C100.901 72.9296 94.8325 70.2051 88.128 70.2051C81.1554 70.2051 74.871 73.1519 70.4523 77.8681L41.4416 60.8811L82.646 37.0917Z" fill="white"></path> - <path d="M64.9303 87.4484L35.9141 70.4582V117.952L64.8222 101.025C64.2287 98.9258 63.9111 96.7109 63.9111 94.4219C63.9111 91.9977 64.2673 89.6567 64.9303 87.4484Z" fill="white"></path> - <path d="M70.1924 110.694L41.8975 127.262L82.646 150.788C85.74 152.574 89.552 152.574 92.646 150.788L133.158 127.398L105.556 111.236C101.152 115.8 94.9714 118.639 88.128 118.639C81.0175 118.639 74.6227 115.574 70.1924 110.694Z" fill="white"></path> - <path d="M111.22 101.739L139.376 118.226C139.377 118.162 139.378 118.098 139.378 118.034V70.1831L111.101 86.7403C111.908 89.154 112.345 91.7369 112.345 94.4219C112.345 96.9723 111.951 99.4305 111.22 101.739Z" fill="white"></path> - </svg> - <h2 class="hide">Astra</h2> - </section> - <section> - <h3>Product</h3> - <ul> - <li> - <a href="#" title="API">API</a> - </li> - <li> - <a href="#" title="Pricing">Pricing</a> - </li> - <li> - <a href="#" title="Documentation">Documentation</a> - </li> - <li> - <a href="#" title="Release Notes">Release Notes</a> - </li> - <li> - <a href="#" title="Status">Status</a> - </li> - </ul> - </section> - <section> - <h3>Resources</h3> - <ul> - <li> - <a href="#" title="Support">Support</a> - </li> - <li> - <a href="#" title="Sitemap">Sitemap</a> - </li> - <li> - <a href="#" title="Newsletter">Newsletter</a> - </li> - <li> - <a href="#" title="Help Centre">Help Centre</a> - </li> - <li> - <a href="#" title="Investor">Investor</a> - </li> - </ul> - </section> - <section> - <h3>Company</h3> - <ul> - <li> - <a href="#" title="About Us">About Us</a> - </li> - <li> - <a href="#" title="Blog">Blog</a> - </li> - <li> - <a href="#" title="Careers">Careers</a> - </li> - <li> - <a href="#" title="Press">Press</a> - </li> - <li> - <a href="#" title="Contact">Contact</a> - </li> - </ul> - </section> - <section> - <h3>Legal</h3> - <ul> - <li> - <a href="#" title="Terms and services"> - Terms - </a> - </li> - <li> - <a href="#" title="Privacy Policy"> - Privacy - </a> - </li> - <li> - <a href="#" title="Cookies"> - Cookies - </a> - </li> - <li> - <a href="#" title="Licenses"> - Licenses - </a> - </li> - <li> - <a href="#" title="Cookies"> - Contact - </a> - </li> - </ul> - </section> - </div> - <div class="footer-bottom"> - <small>© My Company Ltd. <span id="year"></span>, All rights reserved</small> - <span class='social-links'> - <a href="#" title="Instagram"> - <img src="assets/instagram.svg" alt='Instagram'> - </a> - <a href="#" title="Linkedin"> - <img src="assets/linkedin.svg" alt='Linkedin'> - </a> - <a href="#" title="Twitter"> - <img src="assets/twitter.svg" alt='Twitter'> - </a> - <a href="#" title="Youtube"> - <img src="assets/youtube.svg" alt='YouTube'> - </a> - <a href="#" title="GitHub"> - <img src="assets/github.svg" alt='GitHub'> - </a> - </span> - </div> - </div> - </footer> - <script> - document.getElementById("year").innerHTML = new Date().getFullYear(); - </script> - </body> -</html> - - - - \ No newline at end of file diff --git a/footer-03/style.css b/footer-03/style.css deleted file mode 100644 index 6d0743f748922e7c054d74f866c34fffcaece855..0000000000000000000000000000000000000000 --- a/footer-03/style.css +++ /dev/null @@ -1,235 +0,0 @@ - -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&display=swap'); - -:root { - --footer-background: white; - --text-color: #111420; - --text-gray: #e1e1e1; - --text-heading-gray: #b9b9b9; -} - -html { - font-size: 16px; - font-family: 'Red Hat Display', sans-serif; -} - -/*? footer reset */ -*, *::after, *::before { - margin: 0px; - padding: 0px; - box-sizing: border-box; -} - -body { - margin: 0px; -} - -/*? footer containers */ - -footer { - position: absolute; - bottom: 0px; - background-color: var(--footer-background); - min-width: 300px; - width: 100vw; - bottom: 0px; - display: flex; - align-items: center; - flex-direction: column; -} - -.footer-wrapper { - display: flex; - background: var(--footer-background); - flex-direction: column; - max-width: 1320px; - padding: 16px; -} - - -/*? top section */ -.footer-top { - display: flex; - flex-wrap: wrap; - justify-content: start; - align-items: start; - padding: 16px 0px; - justify-content: space-between; -} - -.footer-line { - display: block; - width: 100%; - height: 8px; - background: linear-gradient( - 90deg,#5da8ff, - #605dff 50%,#ad63f6 - ); -} - -/*? footer subscribe */ -.footer-subscribe { - display: flex; - gap: 12px; - flex-wrap: wrap; -} - -.footer-subscribe > input { - border: 1px solid var(--text-gray); - color: var(--text-color); - min-height: 36px; - font-size: 1.2rem; - flex: 1 0 120px; - padding: 8px 12px; - border-radius: 8px; -} - -.footer-subscribe > button { - cursor: pointer; - background-color: var(--text-color); - border-radius: 8px; - color: white; - font-size: 1.25rem; - min-width: 120px; - min-height: 36px; - flex: 1 0 80px; - white-space: nowrap; - padding: 8px 12px; - border: 0px; - outline: none; -} - -/*? footer columns */ -.footer-columns { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: start; - align-items: start; - flex: 2 0 140px; - width: 100%; - gap: 16px; - padding: 24px 8px 16px 8px; - margin: 0 auto; - border-top: 1px solid var(--text-gray); -} - -.footer-columns ul { - list-style-type: none; - padding: 0; - margin: 0; -} - -.footer-columns ul a { - color: var(--text-color); - text-decoration: none; -} - -.footer-columns ul a:hover{ - text-decoration: underline; -} - -.footer-columns ul li { - margin-bottom: 16px; -} - -.footer-columns h3 { - color: var(--footer-heading-gray); - margin-top: 0; - margin-bottom: 25px; - font-size: 1.125rem; -} - -.footer-centering { - margin: 0 auto; -} - -.footer-columns > section { - min-width: 150px; -} - -.footer-logo { - display: flex; - flex-direction: row; - align-items: center; - justify-content: start; - min-width: 180px; - gap: 8px; -} - -.footer-logo > svg { - stroke: var(--text-color); - stroke-width: 8px; - width: 50px; -} - -/*? Footer bottom */ - -.footer-bottom { - text-align: center; - border-top: 1px solid var( - --text-gray - ); - margin-top: 48px; - display: flex; - align-items: center; - width: 100%; - gap: 8px; - padding: 16px 0px; - flex-wrap: wrap; - justify-content: space-between; -} - -.footer-bottom > small { - font-size: 16px; - margin: 0 4px; -} - -.footer-headline > h2 { - margin: 0px; -} - -.footer-headline > p { - margin: 12px 0px; -} - -/*? socials */ - -.social-links { - display: flex; - flex-direction: row; - gap: 12px; -} - -.social-links img { - width: 24px; - height: 24px; - transition: all 0.2s ease-in-out; -} - -.social-links img:hover { - transform: scale(1.1); -} - -/*? mobile */ - -@media (max-width: 800px) { - .footer-top { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 16px 8px 32px 8px; - } - - .footer-bottom { - display: flex; - flex-direction: column-reverse; - align-items: space-between; - justify-content: center; - margin: 0 auto; - } -} - - - diff --git a/gallery-01/index.html b/gallery-01/index.html index 7944a6f85f87eec9e12d727a3fa2efde87f97f25..5a06bafb874b3b19ce11e8d10dc8ba0d4b098b81 100644 --- a/gallery-01/index.html +++ b/gallery-01/index.html @@ -0,59 +1,63 @@ <!DOCTYPE html> <html> <header> +<html> <title>Socials</title> +<html> <link rel="stylesheet" href="style.css"> +<html> </header> +<html> <body> + <link rel="stylesheet" href="style.css"> +<html> <span class="background"> - + <body> + <header> - + <header> + <div class="card"> <figure> <img src="images/spring.jpg" alt="Preview" - title="Preview" - /> + > </figure> - </article> + </div> - <article class="card"> + <div class="card"> <figure> <img src="images/summer.jpg" alt="Preview" - title="Preview" - /> + > </figure> - </article> + </div> - <article class="card"> + <div class="card"> <figure> <img src="images/autumn.jpg" alt="Preview" - title="Preview" - /> + > </figure> - </article> + </div> + <div class="card"> - -<!DOCTYPE html> <!DOCTYPE html> -<!DOCTYPE html> + <html> -<!DOCTYPE html> <header> + <title>Socials</title> -<!DOCTYPE html> + <title>Socials</title> - /> + > - <span class="background"> + <body> - + </div> <!--? more picture here --> <!-- Pictures from Freepik --> - </section> + </div> - </span> + </div> </body> </html> diff --git a/gallery-02/index.html b/gallery-02/index.html index 35345cb4bf0ec42c1326a6f84709a66d82176820..addf2d9dc52b88927ac4faf623ffebe78bfc8afc 100644 --- a/gallery-02/index.html +++ b/gallery-02/index.html @@ -1,14 +1,17 @@ <!DOCTYPE html> <html> + <span class="background"> <header> + <meta charset="UTF-8"> <title>Gallery 02</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> - </header> + </head> <body> - <span class="background"> + <div class="background"> - <section class="gallery"> + <div class="gallery"> - <article class="card"> + <div class="card"> <figure> <img src="images/spring.jpg" @@ -16,8 +19,8 @@ alt="Spring" title="Spring" /> </figure> - </article> + </div> - <article class="card"> + <div class="card"> <figure> <img src="images/summer.jpg" @@ -25,8 +28,8 @@ alt="Summer" title="Summer" /> </figure> - </article> + </div> - <article class="card"> + <div class="card"> <figure> <img src="images/autumn.jpg" @@ -34,18 +37,20 @@ alt="Autumn" title="Autumn" /> </figure> - </article> + </div> - <article class="card"> + <div class="card"> + <!DOCTYPE html> - <link rel="stylesheet" href="style.css"> - src="images/winter.jpg" + <img -<!DOCTYPE html> + <header> <body> -<!DOCTYPE html> + <header> <span class="background"> -<html> + <title>Gallery 02</title> - <span class="background"> + </header> + </figure> + </div> <!--? more picture here --> <!-- Pictures from Freepik --> </section> diff --git a/gallery-03/index.html b/gallery-03/index.html index 96701aca9b3835e9142d66568f8bb148aebd7498..a81907b865415660712adc85c683cfd9531dab0b 100644 --- a/gallery-03/index.html +++ b/gallery-03/index.html @@ -1,13 +1,21 @@ <!DOCTYPE html> <html> - <header> <title>Card Flipping Gallery</title> +<html> <link rel="stylesheet" href="style.css"> +<html> </header> +<html> <body> +<html> <span class="background"> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <header> + <div class="gallery"> <div class="card"> <div class="card__side"> <img @@ -49,9 +58,9 @@ alt="Universe 06" > </div> </div> + <header> <html> - - </span> + </div> </body> </html> diff --git a/input-01/material-ui.html b/input-01/material-ui.html index 79e7e2aacb1b131bab0cd2146b1be23443171201..a0476fa0fe8c8cf662e3893f42fa3ec9e0f20d67 100644 --- a/input-01/material-ui.html +++ b/input-01/material-ui.html @@ -2,15 +2,27 @@ <!DOCTYPE html> <html> - <header> <title>Material UI Input</title> +<html> <link rel="stylesheet" href="style.css"> +<html> +<html> </header> +<html> <body> - + <header> + <header> - + <link + href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" + rel="stylesheet" + > + <link rel="stylesheet" href="style.css"> + </head> + <body> + <div class="centering"> + <div class="box"> <div class="input__wrapper"> <input id="password" @@ -31,10 +43,10 @@ src="eye.svg" class="input__icon" > </div> -<html> + </div> + <title>Material UI Input</title> -<html> + <title>Material UI Input</title> </body> - <script src="script.js"></script> </html> diff --git a/input-02/material-ui.html b/input-02/material-ui.html index 97b9dd21c4bea10b15a4e85659eb197984de044b..f0de5844fa9268d2c9bddc59a7c33ac4e65a6e87 100644 --- a/input-02/material-ui.html +++ b/input-02/material-ui.html @@ -1,7 +1,7 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <title>Material UI Input</title> @@ -22,7 +22,6 @@ least 1 Alphabet and 1 Number" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required class="input__field" - placeholder="Your Password" > <label for="password" @@ -39,9 +38,9 @@ > </div> </div> </div> - </body> + <script src="script.js"></script> <html> - </head> + <link rel="stylesheet" href="style.css"> </html> diff --git a/login-01/index.html b/login-01/index.html index 02f8e5d63c657eb650df7c05fb11890f374d88ff..e00a857dfc5bee80d11bf59cd23f652738447fcf 100644 --- a/login-01/index.html +++ b/login-01/index.html @@ -1,22 +1,39 @@ <!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Login 01</title> + </header> <html> + </header> <header> + </header> <title>Login Example</title> + </header> <link rel="stylesheet" href="style.css"> + </header> </header> + </header> <body> + </header> <span class="background"></span> + <link rel="stylesheet" href="style.css"> + </header> <span class="centering"> -<!DOCTYPE html> + <body> + <body> + <body> <!DOCTYPE html> <!DOCTYPE html> + <div class="login-welcome-row"> <img class="login-welcome" src="astronaut.jpg" - /> + alt="Astronaut" + > <!-- optimize the image in production --> <h1>LogIn!</h1> - </span> + </div> <div class="text-field"> <label for="email">Email:</label> <input @@ -51,7 +67,7 @@ title="Password Icon" src="password.svg" > </div> - <title>Login Example</title> + <body> <title>Login Example</title> <div class="my-form__actions"> <div class="my-form__row"> @@ -63,8 +79,8 @@ Create Account </div> </div> </form> + <body> <link rel="stylesheet" href="style.css"> - <header> <script src="script.js"></script> </body> </html> diff --git a/login-02/assets/apple.png b/login-02/assets/apple.png new file mode 100644 index 0000000000000000000000000000000000000000..7c5fd14f39e540e0a4fd11cbef2a2acd26578a01 Binary files /dev/null and b/login-02/assets/apple.png differ diff --git a/login-02/assets/email.svg b/login-02/assets/email.svg new file mode 100644 index 0000000000000000000000000000000000000000..0043e30458c8b39752603b9fe6a00032641da286 --- /dev/null +++ b/login-02/assets/email.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-at" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path> + <path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28"></path> +</svg> \ No newline at end of file diff --git a/login-02/assets/google.png b/login-02/assets/google.png new file mode 100644 index 0000000000000000000000000000000000000000..53f67809e02fd3f976e875804c9ebd8bd4ea1251 Binary files /dev/null and b/login-02/assets/google.png differ diff --git a/login-02/assets/logo.png b/login-02/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a9615fa3e3ccc73634fbf3f069548c329f52bad0 Binary files /dev/null and b/login-02/assets/logo.png differ diff --git a/login-02/assets/mock.png b/login-02/assets/mock.png new file mode 100644 index 0000000000000000000000000000000000000000..c54cf136f1fe6a61c578c8e582100dcf0ff65921 Binary files /dev/null and b/login-02/assets/mock.png differ diff --git a/login-02/assets/password.svg b/login-02/assets/password.svg new file mode 100644 index 0000000000000000000000000000000000000000..ded62cd63d15d9d14377ad45677fa492f8fef57c --- /dev/null +++ b/login-02/assets/password.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"></path> + <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path> + <path d="M8 11v-4a4 4 0 1 1 8 0v4"></path> +</svg> \ No newline at end of file diff --git a/login-02/index.html b/login-02/index.html new file mode 100644 index 0000000000000000000000000000000000000000..5f42e4a81c72bca2cb511ae6bc2c4d85e88c5767 --- /dev/null +++ b/login-02/index.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Login Example</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <div class="login-wrapper"> + <div class="login-side"> + <a href="#" title="Logo"> + <img class="logo" src="assets/logo.png" alt="Logo"> + </a> + <div class="my-form__wrapper"> + <div class="login-welcome-row"> + <h1>Welcome back 👏</h1> + <p>Please enter your details!</p> + </div> + <form class="my-form"> + <div class="socials-row"> + <a + href="#" + title="Use Google" + > + <img src="assets/google.png" alt="Google"> + Log in with Google + </a> + <a + href="#" + title="Use Apple" + > + <img src="assets/apple.png" alt="Apple"> + Log in with Apple + </a> + </div> + <div class="divider"> + <div class="divider-line"></div> + Or + <div class="divider-line"></div> + </div> + <div class="text-field"> + <label for="email">Email:</label> + <input + type="email" + id="email" + name="email" + placeholder="Your Email" + required + > + <img + alt="Email Icon" + title="Email Icon" + src="assets/email.svg" + > + </div> + <div class="text-field"> + <label for="password">Password:</label> + <input + id="password" + type="password" + name="password" + placeholder="Your Password" + title="Minimum 6 characters at + least 1 Alphabet and 1 Number" + pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" + required + > + <img + alt="Password Icon" + title="Password Icon" + src="assets/password.svg" + > + </div> + <input type="submit" class="my-form__button" value="Login"> + <div class="my-form__actions"> + <div class="my-form__row"> + <span>Did you forget your password?</span> + <a href="#" title="Reset Password"> + Reset Password + </a> + </div> + <div class="my-form__signup"> + <a href="#" title="Create Account"> + Create Account + </a> + </div> + </div> + </form> + </div> + </div> + <div class="info-side"> + <img src="assets/mock.png" alt="Mock" class="mockup"> + <div class="welcome-message"> + <h2>Navitron Maps! 👋</h2> + <p> + Your ultimate guide to navigating the world + and discovering new places with ease. + </p> + </div> + </div> + </div> + <script src="script.js"></script> + </body> +</html> + diff --git a/login-02/script.js b/login-02/script.js new file mode 100644 index 0000000000000000000000000000000000000000..e4080495b0b597f2985c65f344f16304f9797a9e --- /dev/null +++ b/login-02/script.js @@ -0,0 +1,13 @@ +let loginForm = document.querySelector(".my-form"); + +loginForm.addEventListener("submit", (e) => { + e.preventDefault(); + let email = document.getElementById("email"); + let password = document.getElementById("password"); + + console.log('Email:', email.value); + console.log('Password:', password.value); + // process and send to API +}); + + diff --git a/login-02/style.css b/login-02/style.css new file mode 100644 index 0000000000000000000000000000000000000000..733362662cfb08298e2ff110aa62d9bae7b1d86f --- /dev/null +++ b/login-02/style.css @@ -0,0 +1,277 @@ + + +@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); + +:root { + --primary: #4978F0; + --primary-light: #E1EEF5; + --secondary: #1D1D1D; + --background: #F4F1FF; + --text: #1F2346; +} + +body { + font-size: 16px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Mulish; +} + +.socials-row { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +.socials-row img { + width: 24px; + height: 24px; +} + +.socials-row > a { + padding: 8px; + border-radius: 8px; + width: 100%; + min-height: 48px; + display: flex; + gap: 12px; + justify-content: center; + align-items: center; + text-decoration: none; + font-size: 1.1rem; + color: var(--text); + padding: 8px; + border: 1px solid var(--primary-light); + font-weight: 700; +} + +.socials-row > a:hover { + border: 1px solid var(--primary); +} + +.divider { + display: flex; + flex-direction: row; + color: var(--secondary); + gap: 16px; + align-items: center; +} + +.divider-line { + width: 100%; + height: 1px; + background-color: var(--secondary); + opacity: .2; +} + +.login-wrapper { + position: relative; + display: grid; + grid-template-columns: 4fr 3fr; + max-width: 1200px; + margin: 0 auto; +} + + +.login-side { + padding: 188px 32px 48px 32px; + display: flex; + justify-content: center; + align-items: start; +} + +.info-side { + height: 100vh; + padding: 84px 48px 48px 32px; + color: #401B3D; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: start; + align-items: center; + background-color: var(--background); +} + +.info-side h2 { + margin-top: 48px; + color: var(--text); + font-size: 1.8rem; + margin-bottom: 12px; +} + +.info-side p { + font-size: 1.2rem; +} + +.info-side img { + max-width: 860px; +} + +.welcome-message { + max-width: 360px; +} + +.logo { + height: 48px; + position: absolute; + top: 20px; + left: 20px; +} + +.my-form__wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; + max-width: 460px; + width: 100%; + padding: 48px 32px; + height: fit-content; + box-shadow: + rgba(100, 100, 111, 0.2) + 0px 7px 29px 0px; +} + +.my-form { + display: flex; + flex-direction: column; + justify-content: start; + position: relative; + gap: 16px; +} + +.login-welcome { + height: 80px; + width: 80px; + border-radius: 50%; + object-fit: cover; +} + +.login-welcome-row { + display: flex; + width: 100%; + flex-direction: column; + gap: 8px; +} + +.my-form__button { + background-color: var(--primary); + color: white; + white-space: nowrap; + border: none; + display: flex; + justify-content: center; + align-items: center; + margin-top: 16px; + line-height: 50px; + outline: none; + font-size: 18px; + letter-spacing: .025em; + text-decoration: none; + cursor: pointer; + font-weight: 800; + min-height: 50px; + width: 100%; + border-radius: 8px; + box-shadow: 0 5px 10px rgba(0,0,0,.15); + transition: all .3s ease; + -webkit-transition: all .3s ease; +} + +.my-form__actions { + display: flex; + flex-direction: column; + color: var(--secondary); + gap: 16px; + margin-top: 8px; +} + +.my-form__actions a { + color: var(--secondary); + font-weight: 600; + text-decoration: none; +} + +.my-form__actions a:hover { + text-decoration: underline; +} + +.my-form__row { + display: flex; + justify-content: space-between; +} + +.my-form__signup { + display: flex; + justify-content: center; +} + +.my-form__signup a { + color: var(--primary); + font-weight: 800; + text-decoration: none; + font-size: 18px; +} + +.my-form__signup a:hover { + text-decoration: underline; +} + +.text-field input { + color: var(--secondary); + font-size: 16px; + font-weight: 500; + max-width: 100%; + width: 100%; + border: 1px solid var(--secondary); + height: 50px; + letter-spacing: .03rem; + background-color: transparent; + outline: none; + transition: .25s; + border-radius: 8px; + text-indent: 20px; + margin-top: 8px; +} + +.text-field { + position: relative; +} + +.text-field img { + position: absolute; + right: -2px; + bottom: -4px; + width: 30px; + height: 30px; + transform: translate(-50%,-50%); + transform-origin: center; +} + +.text-field input:focus { + border: 1px solid var(--primary); +} + +.text-field label { + color: var(--secondary); + font-size: 14px; + font-weight: 600; + letter-spacing: .03rem; + z-index: 10; +} + +@media (max-width: 640px) { + .login-wrapper { + grid-template-columns: 1fr; + height: 100vh; + } + + .info-side { + flex-direction: column-reverse; + padding: 48px 48px 48px 32px; + } +} diff --git a/login-03/assets/apple.png b/login-03/assets/apple.png deleted file mode 100644 index 7c5fd14f39e540e0a4fd11cbef2a2acd26578a01..0000000000000000000000000000000000000000 Binary files a/login-03/assets/apple.png and /dev/null differ diff --git a/login-03/assets/email.svg b/login-03/assets/email.svg deleted file mode 100644 index 0043e30458c8b39752603b9fe6a00032641da286..0000000000000000000000000000000000000000 --- a/login-03/assets/email.svg +++ /dev/null @@ -1,5 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-at" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path> - <path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28"></path> -</svg> \ No newline at end of file diff --git a/login-03/assets/google.png b/login-03/assets/google.png deleted file mode 100644 index 53f67809e02fd3f976e875804c9ebd8bd4ea1251..0000000000000000000000000000000000000000 Binary files a/login-03/assets/google.png and /dev/null differ diff --git a/login-03/assets/logo.png b/login-03/assets/logo.png deleted file mode 100644 index a9615fa3e3ccc73634fbf3f069548c329f52bad0..0000000000000000000000000000000000000000 Binary files a/login-03/assets/logo.png and /dev/null differ diff --git a/login-03/assets/mock.png b/login-03/assets/mock.png deleted file mode 100644 index c54cf136f1fe6a61c578c8e582100dcf0ff65921..0000000000000000000000000000000000000000 Binary files a/login-03/assets/mock.png and /dev/null differ diff --git a/login-03/assets/password.svg b/login-03/assets/password.svg deleted file mode 100644 index ded62cd63d15d9d14377ad45677fa492f8fef57c..0000000000000000000000000000000000000000 --- a/login-03/assets/password.svg +++ /dev/null @@ -1,6 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"></path> - <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path> - <path d="M8 11v-4a4 4 0 1 1 8 0v4"></path> -</svg> \ No newline at end of file diff --git a/login-03/index.html b/login-03/index.html deleted file mode 100644 index 5f42e4a81c72bca2cb511ae6bc2c4d85e88c5767..0000000000000000000000000000000000000000 --- a/login-03/index.html +++ /dev/null @@ -1,106 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>Login Example</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <div class="login-wrapper"> - <div class="login-side"> - <a href="#" title="Logo"> - <img class="logo" src="assets/logo.png" alt="Logo"> - </a> - <div class="my-form__wrapper"> - <div class="login-welcome-row"> - <h1>Welcome back 👏</h1> - <p>Please enter your details!</p> - </div> - <form class="my-form"> - <div class="socials-row"> - <a - href="#" - title="Use Google" - > - <img src="assets/google.png" alt="Google"> - Log in with Google - </a> - <a - href="#" - title="Use Apple" - > - <img src="assets/apple.png" alt="Apple"> - Log in with Apple - </a> - </div> - <div class="divider"> - <div class="divider-line"></div> - Or - <div class="divider-line"></div> - </div> - <div class="text-field"> - <label for="email">Email:</label> - <input - type="email" - id="email" - name="email" - placeholder="Your Email" - required - > - <img - alt="Email Icon" - title="Email Icon" - src="assets/email.svg" - > - </div> - <div class="text-field"> - <label for="password">Password:</label> - <input - id="password" - type="password" - name="password" - placeholder="Your Password" - title="Minimum 6 characters at - least 1 Alphabet and 1 Number" - pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" - required - > - <img - alt="Password Icon" - title="Password Icon" - src="assets/password.svg" - > - </div> - <input type="submit" class="my-form__button" value="Login"> - <div class="my-form__actions"> - <div class="my-form__row"> - <span>Did you forget your password?</span> - <a href="#" title="Reset Password"> - Reset Password - </a> - </div> - <div class="my-form__signup"> - <a href="#" title="Create Account"> - Create Account - </a> - </div> - </div> - </form> - </div> - </div> - <div class="info-side"> - <img src="assets/mock.png" alt="Mock" class="mockup"> - <div class="welcome-message"> - <h2>Navitron Maps! 👋</h2> - <p> - Your ultimate guide to navigating the world - and discovering new places with ease. - </p> - </div> - </div> - </div> - <script src="script.js"></script> - </body> -</html> - diff --git a/login-03/script.js b/login-03/script.js deleted file mode 100644 index e4080495b0b597f2985c65f344f16304f9797a9e..0000000000000000000000000000000000000000 --- a/login-03/script.js +++ /dev/null @@ -1,13 +0,0 @@ -let loginForm = document.querySelector(".my-form"); - -loginForm.addEventListener("submit", (e) => { - e.preventDefault(); - let email = document.getElementById("email"); - let password = document.getElementById("password"); - - console.log('Email:', email.value); - console.log('Password:', password.value); - // process and send to API -}); - - diff --git a/login-03/style.css b/login-03/style.css deleted file mode 100644 index 733362662cfb08298e2ff110aa62d9bae7b1d86f..0000000000000000000000000000000000000000 --- a/login-03/style.css +++ /dev/null @@ -1,277 +0,0 @@ - - -@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); - -:root { - --primary: #4978F0; - --primary-light: #E1EEF5; - --secondary: #1D1D1D; - --background: #F4F1FF; - --text: #1F2346; -} - -body { - font-size: 16px; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: Mulish; -} - -.socials-row { - display: flex; - gap: 16px; - flex-wrap: wrap; -} - -.socials-row img { - width: 24px; - height: 24px; -} - -.socials-row > a { - padding: 8px; - border-radius: 8px; - width: 100%; - min-height: 48px; - display: flex; - gap: 12px; - justify-content: center; - align-items: center; - text-decoration: none; - font-size: 1.1rem; - color: var(--text); - padding: 8px; - border: 1px solid var(--primary-light); - font-weight: 700; -} - -.socials-row > a:hover { - border: 1px solid var(--primary); -} - -.divider { - display: flex; - flex-direction: row; - color: var(--secondary); - gap: 16px; - align-items: center; -} - -.divider-line { - width: 100%; - height: 1px; - background-color: var(--secondary); - opacity: .2; -} - -.login-wrapper { - position: relative; - display: grid; - grid-template-columns: 4fr 3fr; - max-width: 1200px; - margin: 0 auto; -} - - -.login-side { - padding: 188px 32px 48px 32px; - display: flex; - justify-content: center; - align-items: start; -} - -.info-side { - height: 100vh; - padding: 84px 48px 48px 32px; - color: #401B3D; - display: flex; - overflow: hidden; - flex-direction: column; - justify-content: start; - align-items: center; - background-color: var(--background); -} - -.info-side h2 { - margin-top: 48px; - color: var(--text); - font-size: 1.8rem; - margin-bottom: 12px; -} - -.info-side p { - font-size: 1.2rem; -} - -.info-side img { - max-width: 860px; -} - -.welcome-message { - max-width: 360px; -} - -.logo { - height: 48px; - position: absolute; - top: 20px; - left: 20px; -} - -.my-form__wrapper { - display: flex; - flex-direction: column; - align-items: center; - gap: 32px; - max-width: 460px; - width: 100%; - padding: 48px 32px; - height: fit-content; - box-shadow: - rgba(100, 100, 111, 0.2) - 0px 7px 29px 0px; -} - -.my-form { - display: flex; - flex-direction: column; - justify-content: start; - position: relative; - gap: 16px; -} - -.login-welcome { - height: 80px; - width: 80px; - border-radius: 50%; - object-fit: cover; -} - -.login-welcome-row { - display: flex; - width: 100%; - flex-direction: column; - gap: 8px; -} - -.my-form__button { - background-color: var(--primary); - color: white; - white-space: nowrap; - border: none; - display: flex; - justify-content: center; - align-items: center; - margin-top: 16px; - line-height: 50px; - outline: none; - font-size: 18px; - letter-spacing: .025em; - text-decoration: none; - cursor: pointer; - font-weight: 800; - min-height: 50px; - width: 100%; - border-radius: 8px; - box-shadow: 0 5px 10px rgba(0,0,0,.15); - transition: all .3s ease; - -webkit-transition: all .3s ease; -} - -.my-form__actions { - display: flex; - flex-direction: column; - color: var(--secondary); - gap: 16px; - margin-top: 8px; -} - -.my-form__actions a { - color: var(--secondary); - font-weight: 600; - text-decoration: none; -} - -.my-form__actions a:hover { - text-decoration: underline; -} - -.my-form__row { - display: flex; - justify-content: space-between; -} - -.my-form__signup { - display: flex; - justify-content: center; -} - -.my-form__signup a { - color: var(--primary); - font-weight: 800; - text-decoration: none; - font-size: 18px; -} - -.my-form__signup a:hover { - text-decoration: underline; -} - -.text-field input { - color: var(--secondary); - font-size: 16px; - font-weight: 500; - max-width: 100%; - width: 100%; - border: 1px solid var(--secondary); - height: 50px; - letter-spacing: .03rem; - background-color: transparent; - outline: none; - transition: .25s; - border-radius: 8px; - text-indent: 20px; - margin-top: 8px; -} - -.text-field { - position: relative; -} - -.text-field img { - position: absolute; - right: -2px; - bottom: -4px; - width: 30px; - height: 30px; - transform: translate(-50%,-50%); - transform-origin: center; -} - -.text-field input:focus { - border: 1px solid var(--primary); -} - -.text-field label { - color: var(--secondary); - font-size: 14px; - font-weight: 600; - letter-spacing: .03rem; - z-index: 10; -} - -@media (max-width: 640px) { - .login-wrapper { - grid-template-columns: 1fr; - height: 100vh; - } - - .info-side { - flex-direction: column-reverse; - padding: 48px 48px 48px 32px; - } -} diff --git a/menu-01/index.html b/menu-01/index.html index dbac6e0290538fea358a77267a1576a450d5dbcb..129d4acd309c35f7898cf49519a62081b43ab434 100644 --- a/menu-01/index.html +++ b/menu-01/index.html @@ -1,15 +1,17 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> + <meta charset="UTF-8"> <title>Menu Example</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> - <span class="background"></span> + <div class="background"></div> - <span class="menu__wrapper"> + <div class="menu__wrapper"> - <span class="menu__bar"> + <div class="menu__bar"> <a href="#" title="Logo" @@ -19,7 +21,7 @@ class="logo" src="atheros_learning_logo.png" title='Logo' alt='Logo' - /> + > </a> <img class="menu-icon" @@ -27,17 +29,16 @@ src="burger-menu.svg" title='Burger Menu' alt='Burger Menu' onclick="toggleMenu(this)" - /> + > - <menu class="navigation"> + <ul class="navigation"> <li>Platform</li> <li>Blog</li> <li>About</li> <li>Contact Us</li> -<html> + </ul> <title>Menu Example</title> - </span> + </div> - </span> + <script src="script.js"></script> </body> - <script src="script.js"></script> </html> diff --git a/notification-01/index.html b/notification-01/index.html new file mode 100644 index 0000000000000000000000000000000000000000..2aaf5bc110edb667077105142fc380d53fda3ca0 --- /dev/null +++ b/notification-01/index.html @@ -0,0 +1,57 @@ + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Snackbar</title> + <link rel="stylesheet" href="style.css"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link + href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" + rel="stylesheet" + > + </head> + <body> + <button class="trigger-button" onclick="toggleNotification()"> + Toggle Snackbar + </button> + <figure class="notification hide none"> + <div class="notification__body"> + <div class="notification__body__first"> + <svg focusable="false" viewBox="0 0 24 24"> + <path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8, + 8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, + 4.31L15.77,2.74C14.61,2.26 13.34,2 + 12,2A10,10 0 0,0 2,12A10,10 0 0,0 + 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11, + 16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" + ></path> + </svg> + <p> + Your account has been created! 🚀 + </p> + </div> + <svg + onclick="toggleNotification()" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + > + <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> + <path d="M18 6l-12 12"></path> + <path d="M6 6l12 12"></path> + </svg> + </div> + </figure> + <script src="script.js"></script> + </body> +</html> + + diff --git a/notification-01/script.js b/notification-01/script.js new file mode 100644 index 0000000000000000000000000000000000000000..6a4cb35b9b5f580c1e299ba7b596fc5b7a9b9dcc --- /dev/null +++ b/notification-01/script.js @@ -0,0 +1,19 @@ + +const notification = document.querySelector('.notification'); +const button = document.querySelector('.trigger-button'); + +const toggleNotification = () => { + notification.classList.remove('none'); + notification.classList.toggle('hide'); +} + +document.addEventListener("click", (event) => { + const isClickInsideNotification = notification.contains(event.target); + const isButtonClicked = button.contains(event.target); + + if (!isClickInsideNotification && !isButtonClicked) { + notification.classList.add('hide'); + } +}); + + diff --git a/notification-01/style.css b/notification-01/style.css new file mode 100644 index 0000000000000000000000000000000000000000..483f33ffea59d32cf2d6984611ee1c34dc26af65 --- /dev/null +++ b/notification-01/style.css @@ -0,0 +1,130 @@ +:root { + --success: #327B32; + --text: #F2ECFF; + --background: #1F1F1F; +} + +html { + font-family: 'Roboto'; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0px; + background-color: var(--background); + display: grid; + place-items: center; + font-size: 16px; + height: 100vh; +} + +.trigger-button { + background-color: white; + border-radius: 8px; + cursor: pointer; + outline: none; + border: none; + font-size: 0.8rem; + min-height: 40px; + max-width: 160px; + width: 100%; + font-weight: 600; + transition: all 0.25s; +} + +.trigger-button:hover { + text-decoration: underline; +} + +.notification { + position: absolute; + bottom: 16px; + padding: 0px 8px; + border-radius: 6px; + display: flex; + align-items: center; + background-color: var(--success); + color: var(--text); + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + animation: fadeInAnimation ease-in-out 0.25s forwards;; + box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), + 0px 6px 10px 0px rgba(0,0,0,0.14), + 0px 1px 18px 0px rgba(0,0,0,0.12); +} + +.none { + display: none; +} + +.hide { + visibility: hidden; + animation: fadeOutAnimation ease-in-out 0.25s forwards; +} + +.notification__body { + display: flex; + width: 100%; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 16px; + font-size: clamp(0.8rem, 3vw, 1.2rem); +} + +.notification__body__first { + display: flex; + justify-content: start; + align-items: center; + gap: 8px; +} + +.notification__body__first > svg { + height: 24px; + width: 24px; + min-width: 24px; + min-height: 24px; + fill: var(--text); +} + +.notification__body > svg:nth-last-child(1) { + cursor: pointer; + margin: auto; + min-width: 24px; + min-height: 24px; +} + +@keyframes fadeInAnimation { + 0% { + opacity: 0; + min-height: 40px; + visibility: hidden; + } + 100% { + opacity: 1; + min-height: 60px; + visibility: visible; + } +} + +@keyframes fadeOutAnimation { + 0% { + opacity: 1; + min-height: 60px; + visibility: visible; + } + 100% { + opacity: 0; + min-height: 40px; + visibility: hidden; + } +} + +@keyframes progress { + to { + transform: scaleX(1); + } +} \ No newline at end of file diff --git a/notification-02/index.html b/notification-02/index.html deleted file mode 100644 index 28ba94bdb7957f7abbf1afa9edf4ba5eba38868a..0000000000000000000000000000000000000000 --- a/notification-02/index.html +++ /dev/null @@ -1,53 +0,0 @@ - -<!DOCTYPE html> -<html> - <head> - <title> - Snackbar - </title> - <link rel="stylesheet" href="style.css"> - </head> - <body> - <button class="trigger-button" onclick="toggleNotification()"> - Toggle Snackbar - </button> - </button> - <figure class="notification hide none"> - <div class="notification__body"> - <span class="notification__body__first"> - <svg focusable="false" viewBox="0 0 24 24"> - <path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8, - 8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, - 4.31L15.77,2.74C14.61,2.26 13.34,2 - 12,2A10,10 0 0,0 2,12A10,10 0 0,0 - 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11, - 16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" - ></path> - </svg> - <p> - Your account has been created! 🚀 - </p> - </span> - <svg - onclick="toggleNotification()" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - stroke-width="2" - stroke="currentColor" - fill="none" - stroke-linecap="round" - stroke-linejoin="round" - > - <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> - <path d="M18 6l-12 12"></path> - <path d="M6 6l12 12"></path> - </svg> - </div> - </figure> - <script src="script.js"></script> - </body> -</html> - - diff --git a/notification-02/script.js b/notification-02/script.js deleted file mode 100644 index 6a4cb35b9b5f580c1e299ba7b596fc5b7a9b9dcc..0000000000000000000000000000000000000000 --- a/notification-02/script.js +++ /dev/null @@ -1,19 +0,0 @@ - -const notification = document.querySelector('.notification'); -const button = document.querySelector('.trigger-button'); - -const toggleNotification = () => { - notification.classList.remove('none'); - notification.classList.toggle('hide'); -} - -document.addEventListener("click", (event) => { - const isClickInsideNotification = notification.contains(event.target); - const isButtonClicked = button.contains(event.target); - - if (!isClickInsideNotification && !isButtonClicked) { - notification.classList.add('hide'); - } -}); - - diff --git a/notification-02/style.css b/notification-02/style.css deleted file mode 100644 index f2149f9644ad64f1d0cc910fe85a5f9097ce35d5..0000000000000000000000000000000000000000 --- a/notification-02/style.css +++ /dev/null @@ -1,132 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); - -:root { - --success: #327B32; - --text: #F2ECFF; - --background: #1F1F1F; -} - -html { - font-family: 'Roboto'; -} - -* { - box-sizing: border-box; -} - -body { - margin: 0px; - background-color: var(--background); - display: grid; - place-items: center; - font-size: 16px; - height: 100vh; -} - -.trigger-button { - background-color: white; - border-radius: 8px; - cursor: pointer; - outline: none; - border: none; - font-size: 0.8rem; - min-height: 40px; - max-width: 160px; - width: 100%; - font-weight: 600; - transition: all 0.25s; -} - -.trigger-button:hover { - text-decoration: underline; -} - -.notification { - position: absolute; - bottom: 16px; - padding: 0px 8px; - border-radius: 6px; - display: flex; - align-items: center; - background-color: var(--success); - color: var(--text); - box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); - opacity: 0; - animation: fadeInAnimation ease-in-out 0.25s forwards;; - box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), - 0px 6px 10px 0px rgba(0,0,0,0.14), - 0px 1px 18px 0px rgba(0,0,0,0.12); -} - -.none { - display: none; -} - -.hide { - visibility: hidden; - animation: fadeOutAnimation ease-in-out 0.25s forwards; -} - -.notification__body { - display: flex; - width: 100%; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 16px; - font-size: clamp(0.8rem, 3vw, 1.2rem); -} - -.notification__body__first { - display: flex; - justify-content: start; - align-items: center; - gap: 8px; -} - -.notification__body__first > svg { - height: 24px; - width: 24px; - min-width: 24px; - min-height: 24px; - fill: var(--text); -} - -.notification__body > svg:nth-last-child(1) { - cursor: pointer; - margin: auto; - min-width: 24px; - min-height: 24px; -} - -@keyframes fadeInAnimation { - 0% { - opacity: 0; - min-height: 40px; - visibility: hidden; - } - 100% { - opacity: 1; - min-height: 60px; - visibility: visible; - } -} - -@keyframes fadeOutAnimation { - 0% { - opacity: 1; - min-height: 60px; - visibility: visible; - } - 100% { - opacity: 0; - min-height: 40px; - visibility: hidden; - } -} - -@keyframes progress { - to { - transform: scaleX(1); - } -} \ No newline at end of file diff --git a/scrolling-01/index.html b/scrolling-01/index.html index c1edee48b1ef0a9e78318822279c769292ef9b74..8aec2978b9e0d5ae6f5a2f4896b6cc37d81ff3e6 100644 --- a/scrolling-01/index.html +++ b/scrolling-01/index.html @@ -1,83 +1,82 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + </head> <title>Scrolling Progress</title> - <link rel="stylesheet" href="style.css" /> + <link rel="stylesheet" href="style.css"> </head> <body> <div class="progress__wrapper"> + <div class="progress__bar"></div> <!DOCTYPE html> +<html lang="en"> <!DOCTYPE html> + <head> + <title>Scrolling Progress</title> <!DOCTYPE html> + <title>Scrolling Progress</title> <html lang="en"> -<!DOCTYPE html> + <title>Scrolling Progress</title> <head> -<!DOCTYPE html> + <title>Scrolling Progress</title> <meta charset="UTF-8" /> -<!DOCTYPE html> + <title>Scrolling Progress</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -<!DOCTYPE html> + <title>Scrolling Progress</title> <title>Scrolling Progress</title> -<!DOCTYPE html> + <title>Scrolling Progress</title> <link rel="stylesheet" href="style.css" /> -<!DOCTYPE html> + <title>Scrolling Progress</title> </head> -<!DOCTYPE html> + <title>Scrolling Progress</title> <body> -<html lang="en"> + <link rel="stylesheet" href="style.css" /> -<html lang="en"> + <link rel="stylesheet" href="style.css" /> <!DOCTYPE html> - src="images/lavender-field.jpg" + <link rel="stylesheet" href="style.css" /> <html lang="en"> - <head> - title="Autumn" -<html lang="en"> + <title>Scrolling Progress</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -<html lang="en"> + Place 2 <title>Scrolling Progress</title> + <link rel="stylesheet" href="style.css" /> -<!DOCTYPE html> + <title>Scrolling Progress</title> </head> -<html lang="en"> <link rel="stylesheet" href="style.css" /> + <meta charset="UTF-8" /> - </h2> + alt="Autumn" -<html lang="en"> + <link rel="stylesheet" href="style.css" /> <!DOCTYPE html> - src="images/autumn.jpg" + <p>Fusce suscipit libero eget elit. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Phasellus rhoncus. Integer vulputate sem a nibh rutrum consequat. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Phasellus et lorem id felis nonummy placerat. Pellentesque sapien. Praesent in mauris eu tortor porttitor accumsan. Mauris tincidunt sem sed arcu. Aliquam ante. Nulla quis diam. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Phasellus et lorem id felis nonummy placerat. </p> - alt="Autumn" + <h2> - title="Autumn" - /> + Place 3 - <p>Fusce suscipit libero eget elit. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Phasellus rhoncus. Integer vulputate sem a nibh rutrum consequat. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Phasellus et lorem id felis nonummy placerat. Pellentesque sapien. Praesent in mauris eu tortor porttitor accumsan. Mauris tincidunt sem sed arcu. Aliquam ante. Nulla quis diam. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Phasellus et lorem id felis nonummy placerat. </p> + </h2> -<!DOCTYPE html> + <title>Scrolling Progress</title> </head> - Place 3 + src="images/summer.jpg" - </h2> + alt="Summer" -<html lang="en"> + <link rel="stylesheet" href="style.css" /> <!DOCTYPE html> - src="images/summer.jpg" - alt="Summer" - title="Summer" - /> + <p>Aenean vel massa quis mauris vehicula lacinia. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Curabitur vitae diam non enim vestibulum interdum. Pellentesque pretium lectus id turpis. Mauris tincidunt sem sed arcu. In rutrum. Nulla quis diam. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Nam sed tellus id magna elementum tincidunt. </p> - <head> + <title>Scrolling Progress</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -<!DOCTYPE html> </head> +<!DOCTYPE html> - <head> <title>Scrolling Progress</title> + <link rel="stylesheet" href="style.css" /> - </h2> + <img + </head> <html lang="en"> -<!DOCTYPE html> + </head> <head> <link rel="stylesheet" href="style.css" /> +<!DOCTYPE html> - <head> </head> -<html lang="en"> <meta charset="UTF-8" /> -<html lang="en"> + </head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <p>Maecenas sollicitudin. Nullam dapibus fermentum ipsum. Fusce aliquam vestibulum ipsum. Maecenas libero. Fusce suscipit libero eget elit. Aenean vel massa quis mauris vehicula lacinia. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? In convallis. Nullam sit amet magna in magna gravida vehicula. Maecenas aliquet accumsan leo. Integer malesuada. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Curabitur sagittis hendrerit ante. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero.</p> </div> - </article> <script> const body = document.body; const progressBar = document.querySelector('.progress__bar'); diff --git a/search-input-01/index.html b/search-input-01/index.html index c8a603191905f4d114c26a4342919bd1349c8c88..617230b1fdf6ae25395604452b2e3595a2f30617 100644 --- a/search-input-01/index.html +++ b/search-input-01/index.html @@ -1,22 +1,28 @@ <!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> +<!DOCTYPE html> <html> +<!DOCTYPE html> <header> +<!DOCTYPE html> <title>Search Input</title> +<!DOCTYPE html> <link rel="stylesheet" href="style.css"> - </header> <body> - <span class="centering"> + <div class="centering"> - <span class="box"> + <div class="box"> <input class="search" placeholder=" " spellcheck="false" - /> + > - </span> + </div> +<html> - </header> </body> </html>