Navbar and hero section content + styling

uzaaaiiir · Jun 4, 2023 · a54fcc2 · a54fcc2
1 parent ad9e0b2
commit a54fcc2
Show file tree

Hide file tree

Showing 7 changed files with 270 additions and 1 deletion.
diff --git a/assets/hero-img.avif b/assets/hero-img.avif
diff --git a/assets/hero-img.png b/assets/hero-img.png
diff --git a/assets/logos/logo-png.png b/assets/logos/logo-png.png
diff --git a/assets/logos/logo-transparent-png.png b/assets/logos/logo-transparent-png.png
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,155 @@
+/*
+
+--- 01 TYPOGRAPHY SYSTEM
+
+Raleway for subheadings, text
+Playfair Display SC for Primary Headings
+Playfair Display for Secondary Headings
+
+--DEFAULT FONTWEIGHTS: 400
+
+--MEDIUM: 
+
+--SEMI-BOLD: 
+
+--BOLD: 
+
+--LINE HEIGHTS:
+
+Default: 1
+
+Small: 1.05
+
+Medium: 1.2
+
+Large: 1.8
+
+Paragraph Default: 1.6
+
+--LETTER SPACING
+
+-0.5px
+
+0.75px
+
+--FONT SIZE SYSTEM (px)
+
+10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+
+--- 02 COLORS
+
+--Primary: 
+
+--Tints (Lighter): #fdf2e9 #fae5d3
+
+--Shades (Darker): #cf711f #eb984e
+
+--Greys:
+
+#6f6f6f - Lightest grey allowed on #fdf2e9
+
+#888
+
+#767676 Lightest Grey allowed on white
+
+#777
+
+#555
+
+#333
+
+#45260a
+
+--- 03 SHADOWS
+
+--- 04 BORDER-RADIUS
+
+Default: 9px
+
+11px
+
+--- 05 WHITESPACE
+
+--SPACING SYSTEM (px)
+
+2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+
+--- 06 SHADOWS
+
+box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
+
+*/
+
+.navbar {
+    font-family: "Raleway", sans-serif;
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.nav-item {
+    position: relative;
+}
+
+.nav-item--underline:after {
+    bottom: 0;
+    content: "";
+    display: block;
+    height: 0.5px;
+    left: 100%;
+    position: absolute;
+    background: #f8fafc;
+    transition: width 0.3s ease 0s, left 0.3s ease 0s;
+    width: 0;
+}
+
+.nav-item--underline:hover:after {
+    width: 100%;
+    left: 0;
+}
+
+.nav-item:link,
+.nav-item:visited {
+    color: #f8fafc;
+}
+
+.nav-item:hover,
+.nav-item:active {
+    color: #e2e8f0;
+}
+
+.btn-nav-cta:link,
+.btn-nav-cta:visited {
+    display: inline-block;
+    margin: 1rem 2rem;
+    align-items: start;
+    text-decoration: none;
+    background-color: #f8fafc;
+    border-radius: 4px;
+    font-weight: 700;
+    color: #09090b;
+    transition: all 0.3s;
+}
+
+.btn-nav-cta:hover,
+.btn-nav-cta:active {
+    text-shadow: 0 0 0.5px #09090b;
+    background-color: #e5e7eb;
+    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
+}
+
+.heading-primary {
+    font-family: "Playfair Display SC", serif;
+    font-weight: 600;
+    font-size: 3.8rem;
+}
+
+.heading-secondary {
+}
+
+.heading-tertiary {
+    font-family: "Raleway", sans-serif;
+    font-size: 1.3rem;
+}
+
+.subheading {
+}
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -4,9 +4,123 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@400;700&family=Raleway:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+
+        <!-- Bootstrap and Stylesheets -->
+        <link rel="stylesheet" href="/css/style.css" />
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
+            crossorigin="anonymous"
+        />
+
         <title>Ottawa Fades</title>
     </head>
     <body>
-        <h1>Hello World</h1>
+        <!-- NAVBAR -->
+        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+            <div class="container">
+                <a href="#" class="navbar-brand">
+                    <img
+                        src="/assets/logos/logo-transparent-png.png"
+                        alt=""
+                        width="258rem"
+                    />
+                </a>
+                <button
+                    class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarNavAltMarkup"
+                    aria-controls="navbarNavAltMarkup"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation"
+                >
+                    <span class="navbar-dark navbar-toggler-icon"></span>
+                </button>
+                <div
+                    class="collapse navbar-collapse flex-grow-0"
+                    id="navbarNavAltMarkup"
+                >
+                    <div class="navbar-nav">
+                        <a
+                            href="#"
+                            class="nav-item nav-item--underline nav-link me-4"
+                            >Services</a
+                        >
+                        <a
+                            href="#"
+                            class="nav-item nav-item--underline nav-link me-4"
+                            >FAQs</a
+                        >
+                        <a
+                            href="#"
+                            class="nav-item nav-item--underline nav-link"
+                            >Contact</a
+                        >
+                    </div>
+                    <a href="#" class="btn-nav-cta ms-5 px-4 py-2">BOOK NOW </a>
+                </div>
+            </div>
+        </nav>
+
+        <!-- HERO SECTION -->
+        <div class="container col-xxl-8 px-4 py-5">
+            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
+                <div class="col-10 col-sm-8 col-lg-6">
+                    <img
+                        src="/assets/hero-img.png"
+                        class="d-block mx-lg-auto img-fluid"
+                        alt="Bootstrap Themes"
+                        width="700"
+                        height="500"
+                        loading="lazy"
+                    />
+                </div>
+                <div class="col-lg-6">
+                    <h1 class="fw-bold lh-md mb-4 heading-primary">
+                        Ottawa Fades Hair Salon
+                    </h1>
+                    <p class="mb-5 heading-tertiary">
+                        Professional Men's Hair Services Since 2012
+                    </p>
+                    <div
+                        class="d-grid gap-2 d-md-flex justify-content-md-start"
+                    >
+                        <button
+                            type="button"
+                            class="btn btn-primary btn-lg px-4 me-md-2"
+                        >
+                            Primary
+                        </button>
+                        <button
+                            type="button"
+                            class="btn btn-outline-secondary btn-lg px-4"
+                        >
+                            Default
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script
+            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
+            integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
+            crossorigin="anonymous"
+        ></script>
     </body>
 </html>