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.
Related
So I'm currently trying to make a dropdown menu for my horizontal navigation. I want all three buttons to look the same but when hovered over the 'Products' in nav I would like it to display the three product categories "Contour" "Eyebrows" and "Lips" as a dropdown to then click on and take me to the their individual pages.
I've tried a range of things but it never works or keeps to the formatting of the navigation I want now so it doesn't look consistent.
Can anyone help me create one? Below I will attach the HTML and CSS for the Home page.
/*Bella Beauty Logo*/
h1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
}
/*Navigation*/
#navBar {
display: inline;
padding: 1000px 170px;
font-family: Cinzel;
font-color: #000000;
font-weight: bold;
font-size: 17pt;
}
/*Showcase/Hero Image*/
#HeroImage {
width: 100%;
height: 650px;
}
/*Showcase/Hero Text*/
#BannerText {
text-align: center;
position: absolute;
top: 95%;
left: 30%;
transform: translate(-50%, -50%);
}
/*Showcase/Hero Shop Button*/
.ShopNowbtn {
position: absolute;
top: 115%;
left: 30%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #D8F9FF;
color: #d604ac;
font-size: 18pt;
font-family: Cinzel;
font-weight: bold;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
/*Showcase/Hero Title Text*/
#Welcome1 {
font-family: Cinzel;
font-size: 25pt;
color: #D8F9FF;
font-weight: bold;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Showcase/Hero Desc Title*/
#Welcome2 {
font-family: Arial;
font-size: 19pt;
color: #D8F9FF;
}
#header {
background-color: #D8F9FF;
}
#content {
background-color: white;
}
/*Business Journey Part 1- Title*/
#BeginTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 1- Description*/
#BeginDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 1- Description*/
#BeginDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 1- Picture*/
#BeginPic {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/*Business Journey Part 2- Title*/
#CreationTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 2- Description*/
#CreationDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 2- Description*/
#CreationDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 2- Picture*/
#CreationPic {
display: block;
width: 40%;
margin-left: auto;
margin-right: auto;
height: 450px;
}
/*Business Journey Part 3- Title*/
#LocationTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 3- Description*/
#LocationDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 3- Description*/
#LocationDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 3- Picture*/
#LocationPic1 {
display: block;
float: left;
padding: 5px;
width: 47%;
height: 450px;
background-color: white;
padding-bottom: 30px;
}
/*Business Journey Part 3- Picture*/
#LocationPic2 {
display: block;
float: right;
padding: 5px;
width: 47%;
height: 450px;
background-color: white;
padding-bottom: 30px;
}
/*Business Journey Part 4- Title*/
#OpenTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 4- Description*/
#OpenDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 4- Description*/
#OpenDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 4- Picture*/
#ShopInterior {
display: block;
width: 40%;
margin-left: auto;
margin-right: auto;
height: 400px;
padding-bottom: 20px;
}
/*Map & Opening Hours Border*/
#Border {
height: 600px;
width: 600px;
margin-left: auto;
margin-right: auto;
outline-style: dotted;
outline-color: #d604ac;
outline-width: 3px;
}
/*Interactive Map*/
#Map {
display: block;
width: 65%;
padding-top: 50px;
margin-left: auto;
}
/*Bella Beauty Opening Hours*/
#OpeningHours {
display: block;
font-family: Cinzel;
font-weight: bold;
font-size: 18pt;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/*Social Dimensions*/
.Socials {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/*Facebook Icon*/
#Facebook {
width: 100px;
height: auto;
}
/*Instagram Icon*/
#Instagram {
width: 100px;
height: auto;
}
/*Twitter Icon*/
#Twitter {
width: 100px;
height: auto;
}
#footer {
text-align: center;
background-color: #F1FDFF;
color: black;
font-family: Cinzel;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<!--Linking Google Font- Cinzel-->
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<div id="header">
<!--Bella Beauty Branding Logo-->
<h1><img src="Bella Beauty Logo.png" alt="Bella Beauty Logo"></h1>
<div id="nav">
<!--Navigation Bar-->
<ul>
<li id="navBar">Home</li>
<li id="navBar">Products</li>
<li id="navBar">Staff</li>
</ul>
</div>
</div>
<!--Header-->
<div id="content">
<div id="Banner">
<!--Showcase/Hero Image-->
<img id="HeroImage" src="Banner.jpg" alt="Bella Beauty Banner">
<!--Text and Button over showcase image-->
<div id="BannerText">
<p id="Welcome1">Welcome</p>
<p id="Welcome2">to Bella Beauty, a thriving local salon in the heart of Belfast</p>
</div>
<button class="ShopNowbtn">Shop Now > </button>
</div>
<!--Journey To Business Part 1-->
<div class="Beginnings">
<p id="BeginTitle">Where It All Began</p>
<p id="BeginDesc1">At the point when Claire was only 18 she began doing her friends makeup for all the events you could imagine, from intense Prom looks to sentimental date looks, she truly could do everything!</p>
<p id="BeginDesc2">The more she did, the more people she had asking her to their makeup...they where even willing to pay!</p>
<img id="BeginPic" src="BeginPic.jpg" alt="Claire beginning as a makeup artist">
</div>
<!--Journey To Business Part 2-->
<div class="Creation">
<p id="CreationTitle">Bella Beauty Is Created</p>
<p id="CreationDesc1">Claire enjoyed doing young womens makeup so much and empowering women around her she chose to transform it into a business!</p>
<p id="CreationDesc2">Claire began by making the name 'Bella Beauty' after the word 'Bella' signifying 'Beautiful' in Italian. She felt it said a lot about the business she wanted to create by making young women beautiful by enhancing their finest facial features not covering them up!</p>
<img id="CreationPic" src="CreationPic.jpg" alt="Claire creating Bella Beauty">
</div>
<!--Journey To Business Part 3-->
<div class="NewLocation">
<p id="LocationTitle">Bella Beauty Comes To Belfast</p>
<p id="LocationDesc1">The time had come to get a premises and Claire fell in love with Belfast. After a long hunt and heaps of viewings she at last chose a highstreet space outside the esteemed 'Victoria Square'.</p>
<p id="LocationDesc2">A space on the highstreet gave Claire the ideal opening to many customers strolling by while building was in progress and the word began to get out about a brand new beauty shop coming to town!</p>
<img id="LocationPic1" src="LocationPic1.jpg" alt="Victoria Square">
<img id="LocationPic2" src="LocationPic2.jpg" alt="Bella Beauty Under Construction">
</div>
<!--Journey To Business Part 4-->
<div class="BusinessOpen">
<p id="OpenTitle">Bella Beauty Opens For Business</p>
<p id="OpenDesc1">After a considerable delay with development and lots of time spent ensuring everything looked perfectly like Claire's vision...she opened, sold her first item and extended her team to three staff!</p>
<p id="OpenDesc2">Bella Beauty is now a bustling business offering a range of cosmetics items to start young makeup artists and amateurs to return home and start on their journey into the art of makeup and maybe one day, a customer will follow in Claires footsteps.</p>
<img id="ShopInterior" src="ShopInterior.jpg" alt="Inside Bella Beauty">
</div>
<!--Map & Opening Times-->
<div id="Border">
<div id="Map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1155.6432572904432!2d-5.927957941836744!3d54.59894504885941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48610855d362c579%3A0x5385d89154488f3a!2s5-19%20Ann%20St%2C%20Belfast%20BT1%204EA!5e0!3m2!1sen!2suk!4v1605143571609!5m2!1sen!2suk" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div id="OpeningHours">
<p>Monday-Friday: 9am-4pm</p>
<p>Saturday: 9am-6pm</p>
<p>Sunday: Closed</p>
</div>
</div>
<!--Footer with Social Media Links-->
<div id="footer">
<div class="Socials">
<a href="https://www.facebook.com/studyatulster/">
<img id="Facebook" src="Facebook.png" alt="Facebook">
</a>
<a href="https://twitter.com/UlsterUni?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
<img id="Twitter" src="Twitter.png" alt="Twitter">
</a>
<a href="https://www.instagram.com/ulsteruni/?hl=en">
<img id="Instagram" src="Instagram.png" alt="Instagram">
</a>
</div>
<p>Bella Beauty - Copyright 2020</p>
</div>
</body>
</html>
When I was learning to code I learned a lot from w3schools
In your case I would like to refer to this page:
https://www.w3schools.com/Css/css_dropdowns.asp
The method described does not require any JavaScript to work
Your CSS is way away from drop down menu. it seems that you have not added the :hover property or you are not familiar with some CSS properties So here's the link https://www.youtube.com/watch?v=wHFflWvii3M from where you can learn drop down menu
if it helps let me know.
#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>
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.
body {
background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
font-size:50px;
font-family: 'Raleway', sans-serif;
position: absolute;
color: white;
left: 790px;
}
.title {
position: relative;
}
.text {
color: white;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
line-height: 10px;
}
.nfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black|50%;
}
.sfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black;
}
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:750px;
margin-bottom: 500px;
background-color:black;
position: absolute;
}
.text-desc {
color:white;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
}
.buttonnfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonof {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
background-color:#05a2aa;
}
.buttonsfa:hover{
background-color:#05a2aa;
}
.buttonof:hover{
background-color:#05a2aa;
}
<!doctype html>
<html>
<head>
<title> SpeedyAlts </title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class='bg'>
<a class="title"> SpeedyAlts </a>
<div class="nfa">
<center>
<a class="text"> NFA Account </a>
<br>
<br>
<a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
</center>
<a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="sfa">
<center>
<a class="text"> SFA Account </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="of">
<center>
<a class="text"> Optifine Cape </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
</div>
</div>
<script src="https://embed.selly.gg"></script>
</body>
</html>
I have got no idea why it is not working. For some reason with margin-top margin-left etc. It's not moving it up nor down with any of the margins. Could Anyone help? I am not that good at HTML nor with CSS so excuse any code that is badly formatted if there is any. Also, if anyone could give me any advice on problems like this in the future that would be helpful. Thanks.
Your div in question has position:absolute. You will need to either remove this, or use top and bottom, left and right to move it on the page. In your example, if you'd like to move the element up on the page you will need to declare:
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
background-color:black;
position: absolute;
left:750px;
bottom: 500px;
}
Please keep in mind this means your element will always be 500px from the bottom and 750px from the left. It is better to use percentage values.
To move it up, you can try one of these to the class .of :
Margin approach
margin-top:-50px;
Absolute positioning approach
top: 300px; //change this value as needed
Transform approach
transform:translateY(-50px);
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.