diff --git a/semana4/flex-grid/img/bolo b/semana4/flex-grid/img/bolo
new file mode 100644
index 0000000..22f944e
Binary files /dev/null and b/semana4/flex-grid/img/bolo differ
diff --git a/semana4/flex-grid/img/icone bolinho.png b/semana4/flex-grid/img/icone bolinho.png
new file mode 100644
index 0000000..42c88e0
Binary files /dev/null and b/semana4/flex-grid/img/icone bolinho.png differ
diff --git a/semana4/flex-grid/img/icone carrinho.png b/semana4/flex-grid/img/icone carrinho.png
new file mode 100644
index 0000000..ab0f1ba
Binary files /dev/null and b/semana4/flex-grid/img/icone carrinho.png differ
diff --git a/semana4/flex-grid/img/icone casinha.png b/semana4/flex-grid/img/icone casinha.png
new file mode 100644
index 0000000..c52da19
Binary files /dev/null and b/semana4/flex-grid/img/icone casinha.png differ
diff --git a/semana4/flex-grid/img/icone docinho.png b/semana4/flex-grid/img/icone docinho.png
new file mode 100644
index 0000000..62852ec
Binary files /dev/null and b/semana4/flex-grid/img/icone docinho.png differ
diff --git a/semana4/flex-grid/img/icone perfil(zinho) b/semana4/flex-grid/img/icone perfil(zinho)
new file mode 100644
index 0000000..35ae679
Binary files /dev/null and b/semana4/flex-grid/img/icone perfil(zinho) differ
diff --git "a/semana4/flex-grid/img/\303\215cone setinha para a direita.png" "b/semana4/flex-grid/img/\303\215cone setinha para a direita.png"
new file mode 100644
index 0000000..37a5584
Binary files /dev/null and "b/semana4/flex-grid/img/\303\215cone setinha para a direita.png" differ
diff --git a/semana4/flex-grid/index.html b/semana4/flex-grid/index.html
new file mode 100644
index 0000000..ba09044
--- /dev/null
+++ b/semana4/flex-grid/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Confeitaria</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    
+    <nav class="nav">
+        <div class="logo">
+            <h1>Confeitaria</h1>
+            <img src="./img/icone bolinho.png" alt="Bolinho">
+            
+        </div>
+
+        <div class="nav_buttons">
+            <a href="#" class="nav_cta">Login</a>
+        </div>
+</nav>
+
+<section class="cards">
+    <div class="card">
+        <div class="card_img"></div>
+        <div class="card_texts">
+            <h2 class="card_title"> Bolo de Chocolate</h2>
+            <p class="card_paragraph"> 
+                <p class="card_paragraph"> Delicioso bolo de chocolate molhadinho decorados com morangos</p>
+        </div>
+
+
+    </div>
+</section>
+
+</nav>
+
+<section class="cards">
+    <div class="card">
+        <div class="card_img"></div>
+        <div class="card_texts">
+            <h2 class="card_title"> Bolo de Chocolate</h2>
+            <p class="card_paragraph"> 
+                <p class="card_paragraph"> Delicioso bolo de chocolate molhadinho decorados com morangos</p>
+        </div>
+
+
+    </div>
+</section>
+
+</nav>
+
+<section class="cards">
+    <div class="card">
+        <div class="card_img"></div>
+        <div class="card_texts">
+            <h2 class="card_title"> Bolo de Chocolate</h2>
+            <p class="card_paragraph"> 
+                <p class="card_paragraph"> Delicioso bolo de chocolate molhadinho decorados com morangos</p>
+        </div>
+
+
+    </div>
+</section>
+
+</nav>
+
+<section class="cards">
+    <div class="card">
+        
+        <div class="card_img"></div>
+        <div class="card_texts">
+            <h2 class="card_title"> Bolo de Chocolate</h2>
+            <p class="card_paragraph"> 
+                <p class="card_paragraph"> Delicioso bolo de chocolate molhadinho decorados com morangos</p>
+        </div>
+       
+
+    </div>
+</section>
+
+</nav>
+
+<section class="cards">
+    <div class="card">
+        <div class="card_img"></div>
+        <div class="card_texts">
+            <h2 class="card_title"> Bolo de Chocolate</h2>
+            <p class="card_paragraph"> 
+                <p class="card_paragraph"> Delicioso bolo de chocolate molhadinho decorados com morangos</p>
+        </div>
+
+
+    </div>
+</section>
+
+</nav>
+
+<section class="cards">
+    <div class="card">
+        <div class="card_img"></div>
+        <div class="card_texts">
+            <h2 class="card_title"> Bolo de Chocolate</h2>
+            <p class="card_paragraph"> 
+                <p class="card_paragraph"> Delicioso bolo de chocolate molhadinho decorados com morangos</p>
+        </div>
+
+
+    </div>
+</section>
+
+</nav>
+
+<section class="cards">
+    <div class="card">
+        <div class="card_img"></div>
+        <div class="card_texts">
+            <h2 class="card_title"> Bolo de Chocolate</h2>
+            <p class="card_paragraph"> 
+                <p class="card_paragraph"> Delicioso bolo de chocolate molhadinho decorados com morangos</p>
+        </div>
+
+
+    </div>
+</section>
+<footer>
+</footer>
+<p>Bolos decicioso com muito carinho ♥ </p>
+
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/semana4/flex-grid/styles.css b/semana4/flex-grid/styles.css
new file mode 100644
index 0000000..53bd98c
--- /dev/null
+++ b/semana4/flex-grid/styles.css
@@ -0,0 +1,101 @@
+.nav {
+    display: flex;
+    background:mediumvioletred ;
+    height: 80px;
+    align-items: center;
+    padding: 0 80px;
+    color: black;
+    justify-content: space-between;
+    overflow: hidden;
+    flex-wrap: wrap;
+}
+
+/*Cards*/
+
+.cards{
+    width: 80%;
+    max-width: 200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    padding: 60px 0;
+    gap: 2em;
+
+}
+
+.card{
+    padding-bottom: 2.5em;
+    width: 100;
+    border-radius: 1em;
+    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction:column;
+
+}
+.card{
+    padding-bottom: 2.5em;
+    width: 100;
+    border-radius: 1em;
+    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction:column;
+
+}
+.card{
+    padding-bottom: 2.5em;
+    width: 100;
+    border-radius: 1em;
+    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction:column;
+
+}
+.card{
+    padding-bottom: 2.5em;
+    width: 100;
+    border-radius: 1em;
+    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction:column;
+
+}
+.card{
+    padding-bottom: 2.5em;
+    width: 100;
+    border-radius: 1em;
+    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction:column;
+
+}
+.card{
+    padding-bottom: 2.5em;
+    width: 100;
+    border-radius: 1em;
+    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction:column;
+
+}
+
+    .card:nth-of-type(1) {
+        --image: url(./img/bolo);
+        background-size: 0vmax;
+       
+    }
+
+.card_img{
+    background-image: var(--image);
+    height: 250px;
+    background-position: center top;
+    background-size: cover;
+    border-radius: 1em em  0 0;
+}
+
+footer{
+     
+    background-color: mediumvioletred;
+    text-align: center;
+    padding: 20px;
+    color: black;
+}
