diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f673a71
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/alunas/Carlinha/CSS/style.css b/alunas/Carlinha/CSS/style.css
new file mode 100644
index 0000000..a38474b
--- /dev/null
+++ b/alunas/Carlinha/CSS/style.css
@@ -0,0 +1,278 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+}
+
+@keyframes exemplo{
+    0%{color: #FF34B3;left:100;}
+    25%{color:skyblue;left:500px;}
+    50%{color:plum; left:1000px;}
+    75%{color:#FFFACD;left:400px;}
+    100%{color:#FF6EB4;left:0px}
+  }
+
+body {
+    font-family: 'Raleway', sans-serif;
+  background-color:rgb(17, 9, 9);
+  
+}
+
+@
+
+@media (max-width: 600px){
+
+    body {
+        background-color: #cca1b7;
+        font-size: 15px;
+    }
+    
+    .cabecalho__titulo {
+        font-size: 30px;
+    }
+
+    .sobre-mim__descricao {
+        font-size: 30px;
+    }
+}
+
+.cabecalho{
+    background-color: ;
+    margin-bottom:30px ;
+    width:1000px;
+    left:500px ;
+}
+
+.octocat{
+    width="400" 
+    height="305"
+}
+
+span {
+    font-weight: 700;
+    color:  #db469d;
+}
+
+.container {
+    max-width: 1080px;
+    margin: 0 auto;
+}
+
+h1.cabecalho__titulo{
+    font-size:80px;
+    position: static;
+    animation-name:exemplo;
+    animation-duration:6s;
+    animation-delay: 2s;
+   animation-iteration-count:01; 
+    }
+
+h2.sobre-mim__titulo {
+    padding-top:30px ;
+    color: #eb599d;
+    margin-bottom:20px ;
+    text-align: center;
+    margin:auto;
+    font-size:60px ;
+}
+
+.filhas{
+    margin-left:20px ;
+    width:150px;
+    height:100px;
+    
+}
+.sobre-mim_habilidades{
+    color:#ebbfd6;
+    display: inline-block;
+    margin-left:20px ;
+    
+}
+
+.sobre-mim_habilidades-titulo_destaque{
+    color: #e736cf;
+    margin-bottom:30px ;
+   
+}
+
+section.sobre-mim{
+    width:80%;
+    margin-left:10%;
+    display: flex;
+}
+
+.sobre-mim_descricao-texto-destaque {
+    color: #ebbfd6;
+    margin:30px;
+    font-size:20px ;
+}
+
+.sobre-mim_descricao-texto{
+    color: #ebbfd6;  
+    margin:30px ;
+    font-size:20px;
+}
+
+button.botao{
+    margin-left:40% ;
+}
+
+.botao > a,
+.midias-sociais__container-link {
+    text-decoration: none;
+    color: #cf59c0;
+    font-size: 1rem;
+    text-transform: uppercase;
+    font-family: 'Raleway', sans-serif;
+    font-weight: bold;
+  
+}
+
+.botao {
+    margin-top: 20px;
+    background-color: white;
+    border: #7E459B solid 1px;
+    padding: 10px 25px 10px 25px;
+    border-radius: 30px;
+    margin-right:250px ;
+}
+
+.botao:hover{
+    background-color:#eecfdf;
+    width:300px;
+   
+}
+
+section.cabecalho{
+    margin:0 auto 0 auto;
+    width:auto;
+    height:500px;
+    }
+
+
+
+.cabecalho {
+    text-align: center;
+    background-image: url('../imagem/banner.png');
+    background-size:cover;
+    background-position:center;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height:700px;
+    width:100%;
+    margin:0 auto 0 auto;
+}
+
+.cabecalho__titulo {
+    font-size: 3rem;
+    margin-bottom: 25px;
+    color: black;
+}
+
+.cabecalho__texto {
+    font-size: 1.6rem;
+}
+
+.destaque {
+    font-size: 1.3rem;
+    margin-bottom: 15px;
+}
+
+.sobre-mim{
+    display:inline-block;
+    margin:50px;
+    width:;
+}
+
+.midias-sociais {
+    height: 450px;
+    display: flex;
+    align-items: center;
+    display: block;
+}
+
+.display-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top:auto;
+    height: auto;
+}
+
+.sobre-mim__titulo {
+    font-size: 3rem;
+    color: #C4C4C4;
+    margin-bottom: 55px;
+}
+
+
+.sobre-mim__descricao
+ {
+    width: 100%;
+    line-height: 1.5;
+    text-align: justify ;
+    margin-left:5% ;
+}
+
+ul{
+    list-style-type: square;
+  }
+
+.midias-sociais__container {
+    text-align: center;
+    width: 160px;
+    height:150px;
+    background-color: #dd2484;
+    padding: 20px;
+    margin-left:95px ;
+    margin-top:200px ;
+}
+
+.midias-sociais__container-img {
+    margin-bottom: 20px;
+    width: 60px;
+    transition: all 1s linear
+}
+
+.midias-sociais__container-img:hover {
+    width: 100px;
+}
+
+.midias-sociais__container-link,
+.midias-sociais__container-paragrafo {
+    color: white;
+    font-size:80px;
+    font-style: italic bold;
+    margin-bottom:20px;
+}
+
+.midias-sociais__container-paragrafo {
+    margin-top: 8px;
+    font-size: 1.2rem;
+}
+
+.rodape__paragrafo {
+    text-align:center;
+    color: black;
+    margin-bottom: 30px;
+
+    
+}
+
+footer{
+    background-color: #cca1b7;
+    height: 70px;
+    justify-content: center;
+    text-align: center;
+  }
+
+  @media only screen and (min-with:350px) and (max-with:500px) {
+
+    section.cabecalho {
+          width:50%;
+      
+      }
+
+      
+  }
\ No newline at end of file
diff --git a/alunas/Carlinha/img/filhas.png b/alunas/Carlinha/img/filhas.png
new file mode 100644
index 0000000..9f8397a
Binary files /dev/null and b/alunas/Carlinha/img/filhas.png differ
diff --git a/alunas/Carlinha/img/git.gif b/alunas/Carlinha/img/git.gif
new file mode 100644
index 0000000..bb8f3b9
Binary files /dev/null and b/alunas/Carlinha/img/git.gif differ
diff --git a/alunas/Carlinha/img/linkedin.gif b/alunas/Carlinha/img/linkedin.gif
new file mode 100644
index 0000000..55ea03f
Binary files /dev/null and b/alunas/Carlinha/img/linkedin.gif differ
diff --git a/alunas/Carlinha/img/octocat-carla.png b/alunas/Carlinha/img/octocat-carla.png
new file mode 100644
index 0000000..c7cb733
Binary files /dev/null and b/alunas/Carlinha/img/octocat-carla.png differ
diff --git a/alunas/Carlinha/img/wtt.gif b/alunas/Carlinha/img/wtt.gif
new file mode 100644
index 0000000..22f7062
Binary files /dev/null and b/alunas/Carlinha/img/wtt.gif differ
diff --git a/alunas/Carlinha/index.html b/alunas/Carlinha/index.html
new file mode 100644
index 0000000..60b48c3
--- /dev/null
+++ b/alunas/Carlinha/index.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <title>Site Pessoal Carla Oliveira</title>
+        <link rel="stylesheet" href="./css/style.css" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;600;700&display=swap"
+            rel="stylesheet"
+        />
+    </head>
+
+    <body>
+        <section class="cabecalho">
+            <div class="container">
+                <h1 class="cabecalho__titulo">Olá, seja bem-vinda!</h1>
+                <img
+                    class="octocat"
+                    width="300"
+                    height="250"
+                    src="./img/octocat-carla.png"
+                    alt="Polvagata tomando suco"
+                />
+            </div>
+        </section>
+
+        <section class="sobre-mim">
+                    <h2 class="sobre-mim__titulo">Quem sou eu?</h2>
+                    <div class="sobre-mim__descricao">
+                        <p class="sobre-mim_descricao-texto-destaque">
+                            Eu sou <span>Carla Oliveira</span>, Bióloga,
+                            estudante de Análise e Desenvolvimento de Sistemas,
+                            em transição de carreira. Adoro aprender coisas
+                            novas, conhecer pessoas e estou sempre disposta a
+                            encarar novos desafios.
+                        </p>
+
+                        <p class="sobre-mim_descricao-texto">
+                            Sou mamãe da Morgana e da Mile, duas gatinhas lindas
+                            , recentemente ganhei minha terceira filha, Olívia,
+                            ela é uma assitente virtual de uma loja fictícia que
+                            foi desenvolvida num curso para criação de chatbot
+                            que estou realizando, para conhecer basta clicar no
+                            botão abaixo. Todas as interações são muito
+                            bem-vindas para que eu possa melhorar meu trabalho.
+                        </p>
+                        <button class="botao">
+                            <a
+                                href="https://letsbot.altu.com.br/widgets/preview/2c32f074f5ef0e45590cdab176cb58b4"
+                                target="_blank"
+                            >
+                                Olívia chat bot
+                            </a>
+                            <p>
+                                <img
+                                    class="filhas"
+                                    src="./img/filhas.png"
+                                    alt="computador rosa com as duas gatinhas na tela"
+                                />
+                            </p>
+                            <div></div>
+                        </button>
+                    </div>
+                </section>
+                
+                <section class="sobre-mim">
+                    <div class="sobre-mim_habilidades">
+                        <h3 class="sobre-mim_habilidades-titulo_destaque">
+                            Minhas Habilidades
+                        </h3>
+
+                        <ul class="sobre-mim_habilidades">
+                            <li>Comuicação;</li>
+                            <li>Trabalho em equipe;</li>
+                            <li>Html5 e CSS3;</li>
+                            <li>Criação de chatbot;</li>
+                        </ul>
+                    </div>
+                    <div class="sobre-mim_habilidades">
+                        <h3 class="sobre-mim_habilidades-titulo_destaque">
+                            Meus Hobbys
+                        </h3>
+
+                        <ul class="sobre-mim__habilidades-lista">
+                            <li>Ouvir Música;</li>
+                            <li>Dançar;</li>
+                            <li>Ler;</li>
+                            <li>Assitir filmes e séries;</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+                </section>
+
+        <section class="midias-sociais">
+            <div class="container">
+                <div class="display-flex">
+                    <div class="midias-sociais__container">
+                        <a
+                            href="https://api.whatsapp.com/send?phone=5571986182729&text=Ol%C3%A1!%20"
+                            target="_blank"
+                        >
+                            <img
+                                class="midias-sociais__container-img"
+                                src="./img/wtt.gif"
+                                alt="Gif com símbolo do whatsapp"
+                        /></a>
+                        <p class="midias-sociais__container-paragrafo">
+                            Whatsapp
+                        </p>
+                    </div>
+
+                    <div class="midias-sociais__container">
+                        <a
+                            href="https://github.com/carlaoliveiraads"
+                            target="_blank"
+                        >
+                            <img
+                                class="midias-sociais__container-img"
+                                src="./img/git.gif"
+                                alt="Gif animado do Github"
+                        /></a>
+                        <p class="midias-sociais__container-paragrafo">
+                            GitHub
+                        </p>
+                    </div>
+
+                    <div class="midias-sociais__container">
+                        <a
+                            href="https://www.linkedin.com/in/carla-oliveira-ads/"
+                            target="_blank"
+                        >
+                            <img
+                                class="midias-sociais__container-img"
+                                src="./img/linkedin.gif"
+                                alt="Gif animado do Linkedin"
+                        /></a>
+                        <p class="midias-sociais__container-paragrafo">
+                            Linkedin
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <footer class="rodape">
+            <div class="container">
+                <p class="rodape__paragrafo">
+                    Página construída como atividade da disciplina: HTML e CSS/ Responsividade 
+                                    </p>
+                                    <p>
+                                        Reprograma
+                                    </p>
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/alunas/octoCat/css/style.css b/alunas/octoCat/css/style.css
deleted file mode 100644
index 97d3a20..0000000
--- a/alunas/octoCat/css/style.css
+++ /dev/null
@@ -1,9 +0,0 @@
-*{
-    margin: 0; 
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    background-color: yellow;
-}
\ No newline at end of file
diff --git a/alunas/octoCat/index.html b/alunas/octoCat/index.html
deleted file mode 100644
index bd6353b..0000000
--- a/alunas/octoCat/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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>OctoCat > Nome </title>
-    <link href="./css/style.css" rel="stylesheet" />
-</head>
-<body>
-    
-</body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index db67794..d22f244 100644
--- a/index.html
+++ b/index.html
@@ -79,9 +79,9 @@ <h1 class="cabecalho__titulo">HTML & CSS - Alunas Online 10 Frontend</h1>
       </div>
       <!-- carla oliveira -->
       <div class="alunaBox">
-        <a href="">
-          <img class="alunaImg" src="img-home/github.svg" alt="descrição da minha imagem" />
-          <p class="alunaName">Seu nome aqui</p>
+        <a href="./alunas/Carlinha/index.html">
+          <img class="alunaImg" src="./alunas/Carlinha/img/octocat-carla.png"polva gato de vestido tomando suco" />
+          <p class="alunaName">Carla Oliveira</p>
         </a>
       </div>
       <!-- carol soares -->