App Landing Page

app-landing-page.markdown

App Landing Page

Simple Music App Landing Page

Please if you have any suggestion regarding the design or my code let me know so I can fix it.

THANK YOU:),

ZAYN

A Pen by Zayn on CodePen.

License.

index.html

<header>
	<nav>
		<div class="logo">
			<h1>aqua <span> | music</span></h1>
		</div>
		<ul class="pages">
			<li class="active">Get</li>
			<li>About</li>
			<li>Blog</li>
			<li>Support</li>
			<li class="buy">NEW</li>
		</ul>
	</nav>
</header>
<!-- MIDDLE CONTENT -->
<div class="middle-header">
	<div class="main">
		<!-- TYPER -->
		<h1 class="aqua"><i class="fas fa-headphones-alt"></i></h1>
		<!-- TYPER END -->
		<div class="line"></div>
		<p>“When words fail music speaks.” ― Irena Huang.</p>
		<button>Free Forever <i class="far fa-arrow-alt-circle-down"></i></button>
	</div>
</div>

<!-- FOLLOW  || DO NOT INCLUDE-->
	<a class="Follow" href="https://codepen.io/ZaynAlaoudi/" target="blank_"></a>

script.js

jQuery(document).ready(function() {
  if (jQuery('.aqua').length) {
  var words = [
		'Pop.',
		'Hip-hop.',
		'<i class="fas fa-grin-hearts"></i>',
    'Rock.',
		'Rap.', 
		'Electronic.', 
		'Country.',
		'Study.',
		'Jazz.',
		'Latin.',
		'Arabic.',
		'Asian.',
		'Classical.',
		'House.',
		'Disco.',
		'<i class="fas fa-smile-wink"></i>'
  ], 

  i = 0;
  setInterval(function(){
    jQuery('.aqua').fadeOut(function(){
        jQuery(this).html(words[i=(i+1)%words.length]).fadeIn();
    });
  }, 1000);
}
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

body {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background: url('https://i.postimg.cc/SxPt8CW7/zayn.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	font-family: 'Comfortaa', cursive; 
}
header {
	top: 0;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: fixed;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

header nav {
	width: 70%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

header nav ul {
	width: 60%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
header nav ul li {
	color: #fff;
	margin: 8px;
	cursor: pointer;
	padding: 3px;
	list-style: none;
	font-weight: 900;
	font-family: 'Comfortaa', cursive; 
	border-bottom: 2px solid transparent;
	letter-spacing: 2px;
	transition: 200ms ease-in-out;
}
header nav ul li:hover {
	border-bottom: 2px solid #fff;
}
header nav ul .buy {
	width: 15%;
	height: 10px;;
	border: 2px solid;
	padding: 10px;
	min-width: 40px;
	max-width: 50px;
	text-align: center;
	line-height: 10px;
	font-weight: 900;
	border-radius: 10px;
	letter-spacing: 3px;
	text-transform: lowercase;
}
header nav ul .buy:hover {
	color: #fa3380;
	border: 2px solid #fff;
	background: #fff;
	text-transform: uppercase;
}
header nav ul .active {
	border-bottom: 2px solid;
}
header nav .logo {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	color: #fff;
	margin-top: 6px;
	margin-left: 10px;
}

header nav .logo h1 {
	font-weight: 900;
	font-family: 'Roboto', sans-serif;
}
header nav .logo h1 span {
	font-weight: 100;
}

.middle-header {
	width: 100%;
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	z-index: 100;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.middle-header .main {
	width: 90%;
	z-index: 100;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: -150px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.middle-header .main h1 {
	color: #fff;
	font-size: 135px;
	font-weight: 100;
	font-family: 'Roboto', sans-serif;
}
.middle-header .main p {
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	margin-top: 30px;
	letter-spacing: 1px;
}
.middle-header .main button {
	width: 30%;
	color: #fff;
	border: 2px solid #fff;
	outline: none;
	padding: 15px;
	font-size: 18px;
	max-width: 250px;
	min-width: 220px;
	background: transparent;
	border-radius: 10px;
	letter-spacing: 2px;
	-webkit-transition: 200ms ease-in-out;
	-o-transition: 200ms ease-in-out;
	transition: 200ms ease-in-out;
}
.middle-header .main button:hover {
	color: #fa3380;
	background: #fff;
	text-transform: uppercase;
}
.middle-header .main .line {
	width: 80%;
	height: 3px;
	max-width: 300px;
	margin-top: -80px;
	background: #fff;
}

@media only screen and (max-width: 432px) {
    .middle-header .main h1 {
				font-size: 110px;
    }
	.middle-header .main .line {
				margin-top: -50px;
    }
}

/*  FOLLOW || DO NOT INCLUDE*/
.Follow {	  background:url("https://pbs.twimg.com/profile_images/959092900708544512/v4Db9QRv_bigger.jpg")no-repeat center / contain;
	width: 50px;
	height: 50px;
	bottom: 9px;
	right: 20px;
	display:block;
	position:fixed;
	border-radius:50%;
	z-index:999;
	-webkit-animation:  rotation 10s infinite linear;
	        animation:  rotation 10s infinite linear;
	}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

styles

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />