Add files via upload

Anorme · Nov 12, 2024 · ba50acd · ba50acd
1 parent a6b6236
commit ba50acd
Show file tree

Hide file tree

Showing 20 changed files with 266 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1 @@
-# melange
-This is my first attempt at the creative Tim start up landing page challenge
+# udemy-nuk
diff --git a/img/2.jpg b/img/2.jpg
diff --git a/img/Melange logo.jpg b/img/Melange logo.jpg
diff --git a/img/bg0.jpg b/img/bg0.jpg
diff --git a/img/bg1.jpg b/img/bg1.jpg
diff --git a/img/bg2.jpg b/img/bg2.jpg
diff --git a/img/bg3.jpg b/img/bg3.jpg
diff --git a/img/cocktail-1.jpg b/img/cocktail-1.jpg
diff --git a/img/cocktail-3.jpg b/img/cocktail-3.jpg
diff --git a/img/cocktail-5.jpg b/img/cocktail-5.jpg
diff --git a/img/cocktail-6.jpg b/img/cocktail-6.jpg
diff --git a/img/daiquiri-img.jpg b/img/daiquiri-img.jpg
diff --git a/img/margarita-img.jpg b/img/margarita-img.jpg
diff --git a/img/martini-img.jpg b/img/martini-img.jpg
diff --git a/img/mojito-img.jpg b/img/mojito-img.jpg
diff --git a/img/negroni-img.jpg b/img/negroni-img.jpg
diff --git a/img/sotb-img.jpg b/img/sotb-img.jpg
diff --git a/img/tequila-sunrise-img.jpg b/img/tequila-sunrise-img.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+  <title>Melange</title>
+
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+  <meta name="viewport" content="width=device-width" />
+
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
+
+  <!-- Bootstrap core CSS     -->
+  <link rel="stylesheet" href="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/css/bootstrap.min.css">
+  <link href="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/css/now-ui-kit.min.css?v1.2.0" rel="stylesheet"/>
+  <link href="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/demo/demo.css" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="style.css">
+
+  <style>
+    .navbar .navbar-nav .nav-link:not(.btn) i.fa{
+      font-size: 18px;
+      position: relative;
+      top: 3px;
+      text-align: center;
+      width: 21px;
+    }
+  </style>
+
+</head>
+
+<body class="index-page sidebar-collapse">
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg bg-secondary fixed-top navbar-transparent " color-on-scroll="400">
+        <div class="container">
+            <div class="navbar-translate">
+                <a class="navbar-brand" rel="tooltip" title="Melange" data-placement="bottom" target="_blank">
+                    <img src="/img/melange logo.jpg" width="80rem">
+                </a>
+                <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-bar bar1"></span>
+                    <span class="navbar-toggler-bar bar2"></span>
+                    <span class="navbar-toggler-bar bar3"></span>
+                </button>
+            </div>
+            <div class="collapse navbar-collapse justify-content-end" data-nav-image="./assets/img/blurred-image-1.jpg">
+                <ul class="navbar-nav">
+
+                    <li class="nav-item">
+                        <a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank">
+                            <i class="fa fa-twitter"></i>
+                            <p class="d-lg-none d-xl-none">Twitter</p>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank">
+                            <i class="fa fa-facebook-square"></i>
+                            <p class="d-lg-none d-xl-none">Facebook</p>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
+                            <i class="fa fa-instagram"></i>
+                            <p class="d-lg-none d-xl-none">Instagram</p>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- End Navbar -->
+    <div class="wrapper">
+        <div class="page-header clear-filter" filter-color="transparent">
+            <div class="page-header-image" data-parallax="true" style="background-image: url('/img/cocktail-6.jpg');">
+            </div>
+            <div class="container">
+                <div class="content-center brand">
+                    <h1 class="h1-seo">Mélange</h1>
+                    <h3>Create your very own cocktail or try one of our famous recipes </h3>
+                </div>
+            </div>
+        </div>
+        <div class="main">
+            <div class="section section-basic">
+                <div class="container text-center mx-auto">
+                    <h3 class="title">
+                        Ready to try something new?
+                    </h3>
+                </div>
+
+                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 m-2">
+                    <div class="card text-center mx-auto" style="">
+                      <div class="card-body">
+                            <img class="card-img-top" src="/img/mojito-img.jpg" alt="mojito image">
+                            <h4 class="card-title">Pine woods Mojito</h4>
+                            <p class="card-text">Try our refreshing pine woods mojito from world renowned mixologist Jeane Piere.</p>
+                            <a href="#" class="btn btn-secondary">Get Recipe</a>
+                      </div>
+                    </div>
+                    <div class="card text-center mx-auto" style="">
+                      <div class="card-body">
+                            <img class="card-img-top" src="/img/margarita-img.jpg" alt="margarita image">
+                            <h4 class="card-title">Mamacita Margarita</h4>
+                            <p class="card-text">Say hola to our novelty margarita by Don Juan Pablo himself</p>
+                            <a href="#" class="btn btn-secondary">Get Recipe</a>
+                      </div>
+                    </div>
+                    <div class="card text-center mx-auto" style="">
+                      <div class="card-body">
+                            <img class="card-img-top" src="/img/martini-img.jpg" alt="mojito image">
+                            <h4 class="card-title">007</h4>
+                            <p class="card-text">Enter the infamous Bond martini. Shaken! not stirred.</p>
+                            <a href="#" class="btn btn-secondary">Get Recipe</a>
+                      </div>
+                    </div>
+                    <div class="card text-center mx-auto" style="">
+                      <div class="card-body">
+                            <img class="card-img-top" src="/img/negroni-img.jpg" alt="mojito image">
+                            <h4 class="card-title">Nightwalker Negroni</h4>
+                            <p class="card-text">For the night crawlers and goth lovers, here's a negroni that'll leave you bloody.</p>
+                            <a href="#" class="btn btn-secondary">Get Recipe</a>
+                      </div>
+                    </div>
+                    <div class="card text-center mx-auto" style="">
+                      <div class="card-body">
+                            <img class="card-img-top" src="/img/daiquiri-img.jpg" alt="mojito image">
+                            <h4 class="card-title">Demon Time Daiquiri</h4>
+                            <p class="card-text">Infused with spanish fly and your friendly neighbourhood MJ this blend is a recipe for a wild night.Drink at your own risk.</p>
+                            <a href="#" class="btn btn-secondary">Get Recipe</a>
+                      </div>
+                    </div>
+                    <div class="card text-center mx-auto" style="">
+                      <div class="card-body">
+                            <img class="card-img-top" src="/img/tequila-sunrise-img.jpg" alt="mojito image">
+                            <h4 class="card-title">Sangria Sunrise</h4>
+                            <p class="card-text">You've had Sangria and you've had a tequila sunrise. We give you our love child.</p>
+                            <a href="#" class="btn btn-secondary">Get Recipe</a>
+                      </div>
+                    </div>
+
+                </div>
+                <div class="carousel-container row row-cols-sm-2 p-4">
+                    <h4 class="container text-center">Customer Original Cocktails</h4>
+                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+                  <ol class="carousel-indicators">
+                    <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
+                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
+                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+                  </ol>
+                  <div class="carousel-inner" role="listbox">
+                    <div class="carousel-item">
+                      <img class="d-block" src="/img/bg1.jpg" alt="First slide">
+                      <div class="carousel-caption d-none d-md-block">
+                        <h5>Peter Singh, United States</h5>
+                      </div>
+                    </div>
+                    <div class="carousel-item active">
+                      <img class="d-block" src="/img/bg0.jpg" alt="Second slide"  >
+                      <div class="carousel-caption d-none d-md-block">
+                        <h5>Cindy Howard, United Kingdom </h5>
+                      </div>
+                    </div>
+                    <div class="carousel-item">
+                      <img class="d-block" src="/img/bg3.jpg" alt="Third slide" >
+                      <div class="carousel-caption d-none d-md-block">
+                        <h5>Nido Ndlovu, South Africa</h5>
+                      </div>
+                    </div>
+                  </div>
+                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+                    <i class="now-ui-icons arrows-1_minimal-left"></i>
+                  </a>
+                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+                    <i class="now-ui-icons arrows-1_minimal-right"></i>
+                  </a>
+                </div>    
+                </div>
+
+            </div>
+        </div>
+        <footer class="footer" data-background-color="black">
+            <div class="container">
+                <nav>
+                    <ul>
+                        <li>
+                            <a href="https://www.creative-tim.com">
+                                Creative Tim
+                            </a>
+                        </li>
+                        <li>
+                            <a href="http://presentation.creative-tim.com">
+                                About Us
+                            </a>
+                        </li>
+                        <li>
+                            <a href="http://blog.creative-tim.com">
+                                Blog
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md">
+                                MIT License
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+                <div class="copyright">
+                    &copy;
+                    <script>
+                        document.write(new Date().getFullYear())
+                    </script>, Designed by
+                    <a href="http://www.invisionapp.com" target="_blank">Invision</a>. Coded by
+                    <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
+                </div>
+            </div>
+        </footer>
+    </div>
+</body>
+
+<!--   Core JS Files   -->
+<script src="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/js/core/jquery.min.js"></script>
+<script src="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/js/core/popper.min.js"></script>
+<script src="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/js/core/bootstrap.min.js"></script>
+<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
+<script src="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/js/plugins/bootstrap-switch.js"></script>
+<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
+<script src="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/js/plugins/nouislider.min.js"></script>
+<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
+<script src="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/js/plugins/bootstrap-datepicker.js"></script>
+<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
+<script src="https://cdn.rawgit.com/creativetimofficial/now-ui-kit/2e8e665f/assets/js/now-ui-kit.js"></script>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,28 @@
+
+.grid-container{
+	display: grid;
+	gap:10px;
+	padding: 20px;
+	border: 1px solid black;
+}
+
+.card{
+	width:20rem;
+	display: flex;
+}
+
+.collapse.navbar-collapse::before{
+	background: #000;
+/*	background: linear-gradient(#e3e3e3, #000, 80%);*/
+}
+
+.carousel-container{
+	max-width: 1000px;
+	margin: 20px auto;
+	justify-content: center;
+}
+
+.carousel-container img {
+	height: 540px;
+	content: fit;
+}