initial commit

dj-eong · Dec 17, 2022 · 9b1961e · 9b1961e
1 parent 69327bb
commit 9b1961e
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 0 deletions.
diff --git a/PngItem_5386456.png b/PngItem_5386456.png
diff --git a/app.css b/app.css
@@ -0,0 +1,130 @@
+body {
+    font-family: 'Oswald', sans-serif;
+    background-color: #ECF1F3;
+}
+
+#mainNavbar {
+    font-weight: 600;
+    font-size: 1.5rem;
+    transition: background 500ms;
+}
+
+#mainNavbar .navbar-brand {
+    color: white;
+    font-size: 2rem;
+    cursor: pointer;
+}
+
+#mainNavbar .navbar-brand:hover {
+    color: #00425c;
+}
+
+#mainNavbar .nav-link {
+    color: white;
+}
+
+#mainNavbar .nav-link:hover {
+    color: #00425c;
+}
+
+#homeBackground {
+    position: relative;
+}
+
+.homeAction {
+    position: absolute;
+    top: 21%;
+    width: 100%;
+}
+
+#home {
+    min-width: 100%;
+    height: 100vh;
+    background: no-repeat center/cover url(milk_background3.jpg);
+}
+
+#gotMilk {
+    height: 7.5rem;
+    padding-left: 20px;
+}
+
+.homeAction button {
+    background-color: #e57da2;
+    border: 0;
+    color: white;
+    font-weight: 600;
+    font-size: 1.5rem;
+    padding: 4px 24px 8px;
+    transition: background-color 100ms, color 100ms;
+    cursor: pointer;
+}
+
+.homeAction button:hover {
+    background-color: white;
+    color: #e57da2;
+}
+
+#infoBackground {
+    background-color: #ECF1F3;
+}
+
+#info h2 {
+    font-weight: 600;
+    font-size: 4rem;
+}
+
+#info p {
+    font-size: 1.5rem;
+    padding-top: 20px;
+}
+
+.navbar.scrolled {
+    background: #0388ba;
+}
+
+@media (max-width: 991px) {
+    #info h2 {
+        font-size: 2.5rem;
+    }
+
+    #info p {
+        font-size: 1rem;
+    }
+
+    /*  #home {
+        background: no-repeat top/contain url(milk_background.jpeg);
+    } */
+}
+
+@media (max-width: 575px) {
+    #mainNavbar {
+        background-color: #0388ba;
+    }
+
+    #info img {
+        height: 25rem;
+        margin-bottom: 48px;
+    }
+
+    #info h2 {
+        font-size: 2rem;
+    }
+
+    #info .textInfo {
+        padding-right: 48px;
+        text-align: center;
+        font-size: 1rem;
+    }
+}
+
+@media (max-height: 600px) {
+    .homeAction {
+        top: 14%;
+    }
+}
+
+@media (min-aspect-ratio: 2560/1080) {
+    .homeAction {
+        top: 8%;
+    }
+}
diff --git a/chocolate.png b/chocolate.png
diff --git a/got_milk.png b/got_milk.png
diff --git a/icons8-kawaii-milk-color-glass-32.png b/icons8-kawaii-milk-color-glass-32.png
diff --git a/index.html b/index.html
@@ -0,0 +1,115 @@
+<!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">
+
+    <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=Oswald:wght@300;600&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="app.css">
+
+    <title>MILK</title>
+    <link rel="icon" type="image/png" href="icons8-kawaii-milk-color-glass-32.png">
+</head>
+
+<body>
+
+    <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-sm fixed-top">
+        <a class="navbar-brand px-3" href="#">MILK</a>
+        <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks"
+            aria-label="Toggle navigation menu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navLinks">
+            <div class="navbar-nav ml-auto">
+                <a href="#" class="nav-item nav-link px-3">HOME</a>
+                <a href="#info" class="nav-item nav-link px-3">TYPES OF MILK</a>
+                <!--<a href="#" class="nav-item nav-link px-3">ABOUT US</a>-->
+            </div>
+        </div>
+    </nav>
+
+    <section class="container-fluid">
+        <div class="row align-items-center">
+            <div id="home" class="col-12 px-0">
+                <!--<img id="homeBackground" src="milk_background.jpeg" alt="" class="img-fluid">-->
+                <div class="homeAction text-center">
+                    <img id="gotMilk" src="PngItem_5386456.png" alt="">
+                    <form action="#info">
+                        <button class="mt-2 rounded">GET SOME</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="infoBackground" class="container-fluid">
+        <section id="info" class="container pt-5">
+            <div class="row align-items-center pt-5">
+                <div class="col-sm-2 text-center">
+                    <img src="chocolate.png" alt="" class="img-fluid">
+                </div>
+                <div class="col-sm-10 pl-5 textInfo">
+                    <h2>CHOCOLATE MILK</h2>
+                    <p>For flat-out, over-the-top chocolate taste that explodes out of the bottle, you gotta go Intense!
+                        Intense Chocolate Milk is loaded with imported cocoas, real sugar and fresh milk to create a
+                        chocolate milk like you've never had before.</p>
+                </div>
+            </div>
+            <div class="row align-items-center pt-5">
+                <div class="col-sm-2 text-center">
+                    <img src="vanilla.png" alt="" class="img-fluid">
+                </div>
+                <div class="col-sm-10 pl-5 textInfo">
+                    <h2>VANILLA MILK</h2>
+                    <p>For a rich vanilla adventure, you gotta go Intense! Intense Vanilla Milk is loaded with the
+                        finest
+                        vanilla flavor, real sugar and fresh milk to create a taste that rivals the greatest milkshake
+                        you've ever had.</p>
+                </div>
+            </div>
+            <div class="row align-items-center pt-5 pb-5 mb-5">
+                <div class="col-sm-2 text-center">
+                    <img src="strawberry.png" alt="" class="img-fluid">
+                </div>
+                <div class="col-sm-10 pl-5 textInfo">
+                    <h2>STRAWBERRY MILK</h2>
+                    <p>For a creamy, sweet strawberry taste that's bold AND delicious, you gotta go Intense! Intense
+                        Strawberry Milk is bursting out of the bottle with fresh milk and ruch, natural strawberry
+                        essence that will have you tilting the bottle for that last drop.</p>
+                </div>
+            </div>
+        </section>
+    </section>
+
+
+
+
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+        crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+        crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
+        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
+        crossorigin="anonymous"></script>
+
+    <script>
+        $(function () {
+            $(document).scroll(function () {
+                var $nav = $("#mainNavbar");
+                $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
+            });
+        });
+    </script>
+</body>
+
+</html>
diff --git a/milk_background.jpeg b/milk_background.jpeg
diff --git a/milk_background2.jpg b/milk_background2.jpg
diff --git a/milk_background3.jpg b/milk_background3.jpg
diff --git a/strawberry.png b/strawberry.png
diff --git a/vanilla.png b/vanilla.png