dgleyramos
/
bootcamp-netuno
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Alterações no css

master
Dgley Ramos 3 years ago
parent
b70aa73de9
commit
304d98b1e8
2 changed files with 128 additions and 107 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +49
    -47
      index.html
  2. +79
    -60
      styles.css

+ 49
- 47
index.html View File

@ -1,58 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="./styles.css"/>
<title>Netuno - HTML</title>
</head>
<body>
<header class="header">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="./styles.css" />
<title>Netuno - HTML</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="header__logo">
<img src="https://dev.netuno.org/images/logo.svg" alt="Logo do Netuno">
</div>
<ul class="header__list">
<li class="list__item">
<a class="list__item--link" href="./extincoes.html">Extinções</a>
</li>
<li class="list__item">
<a class="list__item--link" href="#">Parques</a>
</li>
</ul>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="row">
<div class="header__logo">
<img src="https://dev.netuno.org/images/logo.svg" alt="Logo do Netuno">
<div class="hero__content">
<h2>Bem-vindo ao Netuno</h2>
<p>Aqui você encontra cursos e formações que irão te levar ao próximo nível.</p>
</div>
<ul class="header__list">
<li class="list__item">
<a class="list__item--link" href="./extincoes.html">Extinções</a>
</li>
<li class="list__item">
<a class="list__item--link" href="#">Parques</a>
</li>
</ul>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="row">
<div class="hero__content">
<h2>Bem-vindo ao Netuno</h2>
<p>Aqui você encontra cursos e formações que irão te levar ao próximo nível.</p>
</div>
<div class="hero__form">
<p>Se inscreva na nossa newsletter e fique por dentro de tudo!</p>
<form class="newsletter">
<label class="input-group">
<input id="email" type="email" placeholder="Digite seu e-mail"/>
</label>
<input class="form__btn" type="submit" id="btn-submit" value="Inscreva-se"/>
</form>
</div>
<div class="hero__form">
<p>Se inscreva na nossa newsletter e fique por dentro de tudo!</p>
<form class="newsletter">
<label class="input-group">
<input id="email" type="email" placeholder="Digite seu e-mail" />
</label>
<input class="form__btn" type="submit" id="btn-submit" value="Inscreva-se" />
</form>
</div>
</div>
</div>
</section>
</section>
</main>
</main>
<footer class="footer">
<p class="footer__copy">&copy;Todos os direitos reservados!</p>
</footer>
<footer class="footer">
<p class="footer__copy">&copy;Todos os direitos reservados!</p>
</footer>
<script src="./script.js"></script>
</body>
<script src="./script.js"></script>
</body>
</html>
</html>

+ 79
- 60
styles.css View File

@ -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) {}

Write Preview
Loading…
Cancel
Save