novo site

Danielassuncao99 · Jul 21, 2023 · afb1696 · afb1696
1 parent b93109e
commit afb1696
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 0 deletions.
diff --git a/estilo/style.css b/estilo/style.css
@@ -0,0 +1,201 @@
+@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: #c5ebd6;
+    --cor1: #83e1ad;
+    --cor2: #3ddc84;
+    --cor3: #2fa866;
+    --cor4: #1a5c37;
+    --cor5: #083d1e;
+
+    --fonte-padrao: Arial, Verdana, Helvetica, sans-serif; 
+    --fonte-destaque: 'Bebas Neue', cursive; 
+    --font-android: 'Android', cursive; 
+
+
+}
+*{
+    margin: 0px;
+    padding: 0px ;
+}
+
+body{
+    background-color:  var(--cor0);
+    font-family: var(--fonte-padrao);
+}
+a.externo::after{
+    content:'\00A0\1F517';
+}
+
+header{
+    background-image: linear-gradient(to bottom, var( --cor3), var( --cor5) );
+    font-family: var(--fonte-padrao);
+    min-height: 150px;
+    text-align: center;
+    padding-top: 40px;
+}
+
+header h1{
+    color: white;
+    font-family: var(--fonte-destaque);
+    margin-bottom: 20px ;
+    font-size: 3em;
+    font-weight: normal;
+    text-shadow: 2px
+     2px 0px rgba( 0,0,0,0,267);
+}
+header p{
+    color: white;
+    font-family: var(--fonte-padrao);
+    font-size: 1.2em;
+    max-width: 500px;
+    padding-right: 10px;
+    padding-left: 10px;
+    margin: auto;
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 0px rgba( 0,0,0,0,315);
+}
+nav{
+    background-color: var(--cor5);
+    padding: 10px;
+    box-shadow: 0px 7px 7px rgba(0,0,0,0,192);
+
+
+}
+nav > a {
+    color: var(--cor1);
+    padding: 10px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-weight: bold;
+
+}
+nav>:hover{     
+    background-color: var(--cor3);
+    color: var(--cor5);
+}
+main{
+
+    min-width: 300px;
+    max-width: 1000px;
+    padding: 20px;
+    margin: auto;
+    margin-bottom:30px;
+    background-color: white;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.352);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+main h1{
+    color: var(--cor5);
+    font-family: var(--font-android);
+    font-weight: normal;
+    font-size: 1.8em;
+}
+main h2{ 
+    font-size: var(--font-android);
+    color: var(--cor4);
+    font-size: 1.3em;
+    font-weight: normal;
+    background-image: linear-gradient(to right, var(--cor1), transparent);
+    text-indent: 8px;
+}
+main p {
+    margin: 15px 0px;
+    text-align: justify;
+    text-indent: 30px;
+    font-size: 1em;
+    line-height: 2em;
+}
+main strong{
+    color: var(--cor4);
+    font-weight: bold;
+
+}
+
+main a { 
+    text-decoration: none;
+    font-weight: bold;
+    color: var(--cor5);
+    background-color: var(--cor1);
+    padding: 2px 6px;
+}
+main a:hover{
+    text-decoration: underline;
+    color: var(--cor4);
+
+
+}
+main img{
+    width: 100%;
+}
+main img.pequena{
+    max-width: 350px;
+    display: block;
+    margin: auto;
+}
+
+div.video{
+    background-color: var(--cor4);
+    margin: 0px -20px 30px;
+    padding: 20px;
+    padding-bottom: 58%;
+    position: relative;
+}
+div.video>iframe{
+    position: absolute;
+    top: 5%;
+    left:5% ;
+    width:90% ;
+    height:90% ;
+
+
+}
+
+aside{
+    background-color: var(--cor1);
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.285);
+}
+
+aside > h3{
+    background-color: var(--cor4);
+    color: white;
+    padding: 10px;
+    margin: -10px -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: var(--cor5);
+    color: white;
+    text-align: center;
+    font-size: 0.8em;
+    padding: 5px;
+}
+footer a {
+    color: white;
+    font-weight: bold;
+    text-decoration: none;  
+}
+footer a:hover{
+    text-decoration: underline;
+    color: var(--cor1);
+}
diff --git a/fontes/idroid.otf b/fontes/idroid.otf
diff --git a/imagens/bugdroid.png b/imagens/bugdroid.png
diff --git a/imagens/dan-droids-pq.png b/imagens/dan-droids-pq.png
diff --git a/imagens/dan-droids.png b/imagens/dan-droids.png
diff --git a/imagens/favicon.ico b/imagens/favicon.ico
diff --git a/imagens/irina-blok-pq.jpg b/imagens/irina-blok-pq.jpg
diff --git a/imagens/irina-blok.jpg b/imagens/irina-blok.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Como 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 morril</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:600px)" srcset="imagens/dan-droids-pq.png   ">
+                <img src="imagens/dan-droids.png" alt="primeiro mascote do android"></picture>
+
+            <p>Essa primeira versão bizarra até foi batizada em homenagem ao seu criador: seriam os <stron>Dandroids</stron>.</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/android" 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>
+
+            <img src="imagens/irina-blok.jpg" alt="irina block, criadora do bugdroid">
+
+            <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" class= "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" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 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="bolo de copo">Cupcake</abbr></li>
+                    <li>1.6 - <abbr title="rosquinha">Donut</abbr></li>
+                    <li>3.0 - <abbr title="bomba">Eclair</abbr></li>
+                    <li>2.2 - <abbr title="iogurte congelado">Froyo</abbr></li>
+                    <li>2.3 - <abbr title="biscoito de gengibre">Gingerbread</abbr></li>
+                    <li>3.0 - <abbr title="favo de mel ">Honeycomb</abbr></li>
+                    <li>4.0 - <abbr title="sanduiche de sorvete">Ice Cream Sandwich</abbr></li>
+                    <li>4.1 - <abbr title=" jujuba">Jelly Bean</abbr></li>
+                    <li>4.4 - <abbr title=" 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="torrone">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 Q</strong> 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/en_uk/history/" 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 Android e seu simpático mascote.</p>
+        </article>
+    </main>
+    <footer>
+          <p>site criado por <a href="https://github.com/gustavoguanabara/html-css" target="_blank">Gustavo guanabara, Aluno: Daniel Assunção </a> <a href="https://www.youtube.com/@CursoemVideo" target="_blank">Curso em Video.</a>
+    </footer>
+</body>
+</html>