├── README.md
├── 07-modal
    ├── hero.jpeg
    ├── app.js
    ├── index.html
    ├── main.css
    └── normalize.css
├── images
    ├── 07-modal.png
    ├── 09-menu.png
    ├── 02-counter.png
    ├── 04-reviews.png
    ├── 05-navbar.png
    ├── 06-sidebar.png
    ├── 08-questions.png
    ├── 03-task-manager.png
    ├── 10-grocery-bud.png
    ├── 01-color-flipper.png
    └── hero-img.svg
├── 09-menu
    ├── menu-item.jpeg
    ├── index.html
    ├── main.css
    └── normalize.css
├── 05-navbar
    ├── app.js
    ├── index.html
    ├── normalize.css
    └── main.css
├── 06-sidebar
    ├── app.js
    ├── index.html
    ├── logo.svg
    ├── normalize.css
    └── main.css
├── 08-questions
    ├── app.js
    ├── index.html
    ├── main.css
    └── normalize.css
├── 02-counter
    ├── index.html
    ├── main.css
    └── normalize.css
├── 01-color-flipper
    ├── hex.html
    ├── index.html
    ├── main.css
    └── normalize.css
├── 03-task-manager
    ├── task.html
    ├── index.html
    ├── normalize.css
    └── main.css
├── 04-reviews
    ├── index.html
    ├── normalize.css
    └── main.css
├── 10-grocery-bud
    ├── index.html
    ├── normalize.css
    └── main.css
├── index.html
├── styles.css
└── normalize.css


/README.md:
--------------------------------------------------------------------------------
1 | [UIDESIGNDAILY](https://uidesigndaily.com/)
2 | 


--------------------------------------------------------------------------------
/07-modal/hero.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/07-modal/hero.jpeg


--------------------------------------------------------------------------------
/images/07-modal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/07-modal.png


--------------------------------------------------------------------------------
/images/09-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/09-menu.png


--------------------------------------------------------------------------------
/images/02-counter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/02-counter.png


--------------------------------------------------------------------------------
/images/04-reviews.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/04-reviews.png


--------------------------------------------------------------------------------
/images/05-navbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/05-navbar.png


--------------------------------------------------------------------------------
/images/06-sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/06-sidebar.png


--------------------------------------------------------------------------------
/09-menu/menu-item.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/09-menu/menu-item.jpeg


--------------------------------------------------------------------------------
/images/08-questions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/08-questions.png


--------------------------------------------------------------------------------
/images/03-task-manager.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/03-task-manager.png


--------------------------------------------------------------------------------
/images/10-grocery-bud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/10-grocery-bud.png


--------------------------------------------------------------------------------
/images/01-color-flipper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/html-css-mini-projects-site/HEAD/images/01-color-flipper.png


--------------------------------------------------------------------------------
/05-navbar/app.js:
--------------------------------------------------------------------------------
 1 | const getElement = (selector) => {
 2 |   const el = document.querySelector(selector)
 3 |   if (el) return el
 4 |   throw new Error(`Please check your classes : ${selector} does not exist`)
 5 | }
 6 | 
 7 | const navToggle = getElement('.nav-toggle')
 8 | const links = getElement('.links')
 9 | 
10 | navToggle.addEventListener('click', function () {
11 |   links.classList.toggle('show-links')
12 | })
13 | 


--------------------------------------------------------------------------------
/07-modal/app.js:
--------------------------------------------------------------------------------
 1 | const getElement = (selector) => {
 2 |   const el = document.querySelector(selector)
 3 |   if (el) return el
 4 |   throw new Error(`Please double check the ${selector}`)
 5 | }
 6 | 
 7 | const modalBtn = getElement('.modal-btn')
 8 | const modal = getElement('.modal-overlay')
 9 | const closeBtn = getElement('.close-btn')
10 | 
11 | modalBtn.addEventListener('click', function () {
12 |   modal.classList.add('open-modal')
13 | })
14 | closeBtn.addEventListener('click', function () {
15 |   modal.classList.remove('open-modal')
16 | })
17 | 


--------------------------------------------------------------------------------
/06-sidebar/app.js:
--------------------------------------------------------------------------------
 1 | const getElement = (selector) => {
 2 |   const el = document.querySelector(selector)
 3 |   if (el) return el
 4 |   throw new Error(`Please check your classes : ${selector} does not exist`)
 5 | }
 6 | 
 7 | const sidebarToggle = getElement('.sidebar-toggle')
 8 | const sidebar = getElement('.sidebar')
 9 | const closeBtn = getElement('.close-btn')
10 | 
11 | sidebarToggle.addEventListener('click', function () {
12 |   sidebar.classList.toggle('show-sidebar')
13 | })
14 | 
15 | closeBtn.addEventListener('click',()=>{
16 |    sidebar.classList.remove('show-sidebar')
17 | 
18 | })


--------------------------------------------------------------------------------
/08-questions/app.js:
--------------------------------------------------------------------------------
 1 | const getElement = (selector, list) => {
 2 |   const el = list
 3 |     ? [...document.querySelectorAll(selector)]
 4 |     : document.querySelector(selector);
 5 | 
 6 |   // check if only one element
 7 |   if (list && el.length === 1) return el[0];
 8 |   // check if list is not empty
 9 |   if (list && el.length > 0) return el;
10 |   // if not a list and element exists
11 |   if (!list && el) return el;
12 |   throw new Error(`Please double check the ${selector}`);
13 | };
14 | 
15 | // traversing the dom
16 | const btns = getElement('.question-btn', true);
17 | const title = getElement('.title');
18 | 
19 | btns.forEach(function (btn) {
20 |   btn.addEventListener('click', function (e) {
21 |     const question = e.currentTarget.parentElement.parentElement;
22 | 
23 |     question.classList.toggle('show-text');
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/02-counter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Counter</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <main>
20 |       <div class="container">
21 |         <h1>counter</h1>
22 |         <span id="value">0</span>
23 |         <div class="button-container">
24 |           <button class="btn counter-btn decrease">decrease</button>
25 |           <button class="btn counter-btn reset">reset</button>
26 |           <button class="btn counter-btn increase">increase</button>
27 |         </div>
28 |       </div>
29 |     </main>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/01-color-flipper/hex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Color Flipper || Hex</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <nav>
20 |       <div class="nav-center">
21 |         <h4>color flipper</h4>
22 |         <ul class="nav-links">
23 |           <li><a href="index.html">simple</a></li>
24 |           <li><a href="hex.html">hex</a></li>
25 |         </ul>
26 |       </div>
27 |     </nav>
28 |     <main>
29 |       <div class="container">
30 |         <h2>background color : <span class="color">#f8fafc</span></h2>
31 |         <button class="btn btn-hero" id="btn">click me</button>
32 |       </div>
33 |     </main>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/01-color-flipper/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Color Flipper || Simple</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <nav>
20 |       <div class="nav-center">
21 |         <h4>color flipper</h4>
22 |         <ul class="nav-links">
23 |           <li><a href="index.html">simple</a></li>
24 |           <li><a href="hex.html">hex</a></li>
25 |         </ul>
26 |       </div>
27 |     </nav>
28 |     <main>
29 |       <div class="container">
30 |         <h2>background color : <span class="color">#f8fafc</span></h2>
31 |         <button class="btn btn-hero" id="btn">click me</button>
32 |       </div>
33 |     </main>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/07-modal/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Modal || Final</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <!-- hero -->
20 |     <header class="hero">
21 |       <div class="banner">
22 |         <h1>modal project</h1>
23 |         <button class="btn modal-btn">open modal</button>
24 |       </div>
25 |     </header>
26 |     <!-- modal -->
27 |     <div class="modal-overlay">
28 |       <div class="modal-container">
29 |         <h3>modal content</h3>
30 |         <button class="close-btn"><i class="fas fa-times"></i></button>
31 |       </div>
32 |     </div>
33 |     <!-- modal -->
34 |     <div class="modal-overlay">
35 |       <div class="modal-container">
36 |         <h3>modal content</h3>
37 |         <button class="close-btn"><i class="fas fa-times"></i></button>
38 |       </div>
39 |     </div>
40 |     <!-- javascript -->
41 |     <script src="app.js"></script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/03-task-manager/task.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <!-- normalize -->
 8 |     <link rel="stylesheet" href="./normalize.css" />
 9 |     <!-- main  -->
10 |     <link rel="stylesheet" href="./main.css" />
11 | 
12 |     <title>Edit Task || Final</title>
13 |   </head>
14 |   <body>
15 |     <form class="form single-task-form">
16 |       <h4>Edit Task</h4>
17 |       <div class="form-control">
18 |         <label class="form-label">Task ID</label>
19 |         <p class="task-edit-id">123456789</p>
20 |       </div>
21 |       <div class="form-control">
22 |         <label for="name" class="form-label">Name</label>
23 |         <input
24 |           type="text"
25 |           name="name"
26 |           class="form-input task-edit-name"
27 |           value="walk the dog"
28 |         />
29 |       </div>
30 |       <div class="form-control">
31 |         <label for="completed" class="form-label">completed</label>
32 |         <input type="checkbox" name="completed" class="task-edit-completed" />
33 |       </div>
34 |       <button type="submit" class="btn btn-block task-edit-btn">edit</button>
35 |       <div class="form-alert text-small">there was an error</div>
36 |     </form>
37 |     <a href="index.html" class="btn back-link">back to tasks</a>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/04-reviews/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Reviews || Final</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <main>
20 |       <section class="container">
21 |         <!-- title -->
22 |         <div class="title">
23 |           <h2>our reviews</h2>
24 |           <div class="title-underline"></div>
25 |         </div>
26 |         <!-- review -->
27 |         <article class="review">
28 |           <div class="img-container">
29 |             <img
30 |               src="https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg"
31 |               id="person-img"
32 |               alt=""
33 |             />
34 |           </div>
35 |           <h4 id="author">sara jones</h4>
36 |           <p id="job">ux designer</p>
37 |           <p id="info">
38 |             Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto
39 |             asperiores debitis incidunt, eius earum ipsam cupiditate libero?
40 |             Iste, doloremque nihil?
41 |           </p>
42 |           <!-- prev next buttons-->
43 |           <div class="button-container">
44 |             <button class="prev-btn">
45 |               <i class="fas fa-chevron-left"></i>
46 |             </button>
47 |             <button class="next-btn">
48 |               <i class="fas fa-chevron-right"></i>
49 |             </button>
50 |           </div>
51 |           <!-- random button -->
52 |           <button class="btn random-btn">surprise me</button>
53 |         </article>
54 |       </section>
55 |     </main>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/06-sidebar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Sidebar || Final</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <button class="sidebar-toggle">
20 |       <i class="fas fa-bars"></i>
21 |     </button>
22 |     <aside class="sidebar">
23 |       <div class="sidebar-header">
24 |         <img src="./logo.svg" class="logo" alt="" />
25 |         <button class="close-btn"><i class="fas fa-times"></i></button>
26 |       </div>
27 |       <!-- links -->
28 |       <ul class="links">
29 |         <li>
30 |           <a href="index.html">home</a>
31 |         </li>
32 |         <li>
33 |           <a href="about.html">about</a>
34 |         </li>
35 |         <li>
36 |           <a href="projects.html">projects</a>
37 |         </li>
38 |         <li>
39 |           <a href="contact.html">contact</a>
40 |         </li>
41 |       </ul>
42 |       <!-- social media -->
43 |       <ul class="social-icons">
44 |         <li>
45 |           <a href="https://www.twitter.com">
46 |             <i class="fab fa-facebook"></i>
47 |           </a>
48 |         </li>
49 |         <li>
50 |           <a href="https://www.twitter.com">
51 |             <i class="fab fa-twitter"></i>
52 |           </a>
53 |         </li>
54 |         <li>
55 |           <a href="https://www.twitter.com">
56 |             <i class="fab fa-behance"></i>
57 |           </a>
58 |         </li>
59 |         <li>
60 |           <a href="https://www.twitter.com">
61 |             <i class="fab fa-linkedin"></i>
62 |           </a>
63 |         </li>
64 |         <li>
65 |           <a href="https://www.twitter.com">
66 |             <i class="fab fa-sketch"></i>
67 |           </a>
68 |         </li>
69 |       </ul>
70 |     </aside>
71 |     <!-- javascript -->
72 |     <script src="./app.js"></script>
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/05-navbar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Navbar || Final</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <nav>
20 |       <div class="nav-center">
21 |         <!-- nav header -->
22 |         <div class="nav-header">
23 |           <h4 class="logo">coding<span> Addict</span></h4>
24 |           <button class="nav-toggle">
25 |             <i class="fas fa-bars"></i>
26 |           </button>
27 |         </div>
28 |         <!-- links -->
29 |         <ul class="links">
30 |           <li>
31 |             <a href="index.html">home</a>
32 |           </li>
33 |           <li>
34 |             <a href="about.html">about</a>
35 |           </li>
36 |           <li>
37 |             <a href="projects.html">projects</a>
38 |           </li>
39 |           <li>
40 |             <a href="contact.html">contact</a>
41 |           </li>
42 |         </ul>
43 |         <!-- social media -->
44 |         <ul class="social-icons">
45 |           <li>
46 |             <a href="https://www.twitter.com">
47 |               <i class="fab fa-facebook"></i>
48 |             </a>
49 |           </li>
50 |           <li>
51 |             <a href="https://www.twitter.com">
52 |               <i class="fab fa-twitter"></i>
53 |             </a>
54 |           </li>
55 |           <li>
56 |             <a href="https://www.twitter.com">
57 |               <i class="fab fa-behance"></i>
58 |             </a>
59 |           </li>
60 |           <li>
61 |             <a href="https://www.twitter.com">
62 |               <i class="fab fa-linkedin"></i>
63 |             </a>
64 |           </li>
65 |           <li>
66 |             <a href="https://www.twitter.com">
67 |               <i class="fab fa-sketch"></i>
68 |             </a>
69 |           </li>
70 |         </ul>
71 |       </div>
72 |     </nav>
73 |     <script src="./app.js"></script>
74 |   </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/03-task-manager/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Task Manager || Final</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <form class="form task-form">
20 |       <h4>task manager</h4>
21 |       <div class="form-control">
22 |         <input
23 |           type="text"
24 |           name="name"
25 |           class="form-input task-input"
26 |           placeholder="e.g. wash dishes"
27 |         />
28 |         <button type="submit" class="btn submit-btn">submit</button>
29 |       </div>
30 |       <small class="form-alert"> there was an error </small>
31 |     </form>
32 |     <section class="tasks-container">
33 |       <p class="loading-text">Loading...</p>
34 |       <div class="tasks">
35 |         <!-- single task -->
36 |         <div class="single-task">
37 |           <h5><i class="far fa-check-circle"></i>task name</h5>
38 |           <div class="task-links">
39 |             <!-- edit link -->
40 |             <a href="task.html" class="edit-link">
41 |               <i class="fas fa-edit"></i>
42 |             </a>
43 |             <!-- delete btn -->
44 |             <button type="button" class="delete-btn" data-id="123">
45 |               <i class="fas fa-trash"></i>
46 |             </button>
47 |           </div>
48 |         </div>
49 |         <!-- single task -->
50 |         <!-- single task -->
51 |         <div class="single-task task-completed">
52 |           <h5>
53 |             <span><i class="far fa-check-circle"></i></span>task name
54 |           </h5>
55 |           <div class="task-links">
56 |             <!-- edit link -->
57 |             <a href="task.html" class="edit-link">
58 |               <i class="fas fa-edit"></i>
59 |             </a>
60 |             <!-- delete btn -->
61 |             <button type="button" class="delete-btn" data-id="123">
62 |               <i class="fas fa-trash"></i>
63 |             </button>
64 |           </div>
65 |         </div>
66 |         <!-- single task -->
67 |       </div>
68 |     </section>
69 |   </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/10-grocery-bud/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Grocery Bud || Final</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <section class="section-center">
20 |       <!-- form -->
21 |       <form class="grocery-form">
22 |         <div class="alert alert-danger">please enter value</div>
23 |         <h4>grocery bud</h4>
24 |         <div class="form-row">
25 |           <input type="text" class="form-input" placeholder="e.g. eggs" />
26 |           <button type="submit" class="btn submit-btn text-small">
27 |             submit
28 |           </button>
29 |         </div>
30 |       </form>
31 |       <!-- list -->
32 |       <div class="grocery-container">
33 |         <div class="grocery-list">
34 |           <!-- grocery item -->
35 |           <article class="grocery-item">
36 |             <span class="title">oranges</span>
37 |             <div class="btn-container">
38 |               <!-- edit btn -->
39 |               <button type="button" class="edit-btn">
40 |                 <i class="fas fa-edit"></i>
41 |               </button>
42 |               <!-- delete btn -->
43 |               <button type="button" class="delete-btn">
44 |                 <i class="fas fa-trash"></i>
45 |               </button>
46 |             </div>
47 |           </article>
48 |           <!-- end of grocery item -->
49 |           <!-- grocery item -->
50 |           <article class="grocery-item">
51 |             <span class="title">apples</span>
52 |             <div class="btn-container">
53 |               <!-- edit btn -->
54 |               <button type="button" class="edit-btn">
55 |                 <i class="fas fa-edit"></i>
56 |               </button>
57 |               <!-- delete btn -->
58 |               <button type="button" class="delete-btn">
59 |                 <i class="fas fa-trash"></i>
60 |               </button>
61 |             </div>
62 |           </article>
63 |           <!-- end of grocery item -->
64 |         </div>
65 |         <button class="clear-btn">clear items</button>
66 |       </div>
67 |     </section>
68 |   </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/09-menu/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Menu || Final</title>
 8 |     <!-- normalize -->
 9 |     <link rel="stylesheet" href="./normalize.css" />
10 |     <!-- font-awesome -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
14 |     />
15 |     <!-- main css -->
16 |     <link rel="stylesheet" href="./main.css" />
17 |   </head>
18 |   <body>
19 |     <section class="menu">
20 |       <!-- title -->
21 |       <div class="title">
22 |         <h2>our menu</h2>
23 |         <div class="title-underline"></div>
24 |       </div>
25 |       <!-- filter buttons -->
26 |       <div class="btn-container">
27 |         <button type="button" class="btn filter-btn">all</button>
28 |         <button type="button" class="btn filter-btn">breakfast</button>
29 |         <button type="button" class="btn filter-btn">lunch</button>
30 |         <button type="button" class="btn filter-btn">shakes</button>
31 |       </div>
32 |       <!-- menu items -->
33 |       <div class="section-center">
34 |         <!-- single item -->
35 |         <article class="menu-item">
36 |           <img src="./menu-item.jpeg" alt="pancakes" class="img photo" />
37 |           <div class="item-info">
38 |             <header>
39 |               <h5>buttermilk pancakes</h5>
40 |               <span class="price">$15</span>
41 |             </header>
42 |             <p class="item-text">
43 |               Lorem ipsum dolor sit amet consectetur adipisicing elit.
44 |               Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
45 |               laboriosam excepturi! Quo, officia.
46 |             </p>
47 |           </div>
48 |         </article>
49 |         <!-- end of single item -->
50 |         <!-- single item -->
51 |         <article class="menu-item">
52 |           <img src="./menu-item.jpeg" alt="pancakes" class="img photo" />
53 |           <div class="item-info">
54 |             <header>
55 |               <h5>buttermilk pancakes</h5>
56 |               <span class="price">$15</span>
57 |             </header>
58 |             <p class="item-text">
59 |               Lorem ipsum dolor sit amet consectetur adipisicing elit.
60 |               Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
61 |               laboriosam excepturi! Quo, officia.
62 |             </p>
63 |           </div>
64 |         </article>
65 |         <!-- end of single item -->
66 |         <!-- single item -->
67 |         <article class="menu-item">
68 |           <img src="./menu-item.jpeg" alt="pancakes" class="img photo" />
69 |           <div class="item-info">
70 |             <header>
71 |               <h5>buttermilk pancakes</h5>
72 |               <span class="price">$15</span>
73 |             </header>
74 |             <p class="item-text">
75 |               Lorem ipsum dolor sit amet consectetur adipisicing elit.
76 |               Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
77 |               laboriosam excepturi! Quo, officia.
78 |             </p>
79 |           </div>
80 |         </article>
81 |         <!-- end of single item -->
82 |       </div>
83 |     </section>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/08-questions/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Questions || Final</title>
  8 |     <!-- normalize -->
  9 |     <link rel="stylesheet" href="./normalize.css" />
 10 |     <!-- font-awesome -->
 11 |     <link
 12 |       rel="stylesheet"
 13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
 14 |     />
 15 |     <!-- main css -->
 16 |     <link rel="stylesheet" href="./main.css" />
 17 |   </head>
 18 |   <body>
 19 |     <section class="questions">
 20 |         <!-- title -->
 21 |         
 22 |           <h2 class="title">general questions</h2>
 23 |         
 24 |         <!-- questions -->
 25 |         <div class="section-center">
 26 |           <!-- single question -->
 27 |           <article class="question ">
 28 |             <!-- question title -->
 29 |             <div class="question-title">
 30 |               <p>Do you accept all major credit cards?</p>
 31 |               <button type="button" class="question-btn">
 32 |                 <span class="plus-icon">
 33 |                   <i class="far fa-plus-square"></i>
 34 |                 </span>
 35 |                 <span class="minus-icon">
 36 |                   <i class="far fa-minus-square"></i>
 37 |                 </span>
 38 |               </button>
 39 |             </div>
 40 |             <!-- question text -->
 41 |             <div class="question-text ">
 42 |               <p>
 43 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
 44 |                 dolore illo dolores quia nemo doloribus quaerat, magni numquam
 45 |                 repellat reprehenderit.
 46 |               </p>
 47 |             </div>
 48 |           </article>
 49 |           <!-- end of single question -->
 50 |           <!-- single question -->
 51 |           <article class="question">
 52 |             <!-- question title -->
 53 |             <div class="question-title">
 54 |               <p>Do you suppport local farmers?</p>
 55 |               <button type="button" class="question-btn">
 56 |                 <span class="plus-icon">
 57 |                   <i class="far fa-plus-square"></i>
 58 |                 </span>
 59 |                 <span class="minus-icon">
 60 |                   <i class="far fa-minus-square"></i>
 61 |                 </span>
 62 |               </button>
 63 |             </div>
 64 |             <!-- question text -->
 65 |             <div class="question-text ">
 66 |               <p>
 67 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
 68 |                 dolore illo dolores quia nemo doloribus quaerat, magni numquam
 69 |                 repellat reprehenderit.
 70 |               </p>
 71 |             </div>
 72 |           </article>
 73 |           <!-- end of single question -->
 74 |           <!-- single question -->
 75 |           <article class="question">
 76 |             <!-- question title -->
 77 |             <div class="question-title">
 78 |               <p>Do you use organic ingredients?</p>
 79 |               <!-- button -->
 80 |               <button type="button" class="question-btn">
 81 |                 <span class="plus-icon">
 82 |                   <i class="far fa-plus-square"></i>
 83 |                 </span>
 84 |                 <span class="minus-icon">
 85 |                   <i class="far fa-minus-square"></i>
 86 |                 </span>
 87 |               </button>
 88 |             </div>
 89 |             <!-- question text -->
 90 |             <div class="question-text">
 91 |               <p>
 92 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
 93 |                 dolore illo dolores quia nemo doloribus quaerat, magni numquam
 94 |                 repellat reprehenderit.
 95 |               </p>
 96 |             </div>
 97 |           </article>
 98 |           <!-- end of single question -->
 99 |       </section>
100 |       <script src="./app.js"></script>
101 |   </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>HTML&CSS Mini Projects</title>
  7 |     <link rel="stylesheet" href="./normalize.css" />
  8 |     <link rel="stylesheet" href="./styles.css" />
  9 |   </head>
 10 |   <body>
 11 |     <div class="hero">
 12 |       <div class="hero-center">
 13 |         <div class="hero-title">
 14 |           <h1>HTML&#38;CSS Course</h1>
 15 |           <p>
 16 |             Projects are the most practical way to learn any language, and
 17 |             <span> HTML&#38;CSS </span> is no exception. Solidify your knowledge
 18 |             of HTML and CSS by creating these and other cool projects.
 19 |           </p>
 20 |           <a
 21 |             href="https://www.udemy.com/course/in-depth-html-css-course-build-responsive-websites/?referralCode=40C89DF13A25C5EC2CCF"
 22 |             target="_blank"
 23 |             class="btn hero-btn"
 24 |           >
 25 |             join the course
 26 |           </a>
 27 |         </div>
 28 |         <img src="./images/hero-img.svg" alt="web development" class="img" />
 29 |       </div>
 30 |     </div>
 31 | 
 32 |     <section class="section">
 33 |       <div class="title">
 34 |         <h2>projects</h2>
 35 |         <div class="title-underline"></div>
 36 |       </div>
 37 |       <div class="section-center">
 38 |         <!-- card -->
 39 |         <a href="./01-color-flipper/index.html" target="_blank" class="project">
 40 |           <img
 41 |             loading="lazy"
 42 |             src="./images/01-color-flipper.png"
 43 |             alt="color flipper"
 44 |           />
 45 |           <footer>
 46 |             <h4>color flipper</h4>
 47 |           </footer>
 48 |         </a>
 49 |         <!--end of card -->
 50 |         <!-- card -->
 51 |         <a href="./02-counter/index.html" target="_blank" class="project">
 52 |           <img loading="lazy" src="./images/02-counter.png" alt="counter" />
 53 |           <footer>
 54 |             <h4>counter</h4>
 55 |           </footer>
 56 |         </a>
 57 |         <!--end of card -->
 58 |         <!-- card -->
 59 |         <a href="./03-task-manager/index.html" target="_blank" class="project">
 60 |           <img
 61 |             loading="lazy"
 62 |             src="./images/03-task-manager.png"
 63 |             alt="counter"
 64 |           />
 65 |           <footer>
 66 |             <h4>task manager</h4>
 67 |           </footer>
 68 |         </a>
 69 |         <!--end of card -->
 70 |         <!-- card -->
 71 |         <a href="./04-reviews/index.html" target="_blank" class="project">
 72 |           <img loading="lazy" src="./images/04-reviews.png" alt="reviews" />
 73 |           <footer>
 74 |             <h4>reviews</h4>
 75 |           </footer>
 76 |         </a>
 77 |         <!--end of card -->
 78 |         <!-- card -->
 79 |         <a href="./05-navbar/index.html" target="_blank" class="project">
 80 |           <img loading="lazy" src="./images/05-navbar.png" alt="reviews" />
 81 |           <footer>
 82 |             <h4>navbar</h4>
 83 |           </footer>
 84 |         </a>
 85 |         <!--end of card -->
 86 |         <!-- card -->
 87 |         <a href="./06-sidebar/index.html" target="_blank" class="project">
 88 |           <img loading="lazy" src="./images/06-sidebar.png" alt="reviews" />
 89 |           <footer>
 90 |             <h4>Sidebar</h4>
 91 |           </footer>
 92 |         </a>
 93 |         <!--end of card -->
 94 |         <!-- card -->
 95 |         <a href="./07-modal/index.html" target="_blank" class="project">
 96 |           <img loading="lazy" src="./images/07-modal.png" alt="reviews" />
 97 |           <footer>
 98 |             <h4>Modal</h4>
 99 |           </footer>
100 |         </a>
101 |         <!--end of card -->
102 |         <!-- card -->
103 |         <a href="./08-questions/index.html" target="_blank" class="project">
104 |           <img loading="lazy" src="./images/08-questions.png" alt="reviews" />
105 |           <footer>
106 |             <h4>Questions</h4>
107 |           </footer>
108 |         </a>
109 |         <!--end of card -->
110 |         <!-- card -->
111 |         <a href="./09-menu/index.html" target="_blank" class="project">
112 |           <img loading="lazy" src="./images/09-menu.png" alt="reviews" />
113 |           <footer>
114 |             <h4>Menu</h4>
115 |           </footer>
116 |         </a>
117 |         <!--end of card -->
118 |         <!-- card -->
119 |         <a href="./10-grocery-bud/index.html" target="_blank" class="project">
120 |           <img loading="lazy" src="./images/10-grocery-bud.png" alt="reviews" />
121 |           <footer>
122 |             <h4>Grocery Bud</h4>
123 |           </footer>
124 |         </a>
125 |         <!--end of card -->
126 |       </div>
127 |     </section>
128 |   </body>
129 | </html>
130 | 


--------------------------------------------------------------------------------
/02-counter/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 | 
 46 |   --headingFont: 'Roboto', sans-serif;
 47 |   --bodyFont: 'Nunito', sans-serif;
 48 |   --smallText: 0.7em;
 49 |   /* rest of the vars */
 50 |   --backgroundColor: var(--grey-50);
 51 |   --textColor: var(--grey-900);
 52 |   --borderRadius: 0.25rem;
 53 |   --letterSpacing: 1px;
 54 |   --transtion: 0.3s ease-in-out all;
 55 |   --max-width: 1120px;
 56 |   --fixed-width: 600px;
 57 | 
 58 |   /* box shadow*/
 59 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 60 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 61 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 62 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 63 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 64 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 65 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 66 | }
 67 | 
 68 | body {
 69 |   background: var(--backgroundColor);
 70 |   font-family: var(--bodyFont);
 71 |   font-weight: 400;
 72 |   line-height: 1.75;
 73 |   color: var(--textColor);
 74 | }
 75 | 
 76 | p {
 77 |   margin-bottom: 1.5rem;
 78 |   max-width: 40em;
 79 | }
 80 | 
 81 | h1,
 82 | h2,
 83 | h3,
 84 | h4,
 85 | h5 {
 86 |   margin: 0;
 87 |   margin-bottom: 1.38rem;
 88 |   font-family: var(--headingFont);
 89 |   font-weight: 400;
 90 |   line-height: 1.3;
 91 |   text-transform: capitalize;
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transtion);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | /*
256 | =============== 
257 | Counter
258 | ===============
259 | */
260 | 
261 | main {
262 |   min-height: 100vh;
263 |   display: grid;
264 |   place-items: center;
265 | }
266 | .container {
267 |   text-align: center;
268 | }
269 | .container h1 {
270 |   font-size: 4rem;
271 |   font-weight: 600;
272 |   margin-bottom: 0;
273 | }
274 | #value {
275 |   font-size: 7rem;
276 |   font-weight: 600;
277 |   line-height: 1.25;
278 | }
279 | 
280 | .counter-btn {
281 |   text-transform: uppercase;
282 |   background: transparent;
283 |   color: var(--textColor);
284 |   border: 2px solid var(--textColor);
285 |   margin: 0.5rem;
286 | }
287 | .counter-btn:hover {
288 |   background: var(--textColor);
289 |   color: var(--white);
290 | }
291 | 


--------------------------------------------------------------------------------
/07-modal/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: var(--bodyFont);
 70 |   font-weight: 400;
 71 |   line-height: 1.75;
 72 |   color: var(--textColor);
 73 | }
 74 | 
 75 | p {
 76 |   margin-bottom: 1.5rem;
 77 |   max-width: 40em;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3,
 83 | h4,
 84 | h5 {
 85 |   margin: 0;
 86 |   margin-bottom: 1.38rem;
 87 |   font-family: var(--headingFont);
 88 |   font-weight: 400;
 89 |   line-height: 1.3;
 90 |   text-transform: capitalize;
 91 |   letter-spacing: var(--letterSpacing);
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transition);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | /*
256 | =============== 
257 | Modal
258 | ===============
259 | */
260 | 
261 | .hero {
262 |   min-height: 100vh;
263 |   background: url('./hero.jpeg') center/cover no-repeat;
264 |   display: grid;
265 |   place-items: center;
266 | }
267 | .banner {
268 |   background: var(--white);
269 |   padding: 4rem 0;
270 |   border-radius: var(--borderRadius);
271 |   box-shadow: var(--shadow-2);
272 |   text-align: center;
273 |   width: 90vw;
274 |   max-width: var(--fixed-width);
275 | }
276 | 
277 | .modal-overlay {
278 |   position: fixed;
279 |   top: 0;
280 |   left: 0;
281 |   width: 100%;
282 |   height: 100%;
283 |   background: rgba(73, 166, 233, 0.5);
284 |   display: grid;
285 |   place-items: center;
286 |   transition: all 1.5s ease-in-out;
287 |   visibility: hidden;
288 |   z-index: -10;
289 |   /* display: none; */
290 | }
291 | /* OPEN/CLOSE MODAL */
292 | .open-modal {
293 |   visibility: visible;
294 |   z-index: 10;
295 |   /* display: grid; */
296 | }
297 | .modal-container {
298 |   background: var(--white);
299 |   border-radius: var(--borderRadius);
300 |   width: 90vw;
301 |   height: 35vh;
302 |   max-width: var(--fixed-width);
303 |   text-align: center;
304 |   display: grid;
305 |   place-items: center;
306 |   position: relative;
307 | }
308 | .close-btn {
309 |   position: absolute;
310 |   top: 1rem;
311 |   right: 1rem;
312 |   font-size: 2rem;
313 |   background: transparent;
314 |   border-color: transparent;
315 |   color: var(--red-dark);
316 |   cursor: pointer;
317 |   transition: var(--transition);
318 | }
319 | .close-btn:hover {
320 |   transform: rotate(360deg) scale(1.3);
321 | }
322 | 


--------------------------------------------------------------------------------
/08-questions/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 |   --gold: #c59d5f;
 66 | }
 67 | 
 68 | body {
 69 |   background: var(--backgroundColor);
 70 |   font-family: var(--bodyFont);
 71 |   font-weight: 400;
 72 |   line-height: 1.75;
 73 |   color: var(--textColor);
 74 | }
 75 | 
 76 | p {
 77 |   margin-bottom: 1.5rem;
 78 |   max-width: 40em;
 79 | }
 80 | 
 81 | h1,
 82 | h2,
 83 | h3,
 84 | h4,
 85 | h5 {
 86 |   margin: 0;
 87 |   margin-bottom: 1.38rem;
 88 |   font-family: var(--headingFont);
 89 |   font-weight: 400;
 90 |   line-height: 1.3;
 91 |   text-transform: capitalize;
 92 |   letter-spacing: var(--letterSpacing);
 93 | }
 94 | 
 95 | h1 {
 96 |   margin-top: 0;
 97 |   font-size: 3.052rem;
 98 | }
 99 | 
100 | h2 {
101 |   font-size: 2.441rem;
102 | }
103 | 
104 | h3 {
105 |   font-size: 1.953rem;
106 | }
107 | 
108 | h4 {
109 |   font-size: 1.563rem;
110 | }
111 | 
112 | h5 {
113 |   font-size: 1.25rem;
114 | }
115 | 
116 | small,
117 | .text-small {
118 |   font-size: var(--smallText);
119 | }
120 | 
121 | a {
122 |   text-decoration: none;
123 | }
124 | ul {
125 |   list-style-type: none;
126 |   padding: 0;
127 | }
128 | 
129 | .img {
130 |   width: 100%;
131 |   display: block;
132 |   object-fit: cover;
133 | }
134 | /* buttons */
135 | 
136 | .btn {
137 |   cursor: pointer;
138 |   color: var(--white);
139 |   background: var(--primary-500);
140 |   border: transparent;
141 |   border-radius: var(--borderRadius);
142 |   letter-spacing: var(--letterSpacing);
143 |   padding: 0.375rem 0.75rem;
144 |   box-shadow: var(--shadow-1);
145 |   transition: var(--transition);
146 |   text-transform: capitalize;
147 |   display: inline-block;
148 | }
149 | .btn:hover {
150 |   background: var(--primary-700);
151 |   box-shadow: var(--shadow-3);
152 | }
153 | .btn-hipster {
154 |   color: var(--primary-500);
155 |   background: var(--primary-200);
156 | }
157 | .btn-hipster:hover {
158 |   color: var(--primary-200);
159 |   background: var(--primary-700);
160 | }
161 | .btn-block {
162 |   width: 100%;
163 | }
164 | 
165 | /* alerts */
166 | .alert {
167 |   padding: 0.375rem 0.75rem;
168 |   margin-bottom: 1rem;
169 |   border-color: transparent;
170 |   border-radius: var(--borderRadius);
171 | }
172 | 
173 | .alert-danger {
174 |   color: var(--red-dark);
175 |   background: var(--red-light);
176 | }
177 | .alert-success {
178 |   color: var(--green-dark);
179 |   background: var(--green-light);
180 | }
181 | /* form */
182 | 
183 | .form {
184 |   width: 90vw;
185 |   max-width: var(--fixed-width);
186 |   background: var(--white);
187 |   border-radius: var(--borderRadius);
188 |   box-shadow: var(--shadow-2);
189 |   padding: 2rem 2.5rem;
190 |   margin: 3rem auto;
191 | }
192 | .form-label {
193 |   display: block;
194 |   font-size: var(--smallText);
195 |   margin-bottom: 0.5rem;
196 |   text-transform: capitalize;
197 |   letter-spacing: var(--letterSpacing);
198 | }
199 | .form-input,
200 | .form-textarea {
201 |   width: 100%;
202 |   padding: 0.375rem 0.75rem;
203 |   border-radius: var(--borderRadius);
204 |   background: var(--backgroundColor);
205 |   border: 1px solid var(--grey-200);
206 | }
207 | 
208 | .form-row {
209 |   margin-bottom: 1rem;
210 | }
211 | 
212 | .form-textarea {
213 |   height: 7rem;
214 | }
215 | ::placeholder {
216 |   font-family: inherit;
217 |   color: var(--grey-400);
218 | }
219 | .form-alert {
220 |   color: var(--red-dark);
221 |   letter-spacing: var(--letterSpacing);
222 |   text-transform: capitalize;
223 | }
224 | /* alert */
225 | 
226 | @keyframes spinner {
227 |   to {
228 |     transform: rotate(360deg);
229 |   }
230 | }
231 | 
232 | .loading {
233 |   width: 6rem;
234 |   height: 6rem;
235 |   border: 5px solid var(--grey-400);
236 |   border-radius: 50%;
237 |   border-top-color: var(--primary-500);
238 |   animation: spinner 0.6s linear infinite;
239 | }
240 | .loading {
241 |   margin: 0 auto;
242 | }
243 | /* title */
244 | 
245 | .title {
246 |   text-align: center;
247 | }
248 | 
249 | .title-underline {
250 |   background: var(--primary-500);
251 |   width: 7rem;
252 |   height: 0.25rem;
253 |   margin: 0 auto;
254 |   margin-top: -1rem;
255 | }
256 | /* add gold color to css vars */
257 | /*
258 | =============== 
259 | Questions
260 | ===============
261 | */
262 | .questions {
263 |   margin-top: 10rem;
264 | }
265 | .questions .title {
266 |   color: var(--gold);
267 |   font-family: 'Great Vibes', cursive;
268 | }
269 | .section-center {
270 |   max-width: var(--fixed-width);
271 |   margin: 0 auto;
272 |   margin-top: 3rem;
273 | }
274 | .question {
275 |   background: var(--white);
276 |   border-radius: var(--borderRadius);
277 |   box-shadow: var(--shadow-2);
278 |   padding: 1.5rem 1rem;
279 |   margin-bottom: 2rem;
280 | }
281 | .question-title {
282 |   display: flex;
283 |   justify-content: space-between;
284 |   align-items: center;
285 | }
286 | 
287 | .question-title p {
288 |   margin: 0;
289 |   letter-spacing: var(--spacing);
290 |   color: var(--grey-800);
291 | }
292 | .question-btn {
293 |   font-size: 1.5rem;
294 |   background: transparent;
295 |   border-color: transparent;
296 |   cursor: pointer;
297 |   color: var(--gold);
298 |   transition: var(--transition);
299 | }
300 | .question-btn:hover {
301 |   transform: rotate(90deg);
302 | }
303 | .question-text {
304 |   padding-top: 1rem;
305 |   margin-top: 1rem;
306 |   border-top: 1px solid rgba(0, 0, 0, 0.2);
307 | }
308 | .question-text p {
309 |   margin: 0;
310 |   color: var(--grey-500);
311 | }
312 | /* hide text */
313 | .question-text {
314 |   display: none;
315 | }
316 | .show-text .question-text {
317 |   display: block;
318 | }
319 | .minus-icon {
320 |   display: none;
321 | }
322 | .show-text .minus-icon {
323 |   display: inline;
324 | }
325 | .show-text .plus-icon {
326 |   display: none;
327 | }
328 | 


--------------------------------------------------------------------------------
/09-menu/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: var(--bodyFont);
 70 |   font-weight: 400;
 71 |   line-height: 1.75;
 72 |   color: var(--textColor);
 73 | }
 74 | 
 75 | p {
 76 |   margin-bottom: 1.5rem;
 77 |   max-width: 40em;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3,
 83 | h4,
 84 | h5 {
 85 |   margin: 0;
 86 |   margin-bottom: 1.38rem;
 87 |   font-family: var(--headingFont);
 88 |   font-weight: 400;
 89 |   line-height: 1.3;
 90 |   text-transform: capitalize;
 91 |   letter-spacing: var(--letterSpacing);
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transition);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | /*
256 | =============== 
257 | Menu
258 | ===============
259 | */
260 | .menu {
261 |   padding: 5rem 0;
262 | }
263 | 
264 | .btn-container {
265 |   margin-top: 2rem;
266 |   margin-bottom: 4rem;
267 |   display: flex;
268 |   justify-content: center;
269 |   gap: 1rem;
270 | }
271 | .filter-btn {
272 |   background: transparent;
273 |   color: var(--primary-500);
274 |   border: 1px solid var(--primary-500);
275 | }
276 | .filter-btn:hover {
277 |   color: var(--white);
278 |   border: 1px solid var(--primary-700);
279 | }
280 | .section-center {
281 |   width: 90vw;
282 |   margin: 0 auto;
283 |   max-width: 1170px;
284 |   display: grid;
285 |   gap: 3rem 2rem;
286 |   justify-items: center;
287 | }
288 | .menu-item {
289 |   display: grid;
290 |   gap: 1rem 2rem;
291 |   max-width: 25rem;
292 | }
293 | .photo {
294 |   height: 200px;
295 |   border-radius: var(--borderRadius);
296 | }
297 | .item-info header {
298 |   display: flex;
299 |   justify-content: space-between;
300 |   border-bottom: 3px dotted var(--grey-500);
301 | }
302 | .item-info h5 {
303 |   margin-bottom: 0.5rem;
304 | }
305 | .price {
306 |   color: var(--primary-500);
307 | }
308 | .item-text {
309 |   margin: 0;
310 |   color: var(--grey-500);
311 |   padding-top: 0.5rem;
312 | }
313 | 
314 | @media screen and (min-width: 768px) {
315 |   .menu-item {
316 |     grid-template-columns: 225px 1fr;
317 |     gap: 0 1.25rem;
318 |     max-width: 40rem;
319 |   }
320 |   .photo {
321 |     height: 175px;
322 |   }
323 | }
324 | @media screen and (min-width: 1200px) {
325 |   .section-center {
326 |     width: 95vw;
327 |     grid-template-columns: 1fr 1fr;
328 |   }
329 |   .photo {
330 |     height: 150px;
331 |   }
332 | }
333 | 


--------------------------------------------------------------------------------
/01-color-flipper/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  8 | html {
  9 |   font-size: 100%;
 10 | } /*16px*/
 11 | 
 12 | :root {
 13 |   /* colors */
 14 |   --primary-100: #e2e0ff;
 15 |   --primary-200: #c1beff;
 16 |   --primary-300: #a29dff;
 17 |   --primary-400: #837dff;
 18 |   --primary-500: #645cff;
 19 |   --primary-600: #504acc;
 20 |   --primary-700: #3c3799;
 21 |   --primary-800: #282566;
 22 |   --primary-900: #141233;
 23 | 
 24 |   /* grey */
 25 |   --grey-50: #f8fafc;
 26 |   --grey-100: #f1f5f9;
 27 |   --grey-200: #e2e8f0;
 28 |   --grey-300: #cbd5e1;
 29 |   --grey-400: #94a3b8;
 30 |   --grey-500: #64748b;
 31 |   --grey-600: #475569;
 32 |   --grey-700: #334155;
 33 |   --grey-800: #1e293b;
 34 |   --grey-900: #0f172a;
 35 |   /* rest of the colors */
 36 |   --black: #222;
 37 |   --white: #fff;
 38 |   --red-light: #f8d7da;
 39 |   --red-dark: #842029;
 40 |   --green-light: #d1e7dd;
 41 |   --green-dark: #0f5132;
 42 | 
 43 |   /* fonts  */
 44 |   --headingFont: 'Roboto', sans-serif;
 45 |   --bodyFont: 'Nunito', sans-serif;
 46 |   --smallText: 0.7em;
 47 |   /* rest of the vars */
 48 |   --backgroundColor: var(--grey-50);
 49 |   --textColor: var(--grey-900);
 50 |   --borderRadius: 0.25rem;
 51 |   --letterSpacing: 1px;
 52 |   --transtion: 0.3s ease-in-out all;
 53 |   --max-width: 1120px;
 54 |   --fixed-width: 600px;
 55 | 
 56 |   /* box shadow*/
 57 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 58 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 59 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 60 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 61 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 62 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 63 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 64 | }
 65 | 
 66 | body {
 67 |   background: var(--backgroundColor);
 68 |   font-family: var(--bodyFont);
 69 |   font-weight: 400;
 70 |   line-height: 1.75;
 71 |   color: var(--textColor);
 72 | }
 73 | 
 74 | p {
 75 |   margin-bottom: 1.5rem;
 76 |   max-width: 40em;
 77 | }
 78 | 
 79 | h1,
 80 | h2,
 81 | h3,
 82 | h4,
 83 | h5 {
 84 |   margin: 0;
 85 |   margin-bottom: 1.38rem;
 86 |   font-family: var(--headingFont);
 87 |   font-weight: 400;
 88 |   line-height: 1.3;
 89 |   text-transform: capitalize;
 90 | }
 91 | 
 92 | h1 {
 93 |   margin-top: 0;
 94 |   font-size: 3.052rem;
 95 | }
 96 | 
 97 | h2 {
 98 |   font-size: 2.441rem;
 99 | }
100 | 
101 | h3 {
102 |   font-size: 1.953rem;
103 | }
104 | 
105 | h4 {
106 |   font-size: 1.563rem;
107 | }
108 | 
109 | h5 {
110 |   font-size: 1.25rem;
111 | }
112 | 
113 | small,
114 | .text-small {
115 |   font-size: var(--smallText);
116 | }
117 | 
118 | a {
119 |   text-decoration: none;
120 | }
121 | ul {
122 |   list-style-type: none;
123 |   padding: 0;
124 | }
125 | 
126 | .img {
127 |   width: 100%;
128 |   display: block;
129 |   object-fit: cover;
130 | }
131 | /* buttons */
132 | 
133 | .btn {
134 |   cursor: pointer;
135 |   color: var(--white);
136 |   background: var(--primary-500);
137 |   border: transparent;
138 |   border-radius: var(--borderRadius);
139 |   letter-spacing: var(--letterSpacing);
140 |   padding: 0.375rem 0.75rem;
141 |   box-shadow: var(--shadow-1);
142 |   transition: var(--transtion);
143 |   text-transform: capitalize;
144 |   display: inline-block;
145 | }
146 | .btn:hover {
147 |   background: var(--primary-700);
148 |   box-shadow: var(--shadow-3);
149 | }
150 | .btn-hipster {
151 |   color: var(--primary-500);
152 |   background: var(--primary-200);
153 | }
154 | .btn-hipster:hover {
155 |   color: var(--primary-200);
156 |   background: var(--primary-700);
157 | }
158 | .btn-block {
159 |   width: 100%;
160 | }
161 | 
162 | /* alerts */
163 | .alert {
164 |   padding: 0.375rem 0.75rem;
165 |   margin-bottom: 1rem;
166 |   border-color: transparent;
167 |   border-radius: var(--borderRadius);
168 | }
169 | 
170 | .alert-danger {
171 |   color: var(--red-dark);
172 |   background: var(--red-light);
173 | }
174 | .alert-success {
175 |   color: var(--green-dark);
176 |   background: var(--green-light);
177 | }
178 | /* form */
179 | 
180 | .form {
181 |   width: 90vw;
182 |   max-width: var(--fixed-width);
183 |   background: var(--white);
184 |   border-radius: var(--borderRadius);
185 |   box-shadow: var(--shadow-2);
186 |   padding: 2rem 2.5rem;
187 |   margin: 3rem auto;
188 | }
189 | .form-label {
190 |   display: block;
191 |   font-size: var(--smallText);
192 |   margin-bottom: 0.5rem;
193 |   text-transform: capitalize;
194 |   letter-spacing: var(--letterSpacing);
195 | }
196 | .form-input,
197 | .form-textarea {
198 |   width: 100%;
199 |   padding: 0.375rem 0.75rem;
200 |   border-radius: var(--borderRadius);
201 |   background: var(--backgroundColor);
202 |   border: 1px solid var(--grey-200);
203 | }
204 | 
205 | .form-row {
206 |   margin-bottom: 1rem;
207 | }
208 | 
209 | .form-textarea {
210 |   height: 7rem;
211 | }
212 | ::placeholder {
213 |   font-family: inherit;
214 |   color: var(--grey-400);
215 | }
216 | .form-alert {
217 |   color: var(--red-dark);
218 |   letter-spacing: var(--letterSpacing);
219 |   text-transform: capitalize;
220 | }
221 | /* alert */
222 | 
223 | @keyframes spinner {
224 |   to {
225 |     transform: rotate(360deg);
226 |   }
227 | }
228 | 
229 | .loading {
230 |   width: 6rem;
231 |   height: 6rem;
232 |   border: 5px solid var(--grey-400);
233 |   border-radius: 50%;
234 |   border-top-color: var(--primary-500);
235 |   animation: spinner 0.6s linear infinite;
236 | }
237 | .loading {
238 |   margin: 0 auto;
239 | }
240 | /* title */
241 | 
242 | .title {
243 |   text-align: center;
244 | }
245 | 
246 | .title-underline {
247 |   background: var(--primary-500);
248 |   width: 7rem;
249 |   height: 0.25rem;
250 |   margin: 0 auto;
251 |   margin-top: -1rem;
252 | }
253 | 
254 | /*
255 | =============== 
256 | Nav
257 | ===============
258 | */
259 | nav {
260 |   background: var(--white);
261 |   height: 4rem;
262 |   display: grid;
263 |   align-items: center;
264 |   box-shadow: var(--shadow-2);
265 | }
266 | .nav-center {
267 |   width: 90vw;
268 |   max-width: var(--fixed-width);
269 |   margin: 0 auto;
270 |   display: flex;
271 |   align-items: center;
272 |   justify-content: space-between;
273 | }
274 | .nav-center h4 {
275 |   margin-bottom: 0;
276 |   color: var(--primary-500);
277 |   letter-spacing: 2px;
278 |   font-weight: 600;
279 | }
280 | .nav-links {
281 |   display: flex;
282 | }
283 | nav a {
284 |   text-transform: capitalize;
285 |   font-size: 1rem;
286 |   color: var(--primary-900);
287 |   letter-spacing: var(--letterSpacing);
288 |   margin-right: 1rem;
289 |   transition: var(--transtion);
290 | }
291 | nav a:hover {
292 |   color: var(--primary-500);
293 | }
294 | /*
295 | =============== 
296 | Container
297 | ===============
298 | */
299 | main {
300 |   min-height: calc(100vh - 4rem);
301 |   display: grid;
302 |   place-items: center;
303 | }
304 | .container {
305 |   text-align: center;
306 | }
307 | .container h2 {
308 |   background: var(--black);
309 |   color: var(--white);
310 |   padding: 1rem;
311 |   border-radius: var(--borderRadius);
312 |   margin-bottom: 2.5rem;
313 |   letter-spacing: 5px;
314 |   font-weight: bold;
315 | }
316 | .color {
317 |   color: var(--primary-500);
318 |   text-transform: uppercase;
319 | }
320 | .btn-hero {
321 |   text-transform: uppercase;
322 |   background: transparent;
323 |   color: var(--black);
324 |   letter-spacing: 0.25rem;
325 |   font-weight: bold;
326 |   border: 2px solid var(--black);
327 |   padding: 0.75rem 1.25rem;
328 | }
329 | .btn-hero:hover {
330 |   color: var(--white);
331 |   background: var(--black);
332 | }
333 | 


--------------------------------------------------------------------------------
/06-sidebar/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="267" height="50" viewBox="0 0 267 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_d)">
 3 | <path d="M24.8785 25.4746C24.6793 28.2285 23.6598 30.3965 21.8199 31.9785C19.9918 33.5605 17.5777 34.3516 14.5777 34.3516C11.2965 34.3516 8.71249 33.25 6.82578 31.0469C4.95078 28.832 4.01328 25.7969 4.01328 21.9414V20.377C4.01328 17.916 4.44687 15.748 5.31406 13.873C6.18124 11.998 7.41757 10.5625 9.02304 9.56641C10.6402 8.55859 12.5152 8.05469 14.648 8.05469C17.6012 8.05469 19.9801 8.8457 21.7848 10.4277C23.5894 12.0098 24.6324 14.2305 24.9137 17.0898H19.6402C19.5113 15.4375 19.0484 14.2422 18.2516 13.5039C17.4664 12.7539 16.2652 12.3789 14.648 12.3789C12.8902 12.3789 11.5719 13.0117 10.693 14.2773C9.82578 15.5312 9.38046 17.4824 9.35703 20.1309V22.0645C9.35703 24.8301 9.77304 26.8516 10.6051 28.1289C11.4488 29.4062 12.773 30.0449 14.5777 30.0449C16.2066 30.0449 17.4195 29.6758 18.2164 28.9375C19.025 28.1875 19.4879 27.0332 19.6051 25.4746H24.8785ZM30.8164 24.3145C30.8164 22.4277 31.1797 20.7461 31.9062 19.2695C32.6328 17.793 33.6758 16.6504 35.0352 15.8418C36.4062 15.0332 37.9941 14.6289 39.7988 14.6289C42.3652 14.6289 44.457 15.4141 46.0742 16.9844C47.7031 18.5547 48.6113 20.6875 48.7988 23.3828L48.834 24.6836C48.834 27.6016 48.0195 29.9453 46.3906 31.7148C44.7617 33.4727 42.5762 34.3516 39.834 34.3516C37.0918 34.3516 34.9004 33.4727 33.2598 31.7148C31.6309 29.957 30.8164 27.5664 30.8164 24.543V24.3145ZM35.8965 24.6836C35.8965 26.4883 36.2363 27.8711 36.916 28.832C37.5957 29.7812 38.5684 30.2559 39.834 30.2559C41.0644 30.2559 42.0254 29.7871 42.7168 28.8496C43.4082 27.9004 43.7539 26.3887 43.7539 24.3145C43.7539 22.5449 43.4082 21.1738 42.7168 20.2012C42.0254 19.2285 41.0527 18.7422 39.7988 18.7422C38.5566 18.7422 37.5957 19.2285 36.916 20.2012C36.2363 21.1621 35.8965 22.6562 35.8965 24.6836ZM54.7719 24.3496C54.7719 21.3848 55.434 19.0234 56.7582 17.2656C58.0941 15.5078 59.9164 14.6289 62.225 14.6289C64.0766 14.6289 65.6059 15.3203 66.8129 16.7031V7H71.9105V34H67.3227L67.0766 31.9785C65.8109 33.5605 64.182 34.3516 62.1898 34.3516C59.9516 34.3516 58.1527 33.4727 56.7934 31.7148C55.4457 29.9453 54.7719 27.4902 54.7719 24.3496ZM59.8519 24.7188C59.8519 26.5 60.1625 27.8652 60.7836 28.8145C61.4047 29.7637 62.307 30.2383 63.4906 30.2383C65.0609 30.2383 66.1684 29.5762 66.8129 28.252V20.7461C66.1801 19.4219 65.0844 18.7598 63.5258 18.7598C61.0766 18.7598 59.8519 20.7461 59.8519 24.7188ZM84.8094 34H79.7117V14.9805H84.8094V34ZM79.4129 10.0586C79.4129 9.29688 79.6648 8.66992 80.1687 8.17773C80.6844 7.68555 81.3816 7.43945 82.2605 7.43945C83.1277 7.43945 83.8191 7.68555 84.3348 8.17773C84.8504 8.66992 85.1082 9.29688 85.1082 10.0586C85.1082 10.832 84.8445 11.4648 84.3172 11.957C83.8016 12.4492 83.116 12.6953 82.2605 12.6953C81.4051 12.6953 80.7137 12.4492 80.1863 11.957C79.6707 11.4648 79.4129 10.832 79.4129 10.0586ZM97.2863 14.9805L97.4445 17.1777C98.8039 15.4785 100.626 14.6289 102.911 14.6289C104.927 14.6289 106.427 15.2207 107.411 16.4043C108.396 17.5879 108.9 19.3574 108.923 21.7129V34H103.843V21.8359C103.843 20.7578 103.609 19.9785 103.14 19.498C102.671 19.0059 101.892 18.7598 100.802 18.7598C99.3723 18.7598 98.3 19.3691 97.5852 20.5879V34H92.5051V14.9805H97.2863ZM115.652 24.3496C115.652 21.4316 116.343 19.082 117.726 17.3008C119.121 15.5195 120.996 14.6289 123.351 14.6289C125.437 14.6289 127.06 15.3438 128.22 16.7734L128.431 14.9805H133.037V33.3672C133.037 35.0312 132.656 36.4785 131.894 37.709C131.144 38.9395 130.084 39.877 128.712 40.5215C127.341 41.166 125.736 41.4883 123.896 41.4883C122.502 41.4883 121.142 41.207 119.818 40.6445C118.494 40.0938 117.492 39.3789 116.812 38.5L119.062 35.4062C120.328 36.8242 121.863 37.5332 123.668 37.5332C125.015 37.5332 126.064 37.1699 126.814 36.4434C127.564 35.7285 127.939 34.709 127.939 33.3848V32.3652C126.767 33.6895 125.226 34.3516 123.316 34.3516C121.031 34.3516 119.179 33.4609 117.761 31.6797C116.355 29.8867 115.652 27.5137 115.652 24.5605V24.3496ZM120.732 24.7188C120.732 26.4414 121.078 27.7949 121.769 28.7793C122.461 29.752 123.41 30.2383 124.617 30.2383C126.164 30.2383 127.271 29.6582 127.939 28.498V20.5C127.259 19.3398 126.164 18.7598 124.652 18.7598C123.433 18.7598 122.472 19.2578 121.769 20.2539C121.078 21.25 120.732 22.7383 120.732 24.7188Z" fill="#222222"/>
 4 | <path d="M155.34 28.7266H146.094L144.336 34H138.729L148.256 8.40625H153.143L162.723 34H157.115L155.34 28.7266ZM147.518 24.4551H153.916L150.699 14.875L147.518 24.4551ZM167.588 24.3496C167.588 21.3848 168.25 19.0234 169.575 17.2656C170.911 15.5078 172.733 14.6289 175.041 14.6289C176.893 14.6289 178.422 15.3203 179.629 16.7031V7H184.727V34H180.139L179.893 31.9785C178.627 33.5605 176.998 34.3516 175.006 34.3516C172.768 34.3516 170.969 33.4727 169.61 31.7148C168.262 29.9453 167.588 27.4902 167.588 24.3496ZM172.668 24.7188C172.668 26.5 172.979 27.8652 173.6 28.8145C174.221 29.7637 175.123 30.2383 176.307 30.2383C177.877 30.2383 178.985 29.5762 179.629 28.252V20.7461C178.996 19.4219 177.901 18.7598 176.342 18.7598C173.893 18.7598 172.668 20.7461 172.668 24.7188ZM191.473 24.3496C191.473 21.3848 192.136 19.0234 193.46 17.2656C194.796 15.5078 196.618 14.6289 198.927 14.6289C200.778 14.6289 202.307 15.3203 203.514 16.7031V7H208.612V34H204.024L203.778 31.9785C202.512 33.5605 200.884 34.3516 198.891 34.3516C196.653 34.3516 194.854 33.4727 193.495 31.7148C192.147 29.9453 191.473 27.4902 191.473 24.3496ZM196.554 24.7188C196.554 26.5 196.864 27.8652 197.485 28.8145C198.106 29.7637 199.009 30.2383 200.192 30.2383C201.762 30.2383 202.87 29.5762 203.514 28.252V20.7461C202.882 19.4219 201.786 18.7598 200.227 18.7598C197.778 18.7598 196.554 20.7461 196.554 24.7188ZM221.511 34H216.413V14.9805H221.511V34ZM216.114 10.0586C216.114 9.29688 216.366 8.66992 216.87 8.17773C217.386 7.68555 218.083 7.43945 218.962 7.43945C219.829 7.43945 220.521 7.68555 221.036 8.17773C221.552 8.66992 221.81 9.29688 221.81 10.0586C221.81 10.832 221.546 11.4648 221.019 11.957C220.503 12.4492 219.818 12.6953 218.962 12.6953C218.107 12.6953 217.415 12.4492 216.888 11.957C216.372 11.4648 216.114 10.832 216.114 10.0586ZM237.222 30.2559C238.16 30.2559 238.921 29.998 239.507 29.4824C240.093 28.9668 240.398 28.2812 240.421 27.4258H245.185C245.173 28.7148 244.822 29.8984 244.13 30.9766C243.439 32.043 242.49 32.875 241.283 33.4727C240.087 34.0586 238.763 34.3516 237.31 34.3516C234.591 34.3516 232.447 33.4902 230.877 31.7676C229.306 30.0332 228.521 27.6426 228.521 24.5957V24.2617C228.521 21.332 229.3 18.9941 230.859 17.248C232.418 15.502 234.556 14.6289 237.275 14.6289C239.654 14.6289 241.558 15.3086 242.988 16.668C244.429 18.0156 245.162 19.8145 245.185 22.0645H240.421C240.398 21.0801 240.093 20.2832 239.507 19.6738C238.921 19.0527 238.148 18.7422 237.187 18.7422C236.004 18.7422 235.107 19.1758 234.498 20.043C233.9 20.8984 233.601 22.293 233.601 24.2266V24.7539C233.601 26.7109 233.9 28.1172 234.498 28.9727C235.095 29.8281 236.004 30.2559 237.222 30.2559ZM257.768 10.3047V14.9805H261.02V18.707H257.768V28.1992C257.768 28.9023 257.902 29.4062 258.172 29.7109C258.441 30.0156 258.957 30.168 259.719 30.168C260.281 30.168 260.779 30.127 261.213 30.0449V33.8945C260.217 34.1992 259.191 34.3516 258.137 34.3516C254.574 34.3516 252.758 32.5527 252.688 28.9551V18.707H249.91V14.9805H252.688V10.3047H257.768Z" fill="#645CFF"/>
 5 | </g>
 6 | <defs>
 7 | <filter id="filter0_d" x="0.0132751" y="7" width="265.2" height="42.4883" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 8 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 9 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
10 | <feOffset dy="4"/>
11 | <feGaussianBlur stdDeviation="2"/>
12 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
13 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
14 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
15 | </filter>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  2 | *,
  3 | ::after,
  4 | ::before {
  5 |   box-sizing: border-box;
  6 | }
  7 | :root {
  8 |   /* COLORS  */
  9 |   /* primary */
 10 | 
 11 |   --primary-100: #e0deff;
 12 |   --primary-200: #c1beff;
 13 |   --primary-300: #a29dff;
 14 |   --primary-400: #837dff;
 15 |   /* main */
 16 |   --primary-500: #645cff;
 17 |   --primary-600: #504acc;
 18 |   --primary-700: #3c3799;
 19 |   --primary-800: #282566;
 20 |   --primary-900: #141233;
 21 | 
 22 |   /* grey */
 23 |   --grey-50: #f8fafc;
 24 |   --grey-100: #f1f5f9;
 25 |   --grey-200: #e2e8f0;
 26 |   --grey-300: #cbd5e1;
 27 |   --grey-400: #94a3b8;
 28 |   --grey-500: #64748b;
 29 |   --grey-600: #475569;
 30 |   --grey-700: #334155;
 31 |   --grey-800: #1e293b;
 32 |   --grey-900: #0f172a;
 33 | 
 34 |   /* rest */
 35 |   --primary-design: #ff8e3c;
 36 |   --black-design: #0d0d0d;
 37 |   --grey-design: #eff0f3;
 38 |   --black: #222;
 39 |   --white: #fff;
 40 |   --red-light: #f8d7da;
 41 |   --red-dark: #842029;
 42 |   --green-light: #d1e7dd;
 43 |   --green-dark: #0f5132;
 44 | 
 45 |   /* typography */
 46 |   --defaultFontSize: 87.5%;
 47 |   --headingFont: 'Roboto', sans-serif;
 48 |   --bodyFont: 'Nunito', sans-serif;
 49 |   --smallText: 0.7em;
 50 |   /* rest */
 51 |   --backgroundColor: var(--white);
 52 |   --textColor: var(--grey-900);
 53 |   --borderRadius: 0.25rem;
 54 |   --letterSpacing: 1px;
 55 |   --transition: 0.3s ease-in-out all;
 56 |   --max-width: 1120px;
 57 |   --fixed-width: 600px;
 58 | 
 59 |   /* box shadows */
 60 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 61 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 62 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 63 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 64 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 65 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 66 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 67 | }
 68 | 
 69 | @media only screen and (min-width: 576px) {
 70 |   :root {
 71 |     --defaultFontSize: 100%;
 72 |   }
 73 | }
 74 | @media only screen and (min-width: 768px) {
 75 |   :root {
 76 |     --defaultFontSize: 112.5%;
 77 |   }
 78 | }
 79 | 
 80 | body {
 81 |   background: var(--backgroundColor);
 82 |   color: var(--textColor);
 83 |   font-family: var(--bodyFont);
 84 |   font-weight: 400;
 85 |   line-height: 1.75;
 86 | }
 87 | 
 88 | p {
 89 |   margin-bottom: 1.5rem;
 90 |   max-width: 40em;
 91 | }
 92 | 
 93 | h1,
 94 | h2,
 95 | h3,
 96 | h4,
 97 | h5 {
 98 |   margin: 0;
 99 |   margin-bottom: 1.38rem;
100 |   font-family: var(--headingFont);
101 |   font-weight: 400;
102 |   line-height: 1.3;
103 |   text-transform: capitalize;
104 |   letter-spacing: var(--letterSpacing);
105 | }
106 | .img {
107 |   width: 100%;
108 |   display: block;
109 | }
110 | h1 {
111 |   font-size: 3.052rem;
112 | }
113 | 
114 | h2 {
115 |   font-size: 2.441rem;
116 | }
117 | 
118 | h3 {
119 |   font-size: 1.953rem;
120 | }
121 | 
122 | h4 {
123 |   font-size: 1.563rem;
124 | }
125 | 
126 | h5 {
127 |   font-size: 1.25rem;
128 | }
129 | 
130 | small,
131 | .text_small {
132 |   font-size: var(--smallText);
133 | }
134 | 
135 | ul {
136 |   padding: 0;
137 |   list-style-type: none;
138 | }
139 | a {
140 |   text-decoration: none;
141 | }
142 | /*************
143 |      Buttons 
144 | *************/
145 | button,
146 | .btn {
147 |   cursor: pointer;
148 |   appearance: none;
149 |   color: var(--white);
150 |   background: var(--primary-500);
151 |   border: none;
152 |   border-radius: var(--borderRadius);
153 |   letter-spacing: var(--letterSpacing);
154 |   padding: 0.375rem 0.75rem;
155 |   box-shadow: var(--shadow-1);
156 |   transition: var(--transition);
157 |   text-transform: capitalize;
158 | }
159 | button:hover,
160 | .btn:hover {
161 |   color: var(--white);
162 |   background: var(--primary-700);
163 |   box-shadow: var(--shadow-2);
164 | }
165 | button.small {
166 |   padding: 0.25rem 0.5rem;
167 |   font-size: var(--smallText);
168 | }
169 | button.hipster {
170 |   color: var(--primary-500);
171 |   background: var(--primary-50);
172 |   box-shadow: var(--shadow-1);
173 | }
174 | button.hipster:hover {
175 |   background: var(--primary-100);
176 |   box-shadow: var(--shadow-2);
177 | }
178 | button.block {
179 |   width: 100%;
180 | }
181 | 
182 | /*
183 | =============== 
184 | Hero
185 | ===============
186 | */
187 | 
188 | .hero {
189 |   min-height: 40vh;
190 |   background: var(--white);
191 |   display: flex;
192 |   align-items: center;
193 |   justify-content: center;
194 |   padding: 5rem 0;
195 | }
196 | .hero img {
197 |   display: none;
198 | }
199 | .hero-center {
200 |   width: 90vw;
201 |   max-width: var(--max-width);
202 | }
203 | @media screen and (min-width: 992px) {
204 |   .hero {
205 |     min-height: 60vh;
206 |   }
207 |   .hero-center {
208 |     display: grid;
209 |     grid-template-columns: 1fr 1fr;
210 |     place-items: center;
211 |     gap: 2rem;
212 |   }
213 |   .hero img {
214 |     display: block;
215 |   }
216 | }
217 | .hero-title h1 {
218 |   color: var(--black-design);
219 |   margin: 0;
220 |   letter-spacing: 2px;
221 | }
222 | .hero-title p {
223 |   margin: 2rem 0;
224 |   color: var(--grey-900);
225 |   font-size: 1.25rem;
226 | }
227 | .hero-title span {
228 |   letter-spacing: 5px;
229 |   border-bottom: 2px solid var(--primary-design);
230 |   margin: 0 0.5rem;
231 |   text-align: center;
232 |   display: inline-block;
233 |   text-align: center;
234 |   line-height: 1.25;
235 |   font-style: italic;
236 |   font-weight: 600;
237 | }
238 | .hero-btn {
239 |   display: inline-block;
240 |   background: var(--primary-design);
241 |   color: var(--black-design);
242 |   font-weight: 400;
243 |   text-transform: uppercase;
244 |   padding: 0.75rem 1.25rem;
245 | 
246 |   box-shadow: var(--shadow-1);
247 |   animation: bounce 2s infinite;
248 | }
249 | .hero-btn:hover {
250 |   background: var(--primary-design);
251 |   box-shadow: var(--shadow-2);
252 | }
253 | 
254 | /*
255 | =============== 
256 | Title
257 | ===============
258 | */
259 | .title {
260 |   text-align: center;
261 |   margin-bottom: 3rem;
262 | }
263 | 
264 | .title-underline {
265 |   height: 0.2rem;
266 |   width: 7rem;
267 |   background: var(--primary-design);
268 |   margin: 0 auto;
269 |   margin-top: -1rem;
270 | }
271 | /*
272 | =============== 
273 | Section
274 | ===============
275 | */
276 | .section {
277 |   padding: 5rem 0;
278 |   background: var(--grey-50);
279 | }
280 | .section-center {
281 |   width: 90vw;
282 |   max-width: var(--max-width);
283 |   margin: 0 auto 2rem auto;
284 |   display: grid;
285 |   gap: 3rem 2rem;
286 |   grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
287 | }
288 | 
289 | @media screen and (min-width: 992px) {
290 |   .center {
291 |     width: 95vw;
292 |   }
293 | }
294 | 
295 | /*
296 | =============== 
297 | Project
298 | ===============
299 | */
300 | .project {
301 |   border-radius: var(--borderRadius);
302 |   background: var(--white);
303 |   box-shadow: var(--shadow-1);
304 |   transition: var(--transition);
305 | }
306 | .project:hover {
307 |   transform: scale(1.05);
308 |   box-shadow: var(--shadow-2);
309 | }
310 | .project img {
311 |   width: 100%;
312 |   display: block;
313 |   border-top-left-radius: var(--borderRadius);
314 |   border-top-right-radius: var(--borderRadius);
315 |   height: 15rem;
316 |   object-fit: cover;
317 | }
318 | 
319 | .project footer {
320 |   text-align: center;
321 |   padding: 1.5rem 2rem;
322 | }
323 | .project footer h4 {
324 |   margin-bottom: 0;
325 |   color: var(--grey-900);
326 | }
327 | 
328 | /*
329 | =============== 
330 | Animation
331 | ===============
332 | */
333 | @keyframes bounce {
334 |   0% {
335 |     transform: scale(1);
336 |   }
337 |   50% {
338 |     transform: scale(1.1);
339 |   }
340 |   100% {
341 |     transform: scale(1);
342 |   }
343 | }
344 | 
345 | .hero-img-2 {
346 |   width: 350px;
347 |   margin-left: 20rem;
348 | }
349 | 


--------------------------------------------------------------------------------
/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/05-navbar/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/07-modal/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/09-menu/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/02-counter/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/04-reviews/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/06-sidebar/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/08-questions/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/10-grocery-bud/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/01-color-flipper/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/03-task-manager/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 |   line-height: 1.15; /* 1 */
 13 |   -webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 |   margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 |   display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 |   font-size: 2em;
 42 |   margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 |   box-sizing: content-box; /* 1 */
 55 |   height: 0; /* 1 */
 56 |   overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 |   font-family: monospace, monospace; /* 1 */
 66 |   font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 |   background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 |   border-bottom: none; /* 1 */
 87 |   text-decoration: underline; /* 2 */
 88 |   text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 |   font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 |   font-family: monospace, monospace; /* 1 */
109 |   font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 |   font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 |   font-size: 75%;
128 |   line-height: 0;
129 |   position: relative;
130 |   vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 |   bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 |   top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 |   border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 |   font-family: inherit; /* 1 */
166 |   font-size: 100%; /* 1 */
167 |   line-height: 1.15; /* 1 */
168 |   margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 |   /* 1 */
179 |   overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 |   /* 1 */
190 |   text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type='button'],
199 | [type='reset'],
200 | [type='submit'] {
201 |   -webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type='button']::-moz-focus-inner,
210 | [type='reset']::-moz-focus-inner,
211 | [type='submit']::-moz-focus-inner {
212 |   border-style: none;
213 |   padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type='button']:-moz-focusring,
222 | [type='reset']:-moz-focusring,
223 | [type='submit']:-moz-focusring {
224 |   outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 |   padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 |   box-sizing: border-box; /* 1 */
244 |   color: inherit; /* 2 */
245 |   display: table; /* 1 */
246 |   max-width: 100%; /* 1 */
247 |   padding: 0; /* 3 */
248 |   white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 |   vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 |   overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type='checkbox'],
273 | [type='radio'] {
274 |   box-sizing: border-box; /* 1 */
275 |   padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type='number']::-webkit-inner-spin-button,
283 | [type='number']::-webkit-outer-spin-button {
284 |   height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type='search'] {
293 |   -webkit-appearance: textfield; /* 1 */
294 |   outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type='search']::-webkit-search-decoration {
302 |   -webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 |   -webkit-appearance: button; /* 1 */
312 |   font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 |   display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 |   display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 |   display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 |   display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/05-navbar/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: var(--bodyFont);
 70 |   font-weight: 400;
 71 |   line-height: 1.75;
 72 |   color: var(--textColor);
 73 | }
 74 | 
 75 | p {
 76 |   margin-bottom: 1.5rem;
 77 |   max-width: 40em;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3,
 83 | h4,
 84 | h5 {
 85 |   margin: 0;
 86 |   margin-bottom: 1.38rem;
 87 |   font-family: var(--headingFont);
 88 |   font-weight: 400;
 89 |   line-height: 1.3;
 90 |   text-transform: capitalize;
 91 |   letter-spacing: var(--letterSpacing);
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transition);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | /*
256 | =============== 
257 | Navbar
258 | ===============
259 | */
260 | nav {
261 |   background: var(--white);
262 |   box-shadow: var(--shadow-2);
263 |   line-height: 1;
264 | }
265 | .nav-header {
266 |   display: flex;
267 |   align-items: center;
268 |   justify-content: space-between;
269 |   padding: 1rem;
270 | }
271 | .nav-toggle {
272 |   font-size: 1.5rem;
273 |   color: var(--primary-500);
274 |   background: transparent;
275 |   border-color: transparent;
276 |   transition: var(--transition);
277 |   cursor: pointer;
278 | }
279 | .nav-toggle:hover {
280 |   transform: rotate(90deg);
281 | }
282 | .logo {
283 |   margin-bottom: 0;
284 | }
285 | .logo span {
286 |   color: var(--primary-500);
287 |   font-weight: 700;
288 | }
289 | .links a {
290 |   color: var(--grey-700);
291 |   font-size: 1rem;
292 |   text-transform: capitalize;
293 |   letter-spacing: var(--letterSpacing);
294 |   display: block;
295 |   padding: 0.75rem 1rem;
296 |   transition: var(--transition);
297 | }
298 | .links a:hover {
299 |   background: var(--primary-300);
300 |   color: var(--primary-500);
301 |   padding-left: 1.5rem;
302 | }
303 | .social-icons {
304 |   display: none;
305 | }
306 | .links {
307 |   height: 0;
308 |   overflow: hidden;
309 |   margin: 0;
310 |   transition: var(--transition);
311 | }
312 | .show-links {
313 |   height: 10rem;
314 | }
315 | @media screen and (min-width: 800px) {
316 |   .nav-center {
317 |     max-width: var(--max-width);
318 |     margin: 0 auto;
319 |     display: flex;
320 |     align-items: center;
321 |     justify-content: space-between;
322 |     padding: 1rem;
323 |   }
324 |   .nav-header {
325 |     padding: 0;
326 |   }
327 |   .nav-toggle {
328 |     display: none;
329 |   }
330 |   .links {
331 |     height: auto;
332 |     display: flex;
333 |   }
334 |   .links a {
335 |     padding: 0;
336 |     margin: 0 0.5rem;
337 |   }
338 |   .links a:hover {
339 |     padding: 0;
340 |     background: transparent;
341 |   }
342 |   .social-icons {
343 |     display: flex;
344 |   }
345 |   .social-icons a {
346 |     margin: 0 0.5rem;
347 |     color: var(--primary-500);
348 |     transition: var(--transition);
349 |   }
350 |   .social-icons a:hover {
351 |     color: var(--primary-300);
352 |   }
353 | }
354 | 


--------------------------------------------------------------------------------
/10-grocery-bud/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: var(--bodyFont);
 70 |   font-weight: 400;
 71 |   line-height: 1.75;
 72 |   color: var(--textColor);
 73 | }
 74 | 
 75 | p {
 76 |   margin-bottom: 1.5rem;
 77 |   max-width: 40em;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3,
 83 | h4,
 84 | h5 {
 85 |   margin: 0;
 86 |   margin-bottom: 1.38rem;
 87 |   font-family: var(--headingFont);
 88 |   font-weight: 400;
 89 |   line-height: 1.3;
 90 |   text-transform: capitalize;
 91 |   letter-spacing: var(--letterSpacing);
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transition);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | /*
256 | =============== 
257 | Grocery Bud
258 | ===============
259 | */
260 | .section-center {
261 |   background: var(--white);
262 |   border-radius: var(--borderRadius);
263 |   box-shadow: var(--shadow-2);
264 |   transition: var(--transition);
265 |   padding: 1rem;
266 |   width: 90vw;
267 |   margin: 0 auto;
268 |   margin-top: 10rem;
269 |   max-width: var(--fixed-width);
270 | }
271 | .section-center:hover {
272 |   box-shadow: var(--shadow-4);
273 | }
274 | .alert {
275 |   font-size: 0.7rem;
276 |   text-align: center;
277 |   border-radius: var(--borderRadius);
278 |   letter-spacing: var(--letterSpacing);
279 |   text-transform: capitalize;
280 | }
281 | .alert-danger {
282 |   color: #721c24;
283 |   background: #f8d7da;
284 | }
285 | .alert-success {
286 |   color: #155724;
287 |   background: #d4edda;
288 | }
289 | .grocery-form h4 {
290 |   margin-bottom: 1.5rem;
291 |   text-align: center;
292 | }
293 | 
294 | .grocery-form .form-row {
295 |   display: flex;
296 | }
297 | .grocery-form .form-input {
298 |   border-top-right-radius: 0;
299 |   border-bottom-right-radius: 0;
300 | }
301 | .submit-btn {
302 |   border-top-left-radius: 0;
303 |   border-bottom-left-radius: 0;
304 |   width: 100px;
305 | }
306 | .grocery-container {
307 |   margin-top: 2rem;
308 | }
309 | 
310 | .grocery-item {
311 |   display: flex;
312 |   align-items: center;
313 |   justify-content: space-between;
314 |   margin-bottom: 0.5rem;
315 |   transition: var(--transition);
316 |   padding: 0.25rem 1rem;
317 |   border-radius: var(--borderRadius);
318 |   text-transform: capitalize;
319 |   color: var(--grey-700);
320 | }
321 | .grocery-item:hover {
322 |   color: var(--grey-500);
323 |   background: var(--grey-100);
324 | }
325 | 
326 | .edit-btn,
327 | .delete-btn {
328 |   background: transparent;
329 |   border-color: transparent;
330 |   cursor: pointer;
331 |   font-size: 0.7rem;
332 |   transition: var(--transition);
333 | }
334 | .edit-btn {
335 |   color: var(--green-dark);
336 | }
337 | 
338 | .delete-btn {
339 |   color: var(--red-dark);
340 | }
341 | 
342 | .clear-btn {
343 |   color: var(--red-dark);
344 |   width: 100%;
345 |   margin-top: 1rem;
346 |   cursor: pointer;
347 |   background: transparent;
348 |   border-color: transparent;
349 |   text-transform: capitalize;
350 |   text-align: center;
351 |   letter-spacing: var(--letterSpacing);
352 | }
353 | 


--------------------------------------------------------------------------------
/06-sidebar/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: var(--bodyFont);
 70 |   font-weight: 400;
 71 |   line-height: 1.75;
 72 |   color: var(--textColor);
 73 | }
 74 | 
 75 | p {
 76 |   margin-bottom: 1.5rem;
 77 |   max-width: 40em;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3,
 83 | h4,
 84 | h5 {
 85 |   margin: 0;
 86 |   margin-bottom: 1.38rem;
 87 |   font-family: var(--headingFont);
 88 |   font-weight: 400;
 89 |   line-height: 1.3;
 90 |   text-transform: capitalize;
 91 |   letter-spacing: var(--letterSpacing);
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transition);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | /*
256 | =============== 
257 | Sidebar
258 | ===============
259 | */
260 | .sidebar-toggle {
261 |   position: fixed;
262 |   top: 2rem;
263 |   right: 3rem;
264 |   font-size: 2rem;
265 |   background: transparent;
266 |   border-color: transparent;
267 |   color: var(--primary-500);
268 |   transition: var(--transition);
269 |   cursor: pointer;
270 |   animation: bounce 2s ease-in-out infinite;
271 | }
272 | .sidebar-toggle:hover {
273 |   color: var(--primary-700);
274 | }
275 | @keyframes bounce {
276 |   0% {
277 |     transform: scale(1);
278 |   }
279 |   50% {
280 |     transform: scale(1.5);
281 |   }
282 |   100% {
283 |     transform: scale(1);
284 |   }
285 | }
286 | 
287 | .sidebar-header {
288 |   display: flex;
289 |   justify-content: space-between;
290 |   align-items: center;
291 |   padding: 1rem 1.5rem;
292 | }
293 | .close-btn {
294 |   font-size: 1.75rem;
295 |   background: transparent;
296 |   border-color: transparent;
297 |   color: var(--primary-500);
298 |   transition: var(--transition);
299 |   cursor: pointer;
300 |   color: var(--red-dark);
301 | }
302 | .close-btn:hover {
303 | 
304 |   transform: rotate(360deg);
305 | }
306 | .logo {
307 |   justify-self: center;
308 |   height: 40px;
309 | }
310 | 
311 | .links a {
312 |   display: block;
313 |   font-size: 1.5rem;
314 |   text-transform: capitalize;
315 |   padding: 1rem 1.5rem;
316 |   color: var(--grey-500);
317 |   transition: var(--transition);
318 | }
319 | .links a:hover {
320 |   background: var(--primary-300);
321 |   color: var(--primary-600);
322 |   padding-left: 1.75rem;
323 | }
324 | .social-icons {
325 |   justify-self: center;
326 |   display: flex;
327 |   padding-bottom: 2rem;
328 | }
329 | .social-icons a {
330 |   font-size: 1.5rem;
331 |   margin: 0 0.5rem;
332 |   color: var(--primary-500);
333 |   transition: var(--transition);
334 | }
335 | .social-icons a:hover {
336 |   color: var(--primary-300);
337 | }
338 | 
339 | .sidebar {
340 |   position: fixed;
341 |   top: 0;
342 |   left: 0;
343 |   width: 100%;
344 |   height: 100%;
345 |   background: var(--white);
346 |   display: grid;
347 |   grid-template-rows: auto 1fr auto;
348 |   row-gap: 1rem;
349 |   box-shadow: var(--red-dark);
350 |   transition: var(--transition);
351 |   transform: translate(-100%);
352 | }
353 | .show-sidebar {
354 |   transform: translate(0);
355 | }
356 | @media screen and (min-width: 676px) {
357 |   .sidebar {
358 |     width: 400px;
359 |   }
360 | }


--------------------------------------------------------------------------------
/04-reviews/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transtion: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: var(--bodyFont);
 70 |   font-weight: 400;
 71 |   line-height: 1.75;
 72 |   color: var(--textColor);
 73 | }
 74 | 
 75 | p {
 76 |   margin-bottom: 1.5rem;
 77 |   max-width: 40em;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3,
 83 | h4,
 84 | h5 {
 85 |   margin: 0;
 86 |   margin-bottom: 1.38rem;
 87 |   font-family: var(--headingFont);
 88 |   font-weight: 400;
 89 |   line-height: 1.3;
 90 |   text-transform: capitalize;
 91 |   letter-spacing: var(--letterSpacing);
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transtion);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | 
256 | /*
257 | =============== 
258 | Reviews
259 | ===============
260 | */
261 | main {
262 |   min-height: 100vh;
263 |   display: grid;
264 |   place-items: center;
265 | }
266 | 
267 | .container {
268 |   width: 80vw;
269 |   max-width: var(--fixed-width);
270 | }
271 | .review {
272 |   margin-top: 3rem;
273 |   background: var(--white);
274 |   padding: 1.5rem 2rem;
275 |   border-radius: var(--borderRadius);
276 |   box-shadow: var(--shadow-2);
277 |   transition: var(--transition);
278 |   text-align: center;
279 | }
280 | .review:hover {
281 |   box-shadow: var(--shadow-4);
282 | }
283 | .img-container {
284 |   position: relative;
285 |   width: 150px;
286 |   height: 150px;
287 |   border-radius: 50%;
288 |   margin: 0 auto;
289 |   margin-bottom: 1.5rem;
290 | }
291 | #person-img {
292 |   width: 100%;
293 |   display: block;
294 |   height: 100%;
295 |   object-fit: cover;
296 |   border-radius: 50%;
297 |   position: relative;
298 | }
299 | .img-container::before {
300 |   content: '';
301 |   width: 100%;
302 |   height: 100%;
303 |   background: var(--primary-500);
304 |   position: absolute;
305 |   top: -0.25rem;
306 |   right: -0.5rem;
307 |   border-radius: 50%;
308 | }
309 | .img-container::after {
310 |   position: absolute;
311 |   top: 0;
312 |   left: 0;
313 |   width: 2.5rem;
314 |   height: 2.5rem;
315 |   border-radius: 50%;
316 |   transform: translateY(25%);
317 |   background: var(--primary-500);
318 |   color: var(--white);
319 |   font-family: 'Font Awesome 5 Free';
320 |   font-weight: 900;
321 |   content: '\f10e';
322 |   display: grid;
323 |   place-items: center;
324 | }
325 | #author {
326 |   margin-bottom: 0.25rem;
327 | }
328 | #job {
329 |   margin-bottom: 0.5rem;
330 |   text-transform: uppercase;
331 |   color: var(--primary-500);
332 |   font-size: 0.85rem;
333 | }
334 | #info {
335 |   margin-bottom: 0.75rem;
336 | }
337 | .prev-btn,
338 | .next-btn {
339 |   color: var(--primary-300);
340 |   font-size: 1.25rem;
341 |   background: transparent;
342 |   border-color: transparent;
343 |   margin: 0 0.5rem;
344 |   transition: var(--transition);
345 |   cursor: pointer;
346 | }
347 | .prev-btn:hover,
348 | .next-btn:hover {
349 |   color: var(--primary-500);
350 | }
351 | .random-btn {
352 |   margin-top: 0.75rem;
353 |   background: var(--primary-100);
354 |   color: var(--primary-500);
355 |   padding: 0.25rem 0.5rem;
356 |   border: 2px solid var(--primary-500);
357 |   cursor: pointer;
358 | }
359 | .random-btn:hover {
360 |   background: var(--primary-500);
361 |   color: var(--black);
362 | }
363 | 


--------------------------------------------------------------------------------
/03-task-manager/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 | }
  6 | /* fonts */
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   /* fonts  */
 45 |   --headingFont: 'Roboto', sans-serif;
 46 |   --bodyFont: 'Nunito', sans-serif;
 47 |   --smallText: 0.7em;
 48 |   /* rest of the vars */
 49 |   --backgroundColor: var(--grey-50);
 50 |   --textColor: var(--grey-900);
 51 |   --borderRadius: 0.25rem;
 52 |   --letterSpacing: 1px;
 53 |   --transition: 0.3s ease-in-out all;
 54 |   --max-width: 1120px;
 55 |   --fixed-width: 600px;
 56 | 
 57 |   /* box shadow*/
 58 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 59 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 60 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 61 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 62 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 63 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 64 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 65 | }
 66 | 
 67 | body {
 68 |   background: var(--backgroundColor);
 69 |   font-family: var(--bodyFont);
 70 |   font-weight: 400;
 71 |   line-height: 1.75;
 72 |   color: var(--textColor);
 73 | }
 74 | 
 75 | p {
 76 |   margin-bottom: 1.5rem;
 77 |   max-width: 40em;
 78 | }
 79 | 
 80 | h1,
 81 | h2,
 82 | h3,
 83 | h4,
 84 | h5 {
 85 |   margin: 0;
 86 |   margin-bottom: 1.38rem;
 87 |   font-family: var(--headingFont);
 88 |   font-weight: 400;
 89 |   line-height: 1.3;
 90 |   text-transform: capitalize;
 91 |   letter-spacing: var(--letterSpacing);
 92 | }
 93 | 
 94 | h1 {
 95 |   margin-top: 0;
 96 |   font-size: 3.052rem;
 97 | }
 98 | 
 99 | h2 {
100 |   font-size: 2.441rem;
101 | }
102 | 
103 | h3 {
104 |   font-size: 1.953rem;
105 | }
106 | 
107 | h4 {
108 |   font-size: 1.563rem;
109 | }
110 | 
111 | h5 {
112 |   font-size: 1.25rem;
113 | }
114 | 
115 | small,
116 | .text-small {
117 |   font-size: var(--smallText);
118 | }
119 | 
120 | a {
121 |   text-decoration: none;
122 | }
123 | ul {
124 |   list-style-type: none;
125 |   padding: 0;
126 | }
127 | 
128 | .img {
129 |   width: 100%;
130 |   display: block;
131 |   object-fit: cover;
132 | }
133 | /* buttons */
134 | 
135 | .btn {
136 |   cursor: pointer;
137 |   color: var(--white);
138 |   background: var(--primary-500);
139 |   border: transparent;
140 |   border-radius: var(--borderRadius);
141 |   letter-spacing: var(--letterSpacing);
142 |   padding: 0.375rem 0.75rem;
143 |   box-shadow: var(--shadow-1);
144 |   transition: var(--transtion);
145 |   text-transform: capitalize;
146 |   display: inline-block;
147 | }
148 | .btn:hover {
149 |   background: var(--primary-700);
150 |   box-shadow: var(--shadow-3);
151 | }
152 | .btn-hipster {
153 |   color: var(--primary-500);
154 |   background: var(--primary-200);
155 | }
156 | .btn-hipster:hover {
157 |   color: var(--primary-200);
158 |   background: var(--primary-700);
159 | }
160 | .btn-block {
161 |   width: 100%;
162 | }
163 | 
164 | /* alerts */
165 | .alert {
166 |   padding: 0.375rem 0.75rem;
167 |   margin-bottom: 1rem;
168 |   border-color: transparent;
169 |   border-radius: var(--borderRadius);
170 | }
171 | 
172 | .alert-danger {
173 |   color: var(--red-dark);
174 |   background: var(--red-light);
175 | }
176 | .alert-success {
177 |   color: var(--green-dark);
178 |   background: var(--green-light);
179 | }
180 | /* form */
181 | 
182 | .form {
183 |   width: 90vw;
184 |   max-width: var(--fixed-width);
185 |   background: var(--white);
186 |   border-radius: var(--borderRadius);
187 |   box-shadow: var(--shadow-2);
188 |   padding: 2rem 2.5rem;
189 |   margin: 3rem auto;
190 | }
191 | .form-label {
192 |   display: block;
193 |   font-size: var(--smallText);
194 |   margin-bottom: 0.5rem;
195 |   text-transform: capitalize;
196 |   letter-spacing: var(--letterSpacing);
197 | }
198 | .form-input,
199 | .form-textarea {
200 |   width: 100%;
201 |   padding: 0.375rem 0.75rem;
202 |   border-radius: var(--borderRadius);
203 |   background: var(--backgroundColor);
204 |   border: 1px solid var(--grey-200);
205 | }
206 | 
207 | .form-row {
208 |   margin-bottom: 1rem;
209 | }
210 | 
211 | .form-textarea {
212 |   height: 7rem;
213 | }
214 | ::placeholder {
215 |   font-family: inherit;
216 |   color: var(--grey-400);
217 | }
218 | .form-alert {
219 |   color: var(--red-dark);
220 |   letter-spacing: var(--letterSpacing);
221 |   text-transform: capitalize;
222 | }
223 | /* alert */
224 | 
225 | @keyframes spinner {
226 |   to {
227 |     transform: rotate(360deg);
228 |   }
229 | }
230 | 
231 | .loading {
232 |   width: 6rem;
233 |   height: 6rem;
234 |   border: 5px solid var(--grey-400);
235 |   border-radius: 50%;
236 |   border-top-color: var(--primary-500);
237 |   animation: spinner 0.6s linear infinite;
238 | }
239 | .loading {
240 |   margin: 0 auto;
241 | }
242 | /* title */
243 | 
244 | .title {
245 |   text-align: center;
246 | }
247 | 
248 | .title-underline {
249 |   background: var(--primary-500);
250 |   width: 7rem;
251 |   height: 0.25rem;
252 |   margin: 0 auto;
253 |   margin-top: -1rem;
254 | }
255 | 
256 | /*
257 | =============== 
258 | Task Manager
259 | ===============
260 | */
261 | 
262 | .task-form {
263 |   margin-top: 6rem;
264 | }
265 | .task-form h4 {
266 |   text-align: center;
267 | }
268 | .submit-btn {
269 |   width: 100%;
270 |   margin-top: 1rem;
271 | }
272 | 
273 | @media screen and (min-width: 576px) {
274 |   .form-control {
275 |     display: flex;
276 |   }
277 |   .task-input {
278 |     border-radius: 0;
279 |     border-top-left-radius: var(--borderRadius);
280 |     border-bottom-left-radius: var(--borderRadius);
281 |   }
282 |   .submit-btn {
283 |     margin-top: 0;
284 |     width: 175px;
285 |     border-radius: 0;
286 |     border-top-right-radius: var(--borderRadius);
287 |     border-bottom-right-radius: var(--borderRadius);
288 |   }
289 | }
290 | 
291 | /*************
292 |      TASKS
293 | *************/
294 | 
295 | .tasks-container {
296 |   width: 90vw;
297 |   max-width: var(--fixed-width);
298 |   margin: 0 auto;
299 |   margin-top: 2rem;
300 |   padding-bottom: 4rem;
301 | }
302 | .tasks {
303 |   display: grid;
304 |   gap: 1rem;
305 | }
306 | .single-task {
307 |   padding: 1rem 2.5rem;
308 |   background: var(--white);
309 |   border-radius: var(--borderRadius);
310 |   box-shadow: var(--shadow-2);
311 |   transition: var(--transition);
312 |   display: flex;
313 |   justify-content: space-between;
314 |   align-items: center;
315 | }
316 | .single-task:hover {
317 |   box-shadow: var(--shadow-4);
318 | }
319 | .single-task h5 {
320 |   margin-bottom: 0;
321 | }
322 | 
323 | .single-task .fa-check-circle {
324 |   margin-left: -1.25rem;
325 |   margin-right: 1.5rem;
326 |   font-size: 1rem;
327 |   color: var(--green-dark);
328 |   visibility: hidden;
329 | }
330 | .task-completed h5 {
331 |   text-decoration: line-through;
332 | }
333 | .task-completed .fa-check-circle {
334 |   visibility: visible;
335 | }
336 | /* Task Links */
337 | .task-links {
338 |   display: flex;
339 |   align-items: center;
340 |   gap: 0 0.5rem;
341 | }
342 | .delete-btn,
343 | .edit-link {
344 |   background: transparent;
345 |   font-size: 0.75rem;
346 |   border: transparent;
347 |   cursor: pointer;
348 | }
349 | .edit-link {
350 |   color: var(--green-dark);
351 | }
352 | .delete-btn {
353 |   color: var(--red-dark);
354 | }
355 | 
356 | .text-success {
357 |   color: var(--green-dark);
358 | }
359 | 
360 | /*************
361 |    SINGLE TASK PAGE
362 | *************/
363 | .single-task-form {
364 |   margin-top: 6rem;
365 | }
366 | .single-task-form h4 {
367 |   text-align: center;
368 | }
369 | 
370 | .single-task-form p {
371 |   margin-bottom: 0;
372 |   margin-top: 0;
373 | }
374 | .single-task-form .form-control {
375 |   display: grid;
376 |   grid-template-columns: 150px 1fr;
377 |   align-items: center;
378 |   gap: 0 1rem;
379 |   margin-bottom: 0.75rem;
380 | }
381 | 
382 | .single-task-form label {
383 |   margin-bottom: 0;
384 |   font-size: 1rem;
385 | }
386 | 
387 | .task-edit-completed {
388 |   width: auto;
389 | }
390 | .back-link {
391 |   display: block;
392 |   width: 250px;
393 |   margin: 0 auto;
394 |   text-align: center;
395 |   margin-top: 6rem;
396 |   background: var(--black);
397 | }
398 | .back-link:hover {
399 |   background: var(--black);
400 |   opacity: 0.75;
401 | }
402 | 
403 | .single-task-form .form-alert {
404 |   text-align: center;
405 |   margin-top: 1rem;
406 | }
407 | 


--------------------------------------------------------------------------------
/images/hero-img.svg:
--------------------------------------------------------------------------------
1 | <svg id="b001403a-1e24-4603-98e8-0a03694cba74" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="873" height="528.67134" viewBox="0 0 873 528.67134"><path d="M1022.88857,185.66433h-607a8.72766,8.72766,0,0,0-8.71972,8.72V605.70431a8.72766,8.72766,0,0,0,8.71972,8.72h607a8.71242,8.71242,0,0,0,6.63037-3.06,2.04507,2.04507,0,0,0,.19-.24,8.16654,8.16654,0,0,0,1.25-2.11005,8.50717,8.50717,0,0,0,.65966-3.31V194.38436A8.72953,8.72953,0,0,0,1022.88857,185.66433Zm6.24024,420.04a6.17524,6.17524,0,0,1-1.03028,3.42,6.44578,6.44578,0,0,1-2.35986,2.12,6.1843,6.1843,0,0,1-2.8501.69h-607a6.23758,6.23758,0,0,1-6.23-6.23V194.38436a6.23758,6.23758,0,0,1,6.23-6.23h607a6.23945,6.23945,0,0,1,6.24024,6.23Z" transform="translate(-163.5 -185.66433)" fill="#3f3d56"/><rect x="244.91149" y="34.94921" width="621.95676" height="2.49281" fill="#3f3d56"/><circle cx="266.1004" cy="18.6961" r="7.47844" fill="#3f3d56"/><circle cx="287.60091" cy="18.6961" r="7.47844" fill="#3f3d56"/><circle cx="309.10142" cy="18.6961" r="7.47844" fill="#3f3d56"/><path d="M956.61417,401.33567h-485a17.01916,17.01916,0,0,1-17-17v-103a17.01917,17.01917,0,0,1,17-17h485a17.01917,17.01917,0,0,1,17,17v103A17.01916,17.01916,0,0,1,956.61417,401.33567Zm-485-135a15.017,15.017,0,0,0-15,15v103a15.017,15.017,0,0,0,15,15h485a15.017,15.017,0,0,0,15-15v-103a15.017,15.017,0,0,0-15-15Z" transform="translate(-163.5 -185.66433)" fill="#f2f2f2"/><path d="M578.61417,587.33567h-107a17.01916,17.01916,0,0,1-17-17v-76a17.01917,17.01917,0,0,1,17-17h107a17.01917,17.01917,0,0,1,17,17v76A17.01916,17.01916,0,0,1,578.61417,587.33567Zm-107-108a15.017,15.017,0,0,0-15,15v76a15.017,15.017,0,0,0,15,15h107a15.017,15.017,0,0,0,15-15v-76a15.017,15.017,0,0,0-15-15Z" transform="translate(-163.5 -185.66433)" fill="#f2f2f2"/><path d="M956.61417,587.33567h-107a17.01916,17.01916,0,0,1-17-17v-76a17.01917,17.01917,0,0,1,17-17h107a17.01917,17.01917,0,0,1,17,17v76A17.01916,17.01916,0,0,1,956.61417,587.33567Zm-107-108a15.017,15.017,0,0,0-15,15v76a15.017,15.017,0,0,0,15,15h107a15.017,15.017,0,0,0,15-15v-76a15.017,15.017,0,0,0-15-15Z" transform="translate(-163.5 -185.66433)" fill="#f2f2f2"/><path d="M775.61417,587.33567h-107a17.01916,17.01916,0,0,1-17-17v-76a17.01917,17.01917,0,0,1,17-17h107a17.01917,17.01917,0,0,1,17,17v76A17.01916,17.01916,0,0,1,775.61417,587.33567Zm-107-108a15.017,15.017,0,0,0-15,15v76a15.017,15.017,0,0,0,15,15h107a15.017,15.017,0,0,0,15-15v-76a15.017,15.017,0,0,0-15-15Z" transform="translate(-163.5 -185.66433)" fill="#f2f2f2"/><rect x="715.47077" y="68.96771" width="1.9997" height="527.39706" transform="translate(59.56218 763.88528) rotate(-76.25179)" fill="#f2f2f2"/><rect x="452.66318" y="331.83562" width="522.90198" height="2.00009" transform="translate(-222.58199 -4.17702) rotate(-13.91411)" fill="#f2f2f2"/><path d="M976.61426,435.83545h-485a16.51867,16.51867,0,0,1-16.5-16.5v-103a16.51866,16.51866,0,0,1,16.5-16.5h485a16.519,16.519,0,0,1,16.5,16.5v103A16.519,16.519,0,0,1,976.61426,435.83545Z" transform="translate(-163.5 -185.66433)" fill="#fff"/><rect x="720.78333" y="451.35523" width="2.00006" height="162.54779" transform="matrix(0.61507, -0.78848, 0.78848, 0.61507, -305.62597, 588.47188)" fill="#f2f2f2"/><rect x="642.28271" y="532.23806" width="161.99326" height="1.99991" transform="translate(-338.11403 383.11648) rotate(-38.66636)" fill="#f2f2f2"/><rect x="523.78333" y="451.35523" width="2.00006" height="162.54779" transform="matrix(0.61507, -0.78848, 0.78848, 0.61507, -381.45807, 433.1421)" fill="#f2f2f2"/><rect x="445.28271" y="532.23806" width="161.99326" height="1.99991" transform="translate(-381.29695 260.03396) rotate(-38.66636)" fill="#f2f2f2"/><rect x="901.78333" y="451.35523" width="2.00006" height="162.54779" transform="matrix(0.61507, -0.78848, 0.78848, 0.61507, -235.95283, 731.18604)" fill="#f2f2f2"/><rect x="823.28271" y="532.23806" width="161.99326" height="1.99991" transform="translate(-298.43835 496.20245) rotate(-38.66636)" fill="#f2f2f2"/><path d="M790.61417,659.83567h-107a16.51867,16.51867,0,0,1-16.5-16.5v-76a16.51868,16.51868,0,0,1,16.5-16.5h107a16.51867,16.51867,0,0,1,16.5,16.5v76A16.51866,16.51866,0,0,1,790.61417,659.83567Z" transform="translate(-163.5 -185.66433)" fill="#ff8e3c"/><path d="M846.5,661.33567h-219a1,1,0,0,1,0-2h219a1,1,0,0,1,0,2Z" transform="translate(-163.5 -185.66433)" fill="#ccc"/><path d="M383.5,714.33567h-219a1,1,0,0,1,0-2h219a1,1,0,0,1,0,2Z" transform="translate(-163.5 -185.66433)" fill="#ccc"/><path d="M751.06693,599.83567h-28a8,8,0,0,1,0-16h28a8,8,0,0,1,0,16Z" transform="translate(-163.5 -185.66433)" fill="#fff"/><path d="M767.61417,626.83567h-61a8,8,0,0,1,0-16h61a8,8,0,0,1,0,16Z" transform="translate(-163.5 -185.66433)" fill="#fff"/><path d="M595.61417,601.83567h-107a16.51867,16.51867,0,0,1-16.5-16.5v-76a16.51868,16.51868,0,0,1,16.5-16.5h107a16.51867,16.51867,0,0,1,16.5,16.5v76A16.51866,16.51866,0,0,1,595.61417,601.83567Z" transform="translate(-163.5 -185.66433)" fill="#ff8e3c"/><path d="M556.06693,541.83567h-28a8,8,0,0,1,0-16h28a8,8,0,0,1,0,16Z" transform="translate(-163.5 -185.66433)" fill="#fff"/><path d="M572.61417,568.83567h-61a8,8,0,1,1,0-16h61a8,8,0,0,1,0,16Z" transform="translate(-163.5 -185.66433)" fill="#fff"/><path d="M979.61417,630.83567h-107a16.51867,16.51867,0,0,1-16.5-16.5v-76a16.51868,16.51868,0,0,1,16.5-16.5h107a16.51867,16.51867,0,0,1,16.5,16.5v76A16.51866,16.51866,0,0,1,979.61417,630.83567Z" transform="translate(-163.5 -185.66433)" fill="#e6e6e6"/><path d="M940.06693,570.83567h-28a8,8,0,0,1,0-16h28a8,8,0,0,1,0,16Z" transform="translate(-163.5 -185.66433)" fill="#fff"/><path d="M956.61417,597.83567h-61a8,8,0,0,1,0-16h61a8,8,0,0,1,0,16Z" transform="translate(-163.5 -185.66433)" fill="#fff"/><polygon points="301.345 346.608 301.345 334.348 254.057 328.515 254.058 346.61 301.345 346.608" fill="#a0616a"/><path d="M449.5198,508.19005h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H464.40666a14.88686,14.88686,0,0,1-14.88686-14.88686v0A0,0,0,0,1,449.5198,508.19005Z" transform="translate(820.89725 -138.83954) rotate(89.99738)" fill="#2f2e41"/><polygon points="90.755 514.923 103.015 514.922 108.847 467.634 90.753 467.635 90.755 514.923" fill="#a0616a"/><path d="M251.62834,697.0835h38.53073a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H266.5152a14.88686,14.88686,0,0,1-14.88686-14.88686v0a0,0,0,0,1,0,0Z" transform="translate(378.31956 1223.37718) rotate(179.99738)" fill="#2f2e41"/><path d="M269.41666,683.54661c-.14575,0-.293-.00684-.44091-.01953L252.278,682.13645a5.1392,5.1392,0,0,1-4.67261-5.77832l8.66553-67.39843a3.12648,3.12648,0,0,0,.00049-.78907L242.50626,499.54075a5.1414,5.1414,0,0,1,5.02784-5.78613l48.69311-.69043a5.96065,5.96065,0,0,1,.74219.043l.133.03711,9.366,4.05371,136.16211,14.99609a5.15989,5.15989,0,0,1,4.48364,5.09961v17.53125a5.1426,5.1426,0,0,1-5.73462,5.10742l-78.66211-9.16894a3.04256,3.04256,0,0,0-1.18676.09082l-62.20459,17.14355a3.11972,3.11972,0,0,0-2.23706,2.46L274.46867,679.29466A5.1261,5.1261,0,0,1,269.41666,683.54661Z" transform="translate(-163.5 -185.66433)" fill="#2f2e41"/><circle cx="101.92655" cy="175.41285" r="33.56647" fill="#2f2e41"/><circle cx="90.18453" cy="140.08443" r="13.88957" fill="#2f2e41"/><path d="M235.16509,318.22524a13.891,13.891,0,0,1,12.44275-13.81447,14.04162,14.04162,0,0,0-1.44678-.0751,13.88958,13.88958,0,0,0,0,27.77915,14.04163,14.04163,0,0,0,1.44678-.07511A13.891,13.891,0,0,1,235.16509,318.22524Z" transform="translate(-163.5 -185.66433)" fill="#2f2e41"/><path d="M269.38077,512.00559c-8.33813,0-17.613-2.30859-27.26855-8.74609l-.16357-.10938-.04541-.19042c-.08985-.377-8.97339-37.97754-9.14844-67.09961a32.06833,32.06833,0,0,1,13.19946-26.26856,31.12926,31.12926,0,0,1,28.15186-4.7334h0q.9375.29736,1.87988.6377a31.97955,31.97955,0,0,1,20.66943,32.77441c-1.2666,15.3877-1.77417,43.41309,9.05542,58.21973l.25342.34668-.3042.30273C305.45133,497.34739,290.39,512.00559,269.38077,512.00559Z" transform="translate(-163.5 -185.66433)" fill="#ccc"/><circle cx="101.83071" cy="186.09654" r="24.56103" fill="#a0616a"/><path d="M235.24607,370.14a10.05578,10.05578,0,0,1-9.10343,12.44522l-9.47681,34.45532-12.23616-13.96819L215.305,372.4945A10.11028,10.11028,0,0,1,235.24607,370.14Z" transform="translate(-163.5 -185.66433)" fill="#a0616a"/><path d="M197.99186,446.06126a9.51912,9.51912,0,0,1-8.93262-12.709l18.01611-50.62109a5.04218,5.04218,0,0,1,6.00513-3.165l13.12915,3.47559a5.01331,5.01331,0,0,1,3.417,6.58984l-11.57861,31.21,19.63965-6.24707a12.77147,12.77147,0,1,1,5.75269,24.80274l-44.01563,6.55664A9.6247,9.6247,0,0,1,197.99186,446.06126Z" transform="translate(-163.5 -185.66433)" fill="#ccc"/><ellipse cx="105.83127" cy="168.29587" rx="23.14929" ry="13.88957" fill="#2f2e41"/><path d="M339.79819,520.17065a10.05576,10.05576,0,0,1-6.44927-14.00581l-25.50131-25.03323,18.15524-3.90137,21.43308,24.3701a10.11027,10.11027,0,0,1-7.63774,18.57031Z" transform="translate(-163.5 -185.66433)" fill="#a0616a"/><path d="M328.02677,506.55052a4.62214,4.62214,0,0,1-3.57593-1.67676l-27.83838-33.77442-21.78881-41.84472a13.83978,13.83978,0,0,1,2.06738-12.53809,13.28911,13.28911,0,0,1,11.02637-5.41016,17.42636,17.42636,0,0,1,3.21386.36817,13.31123,13.31123,0,0,1,9.56079,8.35254l18.45752,43.36328,22.12085,27.9043a4.639,4.639,0,0,1-.72094,6.47461l-9.626,7.76269A4.59969,4.59969,0,0,1,328.02677,506.55052Z" transform="translate(-163.5 -185.66433)" fill="#ccc"/><path d="M1035.5,632.33567h-219a1,1,0,0,1,0-2h219a1,1,0,0,1,0,2Z" transform="translate(-163.5 -185.66433)" fill="#ccc"/><path d="M842.88419,434.071v1.26468H629.184v-1.3235l1.15039-1.62749,67.75-95.6471a3.3846,3.3846,0,0,1,5.48974,0l45.43018,64.13727L781.34415,355.62a3.38541,3.38541,0,0,1,5.48,0l54.91016,76.83336Z" transform="translate(-163.5 -185.66433)" fill="#ff8e3c"/><circle cx="465.24084" cy="159.89522" r="24.87333" fill="#ff8e3c"/><path d="M976.61417,436.33567h-485a17.01916,17.01916,0,0,1-17-17v-103a17.01917,17.01917,0,0,1,17-17h485a17.01917,17.01917,0,0,1,17,17v103A17.01916,17.01916,0,0,1,976.61417,436.33567Zm-485-135a15.017,15.017,0,0,0-15,15v103a15.017,15.017,0,0,0,15,15h485a15.017,15.017,0,0,0,15-15v-103a15.017,15.017,0,0,0-15-15Z" transform="translate(-163.5 -185.66433)" fill="#3f3d56"/></svg>


--------------------------------------------------------------------------------