I am building a landing page and am wondering why I cant get my navbar to work properly. I formatted it right, but one issue I am running into is when I scroll down the text goes through the nav bar/header when it should be going behind it or not visible when you scroll down. Anybody know a way that I can fix this issue? Here's the code that I have:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanderlay Industries</title>
</head>
<body>
<header id="header">
<img id="header-img" src=http://nextarts.info/wp-content/uploads/art-vandelay-06-quotplaying-with-powerquot-art-vandelay.jpg alt="Vanderlay President">
<div>
<h1>Vandelay Industries, Inc.</h1>
<p id="subtitle">Importer/Exporter of Fine Latex Goods</p>
</div>
<div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#demonstration">Demonstration</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</div>
</header>
<div id="features">
<h2 class="title">Features</h2>
<div id="fine">
<h3 class="title">Fine</h3>
<img id="fine-image" src="https://f4.bcbits.com/img/0007459691_10.jpg" alt="Fancy Fine Lettering">
<p class="description">What we sell is always of the finest quality. Founded on February 12, 1992; no higher standard of fine has been met. Whether it be the local fire department or public water supply, we've set the bar for the finest. With Vandelay, you'll always be
enjoying the finer things</p>
</div>
<div id="Latex">
<h3 class="title">Latex</h3>
<div>
<img id="latex-image" src="http://mjtrends.b-cdn.net/images/product/963/pearlsheen-metallic-blue-latex-sheeting_370x280.jpg" alt="Latex Image">
</div>
<p class= "description">Our latex is so strong you couldn't even fabricate it. Or make a ficticious firm about it. That's how authentic our latex is. Try it today.</p>
</div>
<div id="Goods">
<h3 class="title">Goods</h3>
<img id="goods-image" src="http://wefirstbranding.com/wp-content/uploads/2010/09/virtual-goods1.jpg" alt="Pile of Goods">
<p>If you got the goods, you got the goods. And we got em. Lots of em. Whether it be potato chips or diapers, the goods at our firm are plentiful.</p>
</div>
</div>
<br><br><br>
<div id="demonstration">
<h2>Latex Demonstration</h2>
<iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/p8qnYz5jHag"></iframe>
<p>Take the pleasure of viewing a sublime presentation of latex</p>
</div>
<div id="pricing">
<div class="productLabel">
<h4>Latex 1</h4>
</div>
<div class="price">
<h3>$1,000</h3>
Our base model. Very popular option.
</div>
<div class="productLabel">
<h4>Latex 2</h4>
</div>
<div class="price">
<h3>$5,000</h3>
A more luxury material from the far land of Bosco.
</div>
<div class="productLabel">
<h4>Latex 3</h4>
</div>
<div class="price">
<h3>$10,000</h3>
The finest we offer, genetically superior good through marine biology.
</div>
</div>
<section>
<p>For more information, please enter your email below. We will be happy to send you a free latex demonstration!</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for=email>Enter your email address:</label>
<input id="email" type=email name="email" required>
<input id="submit" type="submit" value="Submit">
</form>
</section>
<footer>
© Vandelay Industries Inc.
</footer>
CSS:
body {
background: rgba(0, 0, 128, 90%);
color: #f7ed36;
}
#nav-bar {
color: #f7ed36;
display: flex;
position: relative;
flex-direction: row;
}
ul {
width: 35vw;
display: flex;
flex-direction: row;
color: #f7ed36;
position: relative;
left: 250px;
top: 25px;
}
header {
position: fixed;
display: flex;
top: 0px;
width: 100%;
height: 90px;
background: rgba(0, 0, 128, 90%);
}
#subtitle {
font-style: italic;
position: relative;
bottom: 17px;
left: 5px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
display: block;
color: white;
text-align: right;
padding: 10px 20px 10px;
text-decoration: none;
}
.title {
text-align: center;
}
#header-img {
float: left;
width: 80px;
height: 80px;
}
.description {
align: baseline;
text-align: justify;
display: inline;
margin-left: ;
}
#features{
position: relative;
top: 100px;
}
#fine-image {
width: 10%;
height: 10%;
margin: 10px;
}
#latex-image {
width: 10%;
height: 10%;
position: relative;
margin: 10px;
}
#goods-image {
width: 10%;
height: 10%;
margin: 10px;
}
Any thoughts you have is appreciated. I'm sure its pretty common thing to fix since a lot of pages online have it. Thanks!
header {
position: fixed;
display: flex;
top: 0px;
width: 100%;
height: 90px;
background: rgba(0, 0, 128, 90%);
z-index: 2
}
Looks like header would be a sticky header.
If you need header layer to be in front of the page, must use z-index to order the layer.
Give this a Try!
header {
position: fixed;
display: flex;
top: 0px;
width: 100%;
height: 90px;
background: rgba(0, 0, 128, 90%);
background-color: white;
z-index: 999
}
All in that Z-index
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
I set the buttons to bottom:0; why are they up near the forms? Also I have a second div behind each of the last four boxes it doesn't change background-color?
Also what to do about the video that doesn't show? I have to put in more writing as the post is mostly code, but you could answer that too.
* {
box-sizing: border-box;
}
body {
background-color: green;
}
img {
width: 150px;
height: auto;
}
#header {
position: fixed;
width: 100%;
}
.nav-bar {
width: 100%;
float: right;
background-color: #555;
text-align: justify;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
#nav-bar a.active {
background-color: #740053;
}
.nav-link {
text-decoration: none;
padding: 3px;
display: inline-block;
width: 25%;
color: coral;
}
.ul,
li {
display: inline-block;
}
ul {
border: solid 1px black;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0;
height: 20px;
}
li {
display: block;
flex: 1 1 auto;
list-style-type: none;
text-align: center;
}
.nav-link:hover {
color: blue;
}
#video-div {
position: relative;
height: 40%;
width: 100%;
top: 100px;
margin-left: 250px;
}
#form {
display: block;
text-align: center;
margin-left: 150px;
margin-right: 150px;
margin-top: 150px;
border-radius: 3px;
background-color: yellow;
border-shadow: 4px;
}
.spacer {
position: relative;
width: 100%;
height: 100px;
margin-bottom: 50px;
}
#email {
margin-top: 50px;
text-align: center
}
#submit {
position: relative;
display: inline;
width: 6em;
top: 30px;
right: 130px;
}
img {
width: 25%;
height: 2vh;
float: left;
}
.box1,
.box2,
.box3,
.box4 {
float: left;
border: 3px solid black;
width: 23%;
height: 300px;
background-color: white;
margin-right: 20px;
overflow: hidden;
}
.innerbox {
width: 100%;
height: auto;
border-bottom: 3px solid black;
display: inline-block;
margin-right: 22%;
text-align: center;
background-color: grey;
}
.btn {
position: absolute;
margin: auto;
bottom: 0;
}
#media (max-width: 100%px) and (min-width: 99%) {}
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome /4.7.0/css/font-awesome.min.css">
<title>Product Landing</title>
</head>
<body>
<header id="header"><img id="header-img" src="https://logos-world.net/huawei-logo/" />
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#forms">
<i class="fa fa-fw fa-home">Form</i></a>
</li>|
<li>
<a class="nav-link" href="#video">
<i class="fa fa-fw fa-home">Resolution</i></a>
</li>|
<li>
<a class="nav-link" href="#email">
<i class="fa fa-fw fa-home">Status</i></a>
</li>|
<li><a class="nav-link" href="#products"><i class="fa fa-fw fa- home"> Pricing</i></a></li>
</ul>
</nav>
</header>
<main>
<div id="video-div">
<video width="300" height="250" controls id="video" src="https://www.youtube.com/watch?v=TfdRmdUc12w&list=RDTfdRmdUc12w&index=1">
</video>
</div>
<div id="forms">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label id="email-label">
<h3>Good Resolution Packages for grabs!</h3> Email:<input id="email" type="email" placeholder="Please input your email:" name="email" required/> <input id="submit" value="Submit" type="submit">
</label>
</form>
</div>
<div class="spacer">
</div>
<section id="products">
<div class="box1">
<div class="inner-box">
<h2>Read</h2>
</div>
</div>
<p>
This is the text that hold the information in the "Read" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box2">
<div class="inner-box">
<h2>Learn</h2>
</div>
<p>
This is the text that hold the information in the "Learn" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box3">
<div class="inner-box">
<h2>Write</h2>
</div>
<p>
This is the text that hold the information in the "Write" category.
</p>
<button class="btn">Select</button>
</div>
<div class="box4">
<div class="inner-box">
<h2>Play</h2>
</div>
<p>
This is the text that hold the information in the "Play" category.
</p>
<button class="btn">Select</button>
</div>
</section>
<footer class="footer"></footer>
</main>
</body>
The buttons are positioned absolute and because you've not created any stacking contexts they're postioned against the viewport. When you scroll they move with the scroll as that's one of the properties of that positioning rule.
The background color does not show in your second div as you've declared it as 'innerbox' in your css file but as 'inner-box' in your html.
As far as your video goes, use the youtube-verified way of embedding from their site e.g. <iframe width="560" height="315" src="https://www.youtube.com/embed/TfdRmdUc12w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> and you'll see it works.
If you want a result like this
enter image description here
Wrong class in styles - in markup class (inner-box), and in styles ( .innerbox )
And then there's this. There are still errors in the styles
1) You don't apply the style to any class, or you haven't copied it
enter image description here
2) That style does not exist ( #form{ border-shadow: 4px}), есть ( box-shadow )**
3) #media (max-width: 100%px) and (min-width: 99%)
Make up your mind here, either 100% or 100px
I have been developing a personal portfolio website on my Mac, but unfortunately it is not rendering correctly on any browser run on Windows OS. It works as intentioned on mobile and MacOS. The website is aaronalberg.com. On Windows, the cards under "Projects" and the footer both overlap on the sidebar. Additionally, when the window gets to about 800px wide or smaller when the sidebar is changed for the header, the #leftheader and #rightheader sections stack (and as a result the rightheader is not shown) despite them having a total width of 50vw each (which should add up to 100 as it does on Mac).
I have tried using a CSS wipe template which did not work and any specific pixel or viewport changes I make to accommodate the Windows differences mess up the layout on other operating systems. Some hopefully relevant html/css is below
Any help is much appreciated. Thank you!
:root {
--main-theme: #5AF;
--sidenav-length: 250px;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: white;
width: 100%;
position: relative;
font-family: sans-serif;
text-align: center;
margin: 0;
padding-bottom: 10vh;
overflow-x: hidden;
}
header {
padding-top: 5px;
display: none;
background-color: var(--main-theme);
color: white;
height: 150px;
}
#headertext {
text-align: left;
padding-right: 2%;
padding-left: 2%;
font-size: 3em;
}
#leftheader {
float: left;
margin-left: 1vw;
margin-top: 2vh;
width: 49vw;
}
#rightheader {
font-size: 1.2em;
float: left;
text-align: center;
width: 50vw;
margin-top: 5vh;
}
#rightheader p {
display: inline;
}
#rightheader div {
padding-bottom: 5%;
}
header i {
color: white;
display: inline;
font-size: 1.5em;
}
/* side nav */
.sidenav {
height: 100%;
width: var(--sidenav-length);
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: var(--main-theme);
overflow-x: hidden;
padding-top: 20px;
color: white;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav i {
display: inherit;
}
#wrapper {
width: 100%;
margin: 0;
text-align: center;
padding-bottom: 100px;
}
#outerwrapper {
margin:0;
width: calc(100vw - var(--sidenav-length));
position: absolute;
z-index: 2;
right:0;
}
/* project chunks */
.projectcard {
background-color: #e8e8e8;
padding: 1%;
padding-top: 2%;
height: 220px;
}
.projectcard:nth-child(2n) {
background-color: #d8d8d8;
}
.projectpic {
clear: both;
width: 180px;
margin-right: 2%;
float: left;
margin-left: 5px;
}
.projecttitle {
text-align: left;
}
#projectlabel {
margin-left: 50px;
}
.projecttext {
text-align: left;
}
.projecttext a {
color: blue;
text-decoration: none;
}
#projects {
padding-bottom: 50px;
}
<body>
<header>
<div id="leftheader">
<h1 id="headertext">Aaron Alberg</h1>
<p>Engineer. Leader. Innovator.</p>
</div>
<div id="rightheader">
<div>
</div>
<div style="line-height: 1.4;">
<span class="icon">
<i style="display: inline;" class="fas fa-map-marker-alt"></i>
</span>
<p> Chicago, IL & Champaign, IL</p>
</div>
</div>
</header>
<div class="sidenav">
<img src="files/profilepic.jpg" alt="profile picture" class="profile">
<h1>Aaron Alberg</h1>
<p>Engineer. Leader. Innovator.</p>
<i class="fas fa-map-marker-alt"></i>
<p>Chicago, IL</p>
<p>Champaign, IL</p>
</div>
<div id="outerwrapper">
<div id="wrapper" class="center">
<div id="bio">
<h2>Hello!</h2>
<p class="profiletext">My name is Aaron Alberg. I'm currently studying <b class="blue">computer science</b> at the University of Illinois at Urbana-Champaign. I'm passionate about applying <b class="blue">human-centered design principles</b> to projects ranging from software development to community outreach. I believe the key to engineering the best solutions is a <b class="blue">deep understanding of user needs</b>. Take a look at my resume.</p>
</div>
<h2 id="projectlabel">Projects</h2>
<div id="projects">
<div class="projectcard">
<img src="files/UPDmural.png" alt="UPD mural" class="projectpic">
<h3 class="projecttitle">Urbana Park District <span class="inprogress">(in progress)</span></h3>
<p class="projecttext">As a part of UIUC's chapter of Design for America, my team is collaborating with the Urbana Park District to fine tune the implementation of UPD's new Strategic Plan. Specifically, we are working to find ways to promote a culture of diversity and inclusion that the staff are accountable for creating and upholding. </p>
Read More
</div>
<div class="projectcard">
<img src="files/websitepic.png" alt="picture of website" class="projectpic">
<h3 class="projecttitle">This Website <span class="inprogress">(in progress)</span></h3>
<p class="projecttext">Since doing a project is way more fun than following an online tutorial, I've used the development of this website to teach myself HTML/CSS. I also work to ensure that the site is scalable for future editing, accessible, and functions on all screen sizes. When I come across a feauture I like, I learn how to use it by implementing it here.</p>
Read More
</div>
</div>
<div id="inprogress">
<p class="center">**This website is very much a work in progress and is currently experiencing rendering issues specifically on Windows OS. Stay tuned!**</p>
</div>
</div>
<footer>
<p class="center foottext">
<i class="fas fa-envelope"></i> <span class="nearicon">aaronjalberg#gmail.com</span> <span class="pipe">|</span>
</i> <span class="nearicon">linkedin.com/in/aaron-alberg</span> <span class="pipe">|</span>
<i class="fab fa-github"></i> <span class="nearicon">github.com/aaronalberg</span>
</p>
<p class="center">© Aaron Alberg 2019</p>
</footer>
</div>
</body>
To fix the overlap issues on small viewport. You should change your CSS of #outerwrapper a bit like this:
From:
#outerwrapper {
width: calc(100vw - var(--sidenav-length))
}
to:
#outerwrapper {
width: calc(100% - var(--sidenav-length))
}
The other issues you described is not clear. Please write down your expected result. Because for me when resizing the viewport, stacking is a normal behavior.
Currently putting CSS touches on a landing page. How do I get my p elements to align underneath my h2 elements? Like how I'd like it to look like:
Here’s what mine looks like:
And here’s the link to the CodePen.
Thanks in advance.
* {
font-family: Arial;
}
#media (max-width: 768px) {
* {
font-family: Tahoma;}
}
#header {
position: fixed;
width: 100%;
display: flex;
top: 0;
background-color: white;
opacity: 0.8;
}
#header img {
height: 75px;
width: 75px;
margin-top: -10px;
}
#header h1 {
font-size: 23px;
margin-left: -20px;
}
#header nav {
margin-left: 730px;
margin-top: 15px;
}
#header a {
color: black;
text-decoration: none;
}
.nav-link {
margin-right: 10px;
}
#glove {
margin-top: 100px;
margin-left: 50px;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 100px;
width; 100px;
}
.description {
padding: 5px;
margin-top: -10px;
margin-bottom: 15px;
}
#features {
margin-top: 50px;
}
#features h2 {
text-align: center;
}
#features iframe{
display: block;
margin: 0 auto;
}
#pricing {
margin-top: 100px;
text-align: center;
border: 1px dashed black;
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
#pricing h3 {
font-weight: normal;
}
#pricing p {
font-style: italic;
}
#close {
margin-top: 50px;
text-align: center;
font-size: 20px;
}
input[type=submit] {
background-color: #DBBC58;
border-radius: 6px;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id=header>
<img src="http://www.free-icons-download.net/images/lightning-bolt-logo-icon-76715.png" alt="Lightning" id="header-img">
<h1>Lightning-Fast Muay Thai Gloves</h1>
<nav id="nav-bar">
Why this glove?
Features
Pricing
</nav>
</div>
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
</div>
<div id="features">
<h2>In-Depth Look</h2>
<iframe id="video" width="600" height="400" src="https://www.youtube.com/embed/xo2xuNYKO0I" frameborder="0" allowfullscreen></iframe>
</div>
<div id="pricing">
<h2>Pricing</h2>
<h3>$49.99</h3>
<p>And if it doesn't last you 36 months...we'll give you a full refund.</p>
</div>
<div id="close">
<form id="form" action="https://www.freecodecamp.com/email-submit">
Take your bouts to the next level: <br>
<input id="email" type="email" placeholder="Email" name="email"><br>
<input id="submit" type="submit">
</form>
</div>
You needed an extra div around your h2s and ps to format them correctly inside of a flex parent. I simplified your CSS and HTML to the minimal correct example, also choosing to use classes instead of IDs for CSS selectors to remove duplicate styles:
* {
font-family: Arial;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 150px;
width: 150px;
}
.description {
padding: 10px;
}
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
Trying to rebuild a part of the Pixar site, having trouble with the logo. Is there a way to resize the image in CSS? Or do I have to resize the image in Photoshop and add it that way?
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Pixar Mock Up</title>
</head>
<body>
<header>
<div class="logo logo-size"></div>
<nav class="nav">
<ul>
<li>FEATURE FILMS</li>
<li>SHORT FILMS</li>
<li>CAREERS</li>
<li>EXTRAS</li>
<li>TECHNOLOGY</li>
<li>ABOUT</li>
</nav>
</header>
<main>
<div class="hero hero-size">
<div class="hero-text">
<h2>FEATURE FILMS</h2>
</div>
</div>
<div class="films">
<div class="posters">
<img src="images/incredibles2.jpg"alt="The Incredibles">
<p class="poster1">The Incredibles</p>
</div>
<div class="posters">
<img src="images/coco.jpg" alt="Coco">
<p class="poster2">Coco</p>
</div>
<div class="posters">
<img src="images/cars.jpg" alt="Cars3">
<p class="poster3">Cars</p>
</div>
</div>
<div class="posters">
<img src="images/dory.jpg"alt="Finding Dory">
<p class="poster1">Finding Dory</p>
</div>
<div class="posters">
<img src="images/dino.jpg" alt="The Good Dinosaur">
<p class="poster2">The Good Dinosaur</p>
</div>
<div class="posters">
<img src="images/inside.jpg" alt="Inside Out">
<p class="poster3">Inside Out</p>
</div>
</main>
</body>
</html>
CSS CODE:
body {
max-width: 1700px;
min-width: 700px;
background-color: white;
padding: 0px;
margin: 0px;
}
.logo {
margin: 25px 80px;
background: url('../logo/logo.jpg') left no-repeat;
}
.logo-size{
width: 170px;
height: 51px;
}
.hero {
background: url('../hero/hero.jpg');
background-position: center;
background-repeat: no-repeat;
}
.hero-size {
height: 550px;
width: 100%;
}
.hero-text {
font-size: 42px;
color: white;
float: left;
position: relative;
top: 175px;
left: 500px;
letter-spacing: 4px;
}
.nav li {
display: inline;
}
.nav ul {
margin: 0px 100px;
}
.nav a {
color: black;
position: fixed;
position: relative;
bottom: 61px;
float: right;
padding-right: 30px;
text-decoration: none;
}
.posters {
text-align: center;
padding: 0px;
float: right;
display: block;
width: 30%;
position: relative;
right: 80px;
margin: 80px 0px;
}
.posters img{
height: 275px;
width: 200px;
}
The Size/Width I want
The Full Image
To sum up, I am trying to get the image found in the second link to fit in the width defined in the first image (width set to 170px). I have tried setting it to 'width: auto', but that did not work.
It would be better if you use img instead of a div with a background for the logo, you'll have more control,
<img src="../logo/logo.jpg" />
But if you have to use a div, add background-size:cover to .logo
https://www.w3schools.com/cssref/css3_pr_background-size.asp