Wikipédia OTAKU

README.md

@@ -1,19 +1,19 @@
-# Módulo 3 - Trilha HTML
-
-**Título:** Recriando Wikipedia, com um layout melhor :)
-
-## Objetivo
-Este desafio consiste em treinar você com relação a estrutura do site, e também aplicar conhecimentos adiquiridos sobre semântica e acessibilidade.
-
-## Desafio
-Neste repositório tem uma estrutura básica já pré-montada de um layout simples com um pouco de CSS aplicado. Apenas para deixar mais apresentável.
-
-Fiquem a vontade para criar da forma que desejarem, e sobre os temas que quiserem. O intuito aqui é divertir, e ao mesmo tempo aprender com o desafio.
-
-Sigam as intruções da chamada do vídeo. Acredito que por lá, ficará mais fácil de entenderem como proceder.
-
-## Links úteis
-- [Download do NVDA](https://www.nvaccess.org/download/)
-- [Wikipedia](https://pt.wikipedia.org/)
-
-
+# Módulo 3 - Trilha HTML
+
+**Título:** Recriando Wikipedia, com um layout melhor :)
+
+## Objetivo
+Este desafio consiste em treinar você com relação a estrutura do site, e também aplicar conhecimentos adiquiridos sobre semântica e acessibilidade.
+
+## Desafio
+Neste repositório tem uma estrutura básica já pré-montada de um layout simples com um pouco de CSS aplicado. Apenas para deixar mais apresentável.
+
+Fiquem a vontade para criar da forma que desejarem, e sobre os temas que quiserem. O intuito aqui é divertir, e ao mesmo tempo aprender com o desafio.
+
+Sigam as intruções da chamada do vídeo. Acredito que por lá, ficará mais fácil de entenderem como proceder.
+
+## Links úteis
+- [Download do NVDA](https://www.nvaccess.org/download/)
+- [Wikipedia](https://pt.wikipedia.org/)
+
+

assets/css/style.css

@@ -1,38 +1,115 @@
-body, html {
-    margin: 0;
-    padding: 0;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-ul { list-style: none; padding-left: 5px; }
-a { color:blue; text-decoration: none;}
-.bar {
-    background-color: #f9f9fb;
-    padding:15px;
-    border-top: solid 1px #cdcdcd;
-    border-bottom: solid 1px #cdcdcd;
-}
-.content {
-    max-width: 1440px;
-    margin: auto;
-    grid-gap: 3rem;
-    display: grid;
-    gap: 3rem;
-    grid-template-areas: "sidebar main anchors";
-    grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-.footer {
-    min-height: 100px;
-    border-top: solid 1px #cdcdcd;
-}
-.anchors {
-    border-left: solid 1px #cdcdcd;
-    padding-left: 15px;
-}
-.sidebar {
-    border-right: solid 1px #cdcdcd;
-}
-figure {
-    text-align: center;
-}
+body, html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+ul { list-style: none; padding-left: 5px; }
+a { color:blue; text-decoration: underline;}
+.bar {
+    background-color: #f9f9fb;
+    padding:15px;
+    border-top: solid 1px #cdcdcd;
+    border-bottom: solid 1px #cdcdcd;
+}
+content {
+    max-width: 1440px;
+    margin: auto;
+    grid-gap: 3rem;
+    display: grid;
+    gap: 3rem;
+    grid-template-areas: "sidebar main anchors";
+    grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+footer {
+    text-align: center;
+    min-height: 100px;
+    background-color: black;
+    color: #cdcdcd;
+}
+nav {
+    background-color: black;
+    color: bisque;
+    border-left: solid 1px #cdcdcd;
+    padding-left: 10px;
+
+
+}
+
+nav ul li a{ 
+   padding: 2px 6px;
+   border-radius: 5px 0;
+}
+nav ul li a:hover{
+    color: black;
+    font-size: 110%;
+    background-color:white;
+}
+menu {
+    border-right: solid 1px #cdcdcd;
+    background-color: black;
+    color: bisque;
+    margin: 0px;
+
+}
+.figure1 {
+    text-align: center;
+    background-color: black;
+    border-radius: 15px 0px;
+    width: 400px;
+    height: 180px;
+    margin-left: 150px;
+}
+.figure2 {
+    text-align: center;
+    background-color: black;
+    border-radius: 15px 0px;
+    width: 400px;
+    height: 180px;
+    margin-left: 150px;
+}
+.figure3 {
+    text-align: center;
+    background-color: black;
+    border-radius: 15px 0px;
+    width: 400px;
+    height: 180px;
+    margin: 20px;
+    margin-left: 150px;
+
+
+}
+.audio{
+    margin-top: 5%;
+}
+header{
+   background-color: black; 
+}
+.audio{
+    width: 50%;
+}
+details ul{
+    font-size: 85%;
+    margin-left: 10%;
+
+}
+input{
+    width: 150px;
+    height: 30px;
+    margin: 5px;
+    border-radius: 10px;
+    border: none;
+}
+textarea{
+    width: 200px;
+    height: 150px;
+    margin: 5px;
+    border-radius: 10px;
+    border: none;
+}
+.fieldset{
+    text-align: center;
+    color: #cdcdcd;
+}
+