Harry - bez JS

2024-02-25 19:51:57 +01:00
commit b892521502
5 changed files with 146 additions and 0 deletions
--- a/colors.css
+++ b/colors.css
@@ -0,0 +1,5 @@
+:root {
+  --special-white: #ffffff;
+  --special-blue: #1f1727;
+  --special-pink: #c41b64;
+}
--- a/img/background.webp
+++ b/img/background.webp
--- a/img/logo.png
+++ b/img/logo.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="cs">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Responsivní navigace</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+  </head>
+
+  <body>
+    <nav class="navbar">
+      <div class="left">
+        <div class="logo">
+          <img src="img/logo.png" alt="" />
+        </div>
+      </div>
+      <div class="right">
+        <input type="checkbox" id="check" />
+        <label for="check" class="checkBtn">
+          <i class="fa fa-bars"></i>
+        </label>
+        <ul class="list">
+          <li><a href="#">Domů</a></li>
+          <li><a href="#">Galerie</a></li>
+          <li><a href="#">Servis</a></li>
+          <li><a href="#">O nás</a></li>
+          <li><a href="#">Kontact</a></li>
+        </ul>
+      </div>
+    </nav>
+    <section class="welcome"></section>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@@ -0,0 +1,103 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300;700&display=swap");
+@import url("colors.css");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  color: var(--special-white);
+  font-family: "Ubuntu", sans-serif;
+}
+
+.logo {
+  flex-grow: 1;
+}
+
+.logo img {
+  width: 200px;
+  margin-left: 20px;
+  margin-top: 10px;
+}
+
+.welcome {
+  background: url("img/background.webp");
+  min-height: calc(100vh - 70px);
+  background-size: cover;
+  background-position: center;
+}
+
+.navbar {
+  background-color: var(--special-blue);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  line-height: 5rem;
+}
+
+.left h1 {
+  font-size: 2.5rem;
+  cursor: pointer;
+}
+
+.checkBtn {
+  display: none;
+}
+
+#check {
+  display: none;
+}
+
+.checkBtn {
+  cursor: pointer;
+  font-size: 30px;
+  float: right;
+  color: var(--special-pink);
+  line-height: 80px;
+}
+
+.right ul {
+  display: flex;
+  list-style: none;
+}
+
+.right ul li a {
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  color: var(--special-white);
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 1s;
+}
+
+.right ul li a:hover {
+  background-color: var(--special-white);
+  border-radius: 7px;
+  color: var(--special-blue);
+}
+
+@media (max-width: 700px) {
+  .list {
+    width: 100%;
+    height: 100vh;
+    background-color: var(--special-blue);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 4rem;
+    left: 100%;
+    transition: all 1s;
+  }
+
+  #check {
+    display: none;
+  }
+
+  .checkBtn {
+    display: block;
+  }
+
+  #check:checked ~ ul {
+    left: 0%;
+  }
+}