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">
-				<nav>
-					...
-				</nav>
+				<div class="wrap">
+					<div class="border-container">
+						<img src="/static/logo.svg" alt="Logo" class="logo">
+						<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;