├── projeto
    ├── css
    │   └── styles.css
    ├── img
    │   ├── tenis1.jpg
    │   ├── tenis2.jpg
    │   ├── tenis3.jpg
    │   ├── tenis4.jpg
    │   ├── tenis5.jpg
    │   └── tenis6.jpg
    └── index.html
└── teoria
    ├── index.html
    └── styles.css


/projeto/css/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   padding: 0;
  3 |   margin: 0;
  4 |   font-family: Helvetica;
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | /* Cabeçalho */
  9 | header {
 10 |   background-color: #3db36b;
 11 |   text-align: center;
 12 |   padding: 15px;
 13 |   color: #fff;
 14 | }
 15 | 
 16 | /* Grid de produtos */
 17 | .container {
 18 |   background-color: #eee;
 19 |   min-height: 60vh;
 20 |   padding: 50px;
 21 | }
 22 | 
 23 | .products-container {
 24 |   max-width: 1200px;
 25 |   margin: 0 auto;
 26 | }
 27 | 
 28 | .card {
 29 |   width: 31%;
 30 |   margin: 1% 1%;
 31 |   display: inline-block;
 32 |   padding: 15px;
 33 | }
 34 | 
 35 | .product-image {
 36 |   height: 300px;
 37 |   width: 100%;
 38 |   margin-bottom: 10px;
 39 |   background-position: center;
 40 |   background-size: cover;
 41 | }
 42 | 
 43 | #img-1 {
 44 |   background-image: url('../img/tenis1.jpg');
 45 | }
 46 | 
 47 | #img-2 {
 48 |   background-image: url('../img/tenis2.jpg');
 49 | }
 50 | 
 51 | #img-3 {
 52 |   background-image: url('../img/tenis3.jpg');
 53 | }
 54 | 
 55 | #img-4 {
 56 |   background-image: url('../img/tenis4.jpg');
 57 | }
 58 | 
 59 | #img-5 {
 60 |   background-image: url('../img/tenis5.jpg');
 61 | }
 62 | 
 63 | #img-6 {
 64 |   background-image: url('../img/tenis6.jpg');
 65 | }
 66 | 
 67 | h3 {
 68 |   margin-bottom: 10px;
 69 |   color: #3db36b;
 70 |   font-size: 24px;
 71 | }
 72 | 
 73 | .card p {
 74 |   margin-bottom: 10px;
 75 | }
 76 | 
 77 | .bold {
 78 |   font-weight: bold;
 79 | }
 80 | 
 81 | .btn {
 82 |   display: block;
 83 |   width: 100%;
 84 |   text-align: center;
 85 |   text-transform: uppercase;
 86 |   text-decoration: none;
 87 |   background-color: #3db36b;
 88 |   color: #fff;
 89 |   padding: 15px;
 90 |   border-radius: 5px;
 91 | }
 92 | 
 93 | .btn:hover {
 94 |   background-color: #0f642f;
 95 | }
 96 | 
 97 | /* Rodapé */
 98 | footer {
 99 |   background-color: #3db36b;
100 |   text-align: center;
101 |   padding: 80px;
102 |   color: #fff;
103 | }
104 | 


--------------------------------------------------------------------------------
/projeto/img/tenis1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/css_fundamentos/be57d5a38ddfa67c355d1ef2888aed4274746907/projeto/img/tenis1.jpg


--------------------------------------------------------------------------------
/projeto/img/tenis2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/css_fundamentos/be57d5a38ddfa67c355d1ef2888aed4274746907/projeto/img/tenis2.jpg


--------------------------------------------------------------------------------
/projeto/img/tenis3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/css_fundamentos/be57d5a38ddfa67c355d1ef2888aed4274746907/projeto/img/tenis3.jpg


--------------------------------------------------------------------------------
/projeto/img/tenis4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/css_fundamentos/be57d5a38ddfa67c355d1ef2888aed4274746907/projeto/img/tenis4.jpg


--------------------------------------------------------------------------------
/projeto/img/tenis5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/css_fundamentos/be57d5a38ddfa67c355d1ef2888aed4274746907/projeto/img/tenis5.jpg


--------------------------------------------------------------------------------
/projeto/img/tenis6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/css_fundamentos/be57d5a38ddfa67c355d1ef2888aed4274746907/projeto/img/tenis6.jpg


--------------------------------------------------------------------------------
/projeto/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Galeria dos Sneakers</title>
 8 |     <link rel="stylesheet" href="css/styles.css" />
 9 |   </head>
10 |   <body>
11 |     <!-- Cabeçalho -->
12 |     <header>
13 |       <h1>Galeria dos Sneakers</h1>
14 |     </header>
15 |     <!-- Grid de produtos -->
16 |     <main class="container">
17 |       <section class="products-container">
18 |         <div class="card">
19 |           <div class="product-image" id="img-1"></div>
20 |           <h3>Sneaker 1</h3>
21 |           <p>Este sneaker é muito bom pelo fato de...</p>
22 |           <p>
23 |             R$
24 |             <span class="bold">129,99</span>
25 |           </p>
26 |           <a href="#" class="btn">Comprar</a>
27 |         </div>
28 |         <div class="card">
29 |           <div class="product-image" id="img-2"></div>
30 |           <h3>Sneaker 2</h3>
31 |           <p>Este sneaker é muito bom pelo fato de...</p>
32 |           <p>
33 |             R$
34 |             <span class="bold">129,99</span>
35 |           </p>
36 |           <a href="#" class="btn">Comprar</a>
37 |         </div>
38 |         <div class="card">
39 |           <div class="product-image" id="img-3"></div>
40 |           <h3>Sneaker 3</h3>
41 |           <p>Este sneaker é muito bom pelo fato de...</p>
42 |           <p>
43 |             R$
44 |             <span class="bold">129,99</span>
45 |           </p>
46 |           <a href="#" class="btn">Comprar</a>
47 |         </div>
48 |         <div class="card">
49 |           <div class="product-image" id="img-4"></div>
50 |           <h3>Sneaker 4</h3>
51 |           <p>Este sneaker é muito bom pelo fato de...</p>
52 |           <p>
53 |             R$
54 |             <span class="bold">129,99</span>
55 |           </p>
56 |           <a href="#" class="btn">Comprar</a>
57 |         </div>
58 |         <div class="card">
59 |           <div class="product-image" id="img-5"></div>
60 |           <h3>Sneaker 5</h3>
61 |           <p>Este sneaker é muito bom pelo fato de...</p>
62 |           <p>
63 |             R$
64 |             <span class="bold">129,99</span>
65 |           </p>
66 |           <a href="#" class="btn">Comprar</a>
67 |         </div>
68 |         <div class="card">
69 |           <div class="product-image" id="img-6"></div>
70 |           <h3>Sneaker 6</h3>
71 |           <p>Este sneaker é muito bom pelo fato de...</p>
72 |           <p>
73 |             R$
74 |             <span class="bold">129,99</span>
75 |           </p>
76 |           <a href="#" class="btn">Comprar</a>
77 |         </div>
78 |       </section>
79 |     </main>
80 |     <!-- Rodapé -->
81 |     <footer>
82 |       <p>
83 |         <span class="bold">Galeria dos Sneakers</span>
84 |         &copy; 2021
85 |       </p>
86 |     </footer>
87 |   </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/teoria/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Curso de CSS</title>
 8 |     <!-- <style>
 9 |         body {
10 |             padding: 20px;
11 |         }
12 |         
13 |         p {
14 |             color: green;
15 |         }
16 |     </style> -->
17 |     <link rel="stylesheet" href="styles.css" />
18 |   </head>
19 |   <body>
20 |     <h1 id="titulo-principal">Título da página</h1>
21 |     <p class="meu-paragrafo">Meu parágrafo!</p>
22 |     <p class="meu-paragrafo">Segundo parágrafo</p>
23 |     <p>Terceiro parágrafo</p>
24 |     <!-- cores -->
25 |     <p class="nome-da-cor">Rosa</p>
26 |     <p class="hexa">Hexadecimal</p>
27 |     <p class="rgb">RGB</p>
28 |     <!-- fontes -->
29 |     <p class="serifada">Fonte Serifada</p>
30 |     <p class="sem-serifa">Sem Serifa</p>
31 |     <p class="mono-espacada">Fonte Mono Espaçada</p>
32 |     <!-- size e weight -->
33 |     <p class="tamanho-fonte-grande">Esta fonte está gigante</p>
34 |     <p class="tamanho-fonte-pequeno">Esta fonte está pequena</p>
35 |     <p class="peso-fonte">Texto em negrito!</p>
36 |     <!-- box model -->
37 |     <div class="box-model">
38 |       <p>Este é o nosso box model!</p>
39 |     </div>
40 |     <!-- props de texto -->
41 |     <p class="alinhamento">Texto ao centro</p>
42 |     <p class="transform-maiuscula">este texto vai ficar em caixa alta</p>
43 |     <p class="transform-minuscula">Já Este Ficará TODO em caixa baixa</p>
44 |     <!-- espaçamento -->
45 |     <p class="espacamento-texto">Texto com espaçamento de linhas e letras</p>
46 |     <p class="espacamento-texto">Texto com espaçamento de linhas e letras</p>
47 |     <!-- links -->
48 |     <div>
49 |       <a href="#" class="decoration">Meu link 1</a>
50 |     </div>
51 |     <div>
52 |       <a href="https://www.google.com.br" class="visitado">Meu link 2</a>
53 |     </div>
54 |     <div>
55 |       <a href="#" class="estilo-hover">Meu link 3</a>
56 |     </div>
57 |     <!-- link button -->
58 |     <a href="#" class="btn">Clique em mim</a>
59 |     <!-- listas -->
60 |     <ul>
61 |       <li>Lista</li>
62 |       <li>Com</li>
63 |       <li>Bullet</li>
64 |     </ul>
65 |     <ul class="sem-estilo">
66 |       <li>Lista</li>
67 |       <li>Sem</li>
68 |       <li>Bullet</li>
69 |     </ul>
70 |     <!-- display -->
71 |     <div class="inline"></div>
72 |     <div class="inline"></div>
73 |     <a href="#" class="bloco">Mais um link</a>
74 |     <a href="#" class="bloco">Mais outro link</a>
75 | 
76 |     <!-- position fixed -->
77 |     <div class="elemento-fixo">Este elemento vai ficar fixo na tela</div>
78 |     <!-- first child -->
79 |     <div class="primeiro-elemento">
80 |       <p>Este terá estilo</p>
81 |       <p>Este não</p>
82 |       <p>Este não</p>
83 |       <p>Este não</p>
84 |     </div>
85 |     <!-- pseudo elementos -->
86 |     <p class="primeira-letra">Esta frase começa com uma letra diferente!</p>
87 |     <!-- especifidade -->
88 |     <h2>Meu título 1</h2>
89 |     <h2 class="titulo">Meu título 2</h2>
90 |     <h2 class="titulo" id="meu-titulo-preferido">Meu título 3</h2>
91 |   </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/teoria/styles.css:
--------------------------------------------------------------------------------
  1 | /* externo */
  2 | body {
  3 |   padding: 20px;
  4 | }
  5 | 
  6 | p {
  7 |   color: green;
  8 | }
  9 | 
 10 | /* classe e id */
 11 | .meu-paragrafo {
 12 |   background-color: black;
 13 | }
 14 | 
 15 | #titulo-principal {
 16 |   background-color: yellow;
 17 |   color: black;
 18 |   padding: 10px;
 19 |   font-family: Helvetica;
 20 | }
 21 | 
 22 | /* todos os eelementos e lista */
 23 | * {
 24 |   font-family: Arial;
 25 | }
 26 | 
 27 | p,
 28 | h1 {
 29 |   border-bottom: 1px solid red;
 30 | }
 31 | 
 32 | /* Cores */
 33 | .nome-da-cor {
 34 |   color: pink;
 35 | }
 36 | 
 37 | .hexa {
 38 |   color: #332245;
 39 |   background-color: #342299;
 40 | }
 41 | 
 42 | .rgb {
 43 |   color: rgb(200, 100, 25);
 44 | }
 45 | 
 46 | /* fontes */
 47 | .serifada {
 48 |   font-family: Georgia;
 49 | }
 50 | 
 51 | .sem-serifa {
 52 |   font-family: Helvetica;
 53 | }
 54 | 
 55 | .mono-espacada {
 56 |   font-family: 'Courier New';
 57 | }
 58 | 
 59 | /* size e weight */
 60 | .tamanho-fonte-grande {
 61 |   font-size: 30px;
 62 | }
 63 | 
 64 | .tamanho-fonte-pequeno {
 65 |   font-size: 8px;
 66 | }
 67 | 
 68 | .peso-fonte {
 69 |   font-weight: 700;
 70 | }
 71 | 
 72 | /* box model */
 73 | .box-model p {
 74 |   color: #000;
 75 |   border: none;
 76 | }
 77 | 
 78 | /* Recurso de box model no CSS */
 79 | .box-model {
 80 |   width: 200px;
 81 |   height: 100px;
 82 |   border: 1px solid blue;
 83 |   padding: 20px 40px;
 84 |   margin: 15px;
 85 | }
 86 | 
 87 | /* props de texto */
 88 | .alinhamento {
 89 |   text-align: center;
 90 | }
 91 | 
 92 | .transform-maiuscula {
 93 |   text-transform: uppercase;
 94 | }
 95 | 
 96 | .transform-minuscula {
 97 |   text-transform: lowercase;
 98 | }
 99 | 
100 | /* Espaçamento de letras e linha */
101 | .espacamento-texto {
102 |   line-height: 30px;
103 |   letter-spacing: 4px;
104 |   width: 150px;
105 | }
106 | 
107 | /* estilo em links */
108 | .decoration {
109 |   text-decoration: none;
110 | }
111 | 
112 | .visitado:visited {
113 |   color: orange;
114 | }
115 | 
116 | .estilo-hover:hover {
117 |   background-color: #1292ae;
118 | }
119 | 
120 | /* link button */
121 | .btn {
122 |   background-color: #34ae43;
123 |   border: 3px solid #234966;
124 |   border-radius: 5px;
125 |   color: #fff;
126 |   text-decoration: none;
127 |   padding: 12px 7px;
128 |   display: block;
129 |   width: 120px;
130 |   text-align: center;
131 |   margin: 20px;
132 | }
133 | 
134 | /* Listas */
135 | .sem-estilo {
136 |   list-style: none;
137 | }
138 | 
139 | /* display */
140 | .inline {
141 |   width: 50px;
142 |   height: 50px;
143 |   background-color: teal;
144 |   margin: 5px;
145 |   display: inline-block;
146 | }
147 | 
148 | .bloco {
149 |   display: block;
150 | }
151 | 
152 | /* position fixed */
153 | .elemento-fixo {
154 |   position: fixed;
155 |   top: 0;
156 |   left: 0;
157 |   width: 100%;
158 |   padding: 15px;
159 |   text-align: center;
160 |   background-color: #1292ae;
161 |   border-bottom: 2px solid #342299;
162 |   color: #fff;
163 |   text-align: center;
164 | }
165 | 
166 | /* pseudo class */
167 | .primeiro-elemento p:first-child {
168 |   color: purple;
169 |   font-weight: bold;
170 | }
171 | 
172 | /* pseudo elementos */
173 | .primeira-letra::first-letter {
174 |   font-size: 25px;
175 |   color: blue;
176 |   background-color: red;
177 |   padding: 2px;
178 | }
179 | 
180 | /* especifidade */
181 | h2 {
182 |   color: red;
183 | }
184 | 
185 | .titulo {
186 |   color: green;
187 | }
188 | 
189 | #meu-titulo-preferido {
190 |   color: blue;
191 | }
192 | 
193 | /* important */
194 | h2 {
195 |   color: purple !important;
196 | }
197 | 


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