diff --git a/index.html b/index.html index 27d3829..2c9f876 100644 --- a/index.html +++ b/index.html @@ -1,58 +1,60 @@ - - - - - Netuno - HTML - - -
+ + + + + + Netuno - HTML + + + +
+
+
+ + +
+
+
+ +
+
- -
-
- -
-
-
-
-
-

Bem-vindo ao Netuno

-

Aqui você encontra cursos e formações que irão te levar ao próximo nível.

-
-
-

Se inscreva na nossa newsletter e fique por dentro de tudo!

- -
+
+

Se inscreva na nossa newsletter e fique por dentro de tudo!

+
+
+
- +
- + - + + - - - + \ No newline at end of file diff --git a/styles.css b/styles.css index b0723d4..eac172a 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Poppins:wght@700&display=swap'); + /*Variaveis*/ -:root{ +:root { --primary-color: #101026; --secundary-color: #1d1d2e; --text-color: #fff; @@ -10,37 +11,42 @@ --fira-code: 'Fira Code', monospace; --poppins: 'Poppins', sans-serif; } + /*Reset*/ -*{ - padding: 0; - margin: 0; - box-sizing: border-box; +* { + padding: 0; + margin: 0; + box-sizing: border-box; text-decoration: none; list-style: none; } -img{ + +img { width: 100%; } -body{ + +body { background-color: var(--secundary-color); color: var(--text-color); height: 100vh; font-family: var(--fira-code) } -::selection{ + +::selection { background-color: var(--text-color); color: var(--primary-color) } /*Classes auxiliares*/ -.container{ +.container { width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; padding: 1.2rem 1.5rem; } -.row{ + +.row { display: flex; flex-direction: column; justify-content: center; @@ -49,40 +55,44 @@ body{ } /*Página de extinções*/ -.table-animais{ +.table-animais { width: 100%; } -.table-animais > thead{ + +.table-animais>thead { background-color: #fff; color: #101026; } -.table-animais > thead > tr > th{ +.table-animais>thead>tr>th { border: 1px solid var(--pramary-color); padding: 2px 8px; } -.table-animais > tbody > tr > td{ +.table-animais>tbody>tr>td { border: 1px solid #fff; padding: 2px 8px; } /*página inicial*/ -main{ +main { height: 75%; } + /*Header*/ -.header__logo{ +.header__logo { width: 75%; } -.header__list{ + +.header__list { width: 100%; display: flex; justify-content: space-evenly; align-items: center; } -.list__item{ + +.list__item { padding: 5px 10px; background-color: var(--btn-primary); border-radius: 4px; @@ -90,37 +100,40 @@ main{ transition: all 0.3s ease-in-out; } -.list__item--link{ +.list__item--link { color: #1d1d2e; transition: all 0.3s ease-in-out; } -.list__item:hover{ +.list__item:hover { transform: scale(1.1); background-color: var(--btn-hover-color); border: 1px solid var(--border-color); } -.list__item:hover > .list__item--link{ +.list__item:hover>.list__item--link { color: var(--text-color); } /*Hero*/ -.hero__content{ +.hero__content { width: 100%; } -.hero__content h2{ + +.hero__content h2 { font-family: var(--poppins); font-size: 45px; line-height: 45px; margin-bottom: 10px; } -.hero__form{ + +.hero__form { width: 100%; } -.newsletter{ + +.newsletter { width: 100%; height: 80px; display: flex; @@ -130,7 +143,8 @@ main{ margin-top: 10px; gap: 5px; } -.input-group{ + +.input-group { width: 100%; height: 40px; display: flex; @@ -138,40 +152,45 @@ main{ align-items: center; } -.input-group input{ + +.input-group input { width: 100%; height: 100%; padding-left: 5px; } -.input-group input::placeholder{ + +.input-group input::placeholder { color: #101026; } -.input-group input:focus{ + +.input-group input:focus { outline: none; } -.form__btn{ + +.form__btn { width: 100%; height: 40px; background-color: var(--btn-primary); cursor: pointer; } -.form__btn:hover{ +.form__btn:hover { background-color: var(--btn-hover-color); border: 1px solid var(--border-color); color: var(--text-color); } /*Página de boas vindas*/ -.boas-vindas{ +.boas-vindas { height: 100% } -.boas-vindas > .container > .row > .content{ + +.boas-vindas>.container>.row>.content { width: 60%; text-align: center; } -.boas-vindas > .container > .row > .content h2{ +.boas-vindas>.container>.row>.content h2 { font-size: 42px; } @@ -180,14 +199,15 @@ main{ /*footer*/ -.footer{ - height:20px; +.footer { + height: 20px; display: flex; justify-content: center; align-items: center; - margin-bottom:1rem; + margin-bottom: 1rem; } -.footer__copy{ + +.footer__copy { font-size: 12px; } @@ -197,23 +217,26 @@ main{ /* Small devices (landscape phones, 576px and up)*/ @media (min-width: 576px) { - .header{ + .header { height: 80px; } + .header .container .row { flex-direction: row; justify-content: space-around; } - .header__logo{ + + .header__logo { width: 25%; } - .header__list{ + + .header__list { width: 75%; justify-content: flex-end; column-gap: 8px; } - main{ + main { height: calc(100% - 100px); } @@ -221,10 +244,11 @@ main{ /* Medium devices (tablets, 768px and up)*/ @media (min-width: 768px) { - .hero{ + .hero { height: 100%; } - .hero .container .row{ + + .hero .container .row { flex-direction: row; justify-content: space-between; } @@ -235,34 +259,29 @@ main{ /* Large devices (desktops, 992px and up)*/ @media (min-width: 992px) { - .newsletter{ + .newsletter { flex-direction: row; } - .hero__content{ + + .hero__content { width: 40%; } - .hero__form{ + + .hero__form { width: 40%; } - .input-group{ + + .input-group { width: 79%; } - .form__btn{ + + .form__btn { width: 20%; } } /* X-Large devices (large desktops, 1200px and up)*/ -@media (min-width: 1200px) { - .hero{ - background: url(https://images.pexels.com/photos/16668845/pexels-photo-16668845.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - background-attachment: fixed; - - } -} +@media (min-width: 1200px) {} /* XX-Large devices (larger desktops, 1400px and up)*/ -@media (min-width: 1400px) {} +@media (min-width: 1400px) {} \ No newline at end of file