Skip to content

Instantly share code, notes, and snippets.

@OtacilioN

OtacilioN/workshop.css

Last active September 21, 2019 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save OtacilioN/05a3e60298dee561e0e2926bcc7fe562 to your computer and use it in GitHub Desktop.
Save OtacilioN/05a3e60298dee561e0e2926bcc7fe562 to your computer and use it in GitHub Desktop.
Download ZIP
React workshop
Raw
workshop.css
body {
height: 100vh;
background-image: linear-gradient(white, #ececec);
}
.navbar {
display: flex;
flex-direction: row;
}
.navbar-item {
/* margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px; */
flex: 1;
text-align: center;
}
Raw
workshop.html
<!DOCTYPE html>
<html>
<!-- Tudo que não é visual no site -->
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./workshop.css" />
<title>Seu nome</title>
</head>
<body>
<!-- Essa vai ser o "container" da navbar -->
<div class="navbar">
<!-- Contem cada elemento do navbar -->
<div class="navbar-item">
<h1>Sobre mim</h1>
</div>
<div class="navbar-item">
<h1>Habilidades</h1>
</div>
<div class="navbar-item">
<h1>Projetos</h1>
</div>
<div class="navbar-item">
<h1>Contato</h1>
</div>
</div>
<!-- Esse aqui é o container sobre mim -->
<div>
<h1>Sobre mim</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment