05-lets-get-hooked: Added Header Component

deltanode · Mar 16, 2023 · 9309da4 · 9309da4
1 parent 98a9dcf
commit 9309da4
Show file tree

Hide file tree

Showing 8 changed files with 6,364 additions and 0 deletions.
diff --git a/05-lets-get-hooked/index.css b/05-lets-get-hooked/index.css
@@ -0,0 +1,59 @@
+/***** general style *****/
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Courier New", Courier, monospace;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  /* background-color: antiquewhite; */
+  max-width: 1024px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/***** header *****/
+.header {
+  /* background-color: rgb(218, 222, 222); */
+  width: 100%;
+  padding: 1rem;
+}
+
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav__logo {
+  width: 5rem;
+  height: 3.5rem;
+}
+
+.nav__list {
+  list-style-type: none;
+  display: flex;
+}
+
+.nav__items {
+  padding: 0 0 0 1rem;
+}
+
+.nav__link {
+  display: inline-block;
+  text-decoration: none;
+  color: #000000;
+}
+
+.nav__link:hover {
+  color: rgb(234, 149, 37);
+}
diff --git a/05-lets-get-hooked/index.html b/05-lets-get-hooked/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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>TRY: 05 Let's Get Hooked</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/App.js"></script>
+  </body>
+</html>