I'm building my first proper website from stratch and I've been using some of your responses which have been really helpful so thanks to everyone :)
I just have a question, but will probably have more in the future.
I would like the website to be responsive and I already put the viewpoint code, however the text itself is not responsive and due to this, when you reduce the size of the screen there is a white patch at the right side of the page that shouldnt be there. I was wondering if anyone could help me find out whats wrong with my code.
Thanks!
/* Text properties */
body {
font-family: 'Futura', sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
}
h1 {
position: relative;
left:70vw;
top:30vh;
text-align: right;
font-size: 3em;
color: white
}
h2 {
font-family: 'Roboto', sans-serif;
position: relative;
left:70vw;
top:28vh;
text-align: right;
font-size: 2em;
color: white
}
h3 {
position: relative;
left:70vw;
top:28vh;
text-align: right;
font-size: 14px;
color: white
}
h4 {
position: relative;
font-family: 'Arial';
left:70vw;
top:27vh;
text-align: right;
font-size: 14px;
color: white
}
a {
color: #FFFFFF;
}
p {
margin: 0;
padding: 0;
}
.bg {
/* The image used */
background-image: url("https://eskipaper.com/images/dark-background-4.jpg");
/* Full height */
height: 96vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#title
{
position: absolute;
}
.footer p
{
padding-top: 6px;
font-size: 12px;
}
.footer {
margin: 0px;
Height:30px;
width:100%;
background-color: black;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="C:\Users\Tola\Documents\Tola Photography\Landing Page\style.css" rel="stylesheet">
<title>Tola Akindipe</title>
</head>
<body>
<div class="bg">
<div id="title">
<h1>Tola Akindipe</h1>
<h2>Photography</h2>
<h3><a href="/TolaMobile"style="text-decoration: none;" >Mobile Portfolio </a> <a href="/TolaDSLR"style="text-decoration: none;" > DSLR Portfolio</a></h3>
<h4><a href="/contact" style="text-decoration: none;" >Contact</a></h4>
</div>
</div>
<div class="footer">
<p>Copyright 2020 # Tola Akindipe - All Rights Reserved</p>
</div>
</body>
</html>
Try to change your CSS to this:
/* Text properties */
body {
font-family: 'Futura', sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
height: 100%;
width: 100%;
}
h1 {
text-align: right;
font-size: 3em;
color: white
}
h2 {
font-family: 'Roboto', sans-serif;
text-align: right;
font-size: 2em;
color: white
}
h3 {
text-align: right;
font-size: 14px;
color: white
}
h4 {
font-family: 'Arial';
text-align: right;
font-size: 14px;
color: white
}
a {
color: #FFFFFF;
}
p {
margin: 0;
padding: 0;
}
.bg {
/* The image used */
background: url("https://eskipaper.com/images/dark-background-4.jpg") center center no-repeat;
/* Screen Height - Footer Height */
height: calc(100vh - 30px);
/* Set The Background Size */
background-size: cover;
/* Align The Content To The Center */
display: flex;
justify-content: center;
align-items: center;
}
.footer p {
padding-top: 6px;
font-size: 12px;
}
.footer {
margin: 0px;
Height: 30px;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
Related
My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 12 months ago.
It's good on big screens, but when I resize the window to less than 600px, everything aligns on left. I wanted it to break on different lines if the screen size is less + aligned centre. Can you please help, as I am frustrated with this...don't know what am I doing wrong. Also, is there a way to add some breakpoint manually to break text (or other things) on different screens manually.
Thankyou.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
/* overflow-y:hidden; */
}
:focus {
outline: none;
}
:root {
/* Colors*/
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
body {
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.head__container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0px 20px;
}
.head__container h2 {
font-family: var(--font-two) !important;
font-size: 36px !important;
font-weight: 900 !important;
line-height: 1.1;
color: var(--secondary);
margin-top: 20px;
}
.head__container > h2 span {
color: var(--primary) !important;
}
a.start-button {
margin-top: 30px;
font-family: var(--font-three);
min-width: 120px;
padding: 15px 28px;
background-color: var(--primary);
color: var(--white);
font-size: 18px;
font-weight: 900;
line-height: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="csshake.min.css">
<link rel="stylesheet" href="color-brewer.min.css">
<title>Select10X</title>
</head>
<body>
<section id="main" class="head__container">
<div class="logo">
<img src="logo.svg" alt="" width="250px">
</div>
<h2>
Hello There!
</h2>
<a class="start-button" href="#name">
Explore
</a>
</section>
</body>
</html>
h2 is a block level element, whose default text-align is left unless specified.
What's happening is that while h2 block is center-aligned, its text content inside is left-aligned. You simply need to add text-align: center; to your h2 as in the snippet below.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#800&family=Exo:wght#900&family=Inter:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
/* overflow-y:hidden; */
}
:focus {
outline: none;
}
:root {
/* Colors*/
--primary: #FF7300;
--primary-light: #FFE3CC;
--secondary: #334762;
--white: #ffffff;
/* Fonts */
--font-one: 'Poppins', sans-serif;
--font-two: 'Exo', sans-serif;
--font-three: 'Baloo Da 2', cursive;
--font-four: 'Fira Sans', sans-serif;
--font-five: 'Lato', sans-serif;
}
body {
background-color: var(--primary-light);
font-family: var(--font-four);
color: var(--secondary);
font-size: 16px;
}
section {
width: 100%;
height: 100vh;
}
.head__container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0px 20px;
}
.head__container h2 {
font-family: var(--font-two) !important;
font-size: 36px !important;
font-weight: 900 !important;
line-height: 1.1;
color: var(--secondary);
margin-top: 20px;
text-align: center;
}
.head__container>h2 span {
color: var(--primary) !important;
}
a.start-button {
margin-top: 30px;
font-family: var(--font-three);
min-width: 120px;
padding: 15px 28px;
background-color: var(--primary);
color: var(--white);
font-size: 18px;
font-weight: 900;
line-height: 18px;
text-decoration: none;
}
<section id="main" class="head__container">
<div class="logo">
<img src="logo.svg" alt="" width="250px">
</div>
<h2>
One-click Solution for <span>Hirings</span>.
</h2>
<a class="start-button" href="#name">
Start Assessment
</a>
</section>
I am working on a personal project and i use scroll-snap in this project
but for some reason the scroll snap sometimes overshoots or lands at an awkward position between 2 parts of the page
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>
(I recommend opening the snippet in full page)
after countless amounts of time searching for a solution I have given up and landed here
I hope atleast one of you is able to help me
It appears your problem is that you're applying scroll-snap-align: start; to every div within body and so when you scroll it is snapping to each div in your page. Whereas you only want to be applying it to its first child of the body or in your case each section of your page.
So all I have done in the example below is changed body div to body > div in your css.
You can see more information on the greater than sign in css here: What does the ">" (greater-than sign) CSS selector mean?
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body > div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>
idk why but when I zoom out of my website, the code seems to fall apart and the whole thing just looks disgusting. I've checked out other answers to this question but NONE of the solutions really tailor towards MY code.
body {
background-image: url(gradient.png);
background-repeat: no-repeat`enter code here`;
}
h1.heading {
color: #046289;
font-size: 50px;
margin-top: 100px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
p.heading {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: relative;
margin-left: 70px;
top: 60px;
}
p.heading1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
margin-left: 70px;
top: 50px;
}
img.aml {
width: 280px;
height: 280px;
position: absolute;
margin-left: 360px;
bottom: 30px;
}
iframe.livevid {
position: absolute;
margin-left: 840px;
}
p.vid {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: absolute;
margin-left: 840px;
top: 307px;
}
p.vid1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: absolute;
margin-left: 840px;
top: 353px;
}
a {
text-decoration: none;
}
p a:link {
color: #4204a5;
}
p a:visited {
color: #4204a5;
}
p a:hover {
color: #71a3f2;
}
/*
BELOW - NAVIGATION BAR
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
.spacefornav {
margin-left: 462px;
}
li a:hover {
color: #71a3f2;
}
div.nav {
color: #046289;
}
li a {
display: inline-block;
color: #046289;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-family: 'Poppins';
sans-serif;
margin: 0px 20px;
font-weight: 500;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Childish Gambino</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1 class="heading">CHILDISH GAMBINO</h1>
<ul>
<div class="nav">
<li class="spacefornav">Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</div>
</ul>
<p class="heading">"AWAKEN MY LOVE!"</p>
<p class="heading1">
Childish Gambino's latest
<br> and freshest album is
<br> AVAILABLE NOW on iTunes,
<br>
Spotify and Google Play Music
</p>
<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art">
<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
<p class="vid">Watch Now!</p>
<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>
If you use some inline DIV's that fit exactly into other DIV's this problem can happen. When zooming in/out pixels are being divided. If you give the DIV's one extra pixel of space it's fixed.
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}