hi, everyone im having a problem solving this three parts of the mentined challenge,
5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’
i think i did it well in this one because everytime i click over the links of my nav bar, they take me back to the main page.
12. When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).
i copied and pasted it the link several times and nothing happens.
- The navbar should always be at the top of the viewport.
in this one i used “position:fixed” its that rigth?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
<a href="/idex.html" class="current-page">Home</a>
</li>
<li class="nav-link">
<a href="/idex.html">Product</a>
</li>
<li class="nav-link"><a href="/idex.html">Support</a></li>
<li><a href="/idex.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<a href="https://www.google.com"><button>MORE INFO</button></a>
</div>
</div>
<hr />
<div class="more-stuff">
<div class="more-stuff-container">
<img
class="stuff-picture"
src="/img/image_home_feature_Softgoods_720x.jpg"
alt=""
/>
<p>Lorem, ipsum.</p>
</div>
<div class="more-stuff-container">
<img
class="stuff-picture"
src="/img/image_home_feature_Accessories_720x.jpg"
alt=""
/>
<p>Lorem, ipsum.</p>
</div>
<div class="more-stuff-container">
<img
class="stuff-picture"
src="/img/image_home_feature_3new_720x.jpg"
alt=""
/>
<p>Lorem, ipsum.</p>
</div>
</div>
<hr />
</main>
<footer>
<div class="footer-container">
<div class="copyright-and-contact">
<p class="copy">©2020 UNION BINDINGS</p>
<div class="social-media">
<a href="" class="social-logo"
><img class="media-img" src="/img/instagram.png" alt=""
/></a>
<a href="" class="social-logo"
><img class="media-img" src="/img/facebook.png" alt=""
/></a>
<a href="" class="social-logo"
><img class="media-img" src="/img/youtube.png" alt=""
/></a>
</div>
</div>
<div class="newsletter">
<form
class="newsletter"
action=" https://www.freecodecamp.com/email-submit"
id="form"
>
<h3 class="space-newsletter">SUBSCRIBE TO OUR NEWSLETTER</h3>
<input
class="space-newsletter"
type="name"
name="name"
id="name"
placeholder="name"
/>
<input
class="space-newsletter"
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input
class="space-newsletter"
id="submit"
type="submit"
value="SUBSCRIBE"
/>
</form>
</div>
</div>
</footer>
</body>
</html>
and here is the css
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
@media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */
/* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 0;
}
#video {
align-self: center;
}
@media (max-width: 900px) {
.video-container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 0;
}
#video {
width: 100%;
align-self: center;
}
}
hr {
width: 50%;
margin-top: 2em;
margin-bottom: 2em;
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
}
@media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
max-width: 900px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bindings-picture {
width: 100%;
}
button {
background-color: rgb(255, 123, 0);
border: none;
border-radius: 0.4em;
padding: 0.75rem;
color: white;
font-weight: 500;
cursor: pointer;
}
button:hover {
background-color: rgb(48, 125, 240);
}
.more-stuff {
max-width: 900px;
display: flex;
}
.stuff-picture {
width: 100%;
}
/* main stuff end */
/* footer stuff */
.footer-container {
background: rgb(255, 123, 0);
padding: 1%;
display: flex;
justify-content: space-between;
}
.newsletter {
background: rgb(48, 125, 240);
color: white;
border-radius: 0.8em;
padding: 0.3em;
display: flex;
flex-direction: column;
align-items: center;
}
#name {
border: none;
border-radius: 0.4em;
}
#email {
border: none;
border-radius: 0.4em;
}
#submit {
background-color: rgb(255, 123, 0);
border: none;
border-radius: 0.4em;
padding: 0.75rem;
color: white;
font-weight: 500;
cursor: pointer;
}
#submit:hover {
background-color: rgba(255, 139, 30, 0.897);
}
.space-newsletter {
margin: 1em auto;
}
.copyright-and-contact {
display: flex;
color: white;
font-size: 1.25rem;
}
.copy {
margin-top: 0;
}
.social-media {
max-width: 15%;
}
.social-logo {
width: 100%;
margin-left: 0.75em;
}
@media (max-width: 900px) {
.copyright-and-contact {
display: flex;
flex-direction: column;
color: white;
font-size: 1.25rem;
}
.social-media {
display: flex;
max-width: 100%;
}
.social-logo {
width: 10%;
margin-left: 0.2em;
}
.media-img {
width: 100%;
display: flex;
}
}