Initial commit

jessicarush · May 27, 2023 · 9fc220c · 9fc220c
1 parent 39ae945
commit 9fc220c
Show file tree

Hide file tree

Showing 3 changed files with 456 additions and 0 deletions.
diff --git a/css_sticky_navigation/css/style.css b/css_sticky_navigation/css/style.css
@@ -0,0 +1,69 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background: #43b29d;
+}
+
+body {
+  color: #fff;
+  font-size: 18px;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+/* Navigation Settings */
+nav {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  height: 70px;
+  background: #fff;
+}
+
+nav li {
+  display: inline-block;
+  padding: 24px 10px;
+}
+
+nav li a {
+  color: #757575;
+  text-transform: uppercase;
+  font-size: 16px;
+}
+
+a {
+  text-decoration: none;
+}
+
+section {
+  height: 100vh;
+  padding: 15px;
+}
+
+/* Screens Settings */
+#screen1 {
+  background: #43b29d;
+}
+
+#screen2 {
+  background: #efc94d;
+}
+
+#screen3 {
+  background: #e1793d;
+}
+
+@media only screen and (max-width: 520px) {
+
+  nav li {
+    padding: 2px 4px;
+  }
+
+  nav li a {
+    font-size: 14px;
+  }
+
+}
diff --git a/css_sticky_navigation/index.html b/css_sticky_navigation/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <!-- Meta tags & title /-->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <meta name="robots" content="all,index,follow" />
+
+    <title>
+      Scroll To Top Then Fixed Navigation Effect
+    </title>
+    <meta
+      name="description"
+      content="Create a sticky navigation bar that remains fixed to the top after scroll" />
+
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+    <!-- Main stylesheet /-->
+  </head>
+
+  <body>
+    <section id="screen1"><p>scroll down</p></section>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">Team</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+
+    <section id="screen2"><p>section 2</p></section>
+    <section id="screen3"><p>section 3</p></section>
+  </body>
+</html>