45 lines
2.4 KiB
HTML
45 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="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
<title>Cat Debugging</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<header id="header">
|
||
|
|
<img id="header-img" src="https://brokelyn.com/app/uploads/2014/07/cat-computer.jpg" alt="A cat diagnosing a programming problem on a computer">
|
||
|
|
<p>Cat Debugging Inc.</p>
|
||
|
|
<nav id="nav-bar">
|
||
|
|
<ul>
|
||
|
|
<li><a class="nav-link" href="#product-info">Product Info</a></li>
|
||
|
|
<li><a class="nav-link" href="#advert">Watch a cat</a></li>
|
||
|
|
<li><a class="nav-link" href="#form">Contact Us</a></li>
|
||
|
|
<ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
<section id="product-info">
|
||
|
|
<h1>Our helpful cats help you debug any code problem!</h1>
|
||
|
|
<h3>Our promise</h3>
|
||
|
|
<ul class="selling-points-list">
|
||
|
|
<li>Attention to detail makes a cat perfect for describing code problems to.</li>
|
||
|
|
<li>Cuddle time with an expert cat debugging specialist can allow you to solve problems in the background.</li>
|
||
|
|
<li>Soothing purrs from all our debugging specialists can help you tune out the noise of the work day.</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
<section id="advert">
|
||
|
|
<h3>Watch an expert at work</h3>
|
||
|
|
<iframe id="video" width="344" height="611" src="https://www.youtube.com/embed/eW6G9g4--os" title="Cat debugging 🖥️ #shorts #funny #cat #coding" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||
|
|
</section>
|
||
|
|
<form id="form" method="POST" action="https://www.freecodecamp.com/email-submit">
|
||
|
|
<label for="email">Contact us today to find out more! <input id="email" type="email" name="email" placeholder="Enter your email to contact us" required></label>
|
||
|
|
<input id="submit" type="submit" value="Contact Us">
|
||
|
|
</form>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|