Scribd
Upload
13 views8 pages

Site Apple

The document is an HTML and CSS code for a responsive Apple-themed website featuring sections for iPhones and iPads. It includes a header with navigation links, product cards for various iPhone models with descriptions and pricing, and responsive design elements for different screen sizes. The CSS styles define layout, typography, and hover effects for buttons and links.

Uploaded by

sertaoshakira
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views8 pages

Site Apple

The document is an HTML and CSS code for a responsive Apple-themed website featuring sections for iPhones and iPads. It includes a header with navigation links, product cards for various iPhone models with descriptions and pricing, and responsive design elements for different screen sizes. The CSS styles define layout, typography, and hover effects for buttons and links.

Uploaded by

sertaoshakira
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Site Apple Responsivo</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://logopng.com.br/logos/apple-4.png" alt="">
</div>
<nav class="menu">
<ul>
<li><a href="">Loja</a></li>
<li><a href="#iphone">Iphone</a></li>
<li><a href="#ipad">Ipad</a></li>
<li><a href="">Login</a></li>
</ul>
</nav>
</header>
<main>
<section id="iphone">
<h2>Conheça a família - Iphone!</h2>
<div class="produtos">
<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_16pro__erw9alves2qa_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 16 Pro</span>
</div>
<div>
<span class="subtitulos">O Iphone
definitivo.</span>
</div>
<div>
<span class="descricao">A partir de R$
874,92/mês ou R$ 10.499</span>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_16__c5bvots96jee_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 16</span>
</div>
<div>
<span class="subtitulos">Poderoso em
tudo.</span>
</div>
<div>
<span class="descricao">A partir de R$
649,92/mês ou R$ 7.799</span>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_15__buwagff0mwwi_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 15</span>
</div>
<div>
<span class="subtitulos">Impressionante como
sempre.</span>
</div>
<div>
<span class="descricao">A partir de R$
541,58/mês ou R$ 6.499</span>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_14__eso1fig4ci6a_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 14</span>
</div>
<div>
<span class="subtitulos">Cheio de
talentos.</span>
</div>
<div>
<spn class="descricao">A partir de R$
483,25/mês ou R$ 5.799</spn>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

</div>
</section>
<section id="ipad">
<h2>Conheça a família Ipad!</h2>
<div class="produtos">
<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_16pro__erw9alves2qa_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 16 Pro</span>
</div>
<div>
<span class="subtitulos">O Iphone
definitivo.</span>
</div>
<div>
<span class="descricao">A partir de R$
874,92/mês ou R$ 10.499</span>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_16__c5bvots96jee_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 16</span>
</div>
<div>
<span class="subtitulos">Poderoso em
tudo.</span>
</div>
<div>
<span class="descricao">A partir de R$
649,92/mês ou R$ 7.799</span>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_15__buwagff0mwwi_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 15</span>
</div>
<div>
<span class="subtitulos">Impressionante como
sempre.</span>
</div>
<div>
<span class="descricao">A partir de R$
541,58/mês ou R$ 6.499</span>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

<div class="card_itens">
<div class="foto">
<img
src="https://www.apple.com/v/iphone/home/bx/images/overview/select/ipho
ne_14__eso1fig4ci6a_xlarge.png" alt="">
</div>
<div>
<span class="titulos">Iphone 14</span>
</div>
<div>
<span class="subtitulos">Cheio de
talentos.</span>
</div>
<div>
<spn class="descricao">A partir de R$
483,25/mês ou R$ 5.799</spn>
</div>
<div>
<a href="" class="link-btn">Saiba mais!</a>
</div>
</div>

</div>
</section>
</main>
</body>
</html>
CSS

html{
font-size: 62.5%;
}
body{
margin: 0px;
padding: 0px;
}
header{
background-color: gainsboro;
display: grid;
grid-template-columns: auto 1fr;
justify-items: end;
padding: 10px;

}
.logo{
width: 25px;
height: 30px;
align-self: center;
justify-self: start;
}
.logo img{
width: 100%;
height: 100%;

.menu ul li{
display: inline-block;
}

.menu ul li a{
text-decoration: none;
color: black;
padding: 10px;
font-size: 1.2rem;
}
/*primeira sessão*/
section{
width: 90%;
margin: 0 auto;
}
section h2{
font-size: 2.5rem;
}
.produtos{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
align-items: center;
justify-items: center;
}
.card_itens{
text-align: center;
width: 100%;
}
.titulos{
font-size: 2.5rem;
font-weight: bold;
padding: 1.6rem;
}
.subtitulos{
font-size: 2rem;
padding: 1.6rem;
}
.descricao{
font-size: 1.8rem;
padding: 1.6rem;
font-weight: bold;
}

.link-btn{
margin-top: 1rem;
display: inline-block;
border-radius: 5px;
background-color: rgba(202, 83, 172, 0.699);
color: white;
font-weight: bold;
padding: 1.6rem;
text-decoration: none;
font-size: 1.5rem;
}
.link-btn:hover{
background-color: white;
color: rgba(202, 83, 172, 0.699);
border: 1px solid black;
}

/*midia queries table*/


@media(max-width:768px){
.produtos{
grid-template-columns: repeat(2,1fr);
}
section h2{
text-align: center;
}
}
section{
height: 100vh;
display: none;
}
#iphone:target{
display: block;
}
#ipad:target{
display: block;
}
/*midia queries celular*/
@media(max-width:480px){
.produtos{
grid-template-columns: 1fr;
}
section h2{
text-align: center;
}
.logo{
display: none;
}
}

You might also like