Prepare header and nav

2 years ago · 9ff831153f
parent 68f6b42e5e
commit 9ff831153f
2 changed files with 79 additions and 5 deletions
--- a/index.html
+++ b/index.html
@ -9,15 +9,26 @@
 	<body>
 		<div class="intro">
 			<header>
-				<img src="" alt="Logo" class="logo">
+				<div class="wrap">
-				<nav>
+					<div class="border-container">
-					...
+						<img src="/static/logo.svg" alt="Logo" class="logo">
-				</nav>
+						<nav>
 							<a href="#">Obecné zásady</a>
 							<a href="#">Učitelský checklist</a>
 							<a href="#">Příběhy</a>
 							<a href="#">Na koho se obrátit</a>
 							<a href="#">FAQ</a>
 						</nav>
 						<div class="menu-button">
 							.
 						</div>
 					</div>
 				</div>
 			</header>
 			<section>
 				<div>
-					<div class="title">To, co se děje u nich doma, nevidíte&nbsp;&hellip;</div>
+					<div class="title">To, co se děje u&nbsp;nich doma, nevidíte&nbsp;&hellip;</div>
 					<p>&hellip;&nbsp;ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p>
 				</div>
 				<div class="videos">
--- a/sass/style.scss
+++ b/sass/style.scss
@ -24,6 +24,12 @@ body {
 	font-family: "moderat", sans-serif;
 }
 .wrap {
 	max-width: 90rem;
 	margin: 0 auto;
 	padding: 0 1rem;
 }
 img {
 	display: block;
 	max-width: 100%;
@ -45,6 +51,63 @@ section {
 /* Specific */
 .intro {
 	header {
 		border-bottom: 1px solid #5D6E81;
 		margin-bottom: 4em;
 		.border-container {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			gap: 2rem;
 			border-width: 0 1px;
 			border-style: solid;
 			border-color: #5D6E81;
 			padding-left: 2rem;
 		}
 		.logo {
 			height: 2rem;
 		}
 		nav {
 			display: flex;
 			a {
 				display: block;
 				padding: 2em 1.5em;
 				font-weight: bold;
 				text-decoration: none;
 				text-align: center;
 				color: #fff;
 				border-left: 1px solid #5D6E81;
 				&:hover {
 					color: lighten($col-accent, 25%);
 				}
 			}
 		}
 		.menu-button {
 			display: none;
 		}
 	}
 	section {
 		max-width: 65%;
 		margin: 0 auto;
 		text-align: center;
 		.title {
 			font-weight: bold;
 			font-size: 1.953rem;
 		}
 		p {
 			font-size: 1.25rem;
 		}
 	}
 }
 .checklist {
 	display: flex;
 	gap: 1em;