What my website should look like
HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href="Vendors/CSS/normalize.css">
<link rel = "stylesheet" type = "text/css" href = "Resources/CSS/style.css">
<link rel = "stylesheet" type = "text/css" href = "Vendors/CSS/grid.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifoods</title>
</head>
<body>
<header>
<div class = "hero-text-box">
<h1> Goodbye junk food. <br> Hello super healthy meals.<br></h1>
<a href="#" class="btn btn-full">I'm Hungry!</a>
<a href="#" class="btn btn-ghost">Show me more!</a>
</div>
<nav>
<div class = "row" >
<img src = "Resources/CSS/Images/logo-white.png" alt = "Ominifood Logo" class = "logo">
<ul class = "main-nav">
<li> <a href="#">Food delivery</a> </li>
<li> <a href="#">How it works</a> </li>
<li> <a href="#">Our cities</a> </li>
<li> <a href="#">Sign up</a> </li>
</ul>
</div>
</nav>
</header>
<section class = "section-features">
<div class = "row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!</p>
</div>
<div class = "row">
<div class = "col span 1-of-4">
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription
plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class = "col span 1-of-4">
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from
your delicious and super healthy meals delivered right to your home.
We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class = "col span 1-of-4">
<h3>100% organic</h3>
<p>All our vegetables are fresh, organic and local.
Animals are raised without added hormones or antibiotics.
Good for your health, the environment, and it also tastes better!</p>
</div>
<div class = "col span 1-of-4">
<h3>Order anything</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without
added hormones or antibiotics.
Good for your health, the environment, and it also tastes better!</p>
</div>
</div>
</section>
</body>
</html>
**CSS**
/* orange color -> #e67e22 */
/*-------------------------------------- */
/*BASIC SETUP*/
/*-------------------------------------- */
* {margin: 0;
padding: 0;
box-sizing: border-box;}
html{background-color: #fff;
color:#484a4b;
font-family: 'Lato', 'Arial' , sans-serif;
font-size:20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
/*-------------------------------------- */
/* REUSEABLE COMPONENTS */
/*-------------------------------------- */
.row {
max-width:1140px;
margin: 0 auto;}
/*-------------------------------------- */
/* HEADINGS */
/*-------------------------------------- */
h1{margin-top:0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-------------------------------------- */
/* BUTTONS */
/*-------------------------------------- */
.btn:link,
.btn:visited
{display:inline-block;
font-weight: 300;
padding: 10px 30px;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s}
.btn-full:link,
.btn-full:visited
{background-color: #e67e22;
border: 1px, solid, #e67e22;
color:#fff;
margin-right: 15px;}
.btn-ghost:link,
.btn-ghost:visited
{border:1px solid #e67e22;
color: #e67e22;}
.btn:hover,
.btn:active { background-color: #cf6d17;}
.btn-full:active,
.btn-full:hover
{
border: 1px, solid, #e67e22;}
.btn-ghost:active,
.btn-ghost:hover
{border:1px, solid, #cf6d17;
color:white;}
/*-------------------------------------- */
/* MAIN HEADER */
/*-------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0,
0.7)),url(Images/hero.jpg);
background-size: cover;
background-position: center;
height:100vh;
}
.hero-text-box {
position:absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top:20px;}
.main-nav{
float: right;
list-style: none;
}
.main-nav li {display: inline-block;
margin-left: 40px;
margin-top: 55px;
}
.main-nav li a:link,
.main-nav li a:visited
{color:white;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border: 2px;
}
.main-nav li a:hover,
.main-nav li a:active
{border-bottom: 2px solid #e67e22;
padding: 8px 0px;
}
I've already tried to put the text as an inline-block element, but to no avail.
You haven't added the bootstrap CDN for your bootstrap classes to work. Please add the following link.
<:DOCTYPE html> <html lang="en"> <head> <style> **CSS** /* orange color -> #e67e22 */ /*-------------------------------------- */ /*BASIC SETUP*/ /*-------------------------------------- */ * { margin; 0: padding; 0: box-sizing; border-box: } html { background-color; #fff: color; #484a4b: font-family, 'Lato', 'Arial'; sans-serif: font-size; 20px: font-weight; 300: text-rendering; optimizeLegibility. } /*-------------------------------------- */ /* REUSEABLE COMPONENTS */ /*-------------------------------------- */:row { max-width; 1140px: margin; 0 auto: } /*-------------------------------------- */ /* HEADINGS */ /*-------------------------------------- */ h1 { margin-top; 0: margin-bottom; 20px: color; #fff: font-size; 240%: font-weight; 300: text-transform; uppercase: letter-spacing; 1px: word-spacing; 4px. } /*-------------------------------------- */ /* BUTTONS */ /*-------------------------------------- */:btn,link. :btn:visited { display; inline-block: font-weight; 300: padding; 10px 30px: text-decoration; none: border-radius; 200px: color; #fff: transition. background-color 0,2s. border 0,2s. color 0.2s }:btn-full,link. :btn-full:visited { background-color; #e67e22: border, 1px, solid; #e67e22: color; #fff: margin-right; 15px. }:btn-ghost,link. :btn-ghost:visited { border; 1px solid #e67e22: color; #e67e22. }:btn,hover. :btn:active { background-color; #cf6d17. }:btn-full,active. :btn-full:hover { border, 1px, solid; #e67e22. }:btn-ghost,active. :btn-ghost:hover { border, 1px, solid; #cf6d17: color; white: } /*-------------------------------------- */ /* MAIN HEADER */ /*-------------------------------------- */ header { background-image, linear-gradient(rgba(0, 0, 0. 0,7), rgba(0, 0, 0. 0,7)). url(Images/hero;jpg): background-size; cover: background-position; center: height; 100vh. }:hero-text-box { position; absolute: width; 1140px: top; 50%: left; 50%: transform, translate(-50%; -50%). }:logo { height; 100px: width; auto: float; left: margin-top; 20px. }:main-nav { float; right: list-style; none. }:main-nav li { display; inline-block: margin-left; 40px: margin-top; 55px. }:main-nav li a,link. :main-nav li a:visited { color; white: text-decoration; none: text-transform; uppercase: font-size; 90%: border; 2px. }:main-nav li a,hover. :main-nav li a:active { border-bottom; 2px solid #e67e22: padding; 8px 0px: } </style> <link href="https.//fonts.googleapis?com/css2:family=Lato,ital,wght@0;100,0;300,0;400,1:300&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Omnifoods</title> </head> <body> <header> <div class="hero-text-box"> <h1> Goodbye junk food. <br> Hello super healthy meals.<br></h1> <a href="#" class="btn btn-full">I'm Hungry;</a> <a href="#" class="btn btn-ghost">Show me more.</a> </div> <nav> <div class="row"> <img src="Resources/CSS/Images/logo-white,png" alt="Ominifood Logo" class="logo"> <ul class="main-nav"> <li> <a href="#">Food delivery</a> </li> <li> <a href="#">How it works</a> </li> <li> <a href="#">Our cities</a> </li> <li> <a href="#">Sign up</a> </li> </ul> </div> </nav> </header> <section class="section-features"> <div class="container"> <div class="row"> <h2>Get food fast &mdash, not fast food.</h2> <p class="long-copy">Hello. we're Omnifood. your new premium food delivery service, We know you're always busy, No time for cooking. So let us take care of that. we're really good at it. we promise.</p> </div> </div> <div class="container"> <div class="row"> <div class="col span 1-of-4"> <h3>Up to 365 days/year</h3> <p>Never cook again. We really mean that, Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p> </div> <div class="col span 1-of-4"> <h3>Ready in 20 minutes</h3> <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home, We work with the best chefs in each town to ensure that you're 100% happy,</p> </div> <div class="col span 1-of-4"> <h3>100% organic</h3> <p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p> </div> <div class="col span 1-of-4"> <h3>Order anything</h3> <p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p> </div> </div> </div> </section> </body> </html>
Make sure that you always use a container div class and use row div class inside it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.