Tell us what’s happening:
I wrote my code for the “landing page” project in VScode but when i pasted it in FCC it looks totally screwed up. I edited the stylesheet link and the img src links to be URL instead of local. I am using CSS grid for the page which shows when inspecting the preview but the content isnt following the rules I set in the CSS. Anyone had this issue before and figured out a solution?
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech Document</title>
</head>
<body>
<div class="banner">
<header id="header">
<img id="header-img" src="https://www.harvesthope.org/sites/default/files/images/Horizontal%20-%20Green%20w-%20Green%20Text%403x.png">
<div class="navbox">
<nav id="navbar">
<ul class="nav-list">
<li class="nav-link">What We Do</li>
<li class="nav-link">Get Involved</li>
<li class="nav-link">Find Help</li>
<li class="nav-link">About Us</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="img1"> <img class="man" src="https://www.harvesthope.org/sites/default/files/images/4B6A5082%20copy.jpg"></div>
<section class="What-We-Do">
<div class="What-We-Do"><h2 class="section-head">The Need</h2>
<p class="section1-1">One in ten of our South Carolina neighbors, including almost 150,000 children, face hunger on a daily basis.<br><br>
Most of the people that visit Harvest Hope Food Bank are just like you; many never imagined they would be in this situation.
They might have<br> fallen on hard times due to a job loss or medical expenses. The access to food that we provide often means that our clients can afford
to pay <br>for their medication, not fall behind on rent, or cover transportation to their jobs.<br><br>
The average visitor to our emergency food pantry comes just three times before they have gotten back on their feet
and regained self-sufficiency.<br> Food pantries are a lifeline that helps people avoid losing their jobs, falling into poverty, or becoming homeless.
Often our former clients come<br> back to volunteer and pay it forward to other people. </p><br><br>
<h2 class="section-head">How can we help?</h2>
<p class="section1-4">People facing food insecurity may find relief in several ways. Schools feed children during the day, but at nights,
on weekends, and during<br> holidays, families often struggle and stretch to make sure everyone has enough. Similarly, government programs
like SNAP are a great help,<br> but often don’t provide enough to make it through the month. To truly address the hunger issue, organizations like
Harvest Hope are needed to <br>provide food to families who need a little help.<br><br>
Visit our Get Involved page to learn more about what you can do to help neighbors in the communities around you.
You can also advocate for<br> policies concerning food insecurity with your local officials. We have an impact statement flyer that you can use that
highlights our FY 2023 stats <br>as well as food insecurity rates. No matter the action you take, every action has potential to make a huge impact!
</div>
</section>
<section class="Get-Involved">
<h2 class="section-head">Get Involved</h2>
<h3>Volunteer</h3>
<p>Harvest Hope utilizes 10,000 volunteers a year in order to keep operations running at our facilities. Last year, volunteers put in more than 65,000
hours of service, allowing the organization to invest over $1 million back into food sourcing and distribution!</p><br>
<h3>How Do I become a volunteer?</h3><br>
<p>Please click "Get Started" to register</p>
<input type="button" value="GET STARTED"><br><br>
<h2>Help us stock our shelves!</h2><br>
<p>Thousands of residents, schools, churches, and businesses generously <br>donate food to the Harvest Hope each year through a variety of <br>
corporate, civic, and holiday food drives.<br><br>
<h4>What is a Food Drive?</h4><br>
<p>A food drive is a concentrated effort to collect non-perishable food in a certain time period. You and/or your organization will work
with Harvest Hope Food Bank in coordinating your organization’s food drive.</p><br>
<h4>Traditional vs. Virtual</h4><br>
<p> A traditional food drive is when you visit a grocery store and purchase non-perishable food items to deliver to Harvest Hope.
A virtual food drive is a fast, online way to make the same impact without leaving home or the office.</p>
</section>
<section class="Find-Help">
<h2 class="section-head">If you need food, we can help.</h2>
<p>You can get food from any of our partner agencies in 20 SC counties. <br><br>Harvest Hope has emergency food pantries in Greenville and
Columbia, but those may not be the closest to you, so check below to see what's nearby. *Hours may vary. Please call before visiting.*</p>
</section>
<section class="About-Us">
<h2 class="section-head">About-Us</h2>
<h3>Child Feeding Programs</h3>
<p>Harvest Hope feeds hungry children through our BackPack programs, which provide meals and high nutrition snacks for children after school.<br><br>
Many children only eat at school, and dread going home for the weekend when they know they will be hungry. Backpack programs operate<br> during
the school year and provide children who are at risk of hunger with healthy nutritious food to take home for the weekend, during school vacations,
and on holidays. <br><br>
Backpacks or other containers are stocked with nutritious, child-friendly and easy to prepare food. They are typically distributed
discreetly on <br>Fridays or the last day children attend school for the week. We strive to fill each child’s backpack with enough food for dinner on
Friday and<br> breakfast, lunch, dinner and snacks on Saturday and Sunday.<br><br>
SIf you are interested in donating or want additional information on how
you can help, please contact us at agency.relations@harvesthope.org.</p>
</section>
<quote class="quote">
<hr>
<quote id="quote">1/10<br> South Carolinians face hunger on a daily basis.</quote>
<hr>
</quote>
<div class="img2"><img src="https://www.harvesthope.org/sites/default/files/images/4B6A4950%20copy.jpg" class="cans"></div>
<form class="sub">
<h3 class=sub-title>Want to stay up to date?</h3><br>
<p>Sign-up for our monthly newsletter!</p><br>
<input type="email" placeholder="Johnsmith@example.com" ID="email"><input type="submit" value="Sign-Up" class="btn">
</form>
</body>
</html>
/* Reset styles */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
padding: 0;
}
html {
background-color: var(--HHgreen);
}
:root {
font-size: 16px;
--HHgreen: #2b5147;
--HHcream: #fcf9ec;
--HHleaf: #2b8257;
--HHred: #bc2b55;
--HHorange: #b9692d;
--HHyellow: #eebb1c;
--HHmint: #c2e1cd;
box-sizing: border-box;
/*border: 1px solid red;*/
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: var(--HHgreen);
line-height: 1.9em;
display: grid;
overflow-x: hidden;;
padding-right: 20px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(25px, auto);
gap: 10px;
color: var(--HHcream);
margin-right: 20px;
margin-left: 10px;
margin-bottom: 5%;
margin-top: 50px;
}
.banner {
height: 100%;
width: 100%;
grid-area: banner;
position: sticky;
align-self: start;
top: 0;
overflow: hidden;
grid-column: 1/5;
grid-row: 1;
}
header {
grid-area: header;
}
.What-We-Do {
grid-area: what;
grid-column: 1/5;
grid-row: 2/3;
margin-top: 40px;;
}
.Get-Involved {
grid-area: get;
grid-column: 1/3;
grid-row: 3;
}
.Find-Help {
grid-area: help;
grid-column: 1/3;
grid-row: 4/4;
}
.About-Us {
grid-area: about;
grid-column: 3/5;
grid-row: 3;
}
.img1 {
grid-area: img1;
display: flex;
grid-column: 3/5;
grid-row: 2;
margin-top: 50px;
}
.man {
max-width: 100%;
display: flex;
align-self: center;
justify-self: end;
}
.quote {
grid-column: 2/3;
grid-row: 3;
align-self: center;
font-size: 1.4em;
line-height: 1.1em;
justify-content: center;
width: 50%;
text-align: center;
justify-self: center;
}
#quote {
line-height: 1.8em;
font-weight: 800;
}
#quote::before {
content: '" ';
}
#quote::after {
content: ' "';
}
hr {
border: 2px solid var(--HHorange);
margin: 1.5rem 0;
}
.img2 {
grid-column: 3/5;
grid-row: 3/5;
display: flex;
width: 60%;
max-height: 75%;
align-self: end;
justify-self: center;
position: relative;
bottom: 50px;
}
.cans {
max-width: 100%;
}
.section-head {
font-size: 1.6em;
color: var(--HHred);
margin-bottom: 2vw;;
}
.sub {
grid-column: 1/5;
grid-row: 5;
font-size: 1.6em;
justify-content: center;
background-color: var(--HHyellow);
width: 100vw;
height: 4vw;
padding-top: 10px;
padding-bottom: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.sub h3 {
justify-self: center;
grid-column: 1/3;
}
.sub p {
justify-self: center;
grid-column: 1/3;
grid-row: 2;
}
.sub #email {
grid-column: 1/3;
grid-row: 3;
width:15%;
justify-self: center;
position: relative;
right: 50px;
}
.sub .btn {
grid-column: 1/3;
grid-row: 3;
justify-self: center;
width: 5%;
position: relative;
left: 120px;
}
/* Header styles*/
header {
height: 100%;
width: 100%;
background-color: var(--HHmint);
color: var(--HHgreen);
display: flex;
position: sticky;
top: 0;
align-items: center;
justify-content: space-between;
}
#header-img {
width: 15%
}
nav {
display: block;
width: 100%;
}
nav ul {
display: flex;
justify-content: space-evenly;
flex-direction: row;
height: 100%;
}
.navbox {
width: 45%;
display: inline;
align-content: center;
float: right;
}
#navbar {
height: 100%
}
.nav-list {
align-items: center;
list-style-type: none;
}
.nav-list .nav-link:hover {
cursor: pointer;
background-color: var(--HHgreen);
color: var(--HHmint);
}
.li {
float: right;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page
