first commit

2024-02-28 16:47:11 +01:00
commit d71da296b2
66 changed files with 7363 additions and 0 deletions
--- a/index/project/nature/images/PngItem_1608357.png
+++ b/index/project/nature/images/PngItem_1608357.png
--- a/index/project/nature/images/photo-1512419180521-2c5585bdf851.avif
+++ b/index/project/nature/images/photo-1512419180521-2c5585bdf851.avif
--- a/index/project/nature/images/photo-1540503831458-3237544b2ce5.avif
+++ b/index/project/nature/images/photo-1540503831458-3237544b2ce5.avif
--- a/index/project/nature/nature-and-culture.html
+++ b/index/project/nature/nature-and-culture.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="cs">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="style-nature.css" rel="stylesheet" />
+    <title>Hero</title>
+</head>
+
+<body>
+    <!-- Navigace -->
+    <nav>
+        <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Explore</a></li>
+            <li><a href="#">Contact US</a></li>
+        </ul>
+        <img class="icon" src="images/PngItem_1608357.png">
+    </nav>
+
+    <!-- Hero section -->
+    <div class="hero-section">
+        <div class="hero-text">
+            <div class="hero-subtitle">Exploring Icelandic Villages</div>
+            <div class="hero-title">
+                <h1>Nature and Culture Converge</h1>
+            </div>
+        </div>
+    </div>
+
+
+
+    <!-- image bird -->
+    <div class="image-container">
+        <img src="images/photo-1512419180521-2c5585bdf851.avif" alt="" bird>
+    </div>
+</body>
+
+</html>
--- a/index/project/nature/style-nature.css
+++ b/index/project/nature/style-nature.css
@@ -0,0 +1,115 @@
+:root {
+  --my-white: #fff;
+  --my-pink: #f08d8f;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 16px 32px;
+}
+
+.hero-section {
+  height: 70vh;
+  background-image: url(images/photo-1540503831458-3237544b2ce5.avif);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 12px;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.hero-text {
+  position: absolute;
+  left: 32px;
+  bottom: 16px;
+  color: var(--my-white);
+}
+
+.hero-subtitle {
+  font-size: 20px;
+}
+.hero-title {
+  margin-top: 8px;
+}
+
+.icon {
+  width: auto;
+  height: auto;
+  display: none;
+  padding: 14px;
+  margin-left: auto;
+  /* display: flex; */
+}
+.icon img {
+  width: 100%;
+  height: 100%;
+  /* display: flex; */
+  /* align-items: center; */
+}
+
+.image-container {
+  width: 50%;
+}
+.image-container img {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+}
+nav {
+  height: 55px;
+  background-color: var(--my-pink);
+  display: flex;
+  justify-content: space-evenly;
+  text-decoration: none;
+  margin-bottom: 10px;
+  border-radius: 12px;
+}
+nav a {
+  color: var(--my-white);
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: bold;
+  list-style-type: none;
+}
+
+ul {
+  display: flex;
+  list-style-type: none;
+  gap: 65px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+/* Mobile - setting */
+
+@media (max-width: 768px) {
+  body {
+    margin: 8px;
+  }
+
+  .hero-subtitle {
+    font-size: 18px;
+  }
+
+  .hero-title {
+    font-size: 14px;
+  }
+
+  .icon {
+    display: block;
+  }
+
+  .image-container {
+    width: 100%;
+  }
+
+  nav a {
+    display: none;
+  }
+}