<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faulcon Delacy MFG.</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Rubik:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<main>
<header id="header">
<nav id="nav-bar">
<img id="header-img" src="https://i.imgur.com/O3G6imq.png" alt="DeLacey Eagle Icon">
<ul>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#video">Learn</a></li>
<li><a class="nav-link" href="#ships">Order</a></li>
</ul>
</nav>
</header>
<div class="main-area">
<div id="about">
<h2>Multipurpose and combat-oriented ships known for their ruggedness and reliability.</h2>
<p>The company was founded in the 28th century as Faulcon Manspace and made its name with the original Viper before rapidly expanding.
Acquisitions include DeLacy Shipworks and Zorgon Peterson.</p>
</div>
<div class="email-list">
<h1>Join the Fleet</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input placeholder="Enter your email." type="email" name="email" id="email">
<input type="submit" name="submit" id="submit" value="GET ACCESS">
</form>
</div>
<div id="video-block">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/mU9fCa1LNRA?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="ships" class="ship-tile">
<div id="sidewinder">
<h3>Sidewinder</h3>
<img class="ship-image" src="https://edassets.org/static/img/ship-schematics/qohen-leth/sidewinder.png" alt="Sidewinder">
<p class="ship-desc">The Sidewinder is often the first ship that a newly-registered Pilots Federation pilot will fly and own. Its dependability, versatility, and agility combine to make it a useful all-rounder and an excellent choice for green and experienced pilots alike.</p>
<span>
<img class="currency-icon" src="https://edassets.org/static/img/misc/Combat-Bonds.png" alt="currency symbol">
<p>40,800</p>
</span>
<div class="btn-shape">
<a id="buy-btn" class="btn" href="#">Place Order</a>
</div>
</div>
<div id="cobra">
<h3>Cobra MKIII</h3>
<img class="ship-image" src="https://edassets.org/static/img/ship-schematics/qohen-leth/cobra-mk-iii.png" alt="Cobra MkIII">
<p class="ship-desc">A true multipurpose ship, the Cobra Mk III can fit comfortably into a range of roles. In combat it can hit hard and - if necessary - make a swift exit, while its spacious cargo hold allows it to carry more than other ships of similar price and size. The Cobra is also a solid choice for explorers, boasting an ample fuel tank and six internal compartments.</p>
<span>
<img class="currency-icon" src="https://edassets.org/static/img/misc/Combat-Bonds.png" alt="currency symbol">
<p>349,718</p>
</span>
<div class="btn-shape">
<a id="buy-btn" class="btn" href="#">Place Order</a>
</div>
</div>
<div id="krait">
<h3>Krait MKII</h3>
<img class="ship-image" src="https://edassets.org/static/img/ship-schematics/qohen-leth/krait-mk-ii.png" alt="Krait MkII">
<p class="ship-desc">The Krait MkII is a reimagining of the Krait Lightspeeder, which was originally manufactured by Faulcon DeLacy in the 3100s. Although the new ship is larger than the original, it possesses many of the same characteristics, emphasizing speed, manoeuvrability and firepower over defensive capability. The ship also boasts a fighter bay and space for up to two crew members, making it a good option for those seeking a medium-weight, multipurpose vessel.</p>
<span>
<img class="currency-icon" src="https://edassets.org/static/img/misc/Combat-Bonds.png" alt="currency symbol">
<p>45,814,205</p>
</span>
<div class="btn-shape">
<a id="buy-btn" class="btn" href="#">Place Order</a>
</div>
</div>
</div>
</div>
<footer>
<p>Icons and ship illustrations from <a href="https://edassets.org/#/">ED Assets.</a></p>
</footer>
</main>
</body>
</html>
:root {
font-size: 1rem;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 100;
--bg-primary: #F5FCFB;
--bg-secondary: #8C271E;
--text-primary: #FBFFFF;
--text-secondary: #0e2235;
}
main {
background-color: var(--text-secondary);
}
html {
background-color: var(--text-secondary);
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-primary);
}
/* HEADER + NAV */
#nav-bar {
margin: 0;
top: 0;
height: 5rem;
position: fixed;
width: 100vw;
background-color: var(--bg-secondary);
color: var(--text-primary);
display: flex;
flex-direction: row;
align-items: center;
}
a {
text-decoration: none;
text-decoration: none;
}
a:visited {
color: var(--text-primary);
}
ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 100%;
}
.nav-link {
color: var(--text-primary);
padding-right: 3em;
}
#header-img {
margin: 1rem;
width: 4rem;
}
/* END NAV */
.main-area {
margin-top: 5rem;
padding-top: 1rem;
width: 100%;
background-color: var(--text-secondary);
color: var(--text-primary);
}
.email-list {
display: flex;
flex-direction: column;
margin: 0;
align-items: center;
justify-items: center;
padding-bottom: 10rem;
}
#form {
display: flex;
flex-direction: column;
}
#email {
height: 3rem;
background-color: #879bae;
border: none;
outline: none;
width: 45rem;
text-align: center;
border-radius: 20px;
}
#email::placeholder {
color: var(--text-secondary);
font-size: 1rem;
}
#submit {
background-color: #8C271E;
color: var(--text-primary);
margin-top: 2rem;
height: 3rem;
width: 7rem;
margin-left: auto;
margin-right: auto;
border: solid 1px #F5FCFB;
}
#about {
margin-top: 5rem;
padding: 1rem;
text-align: center;
margin-bottom: 1rem;
}
#video {
display: block;
height: 50vh;
width: 50vw;
margin: 0 auto;
}
.ship-image {
width: 20rem;
}
.currency-icon {
width: 2rem;
height: 2rem;
}
#ships {
padding: 0 5rem;
margin-top: 5rem;
display: flex;
flex-direction: column;
text-align: center;
}
.ship-desc {
padding: 2rem;
font-size: 1.5rem;
}
#buy-btn {
color: var(--text-primary);
}
.btn-shape {
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--bg-secondary);
border-radius: 20px;
height: 3rem;
width: 7rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 5rem;
}
span {
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
align-items: center;
padding: 0;
padding-bottom: 3rem;
}
#sidewinder {
background-color: #879bae4a;
border-radius: 20px;
margin-top: 10rem;
}
#cobra {
background-color: #879bae4a;
border-radius: 20px;
margin-top: 10rem;
}
#krait {
background-color: #879bae4a;
border-radius: 20px;
margin-top: 10rem;
margin-bottom: 10rem;
}
@media only screen and (max-width: 700px) {
#email {
height: 3rem;
background-color: #879bae;
border: none;
outline: none;
width: 20rem;
text-align: center;
border-radius: 20px;
}
#video {
display: block;
width: 100%;
margin: 0 auto;
}
}
footer {
margin: 0;
padding: 1rem;
color: var(--text-primary);
background-color: var(--text-secondary);
text-align: right;
text-decoration: none;
}
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.