Skip to content

Instantly share code, notes, and snippets.

@ocariocawebdesign

ocariocawebdesign/index.html

Created November 4, 2020 19:01
Show Gist options
  • Save ocariocawebdesign/af6b6240b8436a686956ef07ec67acb4 to your computer and use it in GitHub Desktop.
Save ocariocawebdesign/af6b6240b8436a686956ef07ec67acb4 to your computer and use it in GitHub Desktop.
Download ZIP
Clone Steam
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<div id="header-container">
<div id="logo-header">
<img src="img/logo-header.png" alt="" />
<div id="main-menu">
<nav>
<ul class="first-menu-list">
<li><a href="">Loja</a></li>
<li><a href="">Comunidade</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Suporte</a></li>
</ul>
</nav>
</div>
</div>
<div id="second-menu-header">
<nav>
<ul>
<li><a href="">Instale o Steam</a></li>
<li><a href="">Iniciar sessão</a></li>
<li><a href="">Idioma</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Raw
main.css
* {
margin: 0;
padding: 0;
font-family: motiva-sans, sans-serif;
font-style: normal;
font-weight: 200;
}
header {
display: flex;
width: 100%;
background-color: #171a21;
}
#logo-header {
display: flex;
float: left;
padding-top: 30px;
margin-right: 40px;
padding-bottom: 1.6rem;
width: 176px;
height: 44px;
}
#header-container {
display: flex;
width: 100%;
justify-content: space-between;
padding: 1rem;
}
#main-menu {
display: flex;
list-style: none;
line-height: 1.5;
float: left;
font-size: 14px;
color: #b8b6b4;
padding-top: 0.8rem;
color: #b8b6b4;
}
ul {
list-style: none;
}
#main-menu a {
text-decoration: none;
font-size: 14px;
color: #fafafa;
margin-left: 0.8rem;
}
.first-menu-list {
display: flex;
}
.first-menu-list li a {
text-transform: uppercase;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment