#import url('https://fonts.googleapis.com/css?family=Squada+One|Titillium+Web:400,700');
/*
font-family: 'Titillium Web', sans-serif;
font-family: 'Squada One', cursive;
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
margin: 0 auto 0 auto;
width: 1000px;
min-height: 200px;
}
header {
padding: 0 10px 0 10px;
width: 1000px;
height: 65px;
float: left;
clear: both;
background-color: #090504;
}
#logo {
width: 500px;
height: 65px;
float: left;
}
h1 {
font-family: 'Squada One', cursive;
font-size: 57px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
}
nav {
width: 450px;
height: 65px;
float: right;
text-align: right;
}
nav p {
margin: 35px;
font-family: 'Titillium Web', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
word-spacing: 35px;
color: white;
}
#hero {
width: 1000px;
height: 473px;
float: left;
clear: both;
background-image: url(../assets/background-hero.jpg);
background-repeat: no-repeat;
}
#keymessage {
margin: 110px 0 0 10px;
/*top right bottom left*/
widows: 500px;
height: 200px;
float: left;
}
#keymessage h2 {
font-family: 'Titillium Web', sans-serif;
font-size: 36px;
font-weight: 200;
text-transform: uppercase;
color: white;
}
#keymessage h3 {
margin-top: -10px;
margin-bottom: 10px;
font-family: 'Titillium Web', sans-serif;
font-size: 18px;
font-weight: 200;
text-transform: capitalize;
color: white;
}
#keymessage p {
margin-top: 50px;
padding: 5px 7px 5px 7px;
font-family: 'Titillium Web', sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
color: white;
background-color: #a31c1a;
display: inline;
border-radius: 5px;
border: 1px solid white;
}
#featured {
padding: 10px 0 0 10px;
width: 1000px;
height: 500px;
float: left;
clear: both;
}
.featured-item {
margin: 40px 5px 0 0;
width: 319px;
height: 500px;
float: left;
}
.featured-item h2 {
font-family: 'Titillium Web', sans-serif;
font-size: 16px;
font-weight: 700px;
text-transform: uppercase;
}
.featured-item p {
margin-bottom: 10px;
font-family: 'Titillium Web', sans-serif;
font-size: 12px;
font-weight: 400;
}
.featured-button {
font-family: 'Titillium Web', sans-serif;
font-size: 10px;
font-weight: 200;
padding: 2px 5px 2px 5px;
color: white;
text-transform: uppercase;
background-color: #598527;
display: inline;
border-radius: 3px;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: right;
width: 25%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ozio Authentic Sushi</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<div id="logo">
<h1>Ozio Authentic Sushi</h1>
</div> <!-- Logo ends -->
<nav>
<p>Menu SPECIALS LOCATIONS CONTACT</p>
</nav>
</header>
<section id="hero">
<div id="keymessage">
<h2>Japanese Fusion Cuisine</h2>
<h3>Authentic &am; Traditionally Inspired Japanese Dishes</h3>
<p>Try our New FALL Specialties ></p>
</div>
</section> <!-- Hero ends -->
<section id="featured">
<div class="featured-item">
<p><img src="assets/featured-pumpkin_chipotle%20soup.jpg" width="319" height="158" alt="Seasonal Soups - Pumpkin Chipolete Soup"/> </p>
<h2>Seasonal Soups</h2>
<p>Ozio offers a collection of soups each fall that warm hands and make hearts happy. Each fall our sous-chef explore great locally grown flavours to bring the best combinations to awake your senses with our seasoning. (Pumpkin Chipotle Soup)</p>
<p class="featured-button">More</p>
</div> <!-- Seasonal Soups end -->
<div class="featured-item">
<p><img src="assets/featured-maki_sushi.jpg" width="319" height="158" alt="Sushi - Maki SUshi"/> </p>
<h2>Savoury Sushi</h2>
<p>We have a wide selection of traditional sushi creations as well as creations unique to Ozio Authentic Sushi. We serve maki sushi for people who are becoming sushi lovers to hand-rolled temaki sushi for the more refined palette. </p>
<p class="featured-button">More</p>
</div> <!-- Savoury Sushi end -->
<div class="featured-item">
<p><img src="assets/featured-udon.jpg" width="319" height="158" alt="Undeniable UDon"/> </p>
<h2>Undeniable UDon</h2>
<p>Enjoy a traditional taste of Japanese Udon noodles. We serve Fall Udon soups warm to heat up your taste buds during the cooler weather. Udon come in a number of pairing styles for both the meat lovers and veggitarians - the choice is all yours.</p>
<p class="featured-button">More</p>
</div> <!-- Undeniable UDon end -->
</section> <!-- Featured ends -->
<!--
<section id="gallery">
<div class="gallery-pics">
<p><img src="assets/salad_bowl.jpg"></p>
<p><img src="assets/gravy_bowl.jpg"></p>
<p><img src="assets/orange_on_white.jpg"></p>
</div>
</section>
-->
<div class="row">
<div class="column">
<img src="assets/gravy_bowl.jpg" alt="Gravy">
</div>
<div class="column">
<img src="assets/two_bowls.jpg" alt="Bowls">
</div>
<div class="column">
<img src="assets/salad_bowl.jpg" alt="Salad">
</div>
</div>
<div class="column">
<img src="assets/sushi.jpg" alt="Sushi">
</div>
<div class="column">
<img src="assets/orange_on_white.jpg" alt="OrangeOnWhite">
</div>
<div class="column">
<img src="assets/shrimp.jpg" alt="Shrimp">
</div>
</div> <!-- Wrapper ends -->
</body>
</html>
How my website looks like right now
Okay so I want to make the sushi picture to be on the left side of the two bottom pictures which are on the bottom.
How can I do that in html and css?
(I am trying to post my code for HTML and CSS but there is an error coming saying, your post contains appears to contain code that is properly not coded)
The easiest way to do this would be to use width and padding to each be a percentage of the screen. For example, if you have 6 images and want 2 rows and 3 columns, you would want the width to be 30% with left and right padding of 1.66%. Each image with left and right padding would be 33.33% of the screen.
img {
width: 30%;
max-height: 100px;
float: left;
padding: 1.66%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="https://img.grouponcdn.com/deal/hfefAup1zQWBE2K8sWURgS27xax/hf-846x508/v1/c700x420.jpg">
<img src="https://www.verywellhealth.com/thmb/6eCa_ReyK0zfrapJOXoVuD-boME=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-691112817-5a4eef095b6e240037fc6278.jpg">
<img src="https://img.grouponcdn.com/bynder/Ri5HEhJFF4o6PFz5WCG2rrSNN4A/Ri-2048x1229/v1/c700x420.jpg">
<img src="https://assets3.thrillist.com/v1/image/1559020/size/tmg-slideshow_l.jpg">
<img src="https://media.fromthegrapevine.com/assets/images/2015/10/vegetarian-sushi-rolls.jpg.480x0_q71_crop-scale.jpg">
<img src="https://images-gmi-pmc.edge-generalmills.com/d1584f73-4865-4b8b-b3e5-7f9ca741366f.jpg">
</body>
</html>
Related
I am having an issue with my project for my coding bootcamp.
Problem: My website seems to be scrollable even thought all my content fits on the page. I have tried to edit height, but it only throws the whole site out of wack.
Does anyone have a solution will prevent scrolling when it is not needed?
Thank you so much in advance.
Rob Connolly
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<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>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
There are two things you'll want to resolve to get it working correctly.
First set your box-sizing property, because you currently do not have one and the size of your boxes is being affected as a result. border-box is the preferred method. You can read the W3 Schools writeup on this if you'd like to better understand what border-box does: https://www.w3schools.com/css/css3_box-sizing.asp
The height of your #backgroundTest element is 100% height, and since it's a direct child of the <body> element it will be that height. It's 87px taller than you'd like because the #wrap element and the header inside it are 85px in height, plus the hr#clearfix that is 2px in height. If you adjust your #backgroundTest to account for this, it will be resolved. Change height to calc(100% - 87px)
On a side-note I recommend not adding a set height on your #footerBox element because the text is being cut off (height isn't enough, so just remove height property altogether and let it create its own height based on font-size, line-height, padding, etc.)
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<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>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
I am trying to align everything up, making the sections align and so forth. But I can't seem to get each section to line up.
Here is the link: https://codepen.io/pmurtagh4/pen/GXNzrJ
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-right: 30%;
margin-left: 10%;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 120%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800px;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600px;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<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>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section <footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Setting margin: auto, removing display: block and setting width to 100% instead of 120% makes it look quite okay. Is this what you were looking for?
https://codepen.io/anon/pen/PdmKWQ
The main issue you are having is because of .sign-up-form width styling. It is currently set to 120%, which is making the content weird. Remove it or change it to 100%.
Second issue I found is related to font-weight. The value of it is never in px. Review doc for more info.
Third issue remove the default margin on the page.
Updated code snippet -
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 50%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin: 5%;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 100%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<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>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
P.S. A lot of your tags don't have a closing tag. You should fix them as well.
Ive made a little for a school project. But I've got some questions.
As you can see, there are 3 offers with each having a price inside the box. Now I'm trying to make the prices have a green box with rounded corners around it (just like with the "meme_packs_offers" div). I'd also like to make the bottom of the "white_box" div go to the bottom of the page, just like the top.
Here's the html code:
/* MAIN */
html {
background-image: url('background.gif');
background-size: cover;
}
.header {
border-bottom: 5px solid #878787;
margin-left: -30px;
margin-right: -30px;
}
.white_box {
width: 79.5%;
background-color: white;
padding: 1.5%;
border: 5px solid #878787;
}
h1 {
font-size: 485%;
text-align: center;
font-family: 'Pacifico', cursive;
margin: auto;
margin-bottom: -30px;
margin-top: -20px;
}
h2 {
font-size: 210%;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
h3 {
font-size: 200%;
text-align: left;
margin-top: 50px;
margin-bottom: -7px;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 115%;
font-family: 'Play', sans-serif;
}
a:link, a:visited {
text-decoration: none;
font-size: 150%;
color: black;
font-family: 'Open Sans', sans-serif;
}
/* INDEX */
.library {
font-family: 'Play', sans-serif;
font-size: 50%;
}
.buy_icon {
width: 10%;
height: auto;
margin-bottom: -4px;
}
.meme_packs_offers {
display: flex;
justify-content: space-around;
}
.meme_packs, .monthly_meme_packs, .private_meme_packs {
background-color: #FFF8E7;
width: 320px;
height: 470px;
margin-top: 25px;
border: 3px solid black;
border-radius: 12px;
padding: auto;
}
.packs {
margin-top: 25px;
text-align: center;
margin-bottom: 0%;
padding-right: 10px;
padding-left: 10px;
}
.price1, .price2, .price3 {
text-align: center;
font-size: 140%;
color: black;
font-family: 'Open Sans';
font-weight: 700;
background-color: green;
border: 3px solid #336600;
border-radius: 12px;
}
<!DOCTYPE html>
<html>
<div class="white_box">
<head>
<title>MEME-STORE</title>
<link rel="stylesheet" type="text/css" href="data/style.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<div class="header">
<h1>WELCOME TO THE MEME STORE</h1>
<h2>THE store to buy some carefully picked memes for the ultimate dankness!</h2>
</div>
</head>
<body class="body">
<h3>ABOUT:</h3>
<p>This online store is the only professional site that will sell you carefully picked memes of high quality you'll never forget. Three different options: Meme packs, monthly meme packs and private meme packs. Click <a target="_blank" class="library" href="data/library.html">HERE </a>to see a small fraction our library so you'll have an idea of the quality of our memes!</p><br>
<h3>PACKS:</h3>
<div class="meme_packs_offers">
<div class="meme_packs">
<h3 class="packs">MEME PACKS</h3>
<p class="packs">A one-time purchase in which you get 30 quality dank memes.</p><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="price1"><a class="price1" href="">€9,99 <img class="buy_icon" src="data/buy.png"></a></p>
</div>
<div class="monthly_meme_packs">
<h3 class="packs">MONTHLY MEME PACKS</h3>
<p class="packs">The same as meme pack, but you get one pack every month.</p><br><br><br><br><br><br><br><br><br><br>
<p class="price2"><a class="price2" href="">€8,99/month <img class="buy_icon" src="data/buy.png"></a></p>
</div>
<div class="private_meme_packs">
<h3 class="packs">PRIVATE MEME PACKS</h3>
<p class="packs">Within 2 days, one of our employees will contact you to help you get memes which will suit your personal taste.</p><br><br><br><br><br><br><br><br><br>
<p class="price3"><a class="price3" href="">€19,99 <img class="buy_icon" src="data/buy.png"></a></p>
</div>
</div>
</body>
</div>
</html>
I've made some changes to your code so the buttons should work correctly now.
HTML:
<div class="meme_packs">
<h3 class="packs">MEME PACKS</h3>
<p class="packs">A one-time purchase in which you get 30 quality dank memes.</p><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="price"><a class="price1" href="">€9,99 <img class="buy_icon" src="data/buy.png"></a></p>
</div>
<div class="monthly_meme_packs">
<h3 class="packs">MONTHLY MEME PACKS</h3>
<p class="packs">The same as meme pack, but you get one pack every month.</p><br><br><br><br><br><br><br><br><br><br>
<p class="price"><a class="price2" href="">€8,99/month <img class="buy_icon" src="data/buy.png"></a></p>
</div>
<div class="private_meme_packs">
<h3 class="packs">PRIVATE MEME PACKS</h3>
<p class="packs">Within 2 days, one of our employees will contact you to help you get memes which will suit your personal taste.</p><br><br><br><br><br><br><br><br><br>
<p class="price"><a class="price3" href="">€19,99 <img class="buy_icon" src="data/buy.png"></a></p>
</div>
CSS:
.price{
text-align: center;
font-size: 140%;
color: black;
font-family: 'Open Sans';
font-weight: 700;
}
a.price1, a.price2, a.price3 {
background-color: green;
border: 3px solid #336600;
border-radius: 12px;
}
I've changed the p tags to have class "price" and split the css into two targeting only the links.
I am new to coding and am stuck trying to fit each div to the screen (see the triangle buttons that move to the next section - ideally I want those to move to a "new page" or "new screen" if that makes sense). Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Budget</title>
<style>
h1 {font-family: "Footlight MT Light";
font-size: 52px; color: white; font-weight: bold; }
h2 {font-family: "Footlight MT Light";
font-size: 42px; color: white; font-weight: bold; }
h3 {font-family: "Footlight MT Light";
font-size: 32px; color: white; font-weight: bold; }
h4 {font-family: "Footlight MT Light";
font-size: 22px; color: white; font-weight: bold; }
h5 {font-family: "Footlight MT Light";
font-size: 16px; color: white; font-weight: bold; }
h6 {font-family: "Footlight MT Light";
font-size: 12px; color: white; font-weight: bold; }
p {font-family: "Footlight MT Light";
font-size: 20px; color: white; font-weight: none; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}
li {
float: right;
}
li a {
display: block;
color: #FC4A1A;
font-family: "Footlight MT Light";
font-size: 22px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #062f4f;
}
p {
margin: 0;
}
h1{
margin: 0;
}
</style>
</head>
<body>
<div style=background-color:#f7b733;">
<ul><strong>
<li>Contact</li>
<li>Ideas</li>
<li>Our Work</li>
<li>About Us</li></strong>
</ul>
<h1><center>Let's Make Your Budget Experience Extraordinary</center></h1><br>
<p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p>
<h1 style="text-align: center;"><strong><font color="#4abdac">🔻</font></strong></h1><br>
</div>
<div style="background-color:#4abdac;">
<h1 id="section2"><h1 style="text-align: left;">Making budget offices better</h1>
<p>Here's a caption on making budget offices better.</p><br>
<h1 style="text-align: center;"><strong><font color="#062f4f">🔻</strong></h1><br>
</div>
<div style="background-color:#062f4f;">
<h1 id="section3"><h1 style="text-align:right;">Learn All About Budget</h1>
<p style="text-align:right;">Here's a caption on learning about budget processes.<h1 style="text-align: center;"><strong><font color="#9c9b9b">🔻</strong></h1> <br>
</div>
<div style="background-color:#9c9b9b;">
<h1 id="section4"><h1 style="text-align:left;">We Make Technology Accessible</h1>
<p>Here's a caption about how we can use technology to improve your processes.</p><br>
<h1 style="text-align: center;"><strong><font color="#FC4A1A">🔻</strong></h1><br>
</div>
<div style="background-color:#FC4A1A;">
<h1 id="section5"><h1 style="text-align:right;">Grow Your Career</h1>
<p style="text-align:right;">Here's a caption on career development.</p><br>
</div>
<div>
<div id="column1" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Get in touch
</span></h3>
<p style="padding: 2px; color: #062f4f;">B
and SOCIAL MEDIA ICONS</p>
</div>
<div id="column2" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Sign Up </span></h3>
<p style="padding: 2px; color: #062f4f;">sign up here.</p>
</div>
<div id="column3" style="float: left; margin: 0; width: 33%;">
<h3><span style="color: #062f4f;">Send Us Your Ideas
</span></h3>
<p style="padding: 2px; color: #062f4f;">Link to detailed use case form.</p>
</body>
</html>
You could do something like this: https://jsfiddle.net/uorwdwzc/1/
a{
color: #fff;
font-size: 25px;
}
#slide1{
width: 100%;
height: 100vh;
background-color:blue;
}
#slide2{
width: 100%;
height: 100vh;
background-color:red;
}
#slide3{
width: 100%;
height: 100vh;
background-color:green;
}
<div id="slide1">
<h1>
Page 1
</h1>
Next Page
</div>
<div id="slide2">
<h1>
Page 1
</h1>
Next Page
</div>
<div id="slide3">
<h1>
Page 1
</h1>
Back to Top
</div>
I just made this quickly but you could add triangular buttons and additional styling to suit your needs.
If you want to make it slide to instead of jump you will need to add JS.
The CSS units vw and vh are a certain percentage of the screen size ('vertical width' and 'vertical height').
100vh is 100% of the screen height. However: if you have padding in your #slide1-2-3 divs, it may overflow the size. Width and height add to the padding, so 2vw padding will make the entire width be 100vw + 2vw, which overflows. Keep that in mind when you set your amounts!
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.