rmcg.dev/projects/FrontendMentor/newbie/equalizer-landing-page/index.html

76 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css">
<title>Frontend Mentor | Equalizer landing page</title>
</head>
<body>
<header>
<img class="logo" src="assets/logo.svg" alt="equalizer company logo">
</header>
<main>
<section class="intro-section">
<h1 class="page-header">We make your music sound extraordinary.</h1>
<p class="main-body">
A system audio equalizer specifically designed for Android and iOS. Freely tune the
way your music sounds with a professional grade parametric EQ & volume mixer. Control
bass, mids, treble, gain control, reverb, and more!
</p>
</section>
<section class="product-card">
<img class="product-card__image" src="assets/illustration-app.png" alt="Image of the Equalizer in use"
aria-hidden="true">
<h2 class="product-card__header">Premium EQ</h2>
<p class="product-card__body">
Get expert-level control with a robust equalizer, volume mixer, and spatial audio. Take
your listening experience to a whole new level and access all our incredible features!
</p>
<p class="price-block">
<span class="price-block__price">$4</span> <span class="price-block__term">/ month</span>
</p>
<div class="button-block">
<a class="button button-ios" href="#">
<img src="assets/icon-apple.svg" alt="Apple Logo" aria-hidden="true">
iOS Download</a>
<a class="button button-android" href="#">
<img src="assets/icon-android.svg" alt="Android Logo" aria-hidden="true">
Android Download</a>
</div>
</section>
</main>
<footer>
<img class="logo-footer" src="assets/logo.svg" alt="equalizer company logo">
<p class="footer__body">
All rights reserved © Equalizer 2021<br />
Have any problems? Contact us via social media or email us at <span
class="footer__email">equalizer@example.com</span>
</p>
<div class="social-image-block">
<img src="assets/icon-facebook.svg" alt="Image for Facebook Logo">
<img src="assets/icon-instagram.svg" alt="Image for Instagram Logo">
<img src="assets/icon-twitter.svg" alt="Image for Twitter Logo">
</div>
</footer>
</body>
</html>