Clone do Website da Apple

Tome Almeida · November 13, 2023 at 06:27 PM

Boas, eu para praticar decidi começar a clonar o site da Apple. De início correu tudo bem, mas na minha última parte agora uma imagem fica bem no meu monitor mas desformata em qualquer outro monitor, eu gostava que me ajudassem a entender o porquê, visto que estou á horas a tentar resolver isto e não consigo. Peço que quando encontrarem outros pontos que deva melhorar me digam e peço que sejam compreensivos, eu sou novo nisto e quero mesmo aprender. Queria tentar mostrar o que acontece mas não consigo inserir imagens. Vou anexar um link para quem quiser fazer download de como eu vejo e quando fica desformatado.

https://we.tl/t-8iyZ8lw4Ok

e aqui está todo o código:

html

<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>Apple (Portugal)</title>
    <link rel="stylesheet" href="estilos.css" type="text/css">
	<link rel="icon" type="image/x-icon" href="./Project/applebrowsertab.png">
</head>
<body>
    <div id="total">
        <div id="nav-list">
			<ul>
				<li><img src="./Project/applelogo.png"></li>
				<li><a href="">Loja</a></li>
				<li><a href="">Mac</a></li>
				<li><a href="">iPad</a></li>
				<li><a href="">iPhone</a></li>
				<li><a href="">Watch</a></li>
				<li><a href="">Airpods</a></li>
				<li><a href="">TV e Casa</a></li>
				<li><a href="">Entretenimento</a></li>
				<li><a href="">Acessórios</a></li>
				<li><a href="">Suporte</a></li>
				<li class="nav-list-right-logos"><img src="./Project/searchlogo.png"></li>
				<li><img src="./Project/baglogo.png"></li>
			</ul>
		</div>
		<div id="macpro-container">
			<div id="container-list">
				<div class="title">MacBook Pro</div>
				<div class="subtitle">Brutal. E brilhante.</div>
				<div class="links">
					<a href="#"><span>Saiba mais ></span></a>
					<a href="#"><span>Compre ></span></a>
				</div>
				<div class="img">
					<img src="./Project/macpro.png">
				</div>
			</div>
		</div>
		<div id="imac-container">
			<div id="container-list">
				<div class="title">iMac</div>
				<div class="subtitle">Mais poder para tudo.</div>
				<div class="links">
					<a href="#"><span>Saiba mais ></span></a>
					<a href="#"><span>Compre ></span></a>
				</div>
				<div class="img">
					<img src="./Project/imac.png">
				</div>
			</div>
		</div>
		<div id="iphone-container">
			<div id="container-list">
				<div class="title iphone15">iPhone 15 Pro</div>
				<div class="subtitle iphone15">Titânio. Tão forte. Tão leve. Tão Pro.</div>
				<div class="links">
					<a href="#"><span>Saiba mais ></span></a>
					<a href="#"><span>Compre ></span></a>
				</div>
				<div class="img">
					<img src="./Project/iphone15.png">
				</div>
			</div>
		</div>
		
    </div>
</body>
</html>

css

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+Batak:700|Noto+Sans+Batak:400');

@font-face {
    font-family: 'Sf Pro';
    src: url(./Project/Fonts/SFNSDisplay-Regular.woff2);
}

:root {
    --text: #000000;
    --background: #fafafa;
    --primary: #c3c3c3;
    --secondary: rgb(22, 22, 23, 0.8);
    --links: #06c;
    --static: rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Sf Pro', sans-serif;
    scroll-behavior: smooth;
}

#total {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#nav-list {
    width: 100%;
    height: 44px;
    background: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
}

#nav-list ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.nav-list-right-logos {
    margin-right: 20px;
}

#nav-list li {
    font-size: 12px;
}

#nav-list img {
    height: 17px;
    margin-bottom: -3px;
}

#nav-list a {
    text-decoration: none;
    color: var(--primary);
    transition: 0.2s;
}

#nav-list a:hover{
    color: #fafafa;
}

#macpro-container {
    width: 100%;
    height: 692px;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 50px;
}

#container-list {
    width: 100%;
    height: 692px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    margin-top: 50px;
    text-align: center;
    font-size: 55;
    font-weight: bold;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.subtitle {
    margin-bottom: 18px;
    text-align: center;
    font-size: 28;
}

.links {
    margin-bottom: 80px;
    text-align: center;
    position: relative;
    font-size: 20;
}

a {
    text-decoration: none;
    padding: 18px;
    color: var(--links);
}

a:hover {
    text-decoration: underline;
}

.img {
    margin-bottom: 20px;
    text-align: center;
}

#imac-container {
    width: 100%;
    height: 692px;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
}

#iphone-container {
    width: 100%;
    height: 692px;
    margin-top: 10px;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#iphone-list {
    width: 100%;
    height: 692px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iphone15 {
    color: #fafafa;
}

Mais uma vez, peço que sejam compreensivos e aceito qualquer tipo de crítica construtiva!!

Sign In

Clone do Website da Apple

Recommended Posts

Tome Almeida

html

css

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information