<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="./vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<link rel="stylesheet" type="text/css" href="./resources/css/queries.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet">
<title>Synths</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="./resources/img/icons/synthesizer.png" alt="Logo" class="logo">
<img src="./resources/img/icons/synthesizer_black.png" alt="Logo" class="logo-black">
<ul class="main-nav">
<li><a href="#" onclick="return false;" class="js--scroll-about-nav">About Synths</a></li>
<li><a href="#" onclick="return false;" class="js--scroll-how-works">How it work</a></li>
<li><a href="#" onclick="return false;" class="js--scroll-cities">Our cities</a></li>
<li><a href="#" onclick="return false;" class="js--scroll-plans-nav" >Sign up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Lets make some digital music!</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">Lets Start</a>
<a class="btn btn-ghost js--scroll-to-about" href="#">About Synths</a>
</div>
</header>
<section class="section-feature js--section-feature">
<div class="row">
<h2>Lorem ipsum — dolor sit amet</h2>
<p class="long-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci
diam. Nunc pharetra enim id varius elementum. Pellentesque sit amet ultrices ligula, vitae
laoreet risus.</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<img src="./resources/img/icons/musical-notes-outline-red.svg" class="icon-big" alt="icon">
<h3>Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.
Nunc pharetra enim id varius elementum. Pellentesque sit amet ultrices ligula, vitae
laoreet risus.</p>
</div>
<div class="col span-1-of-4 box">
<img src="./resources/img/icons/options-outline-red.svg" class="icon-big" alt="icon">
<h3>Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.
Nunc pharetra enim id varius elementum. Pellentesque sit amet ultrices ligula, vitae
laoreet risus.</p>
</div>
<div class="col span-1-of-4 box">
<img src="./resources/img/icons/hardware-chip-outline-red.svg" class="icon-big" alt="icon">
<h3>Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.
Nunc pharetra enim id varius elementum. Pellentesque sit amet ultrices ligula, vitae
laoreet risus.</p>
</div>
<div class="col span-1-of-4 box">
<img src="./resources/img/icons/headset-outline-red.svg" class="icon-big" alt="icon">
<h3>Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.
Nunc pharetra enim id varius elementum. Pellentesque sit amet ultrices ligula, vitae
laoreet risus.</p>
</div>
</div>
</section>
<section class="section-photo">
<ul class="photo-showcase clear-fix">
<li>
<figure class="photo">
<img src="./resources/img/solo/1087137-top-synthesizer-wallpaper-2048x1152-for-tablet.jpg" alt="">
</figure>
</li>
<li>
<figure class="photo">
<img src="./resources/img/solo/1087183-most-popular-synthesizer-wallpaper-1920x1080-for-samsung.jpg" alt="">
</figure>
</li>
<li>
<figure class="photo">
<img src="./resources/img/solo/wp2758594-synthesizer-wallpaper-hd.jpg" alt="">
</figure>
</li>
<li>
<figure class="photo">
<img src="./resources/img/solo/wp2758680-synthesizer-wallpaper-hd.jpg" alt="">
</figure>
</li>
<li>
<figure class="photo">
<img src="./resources/img/solo/microfreak-03.jpg" alt="">
</figure>
</li>
<li>
<figure class="photo">
<img src="./resources/img/solo/micro_brute.jpg" alt="">
</figure>
</li>
<li>
<figure class="photo">
<img src="./resources/img/solo/mini_brute.jpg" alt="">
</figure>
</li>
<li>
<figure class="photo">
<img src="./resources/img/solo/matrixbrute-34.jpg" alt="">
</figure>
</li>
</ul>
</section>
<section class="section-steps js--section-steps">
<div class="row">
<h2>How it works — Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="./resources/img/app-iPhone.png" class="app-screen" alt= " ">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-steps">
<div>1</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.</p>
</div>
<div class="work-steps">
<div>2</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.</p>
</div>
<div class="work-steps">
<div>3</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.</p>
</div>
<a href="#" class="btn-app">
<img src="./resources/img/download-app.svg" alt="">
</a>
<a href="#" class="btn-app">
<img src="./resources/img/download-app-android.png" alt="">
</a>
</div>
</div>
</section>
<section class="section-cities js--section-cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<img src="./resources/img/cities/Cluj-Napoca.jpg" class="photo-cities" alt="">
<h3>Cluj-Napoca</h3>
<div class="city-feature">
<img src="./resources/img/icons/location-outline-red.svg" class="icon-small" alt="">
Str.Loream Ipsum nr.xx
</div>
<div class="city-feature">
<img src="./resources/img/icons/logo-facebook-red.svg" class="icon-small" alt="">
<a href="#">www.facebook.com</a>
</div>
<div class="city-feature">
<img src="./resources/img/icons/call-outline-red.svg" class="icon-small" alt="">
+40 753 823 xxx
</div>
</div>
<div class="col span-1-of-4 box">
<img src="./resources/img/cities/Bucuresti.jpg" class="photo-cities" alt="">
<h3>Bucuresti</h3>
<div class="city-feature">
<img src="./resources/img/icons/location-outline-red.svg" class="icon-small" alt="">
Str.Loream Ipsum nr.xx
</div>
<div class="city-feature">
<img src="./resources/img/icons/logo-facebook-red.svg" class="icon-small" alt="">
<a href="#">www.facebook.com</a>
</div>
<div class="city-feature">
<img src="./resources/img/icons/call-outline-red.svg" class="icon-small" alt="">
+40 753 823 xxx
</div>
</div>
<div class="col span-1-of-4 box">
<img src="./resources/img/cities/Roman.jpg" class="photo-cities" alt="">
<h3>Roman</h3>
<div class="city-feature">
<img src="./resources/img/icons/location-outline-red.svg" class="icon-small" alt="">
Str.Loream Ipsum nr.xx
</div>
<div class="city-feature">
<img src="./resources/img/icons/logo-facebook-red.svg" class="icon-small" alt="">
<a href="#">www.facebook.com</a>
</div>
<div class="city-feature">
<img src="./resources/img/icons/call-outline-red.svg" class="icon-small" alt="">
+40 753 823 xxx
</div>
</div>
<div class="col span-1-of-4 box">
<img src="./resources/img/cities/Timisoara.jpg" class="photo-cities" alt="">
<h3>Timisoara</h3>
<div class="city-feature">
<img src="./resources/img/icons/location-outline-red.svg" class="icon-small" alt="">
Str.Loream Ipsum nr.xx
</div>
<div class="city-feature">
<img src="./resources/img/icons/logo-facebook-red.svg" class="icon-small" alt="">
<a href="#">www.facebook.com</a>
</div>
<div class="city-feature">
<img src="./resources/img/icons/call-outline-red.svg" class="icon-small" alt="">
+40 753 823 xxx
</div>
</div>
</div>
</section>
<section class="section-testimonials">
<div class="row">
<h2>Satisfied customers</h2>
</div>
<div class="row">
<div class="col span-1-of-3 box">
<blockquote>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words
</blockquote>
<cite><img src="./resources/img/Profiles/Ada.JPG" alt=""> Andrada Horvath</cite>
</div>
<div class="col span-1-of-3 box">
<blockquote>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected humour, or randomised words which
don't look even slightly believable.
</blockquote>
<cite class="review"><img src="./resources/img/Profiles/customer-2.jpg" alt=""> Ramona Barbu</cite>
</div>
<div class="col span-1-of-3 box">
<blockquote>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English.
</blockquote>
<cite><img src="./resources/img/Profiles/customer-3.jpg" alt=""> Random Dude</cite>
</div>
</div>
</section>
<section class="section-plans js--section-plans">
<div class="row">
<h2>Start creating now</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/month</span></p>
</div>
<div>
<ul>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> 24/7 support</li>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> Acces the newest instruments</li>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> Lorem Ipsum</li>
</ul>
</div>
<div>
<a href="#" class="btn btn-full">Sign up now</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/month</span></p>
</div>
<div>
<ul>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> 24/7 support</li>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> Acces the newest instruments</li>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> Lorem Ipsum</li>
</ul>
</div>
<div>
<a href="#" class="btn btn-full"> Sign up now</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box">
<div>
<h3>Standard</h3>
<p class="plan-price">$99 <span>/month</span></p>
</div>
<div>
<ul>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> 24/7 support</li>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> Acces the newest instruments</li>
<li><img src="./resources/img/icons/checkmark-outline.svg" class="icon-small" alt=""> Lorem Ipsum</li>
</ul>
</div>
<div>
<a href="#" class="btn btn-full">Sign up now</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-form">
<div class="row">
<h2>we're happy to hear from you</h2>
</div>
<div class="row">
<form method="POST" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your Email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you found us</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="google">Google</option>
<option value="add">Add</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>NewsLetter</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked> Yes, please!
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message">Your text</textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</section>
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">iOS App</a></li>
<li><a href="#">Android App</a></li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<li><a href="#"><img src="./resources/img/icons/social/logo-facebook-c.svg" alt=""></a></li>
<li><a href="#"><img src="./resources/img/icons/social/logo-twitter-c.svg" alt=""></a></li>
<li><a href="#"><img src="./resources/img/icons/social/logo-google-c.svg" alt=""></a></li>
<li><a href="#"><img src="./resources/img/icons/social/logo-instagram-c.svg" alt=""></a></li>
</ul>
</div>
</div>
<div class="row">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae orci diam.
Nunc pharetra enim id varius elementum. Pellentesque sit amet ultrices ligula, vitae
laoreet risus.
</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="vendors/js/jquery.waypoints.min.js"></script>
<script src="resources/js/script.js"></script>
</body>
</html>