Základní šablona úvodní stránky

3 years ago · f24fae0a6a
commit f24fae0a6a
2 changed files with 123 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<title>Novináři</title>
+
+	<link rel="stylesheet" href="style.css">
+	<link rel="icon" href="favicon.ico">
+</head>
+<body class="index">
+
+	<header>
+		<nav>
+			<ul>
+				<li><a href="">Kontakty</a></li>
+				<li><a href="">Přihlásit se</a></li>
+				<li><a href="" class="special">Registrace</a></li>
+			</ul>
+		</nav>
+	</header>
+
+	<main>
+		<h1>Název Projektu</h1>
+		<hr>
+		<p>Dolorem exercitationem ut aperiam et nemo. Cum unde autem et aspernatur eos distinctio aut. Optio ut aut sapiente delectus qui maiores possimus. Pariatur explicabo modi ipsum repellendus voluptas culpa ut. Itaque ab et tempore et ipsam optio quo.</p>
+	</main>
+
+	<footer>
+		&copy; 2021 &ndash; Projekt vznikl kolaborací <a href="https://pedf.cuni.cz">PedF UK</a> a <a href="https://www.ped.muni.cz">PedF MUNI</a>.
+	</footer>
+
+</body>
+</html>
+
--- a/templates/style.css
+++ b/templates/style.css
@ -0,0 +1,87 @@
+:root {
+	--width: 1200px;
+}
+
+html { scroll-behavior: smooth }
+
+body {
+	margin: 0;
+	line-height: 1.5;
+
+	min-height: 100vh;
+	width: 100vw;
+	background-color: #888;
+	color: #edfbff;
+	display: flex;
+	flex-direction: column;
+}
+
+a {
+	text-decoration: none;
+	color: #fff;
+	font-weight: bold;
+}
+a:hover { text-decoration: underline }
+
+header {
+	display: flex;
+	align-items: center;
+	margin: 0 auto;
+	padding: 1em;
+	width: 100%;
+	max-width: var(--width);
+}
+header h1 { margin 0 }
+
+nav {
+	margin-left: auto;
+}
+nav ul {
+	width: auto;
+	display: flex;
+	list-style-type: none;
+	padding: 1em 0;
+	margin: 0;
+}
+nav ul li a {
+	padding: .7em 1em;
+	margin-left: 1em;
+}
+nav ul li a:hover { text-decoration: none }
+nav a.special {
+	border: 1px solid #fff;
+	border-radius: .5em;
+}
+nav a.special:hover {
+	background-color: #fff;
+	color: #dd4733;
+}
+
+main {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+main h1 {
+	font-size: 6em;
+	margin: .2em;
+}
+main hr {
+	width: 5em;
+	border: 0;
+	border-top: 1px solid #fff;
+}
+main p {
+	max-width: 40em;
+	text-align: center;
+}
+
+footer {
+	display: flex;
+	justify-content: center;
+	padding: 2em;
+	background-color: #aaa;
+}
+