Skip to content

Instantly share code, notes, and snippets.

@RodrigoBastos

RodrigoBastos/main.css

Last active November 20, 2021 16:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RodrigoBastos/3074859594a55083a6b21ea20dc0bbc1 to your computer and use it in GitHub Desktop.
Save RodrigoBastos/3074859594a55083a6b21ea20dc0bbc1 to your computer and use it in GitHub Desktop.
Download ZIP
Navbar Example
Raw
main.css
:root {
--primary-color: #579D95;
--second-color: #111010;
--link-color: #A62951;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
background-color: var(--primary-color);
font-family: sans-serif;
font-weight: bold;
font-size: 17px;
height: 8vh;
}
.navbar-logo {
font-size: 24px;
text-transform: uppercase;
letter-spacing: 4px;
}
.navbar-list {
list-style: none;
display: flex;
justify-content: right;
}
.navbar-list li {
letter-spacing: 3px;
margin-left: 32px;
}
.navbar a {
text-decoration: none;
color: var(--link-color);
}
.navbar a:hover {
opacity: 0.7;
}
Raw
main.html
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body class="content">
<!-- header -->
<header>
<!-- navbar -->
<nav class="navbar">
<a href="/" class="navbar-logo">Tech Woman</a>
<ul class="navbar-list">
<!-- Inicio -->
<li><a href="/">Início</a></li>
<!-- Divas -->
<li><a href="#divas">Divas</a></li>
<!-- Contatos -->
<li><a href="#footer">Contatos</a></li>
</ul>
</nav>
</header>
<!-- main -->
<main>
<!-- section - Banner principal -->
<!-- section - Divas -->
</main>
<!-- footer -->
<footer>
<!-- Contatos -->
<!-- Sugestões -->
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment