Utilizando CSS no HTML para iniciantes
– Se você apenas está começando no desenvolvimento de software e gostária de seguir um projeto básico, Disponibilizo os arquivos .css ou códigos no blog.
– Veja o passo-a-passo para fazer seu Website com um design melhor, colocando os elementos HTML no lugar certo ao usar este container div. Usamos algo CSS para começar a melhorar os estilos (Style)
No final de todas as aulas, vou explicar como:
- Criar dominio (domain)
- E qual é um lugar bom para hospedar (host) seu Website
Veja os outros vídeos desta playlist
- ✅ HTML para iniciantes. Primeiros passos – Aula 1
- ✅ HTML para iniciantes. Iniciando criação da barra de Menu – Aula 2
- ✅ HTML para iniciantes – CSS e div – Aula 3
- ✅ HTML para iniciantes – finalizando Header com CSS – Aula 4
- ✅ Para obter arquivos das vídeoaulas, entra no grupo do Telegram
Pratique você também
Assistir vídeoaula no final da página para praticar
Agora você pode abrir o Notepad se não tiver VS Code ou fazer o Download aqui
- Após abrir sua pasta no VS Code
- Copie o código abaixo e repõe o da página principal que criamos nas aulas anterior. Ver links acima
- Criar os arquivos de Style dentro da pasta CSS
- Modificar o style.css e baixe o código todo clicando aqui
- Inserir camera.css e baixe o código todo clicando aqui
- Inserir animate.css e baixe o código todo clicando aqui
- Guarde suas imagens da pasta “images” ou copie do da aula, clicando aqui
- Após inserir todos estes códigos css, siga o HTML abaixo
- E treine digitando para aprender o nome dos atributos, etc
- Fazer CTRL + C (salvar) sempre para não perder seu trabalho
- A seguir, voltar ao navegador e fazer reload (F5) na página
1 – Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aula 4</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
</head>
<body>
<div class="page">
<!--====================================================
HEADER
====================================================-->
<header>
<div id="stuck_container" class="stuck_container">
<div class="container">
<div class="row">
<div class="grid_5 center">
<div class="brand">
<h1 class="brand_name">
<a href="home.html">pleasure</a>
</h1>
<P class="brand_slogan">
premium sauna
</P>
</div>
</div>
<div class="grid_6 preffix_1 center">
<nav class="nav">
<ul class="sf-menu" data-type="navbar">
<li class="active">
<a href="home.html">Home</a>
</li>
<li>
<a href="sobre.html">Sobre</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Our staff</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="header_figure">
<img src="images/corner-1.svg" alt="" class="corner">
</div>
<!-- Slider -->
<div class="camera_container">
<div id="camera" class="camera_wrap">
<div data-src="images/slide01.jpg">
<div class="camera_caption fadeInLeft">
</div>
</div>
<div data-src="images/slide02.jpg">
<div class="camera_caption fadeInLeft">
</div>
</div>
<div data-src="images/slide03.jpg">
<div class="camera_caption fadeInLeft">
</div>
</div>
</div>
<img src="images/slider-corner.svg" alt="" class="corner">
</div>
<!-- /Slider -->
<!-- content -->
<div class="container block1">
<div class="row">
<div class="grid_5 center wow fadeInLeft">
<img class="rounded" src="images/page-1_img01.jpg" alt="">
<h2>Welcome!</h2>
<p>
Beciegast nveriti vitaesaert asety kertya aset
aplicaboserde nerafae lorem ipsumodit onsequ untur magni dolores eonqui ratione voluate msequi nesciunt, neque porro quisquam
edolore mias nuyfasaertyu erauas aitaesa.
</p>
<a href="#" class="btn">more</a>
</div>
</di>
</div>
</header>
</div>
</body>
</html>
Espero que tenha gostado. Até o próximo vídeo 😀
Inscreve-se e ativa o sininho para receber os próximos vídeos e faça teu LIKE
Até a próxima Obrigado
ABRAÇO
- ✔ Deixe seu like e compartilhe se gostou ☺
- ✔ Inscreva-se no canal ☺
- ✔ Selecione para receber notificações clicando no sininho pelo seu celular e/ou computador ☺
- ✔ Comunidade Fanpage
- ✔ Segue no Insta … e progredindo.
Veja também este tópico sobre Linguangens de programação pra além do HTML, porque é importante sabermos o significado e também o que mais você poderá ter interesse futuramente.
Leave a Reply