Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 LarissaMicheli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,2 @@
+# html-css3
+ Html5 e Css3

exercicios/ex01/android-site.txt

@@ -0,0 +1,63 @@
+Curiosidades de Tecnologia
+
+Tudo aquilo que você sempre quis saber sobre o mundo Tech, em um único lugar
+
+[MENU]
+Home
+Notícias
+Curiosidades
+Fale Conosco
+
+História do Mascote do Android
+
+Provavelmente você sabe que o sistema operacional Android, mantido pelo Google é um dos mais utilizados para dispositivos móveis em todo o mundo. Mas tavez você não saiba que o seu simpático mascote tem um nome e uma história muito curiosa? Pois acompanhe esse artigo para aprender muita coisa sobre esse robozinho.
+
+A primeira versão
+
+A primeira tentativa de criar um mascote surgiu em 2007 e veio de um desenvolvedor chamado Dan Morrill. Ele conta que abriu o Inkscape (software livre para vetorização de imagens) e criou sua própria versão de robô. O objetivo era apenas personificar o sistema apenas para a a sua equipe, não existia nenhuma solicitação da empresa para a criação de um mascote.
+
+[FOTO]
+
+Essa primeira versão bizarra até foi batizada em homenagem ao seu criador: seriam os Dandroids.
+
+Surge um novo mascote
+
+A ideia de ter um mascote foi amadurecendo e a missão foi passada para uma profissional da área. A ilustradora Russa Irina Blok, também funcionária do Google, ficou com a missão de representar o pequeno robô de uma maneira mais agradável.
+
+[FOTO]
+
+A ideia principal da Irina era representar tudo graficamente com poucos traços e de forma mais chapada. O desenho também deveria gerar identificação rápida com quem o olha. Surgiu então o Bugdroid, o novo mascote do Android.
+
+[FOTO]
+
+A principal inspiração para os traços do novo Bugdroid veio daqueles bonequinhos que ilustram portas de banheiro para indicar o gênero de cada porta. Conta a lenda que a artista estava criando em sua mesa no escritório do Google e olhou para o lado dos banheiros e a identificação foi imediata: simples, limpo, objetivo.
+
+[VIDEO]
+
+[EXTRA] Quer aprender mais? 
+
+Outro assunto curioso em relação ao Android é que cada versão sempre foi nomeada em homenagem a um doce, em ordem alfabética a partir da versão 1.5 até a 9.0.
+
+1.5 - Cupcake
+1.6 - Donut
+3.0 - Eclair
+2.2 - Froyo
+2.3 - Gingerbread
+3.0 - Honeycomb
+4.0 - Ice Cream Sandwich
+4.1 - Jelly Bean
+4.4 - KitKat
+5.0 - Lolipop
+6.0 - Marshmallow
+7.0 - Nougat
+8.0 - Oreo
+9.0 - Pie
+
+Infelizmente, o Android Q não existiu, pois o Google resolveu pôr fim a essa divertida prática e começou a usar numerações, o que deu origem ao Android 10.
+
+Acesse aqui o site Android History para conhecer a sequência das versões "adocicadas" e o que cada uma trouxe para o sistema Android.
+[/EXTRA]
+
+Então é isso! Espero que você tenha gostado do nosso artigo com essa curiosidade sobre o sistema Android e seu simpático mascote.
+
+Site criado por Gustavo Guanabara para o CursoemVideo.

exercicios/ex01/android.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Co surgiu o mascote do Android</title>
+    <link rel="shortcut icon" href="imagens/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="estilo/style.css">
+
+
+
+</head>
+<body>
+    <header>
+        <h1>Curiosidades de Tecnologia</h1>
+        <p>Tudo aquilo que você sempre quis saber sobre o mundo Tech, em um único lugar</p>
+    </header>
+    <nav>
+        <a href="#">Home</a>
+        <a href="#">Notícias</a>
+        <a href="#">Curiosidades</a>
+        <a href="#">Fale Conosco</a>
+    </nav>
+    <main>
+        <article>
+            <h1>História do Mascote do Android</h1>
+
+
+                <p>Provavelmente você sabe que o sistema operacional <strong>Android</strong>, mantido pelo <strong>Google</strong>
+                    é um dos mais utilizados para dispositivos móveis em todo o mundo. Mas tavez você não saiba que o seu simpático mascote tem um nome e uma história muito curiosa? Pois acompanhe esse artigo para aprender muita coisa sobre esse robozinho.</p>
+
+            <h2>A primeira versão</h2>
+
+            <p>A primeira tentativa de criar um mascote surgiu em 2007 e veio de um desenvolvedor chamado <a href="https://androidcommunity.com/dan-morrill-shows-us-the-android-mascot-that-almost-was-20130103/" target="_blank" class="externo">Dan Morrill</a>. Ele conta que abriu o <a href="https://inkscape.org/pt-br/" target="_blank" class="externo">Inkscape</a> (software livre para vetorização de imagens) e criou sua própria versão de robô. O objetivo era apenas personificar o sistema apenas para a a sua equipe, não existia nenhuma solicitação da empresa para a criação de um mascote.</p>
+
+            <picture>
+                <source media="(max-width: 670px)" srcset="imagens/dan-droids-pq.png">
+                <img src="imagens/dan-droids.png" alt="Dandroids"></picture>
+
+            <p>Essa primeira versão bizarra até foi batizada em homenagem ao seu criador: seriam os <strong>Dandroids</strong>.</p>
+
+            <h2>Surge um novo mascote</h2>
+
+            <p>A ideia de ter um mascote foi amadurecendo e a missão foi passada para uma profissional da área. A ilustradora Russa <a href="https://www.irinablok.com/" target="_blank" class="externo">Irina Blok</a>, também funcionária do Google, ficou com a missão de representar o pequeno robô de uma maneira mais agradável.</p>
+
+            <picture>
+                <source media="(max-width: 670px)" srcset="imagens/irina-blok-pq.jpg">
+                <img src="imagens/irina-blok.jpg" alt="Irina Blok"></picture>
+
+            <p>A ideia principal da Irina era representar tudo graficamente com poucos traços e de forma mais chapada. O desenho também deveria gerar identificação rápida com quem o olha. Surgiu então o <strong>Bugdroid</strong>, o novo mascote do Android.</p>
+
+            <img src="imagens/bugdroid.png" classe="pequena" alt="Bugdroid">
+
+            <p>A principal inspiração para os traços do novo <strong>Bugdroid</strong> veio daqueles bonequinhos que ilustram portas de banheiro para indicar o gênero de cada porta. Conta a lenda que a artista estava criando em sua mesa no escritório do <strong>Google</strong> e olhou para o lado dos banheiros e a identificação foi imediata: simples, limpo, objetivo.</p>
+
+            <div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/l2UDgpLz20M?si=SHOQBWs_MQ5SucS3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+
+            <aside>
+                <h3>Quer aprender mais?</h3>
+                <p>Outro assunto curioso em relação ao Android é que cada versão sempre foi nomeada em homenagem a um doce, em ordem alfabética a partir da versão 1.5 até a 9.0.</p>
+
+                <ul>
+                    <li>1.5 - <abbr title="Cupcake">Cupcake</abbr></li>
+                    <li>1.6 - <abbr title="Donut">Donut</abbr></li>
+                    <li>3.0 - <abbr title="Eclair">Eclair</abbr></li>
+                    <li>2.2 - <abbr title="Froyo">Froyo</abbr></li>
+                    <li>2.3 - <abbr title="Ginarbread">Gingerbread</abbr></li>
+                    <li>3.0 - <abbr title="Honey">Honeycomb</abbr></li>
+                    <li>4.0 - <abbr title="Sorvete">Ice Cream Sandwich</abbr></li>
+                    <li>4.1 - <abbr title="Jujuba">Jelly Bean</abbr></li>
+                    <li>4.4 - <abbr title="Kit KitKat">KitKat</abbr></li>
+                    <li>5.0 - <abbr title="Pirulito">Lolipop</abbr></li>
+                    <li>6.0 - <abbr title="Marshmallow">Marshmallow</abbr></li>
+                    <li>7.0 - <abbr title="Nougat">Nougat</abbr></li>
+                    <li>8.0 - <abbr title="Oreo">Oreo</abbr></li>
+                    <li>9.0 - <abbr title="Torta">Pie</abbr></li>
+                </ul>
+
+                <p>
+                    Infelizmente, o <strong>Android</strong> Q não existiu, pois o Google resolveu pôr fim a essa divertida prática e começou a usar numerações, o que deu origem ao Android 10.</p>
+
+                    <p>Acesse aqui o site <a href="https://www.android.com/intl/pt_pt/what-is-android/" target="_blank" class="externo">Android History</a> para conhecer a sequência das versões "adocicadas" e o que cada uma trouxe para o sistema Android.
+                </p>
+
+            </aside>
+
+            <p>Então é isso! Espero que você tenha gostado do nosso artigo com essa curiosidade sobre o sistema <strong>Android</strong> e seu simpático mascote.</p>
+
+        </article>
+    </main>
+    <footer>
+        <p>Site criado por Gustavo Guanabara para o <a href="https://github.com/gustavoguanabara" target="_blank" class="externo">CursoemVideo</a>.</p>
+    </footer>
+</body>
+</html>

exercicios/ex01/estilo/style.css

@@ -0,0 +1,198 @@
+@charset "UTF-8";
+
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+
+@font-face{
+    font-family: 'Android';
+    src: url('../fontes/idroid.otf') format('opentype');
+    font-weight: normal;
+}
+
+:root{
+    --cor0:#36CA85;
+    --cor1:#45A076;
+    --cor2:#18F58D;
+    --cor3:#46755F;
+    --cor4:#394B43;
+    --cor5:#2C3330;
+
+    --font-padrao: Arial, Verdana, Helveticas, sans-serif;
+    --fonte-destaque:"Bebas Neue", sans-serif;
+    --font-adroid:'Android', sans-serif;
+}*{
+    margin: 0px;
+    padding: 0px;
+}
+
+
+
+body {
+    background-color: #a8d2ac;
+    font-family: var(--font-padrao);
+}
+
+a.externo::after{
+    content: '\1F517';
+}
+header{
+    background-image: linear-gradient(to bottom, var(--cor4),var(--cor1));
+    background-color: #314B34;
+    min-height: 150px;
+    text-align: center;
+    padding-top: 40px;
+}
+
+header h1{
+    color:#d2ebd6 ;
+    font-family: var(--fonte-destaque);
+    text-shadow: 3px 3px 8px black;
+    font-size: 3em;
+    text-align: center;
+    margin-bottom: 30px;
+
+
+}
+header p{
+    font-family: var(--font-padrao);
+    font-size: 1.2em;
+    color: aliceblue;
+    text-align: center;
+    max-width: 600px;
+    padding-right: 10px;
+    margin-left: 10px;
+    margin: auto;
+    text-shadow: 3px 3px 8px black;
+}
+nav {
+    background-color :var(--cor1);
+    padding: 10px;
+
+    text-shadow: 3px 3px 8px black;
+
+
+
+}
+nav >a{
+    color: #aacdae;
+    padding: 10px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-weight: bold;
+    transition-duration: 1s;
+}
+nav >a:hover{
+    background-color:#18F58D;
+}
+
+main{
+    min-width: 300px;
+    max-width: 1000px;
+    padding: 20px;
+    margin: auto;
+    margin-bottom: 30px;
+    background-color: #82A085;
+    box-shadow: 0px 0px 10px #0000007b;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+
+}
+main h1{
+    color: #314B34;
+    font-family: var(--font-adroid);
+}
+main h2{
+    color: #314B34;
+    font-family: var(--font-adroid);
+}
+
+
+main p{
+
+    margin: 15px 0px;      
+    text-align: justify;
+    text-indent: 30px;
+    font-size: 1.2em;
+    line-height: 1.3em;
+  }
+
+  main strong{
+    color: #0b2a0f;
+    font-weight: bold;
+    padding: 2px 6px;
+    text-shadow: 1px 1px 3px #2C3330;
+  }
+
+  main a{
+    text-decoration: none;
+    font-weight: bold;
+    color: #0b2a0f;
+    padding: 2px 6px;
+    text-shadow: 1px 1px 3px #2C3330;
+  }
+  main a:hover{
+    text-decoration: underline;
+    color: #36CA85;
+  }
+main img{
+    width: 100%;
+}
+main img.pequena{
+    max-width: 250px;
+    display: block;
+    margin: auto;
+}
+div.video{
+    background-color: #aacdae;
+    margin: 0px -20px 30px -20px;
+    padding: 20px;
+    padding-bottom: 56.9%;
+    position: relative;
+
+}
+div.video > iframe {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    width: 90%;
+    height: 90%;
+}
+aside{
+    background-color: #a8d2ac;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px #0000007b;
+}
+aside > h3{
+    background-color: #82A085;
+    color: #314B34;
+    font-family: var(--font-adroid);
+    padding: 10px;
+    margin: -5px -10px 0px -10px;
+    border-radius: 10px 10px 0px 0px;
+
+}
+aside > ul{
+    list-style-type: '\2714\00A0\00A0';
+    list-style-position: inside;
+    columns: 2;
+
+}
+
+footer{
+    background-color: #0B3310;
+    color: aliceblue;
+    text-align: center;
+    font-size: 0.8;
+    padding: 5px;
+}
+footer a{
+    color: aliceblue;
+    font-weight:bolder ;
+    text-decoration: none;
+}
+
+footer a:hover{
+    text-decoration: underline;
+    color: #18F58D;
+}
+