├── .gitignore
├── README.md
├── aulas
    ├── aula-bootstrap
    │   ├── css
    │   │   ├── styles-test2.css
    │   │   └── styles-test3.css
    │   ├── test1.html
    │   ├── test2.html
    │   └── test3.html
    ├── aula-borda-sombra
    │   ├── css
    │   │   └── styles.css
    │   └── index.html
    ├── aula-calc-vh-vw
    │   ├── css
    │   │   └── styles.css
    │   └── index.html
    ├── aula-div-span
    │   ├── img
    │   │   ├── book1.jpg
    │   │   └── book2.jpg
    │   └── index.html
    ├── aula-flexbox
    │   ├── css
    │   │   └── styles.css
    │   └── index.html
    ├── aula-footer-flexbox
    │   ├── css
    │   │   └── styles.css
    │   ├── img
    │   │   ├── facebook.svg
    │   │   ├── instagram.svg
    │   │   ├── linkedin.svg
    │   │   ├── logo-devsuperior.svg
    │   │   └── youtube.svg
    │   └── index.html
    ├── aula-formularios
    │   ├── img
    │   │   ├── book1.jpg
    │   │   └── book2.jpg
    │   ├── index.html
    │   └── obrigado.html
    ├── aula-google-fonts
    │   ├── css
    │   │   └── styles.css
    │   └── index.html
    ├── aula-margin-auto
    │   ├── css
    │   │   └── styles.css
    │   └── index.html
    ├── aula-primeiras-tags
    │   ├── img
    │   │   ├── book1.jpg
    │   │   └── book2.jpg
    │   └── index.html
    ├── aula-pseudo-elemento
    │   ├── css
    │   │   └── styles.css
    │   └── index.html
    └── aula-root-variaveis
    │   ├── css
    │       └── styles.css
    │   └── index.html
├── projeto-dsfood
    ├── README.md
    ├── css
    │   └── styles.css
    ├── img
    │   ├── dsfood-logo.png
    │   └── prato.jpg
    └── index.html
├── projeto-dstasty
    ├── README.md
    ├── css
    │   └── styles.css
    ├── img
    │   └── pizza.png
    └── index.html
├── projeto-lojatop
    ├── css
    │   └── styles.css
    ├── img
    │   ├── book1.jpg
    │   └── book2.jpg
    └── index.html
└── projeto-profile
    ├── README.md
    ├── css
        └── styles.css
    ├── img
        ├── instagram.png
        ├── portfolio1.png
        ├── portfolio2.png
        ├── portfolio3.png
        ├── portfolio4.png
        ├── portfolio5.png
        ├── portfolio6.png
        ├── profile.svg
        └── youtube.png
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .vscode
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ![DevSuperior logo](https://raw.githubusercontent.com/devsuperior/bds-assets/main/ds/devsuperior-logo-small.png) Curso Nivelamento HTML e CSS
 2 | >  Aprenda de forma rápida os principais fundamentos de HTML e CSS para se preparar para trabalhar com frameworks front end, e também crie seus primeiros projetos de portfólio para seu currículo.
 3 | 
 4 | ## Realização
 5 | [DevSuperior - Escola de programação](https://devsuperior.com.br)
 6 | 
 7 | [![DevSuperior no Instagram](https://raw.githubusercontent.com/devsuperior/bds-assets/main/ds/ig-icon.png)](https://instagram.com/devsuperior.ig)
 8 | [![DevSuperior no Youtube](https://raw.githubusercontent.com/devsuperior/bds-assets/main/ds/yt-icon.png)](https://youtube.com/devsuperior)
 9 | 
10 | #### Referências
11 | 
12 | https://www.w3schools.com/html
13 | 
14 | https://www.w3schools.com/css
15 | 
16 | https://www.w3schools.com/cssref
17 | 
18 | https://css-tricks.com/snippets/css/a-guide-to-flexbox
19 | 


--------------------------------------------------------------------------------
/aulas/aula-bootstrap/css/styles-test2.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | html,
 6 | body {
 7 |   background-color: #ddd;
 8 |   margin: 0;
 9 | }
10 | 
11 | .title-container {
12 |   text-align: center;
13 | }
14 | 
15 | .form-container {
16 |   width: 100%;
17 |   max-width: 960px;
18 |   margin: 0 auto;
19 |   background-color: #fff;
20 |   padding: 20px;
21 | }
22 | 
23 | .control-container {
24 |   display: flex;
25 |   flex-direction: column;
26 | }
27 | 
28 | .custom-control {
29 |   height: 40px;
30 |   border-radius: 5px;
31 |   border: 1px solid #ddd;
32 |   padding: 10px;
33 | }
34 | 
35 | .custom-submit {
36 |   height: 40px;
37 |   padding: 0 20px;
38 |   background-color: blue;
39 |   color: #fff;
40 |   border-radius: 5px;
41 |   border: none;
42 | }
43 | 
44 | .buttons-container {
45 |   margin-top: 20px;
46 | }
47 | 
48 | @media (min-width: 768px) {
49 |   .controls-container {
50 |     display: flex;
51 |   }
52 | 
53 |   .control-container {
54 |     flex: 1;
55 |     min-width: 320px;
56 |     margin-right: 20px;
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/aulas/aula-bootstrap/css/styles-test3.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | html,
 6 | body {
 7 |   background-color: #ddd;
 8 |   margin: 0;
 9 | }
10 | 
11 | .title-container {
12 |   margin-top: 30px;
13 |   margin-bottom: 30px;
14 | }
15 | 
16 | .form-container {
17 |   background-color: #fff;
18 |   padding: 20px;
19 | }
20 | 
21 | .buttons-container {
22 |     margin-top: 20px;
23 | }
24 | 


--------------------------------------------------------------------------------
/aulas/aula-bootstrap/test1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Aula Bootstrap</title>
 8 |   </head>
 9 |   <body>
10 |     <header>
11 |       <div>
12 |         <h1>Digite seus dados</h1>
13 |       </div>
14 |     </header>
15 |     <main>
16 |       <section>
17 |         <form action="#">
18 |           <div>
19 |             <div>
20 |               <label for="name">Nome</label>
21 |               <input type="text" id="name" placeholder="Digite seu nome" />
22 |             </div>
23 |             <div>
24 |               <label for="pass">Senha</label>
25 |               <input type="password" id="pass" placeholder="Digite a senha" />
26 |             </div>
27 |           </div>
28 |           <div>
29 |             <button type="submit">Enviar</button>
30 |           </div>
31 |         </form>
32 |       </section>
33 |     </main>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/aulas/aula-bootstrap/test2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Aula Bootstrap</title>
 8 |     <link rel="stylesheet" href="css/styles-test2.css" />
 9 |   </head>
10 |   <body>
11 |     <header>
12 |       <div class="title-container">
13 |         <h1>Digite seus dados</h1>
14 |       </div>
15 |     </header>
16 |     <main>
17 |       <section class="form-container">
18 |         <form action="#">
19 |           <div class="controls-container">
20 |             <div class="control-container">
21 |               <label for="name">Nome</label>
22 |               <input
23 |                 class="custom-control"
24 |                 type="text"
25 |                 id="name"
26 |                 placeholder="Digite seu nome"
27 |               />
28 |             </div>
29 |             <div class="control-container">
30 |               <label for="pass">Senha</label>
31 |               <input
32 |                 class="custom-control"
33 |                 type="password"
34 |                 id="pass"
35 |                 placeholder="Digite a senha"
36 |               />
37 |             </div>
38 |           </div>
39 |           <div class="buttons-container">
40 |             <button class="custom-submit" type="submit">Enviar</button>
41 |           </div>
42 |         </form>
43 |       </section>
44 |     </main>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/aulas/aula-bootstrap/test3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Aula Bootstrap</title>
 8 |     <link
 9 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css"
10 |       rel="stylesheet"
11 |       integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF"
12 |       crossorigin="anonymous"
13 |     />
14 |     <link rel="stylesheet" href="css/styles-test3.css" />
15 |   </head>
16 |   <body>
17 |     <header>
18 |       <div class="text-center title-container">
19 |         <h1>Digite seus dados</h1>
20 |       </div>
21 |     </header>
22 |     <main>
23 |       <section class="container form-container">
24 |         <form action="#">
25 |           <div class="row">
26 |             <div class="col-md-6">
27 |               <label for="name">Nome</label>
28 |               <input
29 |                 class="form-control"
30 |                 type="text"
31 |                 id="name"
32 |                 placeholder="Digite seu nome"
33 |               />
34 |             </div>
35 |             <div class="col-md-6">
36 |               <label for="pass">Senha</label>
37 |               <input
38 |                 class="form-control"
39 |                 type="password"
40 |                 id="pass"
41 |                 placeholder="Digite a senha"
42 |               />
43 |             </div>
44 |           </div>
45 |           <div class="buttons-container">
46 |             <button class="btn btn-primary" type="submit">Enviar</button>
47 |           </div>
48 |         </form>
49 |       </section>
50 |     </main>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/aulas/aula-borda-sombra/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
 2 | 
 3 | * {
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | .generic-section {
11 |     min-height: 300px;
12 |     padding: 40px 20px;
13 | }
14 | 
15 | .bg-gray {
16 |     background-color: #ddd;
17 | }
18 | 
19 | .generic-section h2 {
20 |     font-size: 32px;
21 | }
22 | 
23 | .generic-section p {
24 |     font-size: 24px;
25 | }
26 | 
27 | .container {
28 |     width: 100%;
29 |     max-width: 960px;
30 |     margin: 0 auto;
31 | }
32 | 
33 | .form-card {
34 |     background-color: #fff;
35 |     padding: 20px;
36 |     max-width: 600px;
37 |     border-radius: 10px;
38 |     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
39 |     border: 1px solid #999;
40 | }
41 | 
42 | .form-card form {
43 |     display: flex;
44 |     flex-direction: column;
45 | }
46 | 
47 | form input {
48 |     border: none;
49 |     background-color: #ddd;
50 |     height: 50px;
51 |     margin-bottom: 20px;
52 | }
53 | 
54 | form input:focus {
55 |     outline: 1px solid #999;
56 | }
57 | 


--------------------------------------------------------------------------------
/aulas/aula-borda-sombra/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Document</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <main>
13 |       <section class="generic-section bg-gray">
14 |         <div class="container">
15 |           <h2>Título da primeira seção</h2>
16 |           <div class="form-card">
17 |             <form action="#">
18 |               <input type="text" />
19 |               <button type="submit">Enviar</button>
20 |             </form>
21 |           </div>
22 |         </div>
23 |       </section>
24 |       <section class="generic-section">
25 |         <div class="container">
26 |           <h2>Título da segunda seção</h2>
27 |           <p>
28 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
29 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
30 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
31 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
32 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
33 |             dolorem quidem alias cupiditate?
34 |           </p>
35 |         </div>
36 |       </section>
37 |     </main>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/aulas/aula-calc-vh-vw/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
 2 | 
 3 | :root {
 4 |   --main-color: #205520;
 5 |   --secondary-color: #552055;
 6 |   --dark-gray: #666;
 7 |   --light-gray: #ddd;
 8 |   --color-white: #fff;
 9 | }
10 | 
11 | * {
12 |   margin: 0;
13 |   padding: 0;
14 |   box-sizing: border-box;
15 |   font-family: "Poppins", sans-serif;
16 | }
17 | 
18 | a,
19 | a:hover {
20 |   text-decoration: none;
21 |   color: unset;
22 | }
23 | 
24 | header {
25 |   height: 100px;
26 |   background-color: var(--main-color);
27 | }
28 | 
29 | footer {
30 |   height: 200px;
31 |   background-color: var(--secondary-color);
32 | }
33 | 
34 | main {
35 |   min-height: calc(100vh - 300px);
36 | }
37 | 
38 | .generic-section {
39 |   min-height: 300px;
40 |   padding: 60px 20px;
41 | }
42 | 
43 | .bg-gray {
44 |   background-color: var(--light-gray);
45 | }
46 | 
47 | .generic-section h2 {
48 |   color: var(--main-color);
49 |   font-size: 32px;
50 | }
51 | 
52 | .generic-section p {
53 |   font-size: 24px;
54 |   color: var(--dark-gray);
55 | }
56 | 
57 | .container {
58 |   width: 100%;
59 |   max-width: 960px;
60 |   margin: 0 auto;
61 | }
62 | 
63 | .buttons-container {
64 |   display: flex;
65 |   margin-top: 30px;
66 | }
67 | 
68 | .link-button {
69 |   height: 60px;
70 |   padding: 20px;
71 |   border-radius: 8px;
72 |   background-color: var(--secondary-color);
73 |   color: var(--color-white);
74 | }
75 | 


--------------------------------------------------------------------------------
/aulas/aula-calc-vh-vw/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Document</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <header>
13 |       <nav></nav>
14 |     </header>
15 |     <main>
16 |       <section class="generic-section">
17 |         <div class="container">
18 |           <h2>Título da primeira seção</h2>
19 |           <p>
20 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
21 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
22 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
23 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
24 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
25 |             dolorem quidem alias cupiditate?
26 |           </p>
27 |           <div class="buttons-container">
28 |             <a class="link-button" href="#">Saiba mais</a>
29 |           </div>
30 |         </div>
31 |       </section>
32 |     </main>
33 |     <footer></footer>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/aulas/aula-div-span/img/book1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/aulas/aula-div-span/img/book1.jpg


--------------------------------------------------------------------------------
/aulas/aula-div-span/img/book2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/aulas/aula-div-span/img/book2.jpg


--------------------------------------------------------------------------------
/aulas/aula-div-span/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Loja Top</title>
 8 |   </head>
 9 |   <body>
10 |     <header>
11 |       <nav>
12 |         <h1>Loja Top</h1>
13 |         <ul>
14 |           <li><a href="#categories">Categorias</a></li>
15 |           <li><a href="#titles">Títulos</a></li>
16 |           <li><a href="#about">Sobre nós</a></li>
17 |         </ul>
18 |       </nav>
19 |     </header>
20 |     <main>
21 |       <section id="categories">
22 |         <h2>Categorias</h2>
23 |         <ul>
24 |           <li>Fantasia</li>
25 |           <li>Educação</li>
26 |         </ul>
27 |       </section>
28 |       <section id="titles">
29 |         <h2>Títulos</h2>
30 |         <div>
31 |           <img src="img/book1.jpg" alt="O senhor dos anéis" />
32 |           <div>
33 |             <h3>O senhor dos anéis</h3>
34 |             <p>Navegue por essa grande aventura</p>
35 |             <p><span>R$ </span>389.99</p>
36 |           </div>
37 |         </div>
38 |         <div>
39 |           <img src="img/book2.jpg" alt="Rails for dummies" />
40 |           <div>
41 |             <h3>Rails for dummies</h3>
42 |             <p>Aprenda esta fantástica ferramenta</p>
43 |             <p><span>R$ </span>250.49</p>
44 |           </div>
45 |         </div>
46 |       </section>
47 |       <section id="about">
48 |         <h2>Sobre nós</h2>
49 |         <h3>O que fazemos</h3>
50 |         <p>Ajudamos pessoas a se tornarem desenvolvedores profissionais</p>
51 |         <h3>Saiba mais</h3>
52 |         <iframe
53 |           width="320"
54 |           height="180"
55 |           src="https://www.youtube.com/embed/6PBJUxIiRBI"
56 |           frameborder="0"
57 |           allowfullscreen
58 |           >Lalala</iframe
59 |         >
60 |       </section>
61 |     </main>
62 |     <footer>
63 |       <div>
64 |         <div>
65 |           <h2>Siga-nos</h2>
66 |           <a href="https://www.youtube.com/devsuperior">Youtube</a>
67 |           <a href="https://www.instagram.com/devsuperior.ig">Instagram</a>
68 |         </div>
69 |         <div>
70 |           <h2>Entre em contato</h2>
71 |           <address>
72 |             Escreva para nosso <a href="mailto:contato@devsuperior.com">email</a>.<br>
73 |             Até a próxima!
74 |           </address>
75 |         </div>
76 |       </div>
77 |     </footer>
78 |   </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/aulas/aula-flexbox/css/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | html, body {
 6 |     background-color: #ddd;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container-dos-blocos {
11 |     width: 100%;
12 |     max-width: 960px;
13 |     margin: 0 auto;
14 |     display: flex;
15 |     flex-wrap: wrap;
16 | }
17 | 
18 | .bloco {
19 |     width: 280px;
20 |     height: 200px;
21 |     margin: 20px;
22 |     border-radius: 20px;
23 |     padding: 10px;
24 |     background-color: #fff;
25 | }
26 | 
27 | .bloco:hover {
28 |     border: 2px solid red;
29 | }
30 | 


--------------------------------------------------------------------------------
/aulas/aula-flexbox/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 |     <link rel="stylesheet" href="css/styles.css">
 8 |     <title>Estudo display</title>
 9 | </head>
10 | <body>
11 |     <div class="container-dos-blocos">
12 |         <div class="bloco">
13 |             <p>Conteúdo 1</p>
14 |             <p>Conteúdo 2</p>
15 |             <p>Conteúdo 3</p>
16 |         </div>
17 |         <div class="bloco">
18 |             <p>Conteúdo 4</p>
19 |             <p>Conteúdo 5</p>
20 |             <p>Conteúdo 6</p>
21 |         </div>
22 |         <div class="bloco">
23 |             <p>Conteúdo 7</p>
24 |             <p>Conteúdo 8</p>
25 |             <p>Conteúdo 9</p>
26 |         </div>
27 |         <div class="bloco">
28 |             <p>Conteúdo 10</p>
29 |             <p>Conteúdo 11</p>
30 |             <p>Conteúdo 12</p>
31 |         </div>
32 |         <div class="bloco">
33 |             <p>Conteúdo 13</p>
34 |             <p>Conteúdo 14</p>
35 |             <p>Conteúdo 15</p>
36 |         </div>
37 |     </div>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/aulas/aula-footer-flexbox/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
 2 | 
 3 | * {
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | a, a:hover {
11 |     text-decoration: none;
12 |     color: unset;
13 | }
14 | 
15 | .generic-section {
16 |     min-height: 300px;
17 |     padding: 40px 20px;
18 | }
19 | 
20 | .bg-blue {
21 |     background-color: blue;
22 | }
23 | 
24 | .bg-red {
25 |     background-color: red;
26 | }
27 | 
28 | .bg-yellow {
29 |     background-color: yellow;
30 | }
31 | 
32 | .generic-section h2 {
33 |     font-size: 32px;
34 | }
35 | 
36 | .generic-section p {
37 |     font-size: 24px;
38 | }
39 | 
40 | .container {
41 |     width: 100%;
42 |     max-width: 960px;
43 |     margin: 0 auto;
44 | }
45 | 
46 | footer {
47 |     padding: 40px 20px;
48 |     background-color: #000;
49 |     color: #fff;
50 |     display: flex;
51 |     align-items: center;
52 | }
53 | 
54 | .footer-links-container a {
55 |     display: block;
56 |     text-align: center;
57 | }
58 | 
59 | .footer-content {
60 |     display: flex;
61 |     justify-content: space-between;
62 |     align-items: center;
63 | }
64 | 
65 | .footer-company-container {
66 |     display: flex;
67 |     flex-direction: column;
68 |     align-items: center;
69 | }
70 | 
71 | .footer-company-container p {
72 |     text-align: center;
73 | }
74 | 
75 | .footer-company-container img {
76 |     width: 200px;
77 |     margin-bottom: 10px;
78 | }
79 | 


--------------------------------------------------------------------------------
/aulas/aula-footer-flexbox/img/facebook.svg:
--------------------------------------------------------------------------------
1 | <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M33.4037 0H2.59634C1.16235 0 0 1.16235 0 2.59634V33.4037C0 34.8376 1.16235 36 2.59634 36H19.2305V22.0781H14.5547V16.6289H19.2305V12.6186C19.2305 7.96811 22.0696 5.43686 26.218 5.43686C28.2049 5.43686 29.9125 5.5849 30.4102 5.65109V10.5117H27.5496C25.2924 10.5117 24.8555 11.5843 24.8555 13.1583V16.6289H30.252L29.5488 22.0781H24.8555V36H33.4037C34.8376 36 36 34.8376 36 33.4037V2.59634C36 1.16235 34.8376 0 33.4037 0V0Z" fill="#FF8400"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/aulas/aula-footer-flexbox/img/instagram.svg:
--------------------------------------------------------------------------------
1 | <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M26.0575 11.9043C25.8919 11.4555 25.6277 11.0493 25.2843 10.7159C24.9509 10.3726 24.545 10.1083 24.0959 9.94272C23.7317 9.80127 23.1846 9.6329 22.1768 9.58704C21.0867 9.53732 20.7599 9.52661 18.0001 9.52661C15.2401 9.52661 14.9132 9.53705 13.8234 9.58676C12.8157 9.6329 12.2683 9.80127 11.9044 9.94272C11.4553 10.1083 11.0491 10.3726 10.7159 10.7159C10.3726 11.0493 10.1084 11.4553 9.94247 11.9043C9.80103 12.2685 9.63266 12.8159 9.58679 13.8236C9.53708 14.9135 9.52637 15.2403 9.52637 18.0004C9.52637 20.7601 9.53708 21.087 9.58679 22.1771C9.63266 23.1848 9.80103 23.7319 9.94247 24.0961C10.1084 24.5452 10.3723 24.9511 10.7156 25.2846C11.0491 25.6279 11.455 25.8921 11.9041 26.0577C12.2683 26.1995 12.8157 26.3678 13.8234 26.4137C14.9132 26.4634 15.2398 26.4738 17.9998 26.4738C20.7602 26.4738 21.087 26.4634 22.1766 26.4137C23.1843 26.3678 23.7317 26.1995 24.0959 26.0577C24.9973 25.71 25.7098 24.9976 26.0575 24.0961C26.1989 23.7319 26.3673 23.1848 26.4135 22.1771C26.4632 21.087 26.4736 20.7601 26.4736 18.0004C26.4736 15.2403 26.4632 14.9135 26.4135 13.8236C26.3676 12.8159 26.1992 12.2685 26.0575 11.9043ZM18.0001 23.3076C15.0687 23.3076 12.6924 20.9315 12.6924 18.0001C12.6924 15.0687 15.0687 12.6926 18.0001 12.6926C20.9313 12.6926 23.3076 15.0687 23.3076 18.0001C23.3076 20.9315 20.9313 23.3076 18.0001 23.3076ZM23.5175 13.7231C22.8325 13.7231 22.2771 13.1678 22.2771 12.4828C22.2771 11.7978 22.8325 11.2424 23.5175 11.2424C24.2025 11.2424 24.7578 11.7978 24.7578 12.4828C24.7575 13.1678 24.2025 13.7231 23.5175 13.7231Z" fill="#FF8400"/>
3 | <path d="M21.4453 18C21.4453 19.9028 19.9028 21.4453 18 21.4453C16.0972 21.4453 14.5547 19.9028 14.5547 18C14.5547 16.0972 16.0972 14.5547 18 14.5547C19.9028 14.5547 21.4453 16.0972 21.4453 18Z" fill="#FF8400"/>
4 | <path d="M33.4037 0H2.59634C1.16235 0 0 1.16235 0 2.59634V33.4037C0 34.8376 1.16235 36 2.59634 36H33.4037C34.8376 36 36 34.8376 36 33.4037V2.59634C36 1.16235 34.8376 0 33.4037 0ZM28.2736 22.2613C28.2236 23.3616 28.0486 24.1128 27.7932 24.7703C27.2563 26.1587 26.1587 27.2563 24.7703 27.7932C24.1131 28.0486 23.3616 28.2233 22.2616 28.2736C21.1594 28.3239 20.8073 28.3359 18.0003 28.3359C15.193 28.3359 14.8412 28.3239 13.7387 28.2736C12.6387 28.2233 11.8872 28.0486 11.2299 27.7932C10.54 27.5337 9.91544 27.1269 9.39908 26.6009C8.87338 26.0848 8.46661 25.46 8.20706 24.7703C7.95163 24.1131 7.77667 23.3616 7.72668 22.2616C7.67587 21.1591 7.66406 20.807 7.66406 18C7.66406 15.193 7.67587 14.8409 7.72641 13.7387C7.7764 12.6384 7.95108 11.8872 8.20651 11.2297C8.46606 10.54 8.87311 9.91516 9.39908 9.39908C9.91516 8.87311 10.54 8.46634 11.2297 8.20679C11.8872 7.95135 12.6384 7.77667 13.7387 7.72641C14.8409 7.67615 15.193 7.66406 18 7.66406C20.807 7.66406 21.1591 7.67615 22.2613 7.72668C23.3616 7.77667 24.1128 7.95135 24.7703 8.20651C25.46 8.46606 26.0848 8.87311 26.6012 9.39908C27.1269 9.91544 27.5339 10.54 27.7932 11.2297C28.0489 11.8872 28.2236 12.6384 28.2739 13.7387C28.3241 14.8409 28.3359 15.193 28.3359 18C28.3359 20.807 28.3241 21.1591 28.2736 22.2613Z" fill="#FF8400"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/aulas/aula-footer-flexbox/img/linkedin.svg:
--------------------------------------------------------------------------------
1 | <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M33.4037 0H2.59634C1.16235 0 0 1.16235 0 2.59634V33.4037C0 34.8376 1.16235 36 2.59634 36H33.4037C34.8376 36 36 34.8376 36 33.4037V2.59634C36 1.16235 34.8376 0 33.4037 0V0ZM12.7694 27.2109H8.38559V14.0221H12.7694V27.2109ZM10.5776 12.2212H10.5491C9.078 12.2212 8.12659 11.2085 8.12659 9.9429C8.12659 8.64871 9.10712 7.66406 10.6068 7.66406C12.1064 7.66406 13.0292 8.64871 13.0578 9.9429C13.0578 11.2085 12.1064 12.2212 10.5776 12.2212ZM28.5765 27.2109H24.1933V20.1552C24.1933 18.382 23.5585 17.1727 21.9724 17.1727C20.7614 17.1727 20.0402 17.9885 19.7232 18.7759C19.6073 19.0577 19.579 19.4516 19.579 19.8457V27.2109H15.1955C15.1955 27.2109 15.2529 15.2595 15.1955 14.0221H19.579V15.8895C20.1616 14.9908 21.2039 13.7126 23.5297 13.7126C26.4139 13.7126 28.5765 15.5976 28.5765 19.6485V27.2109Z" fill="#FF8400"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/aulas/aula-footer-flexbox/img/logo-devsuperior.svg:
--------------------------------------------------------------------------------
 1 | <svg width="273" height="35" viewBox="0 0 273 35" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M43.4892 4.97656H33.7049C32.8168 4.97656 32.2715 5.5192 32.2715 6.40292V30.1083C32.2715 30.9921 32.8168 31.5347 33.7049 31.5347H43.4892C45.7015 31.5347 47.4621 30.9145 48.7241 29.6897C49.9861 28.4649 50.6249 26.713 50.6249 24.5114V11.9998C50.6249 9.79827 49.9861 8.04633 48.7241 6.82152C47.4621 5.59672 45.7015 4.97656 43.4892 4.97656ZM44.3928 12.2479V24.2789C44.3928 24.9456 44.2682 25.4262 44.0345 25.6587C43.8008 25.8913 43.3178 26.0153 42.6478 26.0153H38.4879V10.5114H42.6478C43.3178 10.5114 43.8008 10.6355 44.0345 10.868C44.2682 11.1006 44.3928 11.5812 44.3928 12.2479Z" fill="white"/>
 3 | <path d="M70.8321 4.97656H57.8694C56.9813 4.97656 56.436 5.5192 56.436 6.40292V30.1083C56.436 30.9921 56.9813 31.5347 57.8694 31.5347H70.8321C71.689 31.5347 72.2187 30.9921 72.2187 30.1083V27.4262C72.2187 26.5425 71.689 25.9998 70.8321 25.9998H62.6681V20.837H69.3364C70.2244 20.837 70.7697 20.2944 70.7697 19.4107V16.7285C70.7697 15.8448 70.2244 15.3021 69.3364 15.3021H62.6681V10.4959H70.8321C71.689 10.4959 72.2187 9.95331 72.2187 9.06959V6.40292C72.2343 5.5192 71.689 4.97656 70.8321 4.97656Z" fill="white"/>
 4 | <path d="M94.9814 4.97656H91.2578C90.432 4.97656 89.8711 5.45718 89.7309 6.27889L86.0696 23.3487L82.4083 6.29439C82.2525 5.45718 81.6916 4.97656 80.8814 4.97656H77.1578C76.5813 4.97656 76.1606 5.1471 75.9269 5.47269C75.7711 5.68974 75.6153 6.06183 75.7867 6.61997L81.9253 30.2169C82.0811 31.0541 82.6576 31.5347 83.4989 31.5347H88.687C89.4661 31.5347 90.0269 31.0696 90.2139 30.2634L96.368 6.60447C96.4771 6.12385 96.3992 5.73625 96.1655 5.44168C95.9006 5.1316 95.5111 4.97656 94.9814 4.97656Z" fill="white"/>
 5 | <path d="M115.033 16.5892C113.241 15.8605 111.169 15.3954 108.863 15.2094C106.152 14.9768 106.152 14.0001 106.152 13.6745V12.9303C106.152 11.5815 106.417 11.1163 106.573 10.9458C106.713 10.7908 107.149 10.5272 108.334 10.5272H109.876C111.044 10.5272 111.496 10.7753 111.652 10.9148C111.808 11.0543 112.057 11.4574 112.057 12.5737V12.8063C112.057 13.69 112.602 14.2326 113.491 14.2326H116.856C117.744 14.2326 118.289 13.69 118.289 12.8063V12.0621C118.289 9.86052 117.635 8.10859 116.373 6.86828C115.095 5.62797 113.319 5.00781 111.076 5.00781H107.118C104.906 5.00781 103.13 5.64347 101.868 6.86828C100.59 8.10859 99.9514 9.86052 99.9514 12.0621V13.4419C99.9514 15.1784 100.294 16.6202 100.964 17.752C101.65 18.8993 102.538 19.69 103.582 20.0931C104.532 20.4497 105.56 20.7598 106.666 20.9923C107.773 21.2249 108.801 21.3799 109.736 21.4574C110.561 21.5194 111.247 21.7365 111.777 22.0931C112.229 22.3877 112.447 22.7908 112.447 23.3489V23.8295C112.447 24.7132 112.291 25.3489 112.01 25.6125C111.808 25.814 111.34 26.0311 110.265 26.0311H108.396C107.227 26.0311 106.775 25.783 106.62 25.6435C106.355 25.3954 106.215 24.8218 106.215 24.0156V23.7055C106.215 22.8218 105.669 22.2791 104.781 22.2791H101.416C100.528 22.2791 99.9826 22.8218 99.9826 23.7055V24.4962C99.9826 26.6977 100.637 28.4497 101.899 29.69C103.176 30.9303 104.937 31.5504 107.149 31.5504H111.465C113.677 31.5504 115.438 30.9148 116.716 29.69C117.993 28.4497 118.632 26.6977 118.632 24.4962V23.1629C118.632 21.4884 118.289 20.0776 117.619 18.9768C116.949 17.814 116.077 17.0388 115.033 16.5892Z" fill="#FF8400"/>
 6 | <path d="M141.208 4.97656H137.873C136.985 4.97656 136.44 5.5192 136.44 6.40292V24.2789C136.44 24.9456 136.315 25.4262 136.082 25.6587C135.848 25.8913 135.365 26.0153 134.695 26.0153H131.969C131.33 26.0153 130.862 25.8913 130.629 25.6587C130.395 25.4262 130.27 24.9456 130.27 24.2789V6.40292C130.27 5.5192 129.725 4.97656 128.837 4.97656H125.472C124.584 4.97656 124.038 5.5192 124.038 6.40292V24.5114C124.038 26.744 124.677 28.4959 125.924 29.7052C127.17 30.9145 128.93 31.5347 131.174 31.5347H135.536C137.749 31.5347 139.509 30.9145 140.771 29.6897C142.033 28.4649 142.672 26.713 142.672 24.5114V6.35641C142.672 5.5192 142.111 4.97656 141.208 4.97656Z" fill="#FF8400"/>
 7 | <path d="M159.795 4.97656H150.12C149.232 4.97656 148.686 5.5192 148.686 6.40292V30.1083C148.686 30.9921 149.232 31.5347 150.12 31.5347H153.485C154.373 31.5347 154.918 30.9921 154.918 30.1083V22.806H159.795C162.007 22.806 163.768 22.1859 165.014 20.9611C166.261 19.7363 166.899 17.9843 166.899 15.7828V11.9998C166.899 9.79827 166.261 8.06183 165.014 6.82152C163.768 5.61222 162.023 4.97656 159.795 4.97656ZM160.683 12.2479V15.5657C160.683 16.2169 160.558 16.682 160.325 16.9145C160.107 17.1471 159.639 17.2711 158.969 17.2711H154.918V10.5269H158.969C159.639 10.5269 160.107 10.651 160.325 10.8835C160.558 11.0851 160.683 11.5657 160.683 12.2479Z" fill="#FF8400"/>
 8 | <path d="M186.374 4.97656H173.412C172.524 4.97656 171.978 5.5192 171.978 6.40292V30.1083C171.978 30.9921 172.524 31.5347 173.412 31.5347H186.374C187.231 31.5347 187.761 30.9921 187.761 30.1083V27.4262C187.761 26.5425 187.231 25.9998 186.374 25.9998H178.21V20.837H184.863C185.751 20.837 186.296 20.2944 186.296 19.4107V16.7285C186.296 15.8448 185.751 15.3021 184.863 15.3021H178.21V10.4959H186.374C187.231 10.4959 187.761 9.95331 187.761 9.06959V6.40292C187.761 5.5192 187.216 4.97656 186.374 4.97656Z" fill="#FF8400"/>
 9 | <path d="M207.875 21.3488C210.118 20.217 211.256 18.124 211.256 15.1162V12.0465C211.256 9.8449 210.601 8.09296 209.339 6.85265C208.062 5.61234 206.301 4.99219 204.089 4.99219H194.647C193.759 4.99219 193.214 5.53482 193.214 6.41854V30.124C193.214 31.0077 193.759 31.5503 194.647 31.5503H198.013C198.901 31.5503 199.446 31.0077 199.446 30.124V22.186H201.596L205.382 30.3255C205.569 30.8061 205.849 31.1472 206.192 31.3178C206.488 31.4728 206.909 31.5348 207.485 31.5348H210.695C211.24 31.5348 211.645 31.3643 211.863 31.0387C212.097 30.7131 212.113 30.2945 211.894 29.7364L207.875 21.3488ZM205.039 12.248V15.3178C205.039 15.9224 204.899 16.3565 204.65 16.5891C204.369 16.8371 203.855 16.9767 203.185 16.9767H199.462V10.5116H203.185C203.871 10.5116 204.369 10.6356 204.65 10.8992C204.899 11.1472 205.039 11.5968 205.039 12.248Z" fill="#FF8400"/>
10 | <path d="M222.162 4.97656H218.796C217.908 4.97656 217.363 5.5192 217.363 6.40292V30.1083C217.363 30.9921 217.908 31.5347 218.796 31.5347H222.162C223.05 31.5347 223.595 30.9921 223.595 30.1083V6.40292C223.595 5.5192 223.05 4.97656 222.162 4.97656Z" fill="#FF8400"/>
11 | <path d="M241.201 4.97656H236.76C234.517 4.97656 232.756 5.59672 231.51 6.80602C230.264 8.01532 229.625 9.76726 229.625 11.9998V24.5114C229.625 26.744 230.264 28.4959 231.51 29.7052C232.756 30.9145 234.517 31.5347 236.76 31.5347H241.201C243.444 31.5347 245.205 30.9145 246.451 29.7052C247.698 28.4959 248.336 26.744 248.336 24.5114V11.9998C248.336 9.76726 247.698 8.01532 246.451 6.80602C245.205 5.59672 243.429 4.97656 241.201 4.97656ZM242.104 12.2479V24.2789C242.104 24.9456 241.98 25.4262 241.746 25.6587C241.512 25.8913 241.029 26.0153 240.359 26.0153H237.539C236.87 26.0153 236.402 25.8913 236.184 25.6587C235.95 25.4262 235.841 24.9456 235.841 24.2789V12.2479C235.841 11.5812 235.966 11.1006 236.184 10.868C236.402 10.6355 236.87 10.5114 237.539 10.5114H240.359C241.029 10.5114 241.512 10.6355 241.746 10.868C241.98 11.1006 242.104 11.5812 242.104 12.2479Z" fill="#FF8400"/>
12 | <path d="M272.86 29.7364L268.824 21.3488C271.068 20.217 272.205 18.124 272.205 15.1162V12.0465C272.205 9.8449 271.551 8.09296 270.289 6.85265C269.011 5.61234 267.251 4.99219 265.038 4.99219H255.597C254.709 4.99219 254.163 5.53482 254.163 6.41854V30.124C254.163 31.0077 254.709 31.5503 255.597 31.5503H258.962C259.85 31.5503 260.395 31.0077 260.395 30.124V22.186H262.545L266.331 30.3255C266.518 30.8061 266.799 31.1472 267.142 31.3178C267.438 31.4728 267.858 31.5348 268.435 31.5348H271.644C272.19 31.5348 272.595 31.3643 272.813 31.0387C273.046 30.7131 273.062 30.2945 272.86 29.7364ZM265.973 12.248V15.3178C265.973 15.9224 265.833 16.3565 265.584 16.5891C265.303 16.8371 264.789 16.9767 264.119 16.9767H260.395V10.5116H264.119C264.805 10.5116 265.303 10.6356 265.584 10.8992C265.833 11.1472 265.973 11.5968 265.973 12.248Z" fill="#FF8400"/>
13 | <path d="M24.8883 13.668C24.6882 13.2119 24.2378 12.9122 23.75 12.9122H15.5316L18.2335 1.6142C18.3711 1.02779 18.1084 0.41533 17.5831 0.141676C17.0702 -0.131979 16.4322 -0.00166707 16.057 0.467454L0.295664 19.936C-0.01706 20.3269 -0.092113 20.8612 0.120539 21.3303C0.333192 21.7994 0.771006 22.0861 1.25886 22.0861H9.47725L6.77531 33.3841C6.63771 33.9705 6.9004 34.583 7.42578 34.8567C7.6009 34.9479 7.80104 35 7.98868 35C8.35144 35 8.70169 34.8436 8.93936 34.5439L24.7132 15.0623C25.0134 14.6714 25.0884 14.1371 24.8883 13.668Z" fill="#FF8400"/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/aulas/aula-footer-flexbox/img/youtube.svg:
--------------------------------------------------------------------------------
1 | <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M15.7578 21.3722L21.613 17.9999L15.7578 14.6277V21.3722Z" fill="#FF8400"/>
3 | <path d="M33.4037 0H2.59634C1.16235 0 0 1.16235 0 2.59634V33.4037C0 34.8376 1.16235 36 2.59634 36H33.4037C34.8376 36 36 34.8376 36 33.4037V2.59634C36 1.16235 34.8376 0 33.4037 0V0ZM29.2473 18.0184C29.2473 18.0184 29.2473 21.6689 28.7842 23.4292C28.5246 24.3927 27.7649 25.1524 26.8014 25.4117C25.0411 25.875 18 25.875 18 25.875C18 25.875 10.9773 25.875 9.19858 25.3932C8.23508 25.134 7.47537 24.374 7.21582 23.4105C6.75247 21.6689 6.75247 18 6.75247 18C6.75247 18 6.75247 14.3498 7.21582 12.5895C7.4751 11.626 8.25348 10.8476 9.19858 10.5883C10.9589 10.125 18 10.125 18 10.125C18 10.125 25.0411 10.125 26.8014 10.6068C27.7649 10.866 28.5246 11.626 28.7842 12.5895C29.2659 14.3498 29.2473 18.0184 29.2473 18.0184V18.0184Z" fill="#FF8400"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/aulas/aula-footer-flexbox/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Document</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <main>
13 |       <section class="generic-section bg-blue">
14 |         <div class="container">
15 |           <h2>Título da primeira seção</h2>
16 |           <p>
17 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
18 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
19 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
20 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
21 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
22 |             dolorem quidem alias cupiditate?
23 |           </p>
24 |         </div>
25 |       </section>
26 |       <section class="generic-section bg-red">
27 |         <div class="container">
28 |           <h2>Título da segunda seção</h2>
29 |           <p>
30 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
31 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
32 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
33 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
34 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
35 |             dolorem quidem alias cupiditate?
36 |           </p>
37 |         </div>
38 |       </section>
39 |       <section class="generic-section bg-yellow">
40 |         <div class="container">
41 |           <h2>Título da terceira seção</h2>
42 |           <p>
43 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
44 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
45 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
46 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
47 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
48 |             dolorem quidem alias cupiditate?
49 |           </p>
50 |         </div>
51 |       </section>
52 |     </main>
53 |     <footer>
54 |       <div class="container footer-content">
55 |         <div class="footer-company-container">
56 |           <img src="img/logo-devsuperior.svg" alt="Logo Devsuperior" />
57 |           <p>Educandoweb Cursos Ltda.</p>
58 |           <p>CNPJ 29.016.230/0001-20</p>
59 |         </div>
60 |         <div class="footer-links-container">
61 |           <a href="termos.html">Termos de uso</a>
62 |           <a href="privacidade.html">Política de privacidade</a>
63 |         </div>
64 |         <div>
65 |           <a href="#"><img src="img/youtube.svg" alt="Youtube" /></a>
66 |           <a href="#"><img src="img/instagram.svg" alt="Instagram" /></a>
67 |           <a href="#"><img src="img/facebook.svg" alt="Facebook" /></a>
68 |           <a href="#"><img src="img/linkedin.svg" alt="Linkedin" /></a>
69 |         </div>
70 |       </div>
71 |     </footer>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/aulas/aula-formularios/img/book1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/aulas/aula-formularios/img/book1.jpg


--------------------------------------------------------------------------------
/aulas/aula-formularios/img/book2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/aulas/aula-formularios/img/book2.jpg


--------------------------------------------------------------------------------
/aulas/aula-formularios/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Loja Top</title>
 8 |   </head>
 9 |   <body>
10 |     <header>
11 |       <nav>
12 |         <h1>Loja Top</h1>
13 |       </nav>
14 |     </header>
15 |     <main>
16 |       <section id="signup">
17 |         <h2>Cadastro</h2>
18 |         <form action="obrigado.html">
19 |           
20 |           <div>
21 |             <label for="ctrl-name">Nome</label>
22 |             <input id="ctrl-name" type="text" name="name" placeholder="Digite seu nome">
23 |           </div>
24 | 
25 |           <div>
26 |             <label for="ctrl-email">Email</label>
27 |             <input id="ctrl-email" type="email" name="email" placeholder="Digite seu email">
28 |           </div>
29 | 
30 |           <div>
31 |             <label for="ctrl-password">Senha</label>
32 |             <input id="ctrl-password" type="password" name="password">
33 |           </div>
34 | 
35 |           <div>
36 |             <label for="ctrl-city">Cidade</label>
37 |             <select name="area" id="ctrl-city">
38 |               <option value="1">São Paulo</option>
39 |               <option value="2">Recife</option>
40 |               <option value="3">Porto Alegre</option>
41 |             </select>
42 |           </div>
43 | 
44 |           <div>
45 |             <label for="ctrl-level">Escolaridade</label>
46 |             <div id="ctrl-level">
47 |               <input type="radio" id="ctrl-level-1" name="level">
48 |               <label for="ctrl-level-1">Fundamental</label><br>
49 |               <input type="radio" id="ctrl-level-2" name="level">
50 |               <label for="ctrl-level-2">Médio</label><br>
51 |               <input type="radio" id="ctrl-level-2" name="level">
52 |               <label for="ctrl-level-3">Superior</label>
53 |             </div>
54 |           </div>
55 | 
56 |           <div>
57 |             <label for="ctrl-languages">Linguagens que conhece</label>
58 |             <div id="ctrl-languages">
59 |               <input type="checkbox" id="ctrl-languages-java" name="language1">
60 |               <label for="ctrl-languages-java">Java</label>
61 |               <input type="checkbox" id="ctrl-languages-csharp" name="language2">
62 |               <label for="ctrl-languages-csharp">C#</label>
63 |               <input type="checkbox" id="ctrl-languages-javascript" name="language3">
64 |               <label for="ctrl-languages-javascript">JavaScript</label>
65 |             </div>
66 |           </div>
67 | 
68 |           <input type="submit" value="Submit">
69 |           <input type="reset">
70 |         </form>
71 |       </section>
72 |     </main>
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/aulas/aula-formularios/obrigado.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Obrigado</title>
 8 | </head>
 9 | <body>
10 |     <h1>Obrigado pelo seu cadastro</h1>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/aulas/aula-google-fonts/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
 2 | 
 3 | * {
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | .generic-section {
11 |     min-height: 300px;
12 |     padding: 40px 20px;
13 | }
14 | 
15 | .bg-blue {
16 |     background-color: blue;
17 | }
18 | 
19 | .bg-red {
20 |     background-color: red;
21 | }
22 | 
23 | .bg-yellow {
24 |     background-color: yellow;
25 | }
26 | 
27 | h2 {
28 |     font-size: 32px;
29 | }
30 | 
31 | p {
32 |     font-size: 24px;
33 | }
34 | 
35 | .container {
36 |     width: 100%;
37 |     max-width: 960px;
38 |     margin: 0 auto;
39 | }
40 | 


--------------------------------------------------------------------------------
/aulas/aula-google-fonts/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Document</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <main>
13 |       <section class="generic-section bg-blue">
14 |         <div class="container">
15 |           <h2>Título da primeira seção</h2>
16 |           <p>
17 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
18 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
19 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
20 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
21 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
22 |             dolorem quidem alias cupiditate?
23 |           </p>
24 |         </div>
25 |       </section>
26 |       <section class="generic-section bg-red">
27 |         <div class="container">
28 |           <h2>Título da segunda seção</h2>
29 |           <p>
30 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
31 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
32 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
33 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
34 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
35 |             dolorem quidem alias cupiditate?
36 |           </p>
37 |         </div>
38 |       </section>
39 |       <section class="generic-section bg-yellow">
40 |         <div class="container">
41 |           <h2>Título da terceira seção</h2>
42 |           <p>
43 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
44 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
45 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
46 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
47 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
48 |             dolorem quidem alias cupiditate?
49 |           </p>
50 |         </div>
51 |       </section>
52 |     </main>
53 |     <footer></footer>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/aulas/aula-margin-auto/css/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | .generic-section {
 8 |     min-height: 300px;
 9 |     padding: 40px 20px;
10 | }
11 | 
12 | .bg-blue {
13 |     background-color: blue;
14 | }
15 | 
16 | .bg-red {
17 |     background-color: red;
18 | }
19 | 
20 | .bg-yellow {
21 |     background-color: yellow;
22 | }
23 | 
24 | h2 {
25 |     font-size: 32px;
26 | }
27 | 
28 | p {
29 |     font-size: 24px;
30 | }
31 | 
32 | .container {
33 |     width: 100%;
34 |     max-width: 960px;
35 |     margin: 0 auto;
36 | }
37 | 


--------------------------------------------------------------------------------
/aulas/aula-margin-auto/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Document</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <main>
13 |       <section class="generic-section bg-blue">
14 |         <div class="container">
15 |           <h2>Título da primeira seção</h2>
16 |           <p>
17 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
18 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
19 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
20 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
21 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
22 |             dolorem quidem alias cupiditate?
23 |           </p>
24 |         </div>
25 |       </section>
26 |       <section class="generic-section bg-red"></section>
27 |       <section class="generic-section bg-yellow"></section>
28 |     </main>
29 |     <footer></footer>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/aulas/aula-primeiras-tags/img/book1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/aulas/aula-primeiras-tags/img/book1.jpg


--------------------------------------------------------------------------------
/aulas/aula-primeiras-tags/img/book2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/aulas/aula-primeiras-tags/img/book2.jpg


--------------------------------------------------------------------------------
/aulas/aula-primeiras-tags/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Loja Top</title>
 8 |   </head>
 9 |   <body>
10 |     <h1>Loja Top</h1>
11 |     <ul>
12 |       <li><a href="#categories">Categorias</a></li>
13 |       <li><a href="#titles">Títulos</a></li>
14 |       <li><a href="#about">Sobre nós</a></li>
15 |     </ul>
16 |     <h2 id="categories">Categorias</h2>
17 |     <ul>
18 |       <li>Fantasia</li>
19 |       <li>Educação</li>
20 |     </ul>
21 |     <h2 id="titles">Títulos</h2>
22 |     <img src="img/book1.jpg" alt="O senhor dos anéis" />
23 |     <h3>O senhor dos anéis</h3>
24 |     <p>Navegue por essa grande aventura</p>
25 |     <p>R$ 389.99</p>
26 |     <img src="img/book2.jpg" alt="Rails for dummies" />
27 |     <h3>Rails for dummies</h3>
28 |     <p>Aprenda esta fantástica ferramenta</p>
29 |     <p>R$ 250.49</p>
30 |     <h2 id="about">Sobre nós</h2>
31 |     <h3>O que fazemos</h3>
32 |     <p>Ajudamos pessoas a se tornarem desenvolvedores profissionais</p>
33 |     <h3>Saiba mais</h3>
34 |     <iframe
35 |       width="320"
36 |       height="180"
37 |       src="https://www.youtube.com/embed/6PBJUxIiRBI"
38 |       frameborder="0"
39 |       allowfullscreen
40 |       >Lalala</iframe
41 |     >
42 |     <h2>Siga-nos</h2>
43 |     <a href="https://www.youtube.com/devsuperior">Youtube</a>
44 |     <a href="https://www.instagram.com/devsuperior.ig">Instagram</a>
45 |     <h2>Entre em contato</h2>
46 |     <address>
47 |       Escreva para nosso <a href="mailto:contato@devsuperior.com">email</a>.<br>
48 |       Até a próxima!
49 |     </address>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/aulas/aula-pseudo-elemento/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
 2 | 
 3 | * {
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | .generic-section {
11 |     min-height: 300px;
12 |     padding: 40px 20px;
13 | }
14 | 
15 | .bg-gray {
16 |     background-color: #ddd;
17 | }
18 | 
19 | .generic-section h2 {
20 |     font-size: 32px;
21 | }
22 | 
23 | .generic-section p {
24 |     font-size: 24px;
25 | }
26 | 
27 | .container {
28 |     width: 100%;
29 |     max-width: 960px;
30 |     margin: 0 auto;
31 | }
32 | 
33 | .form-card {
34 |     background-color: #fff;
35 |     padding: 20px;
36 |     max-width: 600px;
37 |     border-radius: 10px;
38 |     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
39 | }
40 | 
41 | .form-card form {
42 |     display: flex;
43 |     flex-direction: column;
44 | }
45 |    
46 | .form-card form input {
47 |     height: 50px;
48 |     margin-bottom: 20px;
49 |     border: none;
50 |     background-color: #f0f0f0;
51 |     border-radius: 5px;
52 |     padding: 15px;
53 |     font-size: 20px;
54 | }
55 | 
56 | .form-card form input::placeholder {
57 |     color: #aaf;
58 | }
59 | 
60 | .form-card form button {
61 |     height: 50px;
62 |     border: none;
63 |     border-radius: 5px;
64 |     background-color: #ff8400;
65 | }
66 | 
67 | .form-card form button:hover {
68 |     background-color: #ffbb00;
69 | }
70 | 


--------------------------------------------------------------------------------
/aulas/aula-pseudo-elemento/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Document</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <main>
13 |       <section class="generic-section bg-gray">
14 |         <div class="container">
15 |           <h2>Título da primeira seção</h2>
16 |           <div class="form-card">
17 |             <form action="#">
18 |               <input type="text" placeholder="Digite seu email" />
19 |               <button type="submit">Enviar</button>
20 |             </form>
21 |           </div>
22 |         </div>
23 |       </section>
24 |       <section class="generic-section">
25 |         <div class="container">
26 |           <h2>Título da segunda seção</h2>
27 |           <p>
28 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
29 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
30 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
31 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
32 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
33 |             dolorem quidem alias cupiditate?
34 |           </p>
35 |         </div>
36 |       </section>
37 |     </main>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/aulas/aula-root-variaveis/css/styles.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
 2 | 
 3 | :root {
 4 |   --main-color: #205520;
 5 |   --secondary-color: #552055;
 6 |   --dark-gray: #666;
 7 |   --light-gray: #ddd;
 8 |   --color-white: #fff;
 9 | }
10 | 
11 | * {
12 |   margin: 0;
13 |   padding: 0;
14 |   box-sizing: border-box;
15 |   font-family: "Poppins", sans-serif;
16 | }
17 | 
18 | a,
19 | a:hover {
20 |   text-decoration: none;
21 |   color: unset;
22 | }
23 | 
24 | header {
25 |   min-height: 100px;
26 |   background-color: var(--main-color);
27 | }
28 | 
29 | .generic-section {
30 |   min-height: 300px;
31 |   padding: 60px 20px;
32 | }
33 | 
34 | .bg-gray {
35 |   background-color: var(--light-gray);
36 | }
37 | 
38 | .generic-section h2 {
39 |   color: var(--main-color);
40 |   font-size: 32px;
41 | }
42 | 
43 | .generic-section p {
44 |   font-size: 24px;
45 |   color: var(--dark-gray);
46 | }
47 | 
48 | .container {
49 |   width: 100%;
50 |   max-width: 960px;
51 |   margin: 0 auto;
52 | }
53 | 
54 | .buttons-container {
55 |   display: flex;
56 |   margin-top: 30px;
57 | }
58 | 
59 | .link-button {
60 |   height: 60px;
61 |   padding: 20px;
62 |   border-radius: 8px;
63 |   background-color: var(--secondary-color);
64 |   color: var(--color-white);
65 | }
66 | 
67 | footer {
68 |   min-height: 200px;
69 |   background-color: var(--secondary-color);
70 | }
71 | 


--------------------------------------------------------------------------------
/aulas/aula-root-variaveis/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Document</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <header>
13 |       <nav></nav>
14 |     </header>
15 |     <main>
16 |       <section class="generic-section">
17 |         <div class="container">
18 |           <h2>Título da primeira seção</h2>
19 |           <p>
20 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
21 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
22 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
23 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
24 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
25 |             dolorem quidem alias cupiditate?
26 |           </p>
27 |           <div class="buttons-container">
28 |             <a class="link-button" href="#">Saiba mais</a>
29 |           </div>
30 |         </div>
31 |       </section>
32 |       <section class="generic-section bg-gray">
33 |         <div class="container">
34 |           <h2>Título da segunda seção</h2>
35 |           <p>
36 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
37 |             praesentium cum voluptates? Sint laboriosam illo saepe at quo,
38 |             quaerat ad tempora, ex maxime nihil natus obcaecati consectetur
39 |             reiciendis quas ea sapiente sit consequatur quibusdam. Eos nostrum
40 |             eveniet quis sit praesentium ex quasi, quibusdam enim sint explicabo
41 |             dolorem quidem alias cupiditate?
42 |           </p>
43 |           <div class="buttons-container">
44 |             <a class="link-button" href="#">Saiba mais</a>
45 |           </div>
46 |         </div>
47 |       </section>
48 |     </main>
49 |     <footer></footer>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/projeto-dsfood/README.md:
--------------------------------------------------------------------------------
1 | # Design
2 | 
3 | https://www.figma.com/file/7kntMN00YDrTGmaTlrSWKY/dsfood-nivelamento
4 | 


--------------------------------------------------------------------------------
/projeto-dsfood/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* ELEMENTS */
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | html,
  8 | body {
  9 |   padding: 0;
 10 |   margin: 0;
 11 |   font-family: "Roboto", sans-serif;
 12 | }
 13 | 
 14 | /* CLASSES, IDS */
 15 | 
 16 | .nav-container {
 17 |   background-color: #cf3527;
 18 |   height: 140px;
 19 |   width: 100%;
 20 |   padding: 20px;
 21 | }
 22 | 
 23 | .nav-main {
 24 |   display: flex;
 25 |   justify-content: space-between;
 26 | }
 27 | 
 28 | .dsfood-logo {
 29 |   display: flex;
 30 |   flex-direction: column;
 31 |   align-items: center;
 32 | }
 33 | 
 34 | .dsfood-logo img {
 35 |   width: 40px;
 36 |   height: 40px;
 37 | }
 38 | 
 39 | .dsfood-logo h1 {
 40 |   margin: 0;
 41 |   color: #fff;
 42 |   font-size: 18px;
 43 | }
 44 | 
 45 | .dsfood-nav-right {
 46 |   display: flex;
 47 |   align-items: center;
 48 | }
 49 | 
 50 | .dsfood-nav-right p {
 51 |   display: none;
 52 | }
 53 | 
 54 | .dsfood-btn-default {
 55 |   padding: 0 20px;
 56 |   height: 35px;
 57 |   border: none;
 58 |   border-radius: 4px;
 59 |   font-weight: 700;
 60 |   color: #6a6a6a;
 61 |   background-color: #f8f8f8;
 62 |   font-family: "Roboto", sans-serif;
 63 |   font-size: 14px;
 64 |   cursor: pointer;
 65 | }
 66 | 
 67 | .dsfood-btn-default:hover {
 68 |   background-color: #fff;
 69 | }
 70 | 
 71 | .dsfood-btn-default:active {
 72 |   background-color: #f8f8f8;
 73 | }
 74 | 
 75 | .dsfood-category-container {
 76 |   display: flex;
 77 |   justify-content: center;
 78 | }
 79 | 
 80 | .dsfood-category-container {
 81 |   position: relative;
 82 |   top: -30px;
 83 |   margin-bottom: 10px;
 84 | }
 85 | 
 86 | .dsfood-btn-category {
 87 |   padding: 0;
 88 |   width: 120px;
 89 |   height: 60px;
 90 |   background-color: #ffb647;
 91 |   color: #fff;
 92 |   border: none;
 93 |   border-radius: 4px;
 94 |   font-family: "Roboto", sans-serif;
 95 |   font-weight: 700;
 96 |   font-size: 18px;
 97 |   cursor: pointer;
 98 | }
 99 | 
100 | .dsfood-btn-category:hover {
101 |   background-color: #ffbb55;
102 | }
103 | 
104 | .dsfood-btn-category:active {
105 |   background-color: #ffb647;
106 | }
107 | 
108 | .dsfood-btn-category-ml {
109 |   margin-left: 20px;
110 | }
111 | 
112 | .dsfood-btn-category-mr {
113 |   margin-right: 20px;
114 | }
115 | 
116 | .dsfood-catalog-section {
117 |   width: 100%;
118 |   padding: 0 20px;
119 | }
120 | 
121 | .dsfood-catalog-container {
122 |   width: 100%;
123 | }
124 | 
125 | .dsfood-catalog-item {
126 |   display: flex;
127 |   margin-bottom: 30px;
128 | }
129 | 
130 | .dsfood-catalog-item-image {
131 |   width: 90px;
132 |   height: 90px;
133 |   border-radius: 4px 0 0 4px;
134 | }
135 | 
136 | .dsfood-catalog-item-details-container {
137 |   display: flex;
138 |   flex-direction: column;
139 |   justify-content: space-between;
140 |   flex: 1;
141 |   background-color: #f0eff4;
142 |   padding: 8px 20px;
143 |   border-radius: 0 4px 4px 0;
144 | }
145 | 
146 | .dsfood-catalog-item-title {
147 |   margin: 0;
148 |   font-size: 14px;
149 |   font-weight: 700;
150 |   color: #3d3d3d;
151 | }
152 | 
153 | .dsfood-catalog-item-description {
154 |   margin: 0;
155 |   font-size: 10px;
156 |   font-weight: 400;
157 |   color: #3d3d3d;
158 | }
159 | 
160 | .dsfood-catalog-item-price {
161 |   margin: 0;
162 |   font-size: 14px;
163 |   font-weight: 700;
164 |   color: #5c9f43;
165 | }
166 | 
167 | @media (min-width: 576px) {
168 |   .nav-container {
169 |     padding: 20px 40px;
170 |   }
171 | 
172 |   .dsfood-catalog-item-image {
173 |     width: 110px;
174 |     height: 110px;
175 |   }
176 | 
177 |   .dsfood-catalog-section {
178 |     padding: 0 40px;
179 |   }
180 | 
181 |   .dsfood-catalog-item-title {
182 |     font-size: 18px;
183 |   }
184 | 
185 |   .dsfood-catalog-item-description {
186 |     font-size: 12px;
187 |   }
188 | 
189 |   .dsfood-catalog-item-price {
190 |     font-size: 24px;
191 |   }
192 | }
193 | 
194 | @media (min-width: 768px) {
195 |   .nav-main {
196 |     max-width: 856px; /* -20 margin, -20 space-around*/
197 |     margin: 0 auto;
198 |   }
199 | 
200 |   .dsfood-nav-right p {
201 |     margin: 0 15px;
202 |     color: #fff;
203 |     font-size: 14px;
204 |     font-weight: 400;
205 |     display: unset;
206 |   }
207 | 
208 |   .dsfood-category-container {
209 |     top: -40px;
210 |   }
211 | 
212 |   .dsfood-btn-category {
213 |     width: 160px;
214 |     height: 80px;
215 |   }
216 | 
217 |   .dsfood-btn-category-ml {
218 |     margin-left: 40px;
219 |   }
220 | 
221 |   .dsfood-btn-category-mr {
222 |     margin-right: 40px;
223 |   }
224 | 
225 |   .dsfood-catalog-container {
226 |     max-width: 896px;
227 |     margin: 0 auto;
228 |     display: flex;
229 |     flex-wrap: wrap;
230 |     justify-content: space-around;
231 |   }
232 | 
233 |   .dsfood-catalog-item {
234 |     display: flex;
235 |     flex-direction: column;
236 |     width: 260px;
237 |     margin: 0 10px 30px 10px;
238 |   }
239 | 
240 |   .dsfood-catalog-item-image {
241 |     width: 260px;
242 |     height: 260px;
243 |     border-radius: 4px 4px 0 0;
244 |   }
245 | 
246 |   .dsfood-catalog-item-details-container {
247 |     border-radius: 0 0 4px 4px;
248 |   }
249 | }
250 | 
251 | @media (min-width: 992px) {
252 |   .nav-main {
253 |     max-width: 896px;
254 |     margin: 0 auto;
255 |   }
256 | 
257 |   .dsfood-catalog-container {
258 |     max-width: 896px;
259 |     margin: 0 auto;
260 |     justify-content: space-between;
261 |   }
262 | 
263 |   .dsfood-catalog-item {
264 |     margin: 0 0 30px 0;
265 |   }
266 | }
267 | 


--------------------------------------------------------------------------------
/projeto-dsfood/img/dsfood-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-dsfood/img/dsfood-logo.png


--------------------------------------------------------------------------------
/projeto-dsfood/img/prato.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-dsfood/img/prato.jpg


--------------------------------------------------------------------------------
/projeto-dsfood/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  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>DSFood</title>
  8 | 
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 11 |     <link
 12 |       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
 13 |       rel="stylesheet"
 14 |     />
 15 | 
 16 |     <link rel="stylesheet" href="css/styles.css" />
 17 |   </head>
 18 |   <body>
 19 |     <header class="nav-container">
 20 |       <nav class="nav-main">
 21 |         <div class="dsfood-logo">
 22 |           <img src="img/dsfood-logo.png" alt="DSFood Logo" />
 23 |           <h1>DSFood</h1>
 24 |         </div>
 25 |         <div class="dsfood-nav-right">
 26 |           <p>Aqui você pode contar com a gente</p>
 27 |           <button class="dsfood-btn-default">Entrar</button>
 28 |         </div>
 29 |       </nav>
 30 |     </header>
 31 |     <main>
 32 |       <div class="dsfood-category-container">
 33 |         <button class="dsfood-btn-category dsfood-btn-category-mr">Restaurante</button>
 34 |         <button class="dsfood-btn-category dsfood-btn-category-ml">Mercado</button>
 35 |       </div>
 36 |       <section class="dsfood-catalog-section">
 37 |         <div class="dsfood-catalog-container">
 38 |           <div class="dsfood-catalog-item">
 39 |             <img
 40 |               class="dsfood-catalog-item-image"
 41 |               src="img/prato.jpg"
 42 |               alt="Nome do prato"
 43 |             />
 44 |             <div class="dsfood-catalog-item-details-container">
 45 |               <p class="dsfood-catalog-item-title">Nome do prato</p>
 46 |               <p class="dsfood-catalog-item-description">Descrição detalhada do prato, ocupando até duas linhas.</p>
 47 |               <p class="dsfood-catalog-item-price">R$ 123.45</p>
 48 |             </div>
 49 |           </div>
 50 |           <div class="dsfood-catalog-item">
 51 |             <img
 52 |               class="dsfood-catalog-item-image"
 53 |               src="img/prato.jpg"
 54 |               alt="Nome do prato"
 55 |             />
 56 |             <div class="dsfood-catalog-item-details-container">
 57 |               <p class="dsfood-catalog-item-title">Nome do prato</p>
 58 |               <p class="dsfood-catalog-item-description">Descrição detalhada do prato, ocupando até duas linhas.</p>
 59 |               <p class="dsfood-catalog-item-price">R$ 123.45</p>
 60 |             </div>
 61 |           </div>
 62 |           <div class="dsfood-catalog-item">
 63 |             <img
 64 |               class="dsfood-catalog-item-image"
 65 |               src="img/prato.jpg"
 66 |               alt="Nome do prato"
 67 |             />
 68 |             <div class="dsfood-catalog-item-details-container">
 69 |               <p class="dsfood-catalog-item-title">Nome do prato</p>
 70 |               <p class="dsfood-catalog-item-description">Descrição detalhada do prato, ocupando até duas linhas.</p>
 71 |               <p class="dsfood-catalog-item-price">R$ 123.45</p>
 72 |             </div>
 73 |           </div>
 74 |           <div class="dsfood-catalog-item">
 75 |             <img
 76 |               class="dsfood-catalog-item-image"
 77 |               src="img/prato.jpg"
 78 |               alt="Nome do prato"
 79 |             />
 80 |             <div class="dsfood-catalog-item-details-container">
 81 |               <p class="dsfood-catalog-item-title">Nome do prato</p>
 82 |               <p class="dsfood-catalog-item-description">Descrição detalhada do prato, ocupando até duas linhas.</p>
 83 |               <p class="dsfood-catalog-item-price">R$ 123.45</p>
 84 |             </div>
 85 |           </div>
 86 |           <div class="dsfood-catalog-item">
 87 |             <img
 88 |               class="dsfood-catalog-item-image"
 89 |               src="img/prato.jpg"
 90 |               alt="Nome do prato"
 91 |             />
 92 |             <div class="dsfood-catalog-item-details-container">
 93 |               <p class="dsfood-catalog-item-title">Nome do prato</p>
 94 |               <p class="dsfood-catalog-item-description">Descrição detalhada do prato, ocupando até duas linhas.</p>
 95 |               <p class="dsfood-catalog-item-price">R$ 123.45</p>
 96 |             </div>
 97 |           </div>
 98 |           <div class="dsfood-catalog-item">
 99 |             <img
100 |               class="dsfood-catalog-item-image"
101 |               src="img/prato.jpg"
102 |               alt="Nome do prato"
103 |             />
104 |             <div class="dsfood-catalog-item-details-container">
105 |               <p class="dsfood-catalog-item-title">Nome do prato</p>
106 |               <p class="dsfood-catalog-item-description">Descrição detalhada do prato, ocupando até duas linhas.</p>
107 |               <p class="dsfood-catalog-item-price">R$ 123.45</p>
108 |             </div>
109 |           </div>
110 |         </div>
111 |       </section>
112 |     </main>
113 |   </body>
114 | </html>
115 | 


--------------------------------------------------------------------------------
/projeto-dstasty/README.md:
--------------------------------------------------------------------------------
1 | # Design
2 | 
3 | https://www.figma.com/file/NR82ZLmIsb9pQZ1t0RhcEW/DSTasty
4 | 
5 | 


--------------------------------------------------------------------------------
/projeto-dstasty/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
  2 | 
  3 | :root {
  4 |   --color-red: #f03c42;
  5 |   --color-yellow: #fff964;
  6 |   --color-white: #fff;
  7 |   --bg-light-gray: #e5e5e5;
  8 |   --text-gray: #5e5e5e;
  9 |   --text-green: #02b814;
 10 | }
 11 | 
 12 | * {
 13 |   font-family: "Poppins", sans-serif;
 14 |   box-sizing: border-box;
 15 |   margin: 0;
 16 |   padding: 0;
 17 | }
 18 | 
 19 | a,
 20 | a:hover {
 21 |   color: unset;
 22 |   text-decoration: none;
 23 | }
 24 | 
 25 | header {
 26 |   background-color: var(--color-red);
 27 |   height: 70px;
 28 |   display: flex;
 29 |   align-items: center;
 30 |   padding: 0 15px;
 31 | }
 32 | 
 33 | nav h1 {
 34 |   text-align: center;
 35 |   color: var(--color-yellow);
 36 |   font-size: 24px;
 37 | }
 38 | 
 39 | .container {
 40 |   width: 100%;
 41 |   max-width: 960px;
 42 |   margin: 0 auto;
 43 | }
 44 | 
 45 | #pizzas {
 46 |   padding: 20px 15px;
 47 |   background-color: var(--bg-light-gray);
 48 | }
 49 | 
 50 | .pizza-card {
 51 |   display: flex;
 52 |   margin: 20px 0;
 53 | }
 54 | 
 55 | .pizza-card img {
 56 |   width: 200px;
 57 |   border-radius: 12px 0px 0px 12px;
 58 | }
 59 | 
 60 | .pizza-card-description {
 61 |   background-color: var(--color-white);
 62 |   border-radius: 0px 12px 12px 0px;
 63 |   padding: 15px;
 64 |   display: flex;
 65 |   flex-direction: column;
 66 |   justify-content: space-between;
 67 | }
 68 | 
 69 | .pizza-card-description h3 {
 70 |   color: var(--text-gray);
 71 |   font-size: 24px;
 72 | }
 73 | 
 74 | .pizza-card-description p {
 75 |   color: var(--text-gray);
 76 |   font-size: 14px;
 77 | }
 78 | 
 79 | .pizza-card-description h4 {
 80 |   color: var(--text-green);
 81 |   font-size: 24px;
 82 | }
 83 | 
 84 | #comments {
 85 |   padding: 20px 15px;
 86 | }
 87 | 
 88 | #comments h2 {
 89 |   text-align: center;
 90 |   font-size: 32px;
 91 |   color: var(--text-gray);
 92 |   margin-bottom: 40px;
 93 | }
 94 | 
 95 | .card-comment {
 96 |   padding: 25px 20px;
 97 |   background-color: var(--color-yellow);
 98 |   color: var(--color-red);
 99 |   border-radius: 12px;
100 |   margin: 20px 0;
101 | }
102 | 
103 | footer {
104 |   padding: 0 15px;
105 |   height: 120px;
106 |   background-color: var(--color-red);
107 |   color: var(--color-yellow);
108 |   display: flex;
109 |   align-items: center;
110 | }
111 | 
112 | .footer-content {
113 |   display: flex;
114 |   justify-content: space-between;
115 | }
116 | 
117 | .footer-content a {
118 |   font-size: 16px;
119 | }
120 | 
121 | .footer-content address {
122 |   font-size: 16px;
123 | }
124 | 


--------------------------------------------------------------------------------
/projeto-dstasty/img/pizza.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-dstasty/img/pizza.png


--------------------------------------------------------------------------------
/projeto-dstasty/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>DSTasty</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/styles.css" />
10 |   </head>
11 |   <body>
12 |     <header>
13 |       <nav class="container">
14 |         <h1>DSTasty</h1>
15 |       </nav>
16 |     </header>
17 |     <main>
18 |       <section id="pizzas">
19 |         <div class="container">
20 |           <div class="pizza-card">
21 |             <img src="img/pizza.png" alt="Pizza" />
22 |             <div class="pizza-card-description">
23 |               <h3>Moda da casa</h3>
24 |               <p>
25 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
26 |                 harum voluptatem ad fugit id distinctio fugit id distinctio.
27 |               </p>
28 |               <h4>$ 80,00</h4>
29 |             </div>
30 |           </div>
31 |           <div class="pizza-card">
32 |             <img src="img/pizza.png" alt="Pizza" />
33 |             <div class="pizza-card-description">
34 |               <h3>Moda da casa</h3>
35 |               <p>
36 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
37 |                 harum voluptatem ad fugit id distinctio fugit id distinctio.
38 |               </p>
39 |               <h4>$ 80,00</h4>
40 |             </div>
41 |           </div>
42 |           <div class="pizza-card">
43 |             <img src="img/pizza.png" alt="Pizza" />
44 |             <div class="pizza-card-description">
45 |               <h3>Moda da casa</h3>
46 |               <p>
47 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
48 |                 harum voluptatem ad fugit id distinctio fugit id distinctio.
49 |               </p>
50 |               <h4>$ 80,00</h4>
51 |             </div>
52 |           </div>
53 |         </div>
54 |       </section>
55 |       <section id="comments">
56 |         <div class="container">
57 |           <h2>O que estão dizendo</h2>
58 |           <div class="card-comment">
59 |             <p>
60 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
61 |               harum voluptatem ad fugit id distinctio.
62 |             </p>
63 |           </div>
64 |           <div class="card-comment">
65 |             <p>
66 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
67 |               harum voluptatem ad fugit id distinctio.
68 |             </p>
69 |           </div>
70 |           <div class="card-comment">
71 |             <p>
72 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
73 |               harum voluptatem ad fugit id distinctio.
74 |             </p>
75 |           </div>
76 |           <div class="card-comment">
77 |             <p>
78 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
79 |               harum voluptatem ad fugit id distinctio.
80 |             </p>
81 |           </div>
82 |           <div class="card-comment">
83 |             <p>
84 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae
85 |               harum voluptatem ad fugit id distinctio.
86 |             </p>
87 |           </div>
88 |         </div>
89 |       </section>
90 |     </main>
91 |     <footer>
92 |         <div class="container footer-content">
93 |             <a href="#">@dstasty</a>
94 |             <address>Rua da Pipoca, 150</address>
95 |         </div>
96 |     </footer>
97 |   </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/projeto-lojatop/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* ELEMENTS */
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 |   padding: 0;
  6 |   margin: 0;
  7 |   font-family: "Montserrat", sans-serif;
  8 | }
  9 | 
 10 | a {
 11 |   color: #8be8f4;
 12 |   text-decoration: none;
 13 | }
 14 | 
 15 | header {
 16 |   background-color: #131a22;
 17 |   color: #eee;
 18 |   height: 100px;
 19 |   width: 100%;
 20 |   padding: 20px;
 21 |   display: flex;
 22 |   align-items: center;
 23 | }
 24 | 
 25 | footer {
 26 |   background-color: #131a22;
 27 |   color: #eee;
 28 |   height: 200px;
 29 |   width: 100%;
 30 |   padding: 20px;
 31 |   display: flex;
 32 |   justify-content: space-between;
 33 | }
 34 | 
 35 | section {
 36 |   min-height: 200px;
 37 |   padding: 40px;
 38 | }
 39 | 
 40 | /* CLASSES, IDS */
 41 | 
 42 | .nav-main {
 43 |   width: 100%;
 44 |   max-width: 960px;
 45 |   margin: 0 auto;
 46 |   display: flex;
 47 |   justify-content: space-between;
 48 | }
 49 | 
 50 | .nav-main h1 {
 51 |   font-size: 30px;
 52 | }
 53 | 
 54 | .menu-items {
 55 |   display: none;
 56 | }
 57 | 
 58 | .menu-items li {
 59 |   font-size: 14px;
 60 |   margin-left: 20px;
 61 | }
 62 | 
 63 | .nav-brand {
 64 |   color: #fff;
 65 |   font-size: 18px;
 66 |   font-weight: 700;
 67 | }
 68 | 
 69 | .section-categories {
 70 |   display: flex;
 71 |   flex-direction: column;
 72 |   align-items: center;
 73 |   background-color: #232f3e;
 74 | }
 75 | 
 76 | .section-categories h2 {
 77 |   color: #eb8f05;
 78 | }
 79 | 
 80 | .categories-list {
 81 |   margin-top: 20px;
 82 |   color: #d2d2d2;
 83 |   list-style-type: none;
 84 | }
 85 | 
 86 | .categories-list li {
 87 |   margin-bottom: 10px;
 88 | }
 89 | 
 90 | .section-titles {
 91 |   display: flex;
 92 |   flex-direction: column;
 93 |   align-items: center;
 94 |   background-color: #ccc;
 95 | }
 96 | 
 97 | .section-titles h2 {
 98 |   margin-bottom: 60px;
 99 |   color: #555;
100 | }
101 | 
102 | .title-card {
103 |   display: flex;
104 |   flex-direction: column;
105 |   margin-bottom: 40px;
106 | }
107 | 
108 | .title-card-img {
109 |   width: 300px;
110 |   border-radius: 10px 10px 0 0;
111 | }
112 | 
113 | .title-card-description {
114 |   background-color: #ddd;
115 |   width: 300px;
116 |   padding: 15px;
117 |   display: flex;
118 |   flex-direction: column;
119 |   justify-content: center;
120 |   border-radius: 0 0 10px 10px;
121 | }
122 | 
123 | .title-price {
124 |   color: #5aa04e;
125 |   font-weight: 700;
126 |   margin-top: 10px;
127 |   font-size: 28px;
128 | }
129 | 
130 | .title-price span {
131 |   font-size: 18px;
132 | }
133 | 
134 | .section-about {
135 |   display: flex;
136 |   flex-direction: column;
137 |   align-items: center;
138 |   background-color: #232f3e;
139 |   color: #d2d2d2;
140 | }
141 | 
142 | .section-about h2 {
143 |   color: #eb8f05;
144 | }
145 | 
146 | .section-about h3 {
147 |   margin: 15px 0;
148 | }
149 | 
150 | .section-about p {
151 |   text-align: center;
152 | }
153 | 
154 | .footer-content {
155 |   width: 100%;
156 |   max-width: 960px;
157 |   margin: 0 auto;
158 |   display: flex;
159 |   justify-content: space-between;
160 |   align-items: center;
161 | }
162 | 
163 | .footer-content h2 {
164 |   font-size: 16px;
165 |   margin-bottom: 10px;
166 | }
167 | 
168 | .footer-content a {
169 |   font-size: 12px;
170 | }
171 | 
172 | .footer-content address {
173 |   font-size: 12px;
174 | }
175 | 
176 | @media(min-width: 576px) {
177 |   .menu-items {
178 |     display: flex;
179 |     align-items: center;
180 |     list-style-type: none;
181 |   }
182 | 
183 |   .title-card {
184 |     flex-direction: row;
185 |   }
186 | 
187 |   .title-card-img {
188 |     width: 200px;
189 |     border-radius: 10px 0 0 10px;
190 |   }
191 | 
192 |   .title-card-description {
193 |     border-radius: 0 10px 10px 0;
194 |   }
195 | }
196 | 


--------------------------------------------------------------------------------
/projeto-lojatop/img/book1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-lojatop/img/book1.jpg


--------------------------------------------------------------------------------
/projeto-lojatop/img/book2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-lojatop/img/book2.jpg


--------------------------------------------------------------------------------
/projeto-lojatop/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Loja Top</title>
 8 | 
 9 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11 |     <link
12 |       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
13 |       rel="stylesheet"
14 |     />
15 | 
16 |     <link rel="stylesheet" href="css/styles.css" />
17 | 
18 |   </head>
19 |   <body>
20 |     <header>
21 |       <nav class="nav-main">
22 |         <h1 class="nav-brand">Loja Top</h1>
23 |         <ul class="menu-items">
24 |           <li><a href="#categories">Categorias</a></li>
25 |           <li><a href="#titles">Títulos</a></li>
26 |           <li><a href="#about">Sobre nós</a></li>
27 |         </ul>
28 |       </nav>
29 |     </header>
30 |     <main>
31 |       <section id="categories" class="section-categories">
32 |         <h2>Categorias</h2>
33 |         <ul class="categories-list">
34 |           <li>Fantasia</li>
35 |           <li>Educação</li>
36 |         </ul>
37 |       </section>
38 |       <section id="titles" class="section-titles">
39 |         <h2>Títulos</h2>
40 |         <div class="title-card">
41 |           <img class="title-card-img" src="img/book1.jpg" alt="O senhor dos anéis" />
42 |           <div class="title-card-description">
43 |             <h3>O senhor dos anéis</h3>
44 |             <p>Navegue por essa grande aventura</p>
45 |             <p class="title-price"><span>R$ </span>389.99</p>
46 |           </div>
47 |         </div>
48 |         <div class="title-card">
49 |           <img class="title-card-img" src="img/book2.jpg" alt="Rails for dummies" />
50 |           <div class="title-card-description">
51 |             <h3>Rails for dummies</h3>
52 |             <p>Aprenda esta fantástica ferramenta</p>
53 |             <p class="title-price"><span>R$ </span>250.49</p>
54 |           </div>
55 |         </div>
56 |       </section>
57 |       <section id="about" class="section-about">
58 |         <h2>Sobre nós</h2>
59 |         <h3>O que fazemos</h3>
60 |         <p>Ajudamos pessoas a se tornarem desenvolvedores profissionais</p>
61 |         <h3>Saiba mais</h3>
62 |         <iframe
63 |           width="320"
64 |           height="180"
65 |           src="https://www.youtube.com/embed/6PBJUxIiRBI"
66 |           frameborder="0"
67 |           allowfullscreen
68 |           >Lalala</iframe
69 |         >
70 |       </section>
71 |     </main>
72 |     <footer>
73 |       <div class="footer-content">
74 |         <div>
75 |           <h2>Siga-nos</h2>
76 |           <a href="https://www.youtube.com/devsuperior">Youtube</a>
77 |           <a href="https://www.instagram.com/devsuperior.ig">Instagram</a>
78 |         </div>
79 |         <div>
80 |           <h2>Entre em contato</h2>
81 |           <address>
82 |             Escreva para nosso <a href="mailto:contato@devsuperior.com">email</a>.<br>
83 |             Até a próxima!
84 |           </address>
85 |         </div>
86 |       </div>
87 |     </footer>
88 |   </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/projeto-profile/README.md:
--------------------------------------------------------------------------------
1 | # Design
2 | 
3 | https://www.figma.com/file/qK6kajJIEgfU5PZZYsYnlG/Projeto-Profile
4 | 


--------------------------------------------------------------------------------
/projeto-profile/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* ELEMENTS */
  2 | 
  3 | * {
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | html, body {
  8 |     padding: 0;
  9 |     margin: 0;
 10 |     font-family: "Montserrat", sans-serif;
 11 | }
 12 | 
 13 | footer {
 14 |     height: 120px;
 15 |     background-color: #2C3E50;
 16 |     display: flex;
 17 |     flex-direction: column;
 18 |     align-items: center;
 19 | }
 20 | 
 21 | /* CLASSES, IDS */
 22 | 
 23 | .nav-container {
 24 |     background-color: #2C3E50;
 25 |     height: 100px;
 26 |     width: 100%;
 27 |     padding: 20px;
 28 |     position: fixed;
 29 | }
 30 | 
 31 | .nav-main {
 32 |     width: 100%;
 33 |     max-width: 960px;
 34 |     margin: 0 auto;
 35 |     display: flex;
 36 |     flex-direction: column;
 37 |     align-items: center;
 38 | }
 39 | 
 40 | .nav-main a {
 41 |     color: #FFF;
 42 |     text-transform: uppercase;
 43 |     text-decoration: none;
 44 | }
 45 | 
 46 | .menu-items {
 47 |     display: flex;
 48 |     list-style-type: none;
 49 |     margin: 0;
 50 |     padding: 0;
 51 | }
 52 | 
 53 | .menu-items li {
 54 |     margin: 10px;
 55 |     font-size: 14px;
 56 | }
 57 | 
 58 | .nav-brand {
 59 |     font-size: 18px;
 60 |     font-weight: 700;
 61 |     margin-bottom: 5px;
 62 | }
 63 | 
 64 | .profile-container {
 65 |     background-color: #1ABC9C;
 66 |     color: #FFF;
 67 |     padding: 160px 0 60px 0;
 68 |     display: flex;
 69 |     flex-direction: column;
 70 |     align-items: center;
 71 | }
 72 | 
 73 | .profile-avatar img {
 74 |     width: 150px;
 75 | }
 76 | 
 77 | .profile-title {
 78 |     margin: 35px 0 0 0;
 79 |     font-size: 2rem;
 80 | }
 81 | 
 82 | .profile-description {
 83 |     margin: 0;
 84 |     font-size: 1rem;
 85 | }
 86 | 
 87 | #portfolio {
 88 |     width: 100%;
 89 |     max-width: 960px;
 90 |     margin: 0 auto;
 91 | }
 92 | 
 93 | .portfolio-title {
 94 |     font-size: 2rem;
 95 |     text-transform: uppercase;
 96 |     text-align: center;
 97 |     color: #2C3E50;
 98 |     margin: 60px 0 10px 0;
 99 | }
100 | 
101 | .portfolio-container {
102 |     display: flex;
103 |     justify-content: center;
104 |     flex-wrap: wrap;
105 | }
106 | 
107 | .portfolio-item {
108 |     width: calc(100% - 40px);
109 |     max-width: 420px;
110 |     border-radius: 10px;
111 |     cursor: pointer;
112 |     margin: 20px;
113 | }
114 | 
115 | .footer-title {
116 |     color: #FFF;
117 |     font-size: 14px;
118 |     margin-top: 30px;
119 | }
120 | 
121 | .social-container img {
122 |     width: 32px;
123 |     height: 32px;
124 |     margin: 10px;
125 | }
126 | 
127 | @media(min-width: 576px) {
128 | 
129 |     html {
130 |         font-size: 20px;
131 |     }
132 | }
133 | 
134 | @media(min-width: 768px) {
135 | 
136 |     html {
137 |         font-size: 24px;
138 |     }
139 | 
140 |     .portfolio-item {
141 |         width: 280px;
142 |     }
143 | 
144 |     .nav-container {
145 |         display: flex;
146 |     }
147 | 
148 |     .nav-main {
149 |         flex-direction: row;
150 |         justify-content: space-between;
151 |     }
152 | 
153 |     .nav-brand {
154 |         font-size: 30px;
155 |         margin-bottom: 0;
156 |     }
157 | 
158 |     .menu-items li {
159 |         font-size: 18px;
160 |     }
161 | }
162 | 


--------------------------------------------------------------------------------
/projeto-profile/img/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/instagram.png


--------------------------------------------------------------------------------
/projeto-profile/img/portfolio1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/portfolio1.png


--------------------------------------------------------------------------------
/projeto-profile/img/portfolio2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/portfolio2.png


--------------------------------------------------------------------------------
/projeto-profile/img/portfolio3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/portfolio3.png


--------------------------------------------------------------------------------
/projeto-profile/img/portfolio4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/portfolio4.png


--------------------------------------------------------------------------------
/projeto-profile/img/portfolio5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/portfolio5.png


--------------------------------------------------------------------------------
/projeto-profile/img/portfolio6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/portfolio6.png


--------------------------------------------------------------------------------
/projeto-profile/img/profile.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="iso-8859-1"?>
  2 | <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  5 | 	 viewBox="0 0 188.149 188.149" style="enable-background:new 0 0 188.149 188.149;" xml:space="preserve">
  6 | <g>
  7 | 	<defs>
  8 | 		<circle id="SVGID_1_" cx="94.075" cy="94.075" r="94.074"/>
  9 | 	</defs>
 10 | 	<use xlink:href="#SVGID_1_"  style="overflow:visible;fill:#2C3E50;"/>
 11 | 	<clipPath id="SVGID_2_">
 12 | 		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
 13 | 	</clipPath>
 14 | 	<g style="clip-path:url(#SVGID_2_);">
 15 | 		<path style="fill:#141720;" d="M151.952,66.682c0,1.625-0.072,3.229-0.195,4.822c-0.227,2.704-0.638,5.346-1.213,7.927
 16 | 			c-0.802,3.588-1.943,7.043-3.383,10.333c-1.357,3.136-2.992,6.127-4.863,8.934c-1.49,2.242-3.136,4.37-4.914,6.374
 17 | 			c-0.442,0.494-0.885,0.977-1.337,1.45c-1.48,1.573-3.054,3.043-4.698,4.421c-0.422,0.36-0.843,0.71-1.275,1.049
 18 | 			c-2.046,1.634-4.215,3.136-6.477,4.472c-0.699,0.422-1.419,0.823-2.139,1.214c-5.799,3.125-12.194,5.284-18.959,6.261
 19 | 			c-2.745,0.411-5.563,0.617-8.42,0.617c-2.817,0-5.583-0.206-8.287-0.597c-6.827-0.977-13.273-3.146-19.113-6.281
 20 | 			c-0.956-0.524-1.902-1.06-2.817-1.625c-2.787-1.707-5.408-3.64-7.855-5.788c-0.268-0.227-0.545-0.463-0.802-0.709
 21 | 			c-1.83-1.655-3.557-3.434-5.161-5.315c-0.298-0.35-0.596-0.699-0.884-1.059c-2.416-2.971-4.545-6.179-6.343-9.592
 22 | 			c-0.175-0.329-0.339-0.658-0.504-0.987c-1.398-2.786-2.581-5.706-3.527-8.729c-0.185-0.606-0.36-1.213-0.524-1.82
 23 | 			c-0.864-3.126-1.471-6.354-1.789-9.674c-0.051-0.555-0.103-1.11-0.144-1.676c-0.082-1.327-0.134-2.673-0.134-4.021
 24 | 			c0-0.812,0.021-1.614,0.052-2.416c0.01-0.401,0.031-0.791,0.062-1.192c0.154-2.622,0.493-5.203,0.997-7.721
 25 | 			c0.113-0.566,0.236-1.131,0.36-1.687c0.463-2.005,1.028-3.979,1.697-5.891c0.236-0.699,0.493-1.398,0.761-2.077
 26 | 			c0.812-2.108,1.758-4.154,2.807-6.128c0.833-1.573,1.738-3.105,2.714-4.585c0.627-0.966,1.285-1.902,1.974-2.827
 27 | 			c0.75-1.018,1.542-2.005,2.365-2.961c1.439-1.697,2.971-3.3,4.585-4.792c0.555-0.524,1.11-1.028,1.686-1.521
 28 | 			c2.169-1.881,4.472-3.599,6.909-5.13c0.822-0.524,1.655-1.028,2.508-1.501c1.234-0.699,2.498-1.358,3.794-1.964
 29 | 			c0.802-0.38,1.614-0.74,2.437-1.08c2.426-1.007,4.924-1.851,7.505-2.529c1.295-0.339,2.611-0.627,3.948-0.873
 30 | 			c2.015-0.38,4.061-0.658,6.148-0.823c1.048-0.082,2.107-0.134,3.177-0.154c0.463-0.01,0.925-0.02,1.398-0.02
 31 | 			c1.11,0,2.21,0.031,3.3,0.093c0.699,0.041,1.398,0.092,2.087,0.154c2.91,0.268,5.747,0.751,8.503,1.44
 32 | 			c0.638,0.154,1.265,0.319,1.892,0.494c3.115,0.884,6.117,2.015,8.996,3.382c0.822,0.391,1.625,0.792,2.427,1.224
 33 | 			c1.501,0.791,2.95,1.655,4.369,2.581c0.247,0.165,0.504,0.329,0.751,0.494c1.974,1.336,3.876,2.796,5.665,4.37
 34 | 			c1.192,1.018,2.323,2.097,3.413,3.229c1.707,1.737,3.301,3.578,4.761,5.521c0.298,0.38,0.586,0.761,0.852,1.151
 35 | 			c1.44,1.995,2.745,4.071,3.918,6.241c0.216,0.391,0.421,0.792,0.616,1.182c1.923,3.753,3.444,7.732,4.514,11.896
 36 | 			c0.545,2.118,0.967,4.277,1.265,6.477C151.768,61.336,151.952,63.989,151.952,66.682z"/>
 37 | 		<path style="fill:#141720;" d="M58.639,105.803c0,0.051,0,0.103-0.01,0.154c-0.051,1.861-1.09,3.465-2.622,4.308
 38 | 			c-0.196,0.113-0.391,0.216-0.607,0.288c-0.576,0.237-1.213,0.36-1.871,0.36c-2.817,0-5.1-2.292-5.1-5.11
 39 | 			c0-0.483,0.072-0.956,0.195-1.408c0.124-0.432,0.309-0.843,0.535-1.213c0.884-1.48,2.509-2.478,4.37-2.478
 40 | 			c0.462,0,0.905,0.062,1.326,0.175c0.658,0.164,1.254,0.462,1.769,0.863c0.442,0.339,0.822,0.74,1.141,1.203
 41 | 			C58.32,103.757,58.639,104.744,58.639,105.803z"/>
 42 | 		<path style="fill:#141720;" d="M44.646,50.767c0,0.987-0.288,1.913-0.782,2.694c-0.895,1.45-2.498,2.406-4.328,2.406
 43 | 			c-0.802,0-1.553-0.185-2.231-0.514c-0.37-0.175-0.709-0.401-1.018-0.648c-1.131-0.936-1.851-2.354-1.851-3.938
 44 | 			c0-2.282,1.491-4.205,3.537-4.863c0.494-0.165,1.018-0.247,1.563-0.247c0.195,0,0.391,0.011,0.586,0.042
 45 | 			c2.282,0.247,4.102,2.005,4.452,4.256C44.625,50.222,44.646,50.489,44.646,50.767z"/>
 46 | 		<path style="fill:#141720;" d="M73.249,16.664c0,1.11-0.36,2.149-0.957,2.981c-0.699,0.977-1.748,1.696-2.95,1.984
 47 | 			c-0.381,0.093-0.782,0.144-1.193,0.144c-2.447,0-4.493-1.717-4.986-4.02c-0.082-0.35-0.124-0.72-0.124-1.09
 48 | 			c0-0.452,0.062-0.884,0.175-1.295c0.566-2.19,2.57-3.804,4.935-3.804c0.545,0,1.059,0.082,1.552,0.237
 49 | 			c0.853,0.277,1.604,0.761,2.201,1.408C72.735,14.114,73.249,15.327,73.249,16.664z"/>
 50 | 		<circle style="fill:#141720;" cx="121.308" cy="18.853" r="5.104"/>
 51 | 		<path style="fill:#141720;" d="M43.597,67.68c0,0.648-0.124,1.275-0.35,1.84c-0.74,1.912-2.591,3.27-4.76,3.27
 52 | 			c-0.72,0-1.399-0.144-2.015-0.411c-0.422-0.185-0.812-0.432-1.172-0.709c-1.162-0.936-1.912-2.375-1.912-3.989
 53 | 			c0-1.738,0.864-3.27,2.19-4.195c0.226-0.154,0.473-0.298,0.73-0.411c0.658-0.319,1.398-0.494,2.18-0.494
 54 | 			c2.159,0,4.01,1.336,4.75,3.229C43.474,66.384,43.597,67.021,43.597,67.68z"/>
 55 | 		<circle style="fill:#141720;" cx="133.152" cy="107.931" r="5.104"/>
 56 | 		<circle style="fill:#141720;" cx="138.402" cy="101.993" r="5.104"/>
 57 | 		<circle style="fill:#141720;" cx="126.407" cy="112.201" r="5.104"/>
 58 | 		<path style="fill:#141720;" d="M99.579,10.135c0,1.902-1.038,3.558-2.581,4.432c-0.75,0.432-1.614,0.678-2.529,0.678
 59 | 			c-0.134,0-0.257,0-0.391-0.021c-0.998-0.072-1.913-0.432-2.663-1.007c-1.244-0.925-2.046-2.416-2.046-4.082
 60 | 			c0-0.401,0.041-0.781,0.134-1.151c0.267-1.193,0.966-2.221,1.912-2.92c0.75-0.576,1.665-0.936,2.663-1.007
 61 | 			c0.134-0.021,0.257-0.021,0.391-0.021c1.748,0,3.29,0.874,4.205,2.21c0.37,0.535,0.648,1.152,0.792,1.81
 62 | 			C99.538,9.405,99.579,9.765,99.579,10.135z"/>
 63 | 		<circle style="fill:#141720;" cx="143.506" cy="35.72" r="5.104"/>
 64 | 		<path style="fill:#141720;" d="M56.007,96.889c0,0.833-0.134,1.624-0.391,2.375c-0.185,0.576-0.442,1.11-0.761,1.614
 65 | 			c-1.059,1.696-2.786,2.94-4.812,3.362c-0.452,0.102-0.936,0.154-1.419,0.154c-0.041,0.01-0.092,0.01-0.133,0.01
 66 | 			c-4.154,0-7.526-3.362-7.526-7.516c0-1.224,0.298-2.386,0.813-3.403c0.154-0.309,0.329-0.606,0.535-0.884
 67 | 			c1.357-1.954,3.619-3.238,6.179-3.238c0.216,0,0.432,0.01,0.647,0.031c1.552,0.133,2.972,0.74,4.112,1.676
 68 | 			C54.938,92.447,56.007,94.545,56.007,96.889z"/>
 69 | 		<path style="fill:#141720;" d="M70.185,108.641c0,3.31-2.138,6.118-5.11,7.115c-0.391,0.134-0.791,0.236-1.213,0.298
 70 | 			c-0.391,0.072-0.792,0.103-1.203,0.103c-3.496,0-6.426-2.375-7.259-5.603c-0.092-0.318-0.165-0.658-0.195-0.997
 71 | 			c-0.041-0.298-0.062-0.607-0.062-0.915c0-2.077,0.843-3.948,2.19-5.305c0.144-0.144,0.288-0.278,0.432-0.391
 72 | 			c1.316-1.152,3.023-1.83,4.894-1.83C66.813,101.115,70.185,104.487,70.185,108.641z"/>
 73 | 		<path style="fill:#141720;" d="M52.162,42.429c0,4.154-3.362,7.526-7.516,7.526h-0.072c-2.025-0.021-3.866-0.843-5.212-2.18
 74 | 			c-0.556-0.535-1.028-1.172-1.388-1.871c-0.545-1.039-0.854-2.221-0.854-3.475c0-3.115,1.902-5.788,4.606-6.919
 75 | 			c0.894-0.391,1.882-0.596,2.92-0.596c0.339,0,0.668,0.021,0.997,0.072c3.331,0.432,5.963,3.043,6.426,6.364
 76 | 			C52.131,41.699,52.162,42.059,52.162,42.429z"/>
 77 | 		<circle style="fill:#141720;" cx="113.786" cy="15.242" r="7.521"/>
 78 | 		<path style="fill:#141720;" d="M84.476,13.744c0,0.966-0.185,1.892-0.524,2.745c-1.09,2.796-3.814,4.781-7.002,4.781
 79 | 			c-1.758,0-3.383-0.607-4.658-1.625c-1.614-1.265-2.683-3.177-2.827-5.356c-0.021-0.175-0.031-0.36-0.031-0.545
 80 | 			c0-0.668,0.092-1.326,0.267-1.943c0.843-3.208,3.763-5.573,7.248-5.573c1.162,0,2.262,0.268,3.239,0.74
 81 | 			c1.316,0.617,2.416,1.604,3.167,2.838C84.065,10.947,84.476,12.294,84.476,13.744z"/>
 82 | 		<path style="fill:#141720;" d="M48.43,76.666c0,1.789-0.627,3.434-1.676,4.719c-1.378,1.706-3.485,2.796-5.85,2.796
 83 | 			c-0.73,0-1.45-0.103-2.118-0.309c-0.524-0.144-1.038-0.359-1.511-0.627c-2.313-1.275-3.886-3.742-3.886-6.58
 84 | 			c0-1.922,0.72-3.671,1.912-4.997c0.298-0.36,0.648-0.689,1.028-0.966c1.265-0.987,2.858-1.563,4.575-1.563
 85 | 			c0.822,0,1.604,0.134,2.344,0.38C46.25,70.497,48.43,73.335,48.43,76.666z"/>
 86 | 		<circle style="fill:#141720;" cx="134.066" cy="30.285" r="7.521"/>
 87 | 		<circle style="fill:#141720;" cx="145.111" cy="46.687" r="7.522"/>
 88 | 		<path style="fill:#141720;" d="M69.434,22.76c0,4.154-3.372,7.526-7.526,7.526c-0.607,0-1.193-0.072-1.758-0.216
 89 | 			c-2.776-0.658-4.956-2.868-5.583-5.665c-0.124-0.524-0.185-1.08-0.185-1.645c0-0.133,0-0.267,0.021-0.401
 90 | 			c0.195-3.968,3.485-7.115,7.505-7.115c0.442,0,0.884,0.041,1.306,0.123c0.884,0.144,1.717,0.453,2.457,0.884
 91 | 			c1.943,1.121,3.331,3.074,3.671,5.377C69.404,22,69.434,22.37,69.434,22.76z"/>
 92 | 		<path style="fill:#141720;" d="M49.622,86.885c0,0.884-0.174,1.737-0.483,2.509c-0.997,2.457-3.414,4.195-6.23,4.195h-0.092
 93 | 			c-0.36-0.01-0.699-0.041-1.039-0.103c-3.167-0.535-5.583-3.29-5.583-6.601c0-1.347,0.391-2.591,1.08-3.64
 94 | 			c0.278-0.432,0.607-0.832,0.987-1.193c1.203-1.172,2.837-1.881,4.647-1.881c1.429,0,2.755,0.453,3.845,1.213
 95 | 			C48.492,82.598,49.622,84.603,49.622,86.885z"/>
 96 | 		<path style="fill:#141720;" d="M55.143,35.715c0,2.365-1.224,4.441-3.074,5.634c-1.049,0.689-2.303,1.079-3.64,1.079
 97 | 			c-2.272,0-4.277-1.131-5.501-2.858c-0.761-1.09-1.213-2.426-1.213-3.855c0-0.072,0-0.134,0.01-0.206
 98 | 			c0.083-3.064,2.242-5.604,5.11-6.302c0.504-0.134,1.039-0.196,1.594-0.196c0.535,0,1.059,0.062,1.553,0.186
 99 | 			c2.899,0.688,5.068,3.249,5.151,6.323C55.143,35.581,55.143,35.653,55.143,35.715z"/>
100 | 		<circle style="fill:#141720;" cx="103.253" cy="12.143" r="6.71"/>
101 | 		<path style="fill:#141720;" d="M47.679,59.496c0,1.121-0.267,2.169-0.75,3.095c-0.771,1.491-2.087,2.653-3.691,3.218
102 | 			c-0.709,0.257-1.48,0.401-2.272,0.401c-1.84,0-3.506-0.74-4.719-1.943c-0.247-0.246-0.473-0.504-0.669-0.781
103 | 			c-0.833-1.11-1.316-2.488-1.316-3.989c0-1.881,0.771-3.578,2.025-4.791c0.411-0.411,0.874-0.761,1.377-1.039
104 | 			c0.977-0.555,2.098-0.874,3.3-0.874c1.039,0,2.025,0.236,2.899,0.668c0.946,0.442,1.769,1.1,2.406,1.923
105 | 			C47.155,56.514,47.679,57.943,47.679,59.496z"/>
106 | 		<circle style="fill:#141720;" cx="149.53" cy="65.179" r="6.709"/>
107 | 		<circle style="fill:#141720;" cx="145.111" cy="83.371" r="6.709"/>
108 | 		<path style="fill:#141720;" d="M60.243,29.011c0,0.36-0.031,0.72-0.093,1.059c-0.411,2.673-2.416,4.812-5.017,5.449
109 | 			c-0.514,0.134-1.049,0.195-1.604,0.195c-2.56,0-4.791-1.44-5.912-3.557c-0.483-0.884-0.761-1.882-0.782-2.951
110 | 			c-0.01-0.062-0.01-0.134-0.01-0.196c0-3.711,3.002-6.713,6.704-6.713c0.298,0,0.586,0.021,0.874,0.062
111 | 			c0.647,0.083,1.275,0.257,1.851,0.524C58.608,23.912,60.243,26.267,60.243,29.011z"/>
112 | 		<circle style="fill:#141720;" cx="129.223" cy="23.847" r="6.71"/>
113 | 		<path style="fill:#141720;" d="M92.804,10.135c0,1.532-0.514,2.951-1.388,4.082c-1.224,1.604-3.146,2.632-5.315,2.632
114 | 			c-0.751,0-1.48-0.124-2.149-0.36c-2.498-0.833-4.328-3.095-4.544-5.809c-0.011-0.185-0.021-0.36-0.021-0.545
115 | 			c0-1.141,0.288-2.221,0.802-3.167c1.121-2.107,3.352-3.537,5.912-3.537c2.169,0,4.092,1.028,5.315,2.632
116 | 			c0.617,0.792,1.059,1.738,1.265,2.766C92.763,9.251,92.804,9.683,92.804,10.135z"/>
117 | 		<path style="fill:#B08874;" d="M148.611,197.626v0.011H39.536v-0.011c0-15.124,6.148-28.798,16.101-38.668
118 | 			c0.37-0.37,0.74-0.73,1.121-1.09c1.521-1.419,3.115-2.756,4.781-3.999c0.514-0.381,1.038-0.762,1.563-1.121
119 | 			c1.08-0.74,2.19-1.449,3.321-2.107c0.535-0.319,1.08-0.628,1.625-0.926c0.01-0.021,0.031-0.021,0.031-0.021
120 | 			c0.442-0.236,0.874-0.493,1.306-0.761c0.329-0.185,0.647-0.38,0.956-0.597c0.946-0.607,1.871-1.265,2.745-1.963v-0.011
121 | 			c4.966-3.958,8.811-9.253,10.991-15.35c0.812-2.252,1.388-4.617,1.717-7.054c0.195-1.501,0.298-3.032,0.298-4.585l7.989,0.041
122 | 			l8.132,0.041c0,1.522,0.103,3.013,0.288,4.482c0.318,2.427,0.884,4.791,1.676,7.032c2.169,6.107,5.994,11.423,10.949,15.412
123 | 			c0.37,0.288,0.74,0.576,1.121,0.854c0,0,0.01,0,0.021,0.011c0.288,0.226,0.586,0.432,0.885,0.627
124 | 			c0.082,0.071,0.174,0.134,0.267,0.185c0.082,0.062,0.154,0.113,0.236,0.165c0.031,0.021,0.062,0.041,0.093,0.062
125 | 			c0.339,0.226,0.689,0.442,1.038,0.658c0.422,0.257,0.853,0.514,1.285,0.75c0.072,0.021,0.134,0.052,0.186,0.093
126 | 			c0.483,0.268,0.967,0.545,1.439,0.833c0.627,0.359,1.244,0.74,1.851,1.131c1.079,0.699,2.118,1.419,3.146,2.2h0.021
127 | 			c2.076,1.552,4.04,3.249,5.87,5.079C142.493,168.9,148.611,182.533,148.611,197.626z"/>
128 | 		<path style="fill:#EFC7A1;" d="M148.611,197.626H39.536c0-15.124,6.148-28.798,16.101-38.668c0.37-0.37,0.74-0.73,1.121-1.09
129 | 			c1.521-1.419,3.115-2.756,4.781-3.999c0.514-0.381,1.038-0.762,1.563-1.121c1.08-0.74,2.18-1.449,3.31-2.118
130 | 			c0.535-0.318,1.08-0.627,1.625-0.925c0.021-0.021,0.041-0.011,0.041-0.011v-0.01c0.874-0.483,1.737-1.008,2.57-1.563
131 | 			c0.391-0.257,0.771-0.524,1.151-0.812c0.041-0.02,0.072-0.052,0.113-0.072c0.277-0.206,0.555-0.422,0.833-0.647
132 | 			c0.103-0.083,0.206-0.165,0.309-0.247h0.01c0.01,0.011,0.01,0.011,0.021,0.02c0.658,0.679,1.357,1.316,2.077,1.933
133 | 			c0,0.011,0,0.011,0.01,0.011c1.82,1.532,3.825,2.848,5.984,3.907c3.886,1.912,8.256,2.991,12.882,3.002h0.083
134 | 			c8.225,0,15.659-3.394,21.004-8.832l0.011-0.01l0.01-0.011c0.381,0.318,0.771,0.617,1.173,0.915
135 | 			c0.267,0.206,0.545,0.401,0.833,0.597c0.082,0.062,0.174,0.123,0.267,0.185c0.082,0.062,0.154,0.113,0.236,0.165
136 | 			c0.031,0.021,0.062,0.041,0.093,0.062c0.339,0.226,0.689,0.442,1.038,0.658c0.422,0.257,0.853,0.503,1.285,0.74
137 | 			c0.072,0.021,0.124,0.062,0.186,0.092c0.483,0.268,0.977,0.545,1.449,0.833c0.628,0.37,1.244,0.751,1.841,1.142
138 | 			c1.079,0.688,2.118,1.419,3.146,2.189h0.021c2.076,1.553,4.04,3.26,5.87,5.09C142.493,168.9,148.611,182.533,148.611,197.626z"/>
139 | 		<g>
140 | 			<path style="fill:#543E36;" d="M121.704,150.609l-0.01,0.011l-1.121,1.141c-7.053,7.186-16.46,11.135-26.495,11.146
141 | 				c-0.01,0-0.01,0-0.021,0c-10.148-0.021-19.545-3.989-26.567-11.166l-1.069-1.1l-0.01-0.011c0.535-0.318,1.08-0.627,1.625-0.925
142 | 				c0.021-0.021,0.041-0.011,0.041-0.011v-0.01c0.442-0.247,0.874-0.494,1.306-0.751c0.318-0.195,0.637-0.391,0.956-0.597
143 | 				c0.103-0.071,0.206-0.144,0.309-0.216c0.391-0.257,0.781-0.524,1.151-0.812c0.041-0.02,0.072-0.052,0.113-0.072
144 | 				c0.277-0.216,0.565-0.432,0.833-0.647c0.103-0.083,0.206-0.165,0.309-0.247c0.01,0.011,0.01,0.011,0.02,0.02h0.01v0.011
145 | 				c0.658,0.678,1.347,1.315,2.077,1.922c0,0.011,0,0.011,0.01,0.011c1.82,1.532,3.825,2.858,5.984,3.907
146 | 				c3.886,1.912,8.256,2.991,12.882,3.002h0.083c8.225,0,15.659-3.394,21.004-8.832l0.011-0.01l0.01-0.011
147 | 				c0.36,0.298,0.72,0.586,1.101,0.874c0,0,0.01,0,0.021,0.011c0.011,0.01,0.031,0.02,0.052,0.03
148 | 				c0.267,0.206,0.545,0.401,0.833,0.597c0.082,0.062,0.174,0.123,0.267,0.185c0.082,0.062,0.154,0.113,0.236,0.165
149 | 				c0.031,0.021,0.062,0.041,0.093,0.062c0.339,0.226,0.689,0.442,1.038,0.658c0.422,0.257,0.853,0.503,1.285,0.74
150 | 				c0.072,0.021,0.124,0.062,0.186,0.092C120.739,150.044,121.232,150.321,121.704,150.609z"/>
151 | 		</g>
152 | 		<path style="fill:#B08874;" d="M135.934,56.412v24.51c0,2.303-0.164,4.575-0.473,6.806c-0.751,5.552-2.406,10.827-4.688,15.689
153 | 			c-0.668,1.429-1.388,2.828-2.159,4.185c-0.175,0.309-0.35,0.617-0.525,0.915c-1.563,2.632-3.3,5.12-5.161,7.413
154 | 			c-0.473,0.597-0.966,1.183-1.47,1.748c-5.274,6.056-11.402,10.672-17.283,13.293c-3.526,1.563-6.981,2.417-10.096,2.417
155 | 			c-3.095,0-6.508-0.833-10.004-2.375c-5.912-2.612-12.081-7.249-17.396-13.335c-0.545-0.628-1.08-1.265-1.604-1.923
156 | 			c-2.395-2.981-4.585-6.271-6.446-9.798c-0.453-0.864-0.884-1.737-1.295-2.622c-0.247-0.524-0.483-1.059-0.709-1.594
157 | 			c-0.36-0.812-0.689-1.645-1.008-2.478c-0.987-2.632-1.789-5.377-2.365-8.194c-0.226-1.1-0.421-2.211-0.565-3.342
158 | 			c-0.309-2.231-0.473-4.503-0.473-6.806v-24.51H135.934z"/>
159 | 		<path style="fill:#141720;" d="M51.189,87.938L51.189,87.938c3.072,0,5.562-2.49,5.562-5.562V55.67h-5.562V87.938z"/>
160 | 		<path style="fill:#141720;" d="M131.4,55.67h5.561v32.269l0,0c-3.071,0-5.561-2.49-5.561-5.562V55.67z"/>
161 | 		<circle style="fill:#141720;" cx="83.661" cy="57.387" r="6.71"/>
162 | 		<circle style="fill:#141720;" cx="68.146" cy="55.868" r="6.71"/>
163 | 		<circle style="fill:#141720;" cx="52.217" cy="58.47" r="6.71"/>
164 | 		<circle style="fill:#141720;" cx="103.253" cy="56.661" r="6.71"/>
165 | 		<circle style="fill:#141720;" cx="123.541" cy="56.661" r="6.71"/>
166 | 		<circle style="fill:#141720;" cx="137.462" cy="63.018" r="6.709"/>
167 | 		<circle style="fill:#141720;" cx="94.075" cy="57.892" r="5.104"/>
168 | 		<circle style="fill:#141720;" cx="59.49" cy="57.387" r="5.104"/>
169 | 		<circle style="fill:#141720;" cx="76.951" cy="57.387" r="5.104"/>
170 | 		<circle style="fill:#141720;" cx="113.786" cy="58.992" r="5.104"/>
171 | 		<circle style="fill:#141720;" cx="130.251" cy="58.992" r="5.104"/>
172 | 		<path style="fill:#1A1A1A;" d="M129.303,69.095c0-0.164-0.124-0.308-0.288-0.329c-1.419-0.216-7.783-1.09-14.62-1.09
173 | 			c-7.772,0-17.797,2.436-19.545,2.436h-1.553c-0.812,0-3.423-0.535-6.765-1.09c-3.835-0.647-8.627-1.347-12.77-1.347
174 | 			c-5.007,0-9.768,0.473-12.502,0.802c-1.007,0.124-1.737,0.226-2.118,0.288c-0.175,0.021-0.298,0.165-0.298,0.329l-0.082,4.174
175 | 			c0,0.154,0.092,0.278,0.226,0.339l0.473,0.165c0.699,0.267,0.638,12.841,4.391,15.987c2.231,1.851,4.215,2.91,12.563,2.91
176 | 			c4.843,0,7.886-1.306,10.775-5.202c2.087-2.796,3.928-9.418,3.928-9.418c0.565-2.725,2.591-2.941,2.919-2.961
177 | 			c0.021,0,0.042,0,0.042,0c0.062,0,2.354,0.041,2.951,2.961c0,0,1.851,6.621,3.928,9.418c2.889,3.896,5.932,5.202,10.774,5.202
178 | 			c8.349,0,10.333-1.059,12.563-2.91c3.753-3.146,3.691-15.72,4.391-15.987l0.473-0.165c0.134-0.062,0.226-0.185,0.226-0.339
179 | 			L129.303,69.095z"/>
180 | 	</g>
181 | 	<circle style="clip-path:url(#SVGID_2_);fill:#141720;" cx="144.234" cy="92.913" r="7.521"/>
182 | 	<circle style="clip-path:url(#SVGID_2_);fill:#141720;" cx="151.755" cy="55.763" r="5.104"/>
183 | 	<circle style="clip-path:url(#SVGID_2_);fill:#141720;" cx="150.561" cy="74.98" r="5.104"/>
184 | </g>
185 | <g>
186 | </g>
187 | <g>
188 | </g>
189 | <g>
190 | </g>
191 | <g>
192 | </g>
193 | <g>
194 | </g>
195 | <g>
196 | </g>
197 | <g>
198 | </g>
199 | <g>
200 | </g>
201 | <g>
202 | </g>
203 | <g>
204 | </g>
205 | <g>
206 | </g>
207 | <g>
208 | </g>
209 | <g>
210 | </g>
211 | <g>
212 | </g>
213 | <g>
214 | </g>
215 | </svg>
216 | 


--------------------------------------------------------------------------------
/projeto-profile/img/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsuperior/curso-nivelamento-html-css/926f16b4949ebaa189a56aaecbab99f49de1082c/projeto-profile/img/youtube.png


--------------------------------------------------------------------------------
/projeto-profile/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 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>Meu Perfil</title>
 8 | 
 9 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11 |     <link
12 |       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
13 |       rel="stylesheet"
14 |     />
15 | 
16 |     <link rel="stylesheet" href="css/styles.css" />
17 |   </head>
18 |   <body>
19 |     <header class="nav-container">
20 |       <nav class="nav-main">
21 |         <a class="nav-brand" href="">Dev Full Stack</a>
22 |         <ul class="menu-items">
23 |           <li><a href="#portfolio">Portfolio</a></li>
24 |           <li><a href="#">About</a></li>
25 |           <li>
26 |             <a href="https://github.com/devsuperior" target="_blank">Contact</a>
27 |           </li>
28 |         </ul>
29 |       </nav>
30 |     </header>
31 |     <main>
32 |       <section class="profile-container">
33 |         <div class="profile-avatar">
34 |           <img src="img/profile.svg" alt="Meu perfil" />
35 |         </div>
36 |         <h1 class="profile-title">Alex Brown</h1>
37 |         <p class="profile-description">Full stack - Spring - React</p>
38 |       </section>
39 |       <section id="portfolio">
40 |         <h2 class="portfolio-title">Portfolio</h2>
41 | 
42 |         <div class="portfolio-container">
43 |           <img class="portfolio-item" src="img/portfolio1.png" alt="Portfolio 1" />
44 |           <img class="portfolio-item" src="img/portfolio2.png" alt="Portfolio 2" />
45 |           <img class="portfolio-item" src="img/portfolio3.png" alt="Portfolio 3" />
46 |           <img class="portfolio-item" src="img/portfolio4.png" alt="Portfolio 4" />
47 |           <img class="portfolio-item" src="img/portfolio5.png" alt="Portfolio 5" />
48 |           <img class="portfolio-item" src="img/portfolio6.png" alt="Portfolio 6" />
49 |         </div>
50 |       </section>
51 |     </main>
52 |     <footer>
53 |       <div class="footer-title">Siga-nos</div>
54 |       <div class="social-container">
55 |         <a href="https://instagram.com/devsuperior.ig"
56 |           ><img src="img/instagram.png" alt="Instagram"
57 |         /></a>
58 |         <a href="https://youtube.com/devsuperior"
59 |           ><img src="img/youtube.png" alt="Youtube"
60 |         /></a>
61 |       </div>
62 |     </footer>
63 |   </body>
64 | </html>
65 | 


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