HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href = "ProductLandingPage.css" type="text/css">
</head>
<body>
<header id="header">
<h1 id="header-title">
Product Landing Page
</h1>
<br/>
<br/>
<img id="header-img" src="logo.gif" alt="Coding is Fun">
<nav id="nav-bar">
<ul>
<li> <a href="#Product-info" class="nav-link"> Product Info </a> </li>
<li> <a href="#Opt-in" class="nav-link"> Opt-In </a> </li>
<li> <a href="#FAQ" class="nav-link"> FAQ </a> </li>
</ul>
</header>
<p>
<a name="Product-info">
<h2> Product Information </h2>
<p id="product-infopara"> X is the new revolutionary design system by Y that is tailored made for Z! We are currently building an email list for a FREE beta test of the product. All you
have to do is provide us with contact information as below. </p>
</a>
<a name="Opt-in">
<form id="form" action="emailSubmit.html" method="POST">
<h2> Enter your contact info here to be updated when X releases! </h2>
<input type ="text" id="name" placeholder =" Enter Your Name Here" required>
</input>
<input type ="email" id="email" placeholder = "Enter Your Email Here" required>
</input>
<br/>
<br/>
<input type="submit" id="submit" > </input>
</form>
</a>
<a name="FAQ">
<h2>Frequently Asked Questions</h2>
</a>
<h3 class="questions"> What is this product for? </h3>
<p class="answers"> *Product name* is for customers whom *type of customers / target audience* which helps them by *product feature*! </p>
<h3 class="questions"> What is the cost of the item? </h3>
<p class="answers"> We are still calculating the best price to sell this item at that is appropiate for our customers. Please remember, there is no obligation to buy anything
if you opt in with your contact information. Shipping costs are free for UK customers whilst international delivery costs will be ensured to be kept to a minimum. </p>
<h3 class="questions"> What would you do with my information? </h3>
<p class="answers"> Any information you send to us will only be used to provide you with an update on when the product launches. You will be amongst the first to know.
We will never share the information you give us unless your consent has been given. There is no reason for us to share your data however, if this changes, we will inform and ask
you for permission as appropiate. </p>
<h3 class="questions"> What benefits are there if I opt-in? </h3>
<p class="answers">
<ul>
<li> Learn about X's release date before the public know </li>
<li> Be invited to take part in a beta test for FREE </li>
<li> A unique 10% discount code will be given to anyone who opts-in by 03/03/2019 </li>
</ul>
</p>
<h3 class="questions"> Can I change my mind after purchase? </h3>
<p class="answers"> Yes - Please send us an email via sales@productname.com within 30 days for a full money back gurantee
<h3 class="questions"> Sounds great - how do I opt-in? </h3>
<p class="answers"> Simple. Please click <a href="#Opt-in"> here </a> to be quickly directed to a name and email input box. Just fill in a name you want us to address you by
as well as your email address. Finally, click submit. <p>
<p id="ending"> Thank you for taking the time in checking out X. We hope you will consider helping us in the beta test of X and we are excited to announce more news soon! </p>
</body>
</html>
CSS
@media ( min-width: 768px) {
font-size:14em;
font-family:Verdana, Arial;
}
@media (max-height: 480px max-width: 320px) {
font-size:100%;
color:sky-blue;
font-family: Verdana, Arial;
}
#header {
margin:20px;
border-radius:10px;
font-family: Verdana, Sans-seriff;
width:50%;
background-color: #aeea13;
}
#header-title {
display:block;
}
#header-img {
text-align :center;
margin: auto;
width: 75%;
border: 3px solid green;
padding: 10px;
}
#nav-bar {
list-style-type:none;
margin:0;
padding-top:90px;
position: auto;
top:0px;
width:50%;
}
#nav-bar ul {
list-style-type: none;
margin: 0;
padding: 10;
background-color: #f1f1f1;
text-decoration:none;
}
#nav-bar ul li {
display:block;
color:#000;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid #555;
}
#header {
display: flex;
}
#form {
display: flex;
}
#product-infopara {
text-align:center;
}
.questions {
display:block;
border: 10px;
font-family:
}
#submit {
display:block;
}
a h2 {
text-align:center;
}
#ending {
display:flex;
text-align:center;
padding : 20px;
}
I’m trying my best to get the name, email and submit input fields on a new line and not shown in a streched way like it is in the image above. How can I fix this?
Reference is project three: Build a product landing page btw
I tried display:block which I thought would make each one show on separate lines. But it is not working.