Boas.
Estou a aprender/reciclar os conhecimentos em código aqui na Codecademy há cerca de 5 semanas. Estou a gostar da forma como está tudo estruturado.
Agora preciso de ajuda
Neste projeto que tem por base o LAYOUT WITH FLEXBOX tenho várias dúvidas mas as que mais me preocupam são duas:
1ª Quando defino os id=“top” e id=“centro” e atribuir a referência na lista colocada em ao selecionar uma das opções a página não fica corretamente colocada. Não percebo…
2ª Para acabar o projeto defini um fora do pois vi em algumas lições que poderia ser assim. Mas o texto do footer fica dentro do body se eu não definir o que está como comentário, ou seja, eu no ficheiro CSS definir : position: relative;
top: 200px;
Partilho o meu projeto no que tive algumas dificuldades mas que por tentativa e erro consegui fazer quase o suposto.
Aceito sugestões se tiverem essa disponibilidade de corrigir ou comentar o que poderia ser diferente.
Obrigado.
Google Translate
Good.
I am learning / recycling the code knowledge here at Codecademy about 5 weeks ago. I’m enjoying the way it’s all structured.Now I need help: slight_smile:
In this project that is based on LAYOUT WITH FLEXBOX I have several doubts but the ones that worry me the most are two:
1st When I define the
id = "top"
andid = "center"
and assign the reference in the list placed in when selecting one of the options the page is not correctly placed. I do not understand …2ª To finish the project I defined one out of the because I saw in some lessons that could be so. But the text of the footer stays inside the body if I do not define what is as comment, that is, I in the CSS file define:
`position: relative;` `top: 200px;`
I share my project in what I had some difficulties but that by trial and error I managed to do almost the supposed.
I accept suggestions if they are willing to correct or comment on what might be different.
Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link href="./style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<span class="logo"><img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png"></span>
<ul class="lista">
<li><a href="#top">Mission</a></li>
<li><a href="#centro">Feature Tea</a></li>
<li><a href="#local">Locations</a></li>
</ul>
</header>
<!-- Banner -->
<div class="banner" id="top">
<div class="description">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organico Tea</h4>
</div>
</div>
<!-- Main -->
<section class="supporting" id="centro">
<div>
<h2>Tea of the month</h2>
<h4>What's Steeping at The Tea Cozy</h4>
</div>
<div class="container">
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
<br>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
<br>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
<br>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
<br>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
<br>
</div>
</div>
</section>
<!-- Banner2 -->
<div class="bannerTwo" id="local">
<h2>Locations</h2>
<div class="adress">
<div class="locals">
<h3>Dowtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="locals">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="locals">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
<!-- Bottom -->
<section class="bottom" >
<div>
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
</section>
</body>
<!-- Footer -->
<footer>
<span>copyright The Tea Cozy 2017</span>
</footer>
</html>
html, body {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: black;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
height: 69px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 50px;
margin-left: 10px;
}
.lista {
margin-right: 10px;
}
.lista li {
text-decoration: underline;
display: inline-block;
margin: 5px;
}
/* Banner */
.banner {
width: 1200px;
height: 700px;
background: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg") center center no-repeat;
background-size: cover;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: 70px;
z-index: 2px;
}
.description {
background-color: black;
background-size: cover;
width: 1200px;
}
/* Main */
.supporting {
position: relative;
top: 140px;
margin:0 auto;
width: 1000px;
}
.container {
margin-top: 30px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.supporting h4 {
font-weight: bold;
line-height: 20px;
padding-top: 10px;
margin: 0 auto;
}
.container img {
height: 200px;
width: 300px;
}
/* Banner Two */
.bannerTwo {
width: 1200px;
height: 500px;
background: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg") center center no-repeat;
background-size: cover;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
top: 210px;
z-index: 2px;
flex-direction: column;
}
.adress {
display: inline-flex;
}
.locals {
background-color: black;
background-size: cover;
width: 300px;
margin: 15px 20px;
}
/* Bottom */
.bottom {
position: relative;
top: 200px;
margin:0 auto;
height: 200px;
}
/* Footer */
footer {
/* position: relative;
top: 200px; I have to put this? why?? */
text-align: left;
margin-left: 20px;
}
/*END*/