-
-
Save Gustavocnt/b82fd7fc1f2acbb474edad431c898b04 to your computer and use it in GitHub Desktop.
Continuação exercício site versão desk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="pt-br"> | |
<head> | |
<link rel="preconnect" href="https://fonts.googleapis.com"> | |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Space Cream</title> | |
<link rel="stylesheet" href="style.css"> | |
<link href="https://fonts.googleapis.com/css2?family=Palanquin&family=Staatliches&display=swap" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="page"> | |
<header> | |
<div class="logomobile"> | |
<img src="images/logo.png" alt="logo do sorvete"> | |
</div> | |
<div class="logodesktop"> | |
<img src="images/logo4.png" alt="logo do sorvete com aros"> | |
</div> | |
<h1>Space Cream</h1> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a rhoncus leo. Donec at scelerisque magna. Nullam vitae neque sit amet erat dignissim cursus ac ac lectus. Aliquam erat volutpat. Praesent at quam aliquet, pharetra est in, sagittis lorem.elit. Donec a rhoncus leo. Donec at scelerisque magna. Nullam vitae neque sit amet erat dignissim cursus ac ac lectus. Aliquam erat volutpat. Praesent at quam aliquet, pharetra est in, sagittis lorem.</p> | |
</header> | |
<main> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a rhoncus leo. Donec at scelerisque magna. Nullam vitae neque sit amet erat dignissim cursus ac ac lectus. Aliquam erat volutpat. Praesent at quam aliquet, </p> | |
<div class="grid-desktop"> | |
<div class="cards"> | |
<img src="images/sorvete1.png" alt="imagem das paletas"> | |
<h2>Paletas</h2> | |
</div> | |
<div class="cards"> | |
<img src="images/sorvete2.png" alt="imagem do shake de frutas"> | |
<h2>Shake</h2> | |
</div> | |
<div class="cards"> | |
<img src="images/sorvete1.png" alt="imagem das paletas"> | |
<h2>Paletas</h2> | |
</div> | |
<div class="cards"> | |
<img src="images/sorvete4.png" alt="imagem de um picolé"> | |
<h2>Picolés</h2> | |
</div> | |
<div class="cards"> | |
<img src="images/sorvete3.png" alt="imagem de uma bola de massa"> | |
<h2>Massas</h2> | |
</div> | |
<div class="cards"> | |
<img src="images/sorvete4.png" alt="imagem de um picolé"> | |
<h2>Picolés</h2> | |
</div> | |
</div> | |
<footer> | |
<p>Fale conosco no Instagram <a href="#">@space_cream</a></p> | |
</footer> | |
</main> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
:root { | |
--ff-heading:'Staatliches', sans-serif; /*ff-heading significa fonte para textos grandes*/ | |
--ff-texting: 'Palanquin', sans-serif; | |
--bg-primary: #EFF1FF; | |
--fc-primary: #4A4E69; | |
--fc-secondary: #FFF; | |
font-size: 62.5%; | |
} | |
body { | |
font-family: var(--ff-texting); | |
background: var(--bg-primary); | |
color: var(--fc-primary); | |
font-size: 1.6rem; | |
} | |
/*body::before { | |
content: ''; /*cria um conteudo html antes de todos outros já criado* | |
width: 100%; | |
height: 28rem; | |
background: #8E9AAF; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: -1; | |
}*/ | |
.page { | |
max-width: 38.4rem; | |
margin: 0 auto; | |
} | |
main { | |
display: grid; /*O grid é a mesma coisa de usar o display flex e o display direction para usar o gap para baixo*/ | |
gap: 3.2rem; | |
margin-bottom: 6.0rem; | |
} | |
main img { | |
width: 100%; | |
height: auto; | |
} | |
main p { | |
margin-top: 1.4rem; | |
font-style: normal; | |
font-weight: 400; | |
font-size: 2.0rem; | |
line-height: 2.4rem; | |
color: var(--fc-primary); | |
text-align: center; | |
} | |
header { | |
font-family: var(--ff-heading); | |
text-align: center; | |
/*margin-top: 3.2rem;*/ | |
height: 28rem; | |
width: 100%; | |
background: #8E9AAF; | |
} | |
header img { | |
width: 13.7rem; | |
height: 13.7rem; | |
margin: 3.2rem 0; /* adicionei uma margem no top e bottom da imagem */ | |
} | |
header h1 { | |
color: var(--fc-secondary); | |
text-transform: uppercase; | |
font-size: 4.0rem; | |
background: #CBC0D3; | |
/*margin-top: 3.2rem;*/ | |
/*margin-bottom: 2.9rem;*/ | |
font-family: var(--ff-heading); /* adicionei a font */ | |
line-height: 3.4rem; /* adicionei a altura da linha */ | |
letter-spacing: 0.2rem; /* adicionei o espaçamento da letra */ | |
padding: 0.8rem 0; /* removi o margin top e bottom e adicionei o padding no top e bottom */ | |
} | |
.logodesktop { | |
display: none; | |
} | |
header p { /*utilizei este comando para a versao dektop */ | |
display: none; | |
} | |
.cards img { | |
/*height: 25rem; na aula sugere utilizar a altura do cards, mas no desafio cada card é um tamanho, por isso deixei img do main como 100% e auto*/ | |
object-fit: cover; | |
transition: all 200ms; | |
border-radius: 2rem; /* adicionei o border-radius na imagem */ | |
} | |
.cards img:hover { | |
transform: scale(1.1); | |
opacity: 0.4; | |
} | |
.cards { | |
position: relative; /*tem que deixar a div cards com posição relative para que o h2 que está dentro da div cards, fica absoluto relativo a card, e nao absoluto na página inteira, apenas no cartão*/ | |
} | |
.cards h2 { | |
position: absolute; | |
top: 1.6rem; | |
right: 1.6rem; | |
border-radius: 2rem; | |
background: #FEEAFA; | |
width: 12rem; | |
height: 3.5rem; | |
padding: 0 1.6rem; | |
font-size: 2rem; | |
/*font-weight: bold;*/ | |
font-family: var(--ff-heading); | |
text-align: center; | |
/*display: inline-flex;*/ | |
display: flex; | |
align-items: center; /* centraliza os itens no eixo y */ | |
justify-content: center; /* centraliza os itens no eixo x */ | |
} | |
footer { | |
display: none; | |
} | |
@media (min-width: 900px) { | |
body { | |
background: white; | |
} | |
header { | |
width: 37.7rem; | |
height: 100vh; | |
} | |
header p { | |
display: block; | |
color: #FFFFFF; | |
font-size: 1.8rem; | |
line-height: 2rem; | |
font-family: var(--ff-texting); | |
font-style: normal; | |
font-weight: 400; | |
text-align: center; | |
width: 28rem; | |
margin: 3.2rem auto; | |
} | |
.page { | |
display: flex; | |
max-width: 128rem; | |
margin: 0; | |
} | |
.logomobile { | |
display: none; | |
} | |
.logodesktop { /*A logo Desktop nao está ficando com o tamanho correto*/ | |
display: block; | |
padding: 3.2rem 0; | |
width: 100%; | |
} | |
main { | |
display: initial; | |
padding: 5rem; | |
} | |
main p { | |
display: none; | |
} | |
.grid-desktop { | |
display: grid; | |
gap: 3.2rem; | |
grid-template-areas: | |
'A B C' | |
'D B E' | |
'D F E'; | |
} | |
.grid-desktop .cards:nth-child(1) { | |
grid-area: A; | |
} | |
.grid-desktop .cards:nth-child(2) { | |
grid-area: B; | |
} | |
.grid-desktop .cards:nth-child(3) { | |
grid-area: C; | |
} | |
.grid-desktop .cards:nth-child(4) { | |
grid-area: D; | |
} | |
.grid-desktop .cards:nth-child(5) { | |
grid-area: F; | |
} | |
.grid-desktop .cards:nth-child(6) { | |
grid-area: E; | |
} | |
footer { | |
padding-top: 2rem; | |
margin-left: 37.7rem; | |
} | |
footer p { | |
font-family: var(--ff-texting); | |
font-size: 1.4rem; | |
font-weight: 400; | |
color: var(--fc-primary); | |
text-decoration: none; | |
line-height: 2.8rem; | |
} | |
footer p a { | |
font-weight: bold; | |
font-size: 1.4rem; | |
text-decoration: none; | |
font-family: var(--ff-texting); | |
color:var(--fc-primary); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment