active-fox-2018 · arievrchmn · Feb 10, 2019
diff --git a/img/content.jpeg b/img/content.jpeg
diff --git a/img/entertaiment.jpg b/img/entertaiment.jpg
diff --git a/img/header.jpeg b/img/header.jpeg
diff --git a/img/musix.png b/img/musix.png
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
+        crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>MusiX - Listen your favorite music anywhere</title>
+</head>
+
+<body>
+    <!-- Nav & Slider Area -->
+    <div id="main-header">
+        <header>
+            <nav class='cf'>
+                <ul class='cf'>
+                    <li class="hide-responsive">
+                        <a href='#main-header'>Home</a>
+                    </li>
+                    <li>
+                        <a href='#main-header'>Overview</a>
+                    </li>
+                    <li>
+                        <a href='#musix'>Music</a>
+                    </li>
+                    <li>
+                        <a href='#get-apps'>Get Apps</a>
+                    </li>
+                </ul>
+                <a href='#' id='openup'>MusiX</a>
+            </nav>
+        </header>
+        <div class="section-main container">
+            <h1>MusiX</h1>
+            <h2>Listen your favourite music everywhere, and anywhere.</h2>
+            <p class="lead hide-responsive">MusiX is the best way to organize and enjoy the music you already have.
+                Enjoy all the entertainment MusiX has to offer on your Desktop and Mobile Phone.</p>
+        </div>
+    </div>
+
+    <!-- MusiX Area -->
+    <section id="musix" class="section">
+        <div class="container">
+            <h2 class="section-head">
+                <i class="fas fa-music"> Music</i>
+            </h2>
+            <h3>100% Free and Zero Ads</h3>
+            <p class="hide-responsive">Discover thousands of your favorite music around the world. Download the albums or tracks to listen
+                offline and create your own playlist and listen everywhere, anywhere. Musix is 100% free and zero ads.
+            </p>
+            <img src="./img/content.jpeg">
+        </div>
+    </section>
+
+    <!-- Entertaiment Area -->
+    <section id="entertaiment" class="section">
+        <div class="container">
+            <h3>Listen your favorite Music Offline everywhere and anywhere.</h3>
+            <p class="hide-responsive">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec volutpat massa, vel consectetur ex.
+                Quisque posuere ut neque sit amet ultricies. Pellentesque tincidunt purus sed pharetra cursus. Integer
+                nec congue odio. Donec sed ex sit amet neque fringilla mollis id at eros.</p>
+        </div>
+    </section>
+
+    <!-- Get App -->
+    <section id="get-apps">
+        <div class="container">
+            <div class="get-apps">
+                <img src="img/musix.png" alt="">
+            </div>
+            <div>
+                <h2>Get Apps</h2>
+                <p>MusiX currently under development. Later, MusiX would be available on Android, iPhone and Desktop.</p>
+                <hr>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer>
+        <div class="container">
+            <h5>Created by Arief Rachman</h5>
+        </div>
+    </footer>
+
+    <!-- Navbar Responsive.js -->
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+        crossorigin="anonymous"></script>
+    <script src="/js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,22 @@
+// Responsive Nav
+
+$(function() {
+	menu = $('nav ul');
+
+  $('#openup').on('click', function(e) {
+    e.preventDefault(); menu.slideToggle();
+  });
+
+  $(window).resize(function(){
+    var w = $(this).width(); if(w > 480 && menu.is(':hidden')) {
+      menu.removeAttr('style');
+    }
+  });
+
+  $('nav li').on('click', function(e) {                
+    var w = $(window).width(); if(w < 480 ) {
+      menu.slideToggle(); 
+    }
+  });
+  $('.open-menu').height($(window).height());
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,233 @@
+@import url('https://fonts.googleapis.com/css?family=PT+Sans');
+
+body {
+    font-family: 'PT Sans', sans-serif;
+    background-color: #fff;
+    margin: 0;
+    color: #fff;
+    line-height: 1.6;
+}
+
+img {
+    width: 100%;
+}
+
+/* Main Header */
+#main-header {
+      margin: 0;
+      padding: 0;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('./img/header.jpeg');
+      width: 100%;
+      height: 100vh;
+      position: relative;
+      overflow-y: hidden;
+}
+
+#main-header .container {
+    margin-top: 30vh;
+    margin-left: 20vh;
+}
+
+#main-header h1 {
+    font-size: 3rem;
+    margin-bottom: 0;
+}
+
+#main-header h2 {
+    font-size: 1.5rem;
+}
+
+.lead {
+    font-size: 1rem;
+}
+
+.container {
+    max-width: 400px;
+    text-align: left;
+    margin: 0 auto;
+    padding: 0 3rem;
+}
+/* Navigation */
+nav {
+    height: 40px;
+    width: 100%;
+    color: #eee;
+    position: fixed;
+    background: #444;
+}
+
+nav ul {
+    padding: 0;
+    margin: 0;
+}
+
+nav li {
+    display: inline;
+    float: left;
+}
+
+nav a {
+    display: inline-block;
+    width: 100px;
+    text-align: center;
+    text-decoration: none;
+    padding: 10px 0;
+    color: #eee;
+    text-decoration: none;
+}
+
+nav li:hover {
+    background-color: #444;
+    border-radius: 5%;
+}
+
+nav a#openup {
+    display: none;
+}
+
+/* MusiX Area */
+#musix .container {
+    text-align: center;
+    color: #252525;
+}
+
+.section {
+    padding: 2rem 0;
+}
+.section-head {
+    font-size: 2.5rem;
+    margin: 0;
+}
+.section h3 {
+    font-size: 2rem;
+}
+
+/* Entertaiment Area */
+section#entertaiment {
+    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('./img/entertaiment.jpg');
+    background-size: cover;
+    background-position: center;
+    padding: 10rem 0;
+}
+
+/*Get Apps Area*/
+
+#get-apps h2 {
+    color: #252525;
+    font-size: 2.5rem;
+}
+
+#get-apps p {
+    color: #252525;
+    font-size: 1rem;
+}
+
+/* Responsive Queries*/
+
+@media screen and (max-height: 1366px) and (max-width: 1024px) {
+    #main-header .container {
+        margin-top: 30vh;
+        margin-left: 5vh;
+    }
+}
+
+@media screen and (max-width: 580px) {
+
+    .hide-responsive {
+        display: none;
+    }
+
+    #get-apps h2 {
+        font-size: 2rem;
+    }
+
+
+    #main-header {
+        height: 60vh;
+    }
+
+    #main-header .container {
+        margin-top: 30vh;
+    }
+
+    #main-header h1 {
+        font-size: 2rem;
+    }
+
+    #main-header h2 {
+        font-size: 1rem;
+    }
+
+    .section {
+        padding: 1rem 0;
+    }
+    .section-head {
+        font-size: 1.6rem;
+    }
+    .section h3 {
+        font-size: 1.2rem;
+    }
+
+    nav {
+      height: auto;
+      border-bottom: 0;
+    }
+    nav ul {
+      display: none;
+      height: auto;
+    }
+    nav li {
+      width: 100%;
+      float: left;
+      position: relative;
+    }
+    nav a {
+      text-align: left;
+      width: 100%;
+      text-indent: 25px;
+      background: #333;
+      border-bottom: 1px solid #555;
+    }
+    nav a:hover {
+      background: #444;
+    }
+    nav a#openup:after {
+      content: "|||";
+      transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+      /* IE 9 */
+      -webkit-transform: rotate(-90deg);
+      /* Safari and Chrome */
+      width: 30px;
+      height: 30px;
+      display: inline-block;
+      position: absolute;
+      right: 5px;
+      top: 20px;
+    }
+    nav a#openup {
+      display: block;
+      background-color: #333;
+      width: 100%;
+      position: relative;
+    }
+}
+
+.cf:before, .cf:after {
+    content: "";
+    display: table;
+}
+
+.cf:after {
+    clear: both;
+}
+
+.cf {
+    zoom: 1;
+}
+
+  /* For IE 6/7 (trigger hasLayout) */
+