Initial commit

Osong-Michael · Oct 11, 2021 · cb9849b · cb9849b
commit cb9849b
Show file tree

Hide file tree

Showing 26 changed files with 236 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,32 @@
+# Nature Tours
+
+
+
+## Built With
+
+* Html
+* Css
+
+## Live Demo Link
+
+[Live Link]()
+
+
+## Author
+
+👤 **Osong Agberndifor**
+
+- Github: [Osong Agberndifor](https://github.com/Osong-Michael)
+- Twitter: [Osong Agberndifor](https://twitter.com/Osong17)
+- Linkedin: [Osong Agberndifor](https://linkedin.com/osong-agberndifor)
+
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+Feel free to check the [Issues page]().
+
+## Show your support
+
+Give a ⭐️ if you like this project!
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,175 @@
+/*
+COLORS:
+Light green: #7ed56f
+Medium green: #55c57a
+Dark green: #28b485
+*/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Lato', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: #777;
+  padding: 30px;
+}
+
+.header {
+  height: 95vh;
+  background-image: linear-gradient(
+    to right bottom,
+    rgba(126, 213, 111, 0.8),
+    rgba(40, 180, 131, 0.8)),
+    url('../img/hero.jpg');
+  background-size: cover;
+  background-position: top;
+  position: relative;
+  clip-path: polygon(0 0, 100% 0%, 100% 75vh, 0% 100%);
+}
+
+.logo-box {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+.logo {
+  height: 35px;
+}
+
+.text-box {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.heading-primary {
+  color: #fff;
+  text-transform: uppercase;
+  margin-bottom: 60px;
+  /* backface-visibility: hidden; */
+}
+
+.heading-primary-main {
+  display: block;
+  font-size: 60px;
+  font-weight: 400;
+  letter-spacing: 35px;
+
+  animation: moveInLeft 1s ease-out;
+}
+
+.heading-primary-sub {
+  display: block;
+  font-size: 20px;
+  font-weight: 700px;
+  letter-spacing: 17.4px;
+
+  animation: moveInRight 1s ease-out;
+}
+
+
+@keyframes moveInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  80% {
+    transform: translateX(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+@keyframes moveInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+
+  80% {
+    transform: translateX(-10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+.btn:link,
+.btn:visited {
+  text-transform: uppercase;
+  text-decoration: none;
+  padding: 15px 40px;
+  display: inline-block;
+  border-radius: 100px;
+  transition: all .2s;
+  position: relative;
+}
+
+.btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
+}
+
+.btn:active {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+}
+
+.btn-white {
+  background-color: #fff;
+  color: #777;
+}
+
+.btn::after {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  border-radius: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  transition: all .4s;
+}
+
+.btn-white::after {
+  background-color: #fff;
+}
+
+.btn:hover::after {
+  transform: scaleX(1.4) scaleY(1.6);
+  opacity: 0;
+}
+
+@keyframes moveInBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+.btn-animated {
+  animation: moveInBottom .3s ease-out .75s;
+  animation-fill-mode: backwards;
+}
diff --git a/img/favicon.png b/img/favicon.png
diff --git a/img/hero-small.jpg b/img/hero-small.jpg
diff --git a/img/hero.jpg b/img/hero.jpg
diff --git a/img/logo-green-1x.png b/img/logo-green-1x.png
diff --git a/img/logo-green-2x.png b/img/logo-green-2x.png
diff --git a/img/logo-green-small-1x.png b/img/logo-green-small-1x.png
diff --git a/img/logo-green-small-2x.png b/img/logo-green-small-2x.png
diff --git a/img/logo-white.png b/img/logo-white.png
diff --git a/img/nat-1-large.jpg b/img/nat-1-large.jpg
diff --git a/img/nat-1.jpg b/img/nat-1.jpg
diff --git a/img/nat-10.jpg b/img/nat-10.jpg
diff --git a/img/nat-2-large.jpg b/img/nat-2-large.jpg
diff --git a/img/nat-2.jpg b/img/nat-2.jpg
diff --git a/img/nat-3-large.jpg b/img/nat-3-large.jpg
diff --git a/img/nat-3.jpg b/img/nat-3.jpg
diff --git a/img/nat-4.jpg b/img/nat-4.jpg
diff --git a/img/nat-5.jpg b/img/nat-5.jpg
diff --git a/img/nat-6.jpg b/img/nat-6.jpg
diff --git a/img/nat-7.jpg b/img/nat-7.jpg
diff --git a/img/nat-8.jpg b/img/nat-8.jpg
diff --git a/img/nat-9.jpg b/img/nat-9.jpg
diff --git a/img/video.mp4 b/img/video.mp4
diff --git a/img/video.webm b/img/video.webm
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
+        <!-- <link rel="stylesheet" href="css/icon-font.css"> -->
+        <link rel="stylesheet" href="css/style.css">
+        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
+
+        <title>Explore the Wild</title>
+    </head>
+    <body>
+        <header class="header">
+          <div class="logo-box">
+            <img src="img/logo-white.png" alt="Logo" class="logo">
+          </div>
+          <div class="text-box">
+            <h1 class="heading-primary">
+              <span class="heading-primary-main">Outdoors</span>
+              <span class="heading-primary-sub">is where life happens</span>
+            </h1>
+
+            <a href="#" class="btn btn-white btn-animated">Discover our tours</a>
+          </div>
+        </header>
+    </body>
+</html>