I've added some script to my code and it's messing up formatting elsewhere in my doc. I thought maybe it had to do with where I was including it and I read this answer and tried to add async or defer but it didn't make a difference. Specifically, it's adding a block of space on the right side of my "aboutus5" div and then my footer is all squished to the left. As soon as I remove the code, the formatting goes back to normal. So I'm still not sure if it's the placement of the code or maybe just bad code I have elsewhere that is only now being affected.
Any suggestions would be much appreciated!!
Here's the specific code that's screwing things up:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
And here's all of the code (I know it's really bad... this is my first go at building a website):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Budget Line of Business</title>
<style>
h1 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 100px; color:#FF3B3F; font-weight: bold; margin: 0 }
h2 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 52px; color: #FF3B3F; font-weight: bold; margin: 0 }
h3 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 42px; color: #FF3B3F; font-weight: bold; margin: 0}
h4 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 32px; color: #FF3B3F; font-weight: bold; margin: 0}
h5 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
h6 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
p {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: none; margin: 0}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: none;
}
li {
float: right;
}
li a {
display: block;
color: #062f4f;
font-family: "Footlight MT Light";
font-size:28px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #FF3B3F;
color: #ffffff;
}
#aboutus1{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
#aboutus2{
background-color:#EFEFEF;
width: 100%;
margin: 0;
}
.aboutus3{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
.aboutus3 h{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
.aboutus3 h1 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 100px; color: #062f4f; font-weight: bold; margin: 0 }
.aboutus3 h2 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 52px; color: #062f4f; font-weight: bold; margin: 0 }
.aboutus3 h3 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 42px; color: #FF3B3F; font-weight: bold; margin: 0}
.aboutus3 h4 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 32px; color: #FF3B3F; font-weight: bold; margin: 0}
.aboutus3 h5 {font-family: 'Georgia', 'Garamond';
font-size: 22px; color: #062f4f; font-weight: bold; margin: 0}
.aboutus3 h6 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
.aboutus3 p {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: none; margin: 0}
#aboutus4{
background-color:#EFEFEF;
width: 100%;
margin: 0;
}
#aboutus5{
width: 100%;
margin: 0;
}
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 37%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
white-space: nowrap;
}
}
.footer{
width: 100%;
height: 25vh;
background-color: #ffffff;
}
.footer a {
color: #FC4A1A;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.footer p {
font-size: 14px; padding: 2px; color: #062f4f;
}
#footercolumn1 {
float: left; margin: 0; width: 200px; padding: 15px 280px 0 5px;
}
#footercolumn2 {
float: left; margin: 0; width: 200px; padding: 15px 280px 0 0px;
}
#footercolumn3 {
float: left; margin: 0; width: 200px; padding: 15px 0px 0 0px;
}
button {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
background: #062f4f;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
button:hover {
background: #FF3B3F;
text-decoration: none;
}
#ideascolumn {
float: left; margin: 0; width: 48%; height: 300px; background-color:#CAEBF2; padding: 0 0 0 2%;
}
#casestudiescolumn {
float: left; margin: 0; width: 48%; height: 300px; background-color:#062f4f; padding: 0 0 0 2%;"
}
#avatar1hover {
padding: 0px;
display: none;
text-align: center;
}
#pmhover:hover + #avatar1hover {
display: block;
}
#avatar2hover {
padding: 0px;
display: none;
text-align: center;
}
#awhover:hover + #avatar2hover {
display: block;
}
#avatar3hover {
padding: 0px;
display: none;
text-align: center;
}
#drhover:hover + #avatar3hover {
display: block;
}
#avatar4hover {
padding: 0px;
display: none;
text-align: center;
}
#mdhover:hover + #avatar4hover {
display: block;
}
#avatar5hover {
padding: 0px;
display: none;
text-align: left;
}
#rkhover:hover + #avatar5hover {
display: block;
}
#avatar6hover {
padding: 0px;
display: none;
text-align: left;
}
#mwhover:hover + #avatar6hover {
display: block;
}
#avatar7hover {
padding: 0px;
display: none;
text-align: left;
}
#lrhover:hover + #avatar7hover {
display: block;
}
#avatar8hover {
padding: 0px;
display: none;
text-align: left;
}
#ahhover:hover + #avatar8hover {
display: block;
}
span:hover + div {
display:block;
}
</style>
</head>
<body>
<div id="aboutus1">
<a href="*"><img src="images/Logo1.png" alt="Budget Line of Business Logo"
style="float:left;width:220px;height:237px;padding:10px 0px 0px 15px;"/></a>
<ul><strong>
<li>Contact</li>
<li>Ideas</li>
<li>Our Work</li>
<li>About Us</li>
<li>Home</li>
</strong>
</ul>
<br>
<br>
<br>
<br>
<br>
<br><br><br>
<br>
<br>
<h1><center>Illuminators & Inventors</center></h1><br>
<h5 style="text-align: center; padding:0px 100px;">We're a creative team of problem-solving consultants bringing fresh ideas and innovation to budget communities across the federal government.<br>Find out what we can do for you.</h5>
<br><br>
<center><button>SEE OUR WORK</button></center>
<br><br>
</div>
<div id="aboutus2">
<br><br><br>
<div class="container"><center>
<h3>What can we do for you?</h3>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo"><b>+</b></button>
<div id="demo" class="collapse">
<h5>
Onboarding<br>
Portals<br>
Workflows<br>
Data Collection<br>
Data Analytics<br>
Project Management<br>
Budget Trainings<br>
Career Development</center>
</h5>
</div>
<br>
<div id="avatartable1">
<table style="table-layout:fixed; width:100%">
<tr>
<td id="avatar4"><center>
<span id="staffmdhover"><img src="images/avatarmd.png" alt="The Mastermind Avatar"
style="width:170px;height:150px"/></span>
<div id="avatar4hover"><p>I can connect you with an agency who is working through the exact same questions.</p></div>
</center></td>
<td id="avatar1"><center>
<span id="pmhover"><img src="images/avatarpm.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar1hover"><p>I am building tools behind the scenes to make your life easier.</p></div>
</center></td>
<td id="avatar2"><center>
<span id="awhover"><img src="images/avataraw.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar2hover"><p>I can help you become a MAX guru.</p></div>
</center></td>
<td id="avatar3"><center>
<span id="drhover"><img src="images/avatardr.png" alt="The Mastermind Avatar"
style="width:200px;height:150px"/></span>
<div id="avatar3hover"><p>I can help you build a workflow using Collect Forms.</p></div>
</center></td>
</tr>
</table>
</div>
<br><br>
<div id="avatartable2">
<table style="table-layout:fixed; width:100%">
<tr>
<td id="avatar5">
<span id="rkhover"><img src="images/avatarrk.png" alt="The Mastermind Avatar"
style="width:200px;height:150px"/></span>
<div id="avatar5hover"><p>I can teach you how to master Excel.</p></div>
</td>
<td id="avatar6">
<span id="mwhover"><img src="images/avatarmw.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar6hover"><p>I can brainstorm with you about how to streamline your budget processes.</p></div>
</td>
<td id="avatar7">
<span id="lrhover"><img src="images/avatarlr.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar7hover"><p>I can point you in the direction of career development resources.</p></div>
<td id="avatar8">
<span id="ahhover"> <img src="images/avatarah.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar8hover"><p>I can help you create a one-stop shop budget portal for your office.</p></div>
</td>
</tr>
</table>
</div>
<br><br>
</div>
<div class="aboutus3" style="color: #062f4f">
<br><br><br>
<center>
<h3>Our Vision</h3>
<h6 style="text-align: center; width: 60%;">Developing modern, adaptable, cost effective and optimized process, technology, and human capital solutions supporting all phases of the formulation and execution of the Federal Budget.</h6>
</center>
<br><br>
<div>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="goal1">
<center><img src="images/goal1.png" alt="Goal 1: Process Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Process</h4><br>
<p style="text-align: center; width: 450px;"><b>Goal 1:</b> Improve the efficiency and effectiveness of agency and central processes for forumulating and executing the Federal Budget.</p>
</center>
</td>
<td id="goal2">
<center><img src="images/goal2.png" alt="Goal 2: Technology Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Technology</h4><br>
<p style="text-align: center;width: 450px;"><b>Goal 2:</b> Improve capabilities for analyzing and presenting budget, execution, planning, and financial information in support of decision making.</p></center>
</td>
<td id="goal3">
<center><img src="images/goal3.png" alt="Goal 3: Human Capital Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Human Capital</h4><br>
<p style="text-align: center;width: 450px;"><b>Goal 3:</b> Enhance the effectiveness of the Federal budgeting workforce.</p></center>
</td>
</tr>
</table>
</div>
<br><br><br>
</div>
<div id="aboutus4">
<center>
<br><br><br>
<h3>Transforming budget offices since 2006</h3><br><br>
<img src="images/timeline.png" alt="Budget Line of Business Timeline"
style="width: 1100px;height:850px"/>
<br><br>
</center>
</div>
<div id="aboutus5">
<div id="ideascolumn">
<br><br><br><br>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="ideaspic" style="width:20%">
<img src="images/groupavatar.png" alt="Group of Avatars"
style="width:150px;height:150px"/><br>
</td>
<td id="ideasdescription" style="width:60%">
<h3 style="text-align: left; width: 80%;">Send us a challenge</h3></center>
<br><h6 style="text-align: left; width: 70%;">If you've got a specific business challenge, we’d love to help you tackle it. Please get in touch with us.</h6></center>
<br><h6 style="text-align: left; width: 70%;">*</h6></center>
</td>
</tr>
</table>
<br><br><br>
</div>
<div id="casestudiescolumn">
<br><br><br><br>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="ideaspic" style="width:20%">
<img src="images/atwork.png" alt="At Work Graphic"
style="width:150px;height:150px"/><br>
</td>
<td id="ideasdescription" style="width:60%">
<h3 style="text-align: left; width: 90%;">View our work</h3></center>
<br><h6 style="text-align: left; width: 70%; color:white">Check out some of the cool things we're working on right now.</h6></center>
<br><button>SEE OUR WORK</button>
</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div id="footercolumn1">
<h5 style="color: #062f4f;">Sign up at MAX.gov</h5><br>
<p>Have a .gov email address?<br><br> Sign up for MAX.gov here and then email us to access all of our budget resources.</p>
</div>
<div id="footercolumn2">
<h5 style="color: #062f4f;">Send us your ideas</h5><br>
<p>If you have a specific challenge for us, fill out this form with all of your details.</p></div>
<div id="footercolumn3">
<h5 style="color: #062f4f;">Get in touch
</h5><br>
<p>*<p>
Text
<br><br>
<div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter1.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin1.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png" width="35" height="35" />
</a>
<a href="pinterestaddress">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest1.png" width="35" height="35" />
</a>
</div>
</div>
</div>
</body>
</html>
That's not a JS issue. It's because you're including Bootstrap css in
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Which is conflicting with your own CSS. At a glance, I could see the property which is conflicting here is box-sizing
Standard solution:
Rewrite your custom CSS so it wouldn't conflict with the boostrap one.
Hack Solution (Not encouraged.. Just to show you where you're wrong):
Just include the following in your custom CSS
* {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
Related
I am new to coding (so go easy on me) doing this project for fun and I'm pretty close to being complete but I can't seem to get rid of this 2-5 px white space dividing my header from the first section. See the screenshot below:
I set all element margins to 0 such as
* {
margin: 0
}
but this didn't help.
the following code uses tables with inline CSS. Can somebody help me!
table.t00 {
width: 640px;
margin: 0;
}
table.t00 th {
max-width: 630px;
max-height: 474px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
}
table.t01 tbody {
text-align: center;
color: #f1f1f1
}
table.t01 th {
width: 636px;
}
table.t02 {
width: 640px;
background-color: white
}
table.t02 tbody {
text-align: center;
width: 634px;
height: 291px;
}
table.t02 th {
width: 634px;
}
table.t03 {
width: 634px;
height: 320px;
}
table.t03 tbody {
text-align: center;
width: 634px;
height: 320px;
padding-top: 60px;
}
table.t03 th {
width: 634px;
padding-bottom: 40px;
}
table.t04 {
width: 640px;
height: 84px;
background-color: #052f66;
}
table.t04 tbody {
text-align: center;
}
<body>
<table class="t00">
<tbody>
<th style="margin: 0;">
<img
class="header-image"
src="victory-club header.jpg"
alt="header for victory clubs membership"
/>
</th>
</tbody>
</table>
<table class="t01">
<tbody>
<th>
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 28px; margin: 10px 0;">Your Member ID is:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; margin: 0;">FL-9999999</h2>
<p style=" font-size: 14px;
font-style: italic; margin: 5px 0;">Please keep this for your records</h4>
</th>
</tbody>
</table>
<table class="t02">
<tbody>
<th>
<p style="padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center; width: 634px; margin: 25px 0px 0px 0px">
Member Benefits
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;">These are just some of the amazing benefits that come with your <br> Victory Clubs membership!</p>
<br>
<br>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive events and parties at local venues for Victory Clubs members only.</p>
<div style="background-color: white;
width: 634px;
height: 7px;"></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Deals and Savings at hundreds of retail and restaurant locations.
<div style="background-color: white;
width: 634px;
height: 7px;"
></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive Perks through your School.</p>
</div>
</th>
</tbody>
</table>
<table class="t03">
<tbody class="schedule">
<th>
<p style=" padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;">
Schedule Now!
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; margin: 0 59px;">Schedule and pass your initial drug test now so you can start enjoying all the perks and benefits your Victory Clubs membership has to offer.
</p>
<br>
<br>
<button style="display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 100px;
border: 1px solid;
color: white;
border-color: #dc1d40;
background-color: #dc1d40;">SHEDULE MY DRUG TEST</button>
<br>
<br>
<br>
<p style="color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; margin: 0 59px;">
You’ll receive an email letting you know your free 90-day subscription has been activated once you pass your drug test.
</p>
<p style="color: #052f66;
text-align: center;
font-size: 16px; margin: 0 59px;">
<b> Keep up the great work!</b>
</p>
<br>
</th>
</tbody>
</table>
<table class="t04">
<tbody>
<th>
<ul style="padding: 20px;">
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">FB</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;"href="" target="_blank">Twitter</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Insta</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Youtube</a></li>
</ul>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
height: 32px;">© All Rights Reserved. Privacy Policy | Accessibility Policy | Terms & Conditions</p>
</th>
</tbody>
<table>
</body>
Try adding this code:
table.t00 th img {
display: block;
}
One thing about images is that they have a default display: inline-block which makes them leave margins around other elements ... putting block display eliminates this effect
Also try adding
table.t00 {
border-collapse: collapse;
}
instead of having separate which is the default behaviour
<table> have border-spacing and by default it's value is 2px..so change it to 0 ....
border-spacing: 0px;
for both of your tables...t00 and t01
table.t00 {
width: 640px;
margin: 0;
border-spacing: 0px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
border-spacing: 0px;
}
#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>
So I have reviewed all of the posts about this and have tried everything... My content is pushing my footer down as I want. However, there is a very small portion of a div that is overlaying my footer. It can be found at http://www. newshongumpto.org
Its only that bottom portion of the div and I cannot figure out why. I had to move my footer css to the actual includes files as it wasn't find the media query to hide the footer on mobile but I digress. I know, a lot going on here:
Site CSS:
#charset "UTF-8";
.navbar-nav> li > a {
font-family: 'Arial';
font-weight: bold;
color: #000000;
font-size: 15px;
}
.dropdown-menu > li > a {
font-family: 'Arial';
font-weight: bold;
color: #000000;
font-size: 15px;
}
.navbar-default {
border-color: #000000;
}
.nav.navbar-nav a:hover {
color: #206E38;
}
.dropdown-menu .dropdown .dropdown-toggle a {
font-family: 'Arial';
font-weight: bold;
font-size: 15px;
}
.banner {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.ptobigtitle {
font-family:'Anton', sans-serif;
padding: 10px;
}
.ptosubtitle {
font-family: 'Anton', sans-serif !important;
padding-left: 10px;
font-size: 30px;
color: #535252;
}
.navbar-btn {
float: right;
}
.btn-default {
background-color: #206E38;
color:#FFF;
}
.jumbotronimg {
float: right;
}
.learnmorebtn {
margin-left: 200px;
}
.articleheadline{
font-family: 'Anton', sans-serif;
font-size: 20px;
background: #A1C2AB;
color: #000;
letter-spacing: 2px;
padding: 5px;
max-width: 400px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
border-style: solid;
border-width: 1px;
}
.info{
text-align: center;
top: 37px;
}
.rightinfo{
text-align: center;
}
.footer {
display:block;
background:#CDCDCD;
overflow:hidden;
margin-bottom: 0;
postion: fixed !important;
height: auto;
bottom: 0 !important;
width: 100%;
clear: both;
}
.bottomfooter {
color:#FFF;
font-family: 'Arial';
font-size: 10px;
background: #CDCDCD;
bottom: 0;
}
.footerheading {
font-family: 'Anton', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: underline;
}
.form-inline{
background: #CDCDCD;
}
#mc_embed_signup #mce-EMAIL{
font-family: "Arial";
font-size: 13px;
padding: 5px;
padding-top: 2px;
margin-left:auto;
margin-right:auto;
}
.callistcontainer {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 300px;
overflow: scroll;
}
.footertext{
font-size: 11px;
table-layout: fixed;
width: 100%;
height: auto;
text-align: center;
margin-left: auto;
margin-right:auto;
}
.footerposition{
font-weight: bold;
text-align: right;
padding-right: 10px;
border-right: solid;
border-width: 1px
}
.footername{
border-width: 1px;
text-align: center;
}
.footerphone{
border-width: 1px;
text-align: center
}
.footeremail {
padding-left: 10px;
border-width: 1px;
text-align: center
}
.vl {
border-right: solid;
border-width:1px;
border-color: #000000;
}
.footernavigation {
text-align: center;
color: #000000;
font-size: 11px;
margin-left:auto;
margin-right: auto;
border: none;
border-collapse: separate;
border-spacing: 20px 0
}
.footernavheader{
text-align: center;
text-decoration: underline;
font-size: 11px
}
.copywrite{
font-family: "Arial";
font-size:11px;
text-align: center;
font-weight:bold;
padding-top: 25px;
}
#mc-embedded-subscribe{
-webkit-appearance: none;
margin-left:285px
}
.paypal_btn{
display: inline-block;
font-family: "Gotham", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
font-size: 14px;
font-weight: 500;
color: #000000;
text-align: center;
padding: 5px 10px;
margin-top: 10px;
margin-left: 30px;
background: #FFD700;
border: solid;
border-width:thin;
border-color: #C5C5C5;
cursor: pointer;
outline: none;
border-radius: 3px;
}
.paypal_btn:hover{ background:#e7e7e7;
}
.shongumTitle{
font-family: 'Anton', sans-serif !important;
font-size: 20px;
color: #767373;
padding-right:5px
}
.store{
margin-top:60px;
}
FOOTER CSS
<style>
.footer {
display: none;
}
#media (min-width: 767px) {
.footer {
display:block;
background:#CDCDCD;
overflow:hidden;
margin-bottom: 0;
postion: fixed;
height: auto;
bottom: 0;
width: 100%;
clear: both;
</style>
HTML
<?php include("includes/navigation.php");?>
<div class="jumbotron banner">
<img src="images/ShongumSkyhawkBird_bg.png" alt="Shongum Elemtary School - Skyhawks" width="252" height="321" class="jumbotronimg img-responsive"/>
<h1 class="ptobigtitle">Shongum Elementary School</h1>
<h2 class="ptosubtitle">Parent Teacher Organization - A Quest for Excellence</h2>
<a class="btn btn-primarybtn-lg btn-default learnmorebtn" href="contentPages/about.php">Learn more »</a>
</div>
<div class="col-lg-4 info">
<h2 class="articleheadline"><img src="images/003-calendar.png" width="32" height="32" alt=""/> UPCOMING EVENTS</h2><br>
<div class="callistcontainer">
<link href="http://www.newshongumpto.org/calendarScript/core/framework/libs/pj/css/pj.bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoadCss&theme=5" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoad&theme=5&view=list&icons=T&cats=T"></script>
</div>
</div>
<div class="col-lg-4 info">
<h2 class="articleheadline">
<img src="images/001-news.png" width="32" height="32" alt=""/> LATEST NEWS</h3>
<p><style type="text/css">
<!--
.display_archive {font-family: arial,verdana; font-size: 12px;}
.campaign {line-height: 125%; margin: 5px;}
//-->
</style>
<script language="javascript" src="//ShongumPTO.us14.list-manage.com/generate-js/?u=94f392b8b8898807cb75b5931&fid=6999&show=5" type="text/javascript"></script></p>
<p> </p>
</div>
<div class="col-lg-4 rightinfo">
<h2 class="articleheadline">
<img src="images/002-group.png" width="32" height="32" alt=""/> GET INVOLVED!</h3>
</div>
</div>
<br>
<?php include("includes/footer.php");?>
</body>
</html>
FOOTER
<body id="footer" is="dmx-app">
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/homePage/officerInfo.php"></dmx-serverconnect>
<div class="footer">
<div class="container-fluid">
<div class="col-lg-4">
<h2 class="footerheading"> Officers</h2>
<div class="footertext" dmx-repeat:repeat1="serverconnect1.data.ptoOfficers">
<table width="549" height="46" class="footertext">
<tbody>
<tr>
<td class="footerposition">{{col_position}}</td>
<td class="footername">{{col_firsrtName}} {{col_lastName}}</td>
<td class="footerphone">{{col_phone}}</td>
<td> {{col_email}} </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<h2 class="footerheading">Navigate</h2>
<table class="footernavigation">
<tbody>
<tr>
<p class="footernavheader"><strong>PTO</strong></p>
</tr>
<tr>
<td>About Us</td>
<td>Membership</td>
</tr>
<tr>
<td>Programs</td>
<td>Classes</td>
</tr>
<tr>
<td>Store</td>
<td>Lunch Menu</td>
</tr>
<tr>
<td><a href="../contentPages/newsCalendar/news.php">News</td>
<td><a href="../contentPages/newsCalendar/calendar.php">Calendar</td>
</tr>
</tbody>
</table>
<br>
<table class="footernavigation">
<tbody>
<tr>
<p class="footernavheader"><strong>Randolph School District</strong></p>
</tr>
<tr>
<td>RAM Alerts</td></td>
<td>District Calendar</td></td>
</tr>
</tbody>
</table>
</tbody>
</table>
</div>
<div class="col-lg-4">
<h2 class="footerheading">Stay in Contact!</h2>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#CDCDCD; clear:left; font:10px "Arial",sans-serif; width:500px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://ShongumPTO.us14.list-manage.com/subscribe/post?u=94f392b8b8898807cb75b5931&id=07d0e3a6fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Newsletter Signup" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_94f392b8b8898807cb75b5931_07d0e3a6fb" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<br>
<br>
<div class="col-lg-12 copywrite"> © <?php echo date("Y"); ?> Shongum Elementary School Parent Teacher Organization
</div>
</div>
<script type="text/javascript">
/* dmxServerAction name "ptoOfficersExecutor" */
jQuery.dmxServerAction(
{"id": "ptoOfficersExecutor", "url": "../dmxConnect/api/homePage/officerInfo.php", "method": "GET", "sendOnSubmit": false, "sendOnReady": true, "data": {}}
);
/* END dmxServerAction name "ptoOfficersExecutor" */
</script>
</body>
</html>
You have this...
.info {
text-align: center;
top: 37px;
}
Remove the 37px and it will fix it.
I'm new here and I was wondering: how do I align my header to the top of the page? Right now there is too much white space between the header and top of the page. Is there a way to 'valign' it to the top somehow? Any help is appreciated. Thank you. Attached is my html code as well as CSS.
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
padding-top: 0;
padding-left: 10px;
padding-right: 10px;
font-family: Helvetica, sans-serif;
color: #666;
}
h1 {
color: #333;
font-size: 32px;
line-height: 38px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
}
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
}
h3 {
color: #333;
font-size: 26px;
font-weight: 700;
text-align: center;
}
h5 {
font-size: 18px;
font-weight: normal;
text-align: center;
margin-top: 0;
}
p,
ul {
font-size: 16px;
line-height: 23px;
font-weight: normal;
text-align: left;
}
.container {
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container2 {
padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container3 {
background-color: #375e97;
margin-right: auto;
margin-left: auto;
max-width: 850px;
top: 0;
}
.container4 {
padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.subhead {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
text-align: center;
padding-bottom: 25px;
margin-top: 0px;
}
.title {
color: #fff;
padding: 5px;
font-size: 20px;
font-weight: 500;
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
}
.cell {
font-size: 17px;
font-weight: normal;
text-align: center;
margin-bottom: 9px;
margin-top: 9px;
}
.refund {
font-size: 14px;
line-height: 22px;
font-weight: normal;
text-align: left;
}
.button {
transition: all 100ms ease-in;
/**doubtful in emails**/
background: #375e97;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color: #ffffff;
text-align: center;
}
.button:hover {
transition: all 100ms ease-in;
/**doubtful in emails**/
background: #555;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color: #ffffff;
text-align: center;
}
<html lang="en">
<head>
<title>Multifamily Texas – Early Bird Registration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body>
<div class="container3">
<h2>ACT NOW and SAVE $80!</h2>
<p class="subhead">Early Bird Registration is $279 through August 17th</p>
</div>
<div class="container4">
<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#375e97" align="center" colspan="2">
<p class="title">Early Bird Registration Pricing</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Single Attendee</p>
</td>
<td width="50%">
<p class="cell">$279</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Two Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$568</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Three Attendees</p>
</td>
<td width="50%">
<p class="cell">$857</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Four Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1146</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Five Attendees</p>
</td>
<td width="50%">
<p class="cell">$1435</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Six Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1724</p>
</td>
</tr>
</table>
</div>
<div class="container">
<h3>Refund Policy</h3>
<p class="refund"><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30 days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This
credit must be used within one year of the conference date to apply to another InterFace conference, for an equal or lesser amount.</p>
<p class="refund" align="center">InterFace Conference Group/France Media, Inc. Attendance & Substitution Policy and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx"
target="_blank">Privacy Policy</a></p>
</div>
</body>
</html>
It's because of the <h2>'s margin-top not being removed. Update this rule:
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
margin-top: 0; /* This one */
}
Preview
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!