Neste guia, vamos revisar as principais tags HTML e conceitos básicos de CSS enquanto criamos uma réplica simplificada da página inicial do Google.
index.html
styles.css
Vamos criar dois arquivos: index.html
para o conteúdo HTML e styles.css
para o estilo CSS.
Crie o arquivo index.html
com a seguinte estrutura:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="logo">
<img src="<https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png>" alt="Google Logo">
</div>
<form class="search-form">
<input type="text" class="search-input" placeholder="Search Google or type a URL">
<div class="buttons">
<button type="submit" class="btn">Google Search</button>
<button type="button" class="btn">I'm Feeling Lucky</button>
</div>
</form>
</div>
</body>
</html>