diff --git a/style.css b/assets/style.css
similarity index 100%
rename from style.css
rename to assets/style.css
diff --git a/index.html b/index.html
index c1c212f..a03f637 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,54 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-br">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="assets/style.css"> <!--chamar a pasta e arquivo-->
+<title>FLASHCARD</title>
 </head>
 <body>
-    </main>
-    <main>
-        <section id= “container”> 
-    
-    </section>
-    </main>
-    <footer>
-        <p>Projeto desenvolvido pela Alura, sem fins lucrativos.</p>
-    </footer>
+<main> <!--parte principal-→
+<section id= "container"> <!--área centralizada na página (um tipo de caixa na parte principal)-->
+<article class="cartao"> <!--1ocartão--><!--article representa uma composição independente em um
+documento-->
+<div class="cartao__conteudo"><!--Dentro do cartão principal, vamos ter o conteúdo desse cartão-->
+<h3> Programação </h3><!--nome da categoria-->
+<div class="cartao__conteudo__pergunta"> <!--para criar a parte da pergunta-->
+<p> O que é JavaScript?</p> <!--pergunta-->
+</div>
+<div class= "cartao__conteudo__resposta"> <!--para criar a resposta-->
+<p> O JavaScript é uma linguagem de programação.</p><!--resposta-->
+</div>
+</div>
+</article>
+<!--COLOCAR A EDENTAÇÃO CONFORME A EDENTAÇÃO ACIMA-->
+<article class="cartao"><!--2ocartão-->
+<div class="cartao__conteudo">
+<h3> Programação </h3>
+<div class="cartao__conteudo__pergunta">
+<p> O que é CSS?</p>
+</div>
+<div class="cartao__conteudo__resposta">
+<p>O CSS é uma linguagem de estilização.</p>
+</div>
+</div>
+</article>
+<article class="cartao"> <!--3ocartão-->
+<div class="cartao__conteudo">
+<h3> Programação </h3>
+<div class="cartao__conteudo__pergunta">
+<p> O que é HTML?</p>
+</div>
+<div class="cartao__conteudo__resposta">
+<p>O HTML (Linguagem de Marcação de HiperTexto).</p>
+</div>
+</div>
+</article>
+</section>
+</main>
+
+<footer>
+<p>Projeto desenvolvido pela Alura, sem fins lucrativos.</p>
+</footer>
 </body>
 </html>
\ No newline at end of file
