HTML Email using Foundation by Zurb - trouble centering an element - html

I hope all is well. I'm presently practicing building an HTML email using the Foundation for Emails framework by Zurb. I can't seem to center a certain span element. I designed it to look like a button using SCCS. I figure if this span can't be centered, then an actual button or form / input combo element would present as slightly more difficult to maneuver.
Here's a snippet of the image output. As you can see, I managed to center the other span elements, but notice the "See Deal" element is slightly out of alignment with the rest of the image. When I inspect the element, for some reason it's not lined up within the box like the rest of them.
Been working on this for about a day and I can't seem to get it figured out. Any and all insight is always most welcomed and appreciated.
Here's my HTML portion of the code:
<container class="other-deals-container">
<row class="other-deals">
<columns>
<row class="offer">
<columns>
<img src="{{root}}/assets/img/kayak-images/cancun.png">
<p>Cancun: 4 nights with air and Melody Maker Cancun stay. Price reflects MIA departure, other cities available.</p>
<span class="save_amount">Save up to 65%</span>
<span class="tiny_info">CheapCaribbean.com</span>
<span class="price">$689+</span>
<center>
<span class="button">See Deal</span>
</center>
</columns>
</row>
</columns>
</row>
</container>
Here's the CSS / SCSS portion of the Code:
.other-deals {
background: #f1f4f7;
background-color: #f1f4f7;
.offer {
background: #ffffff;
background-color: #ffffff;
.columns {
th {
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
}
& > table {
table-layout: fixed;
}
}
}
img {
padding-bottom: 20px;
}
p {
color: black;
font-weight: 600;
font-size: 16px;
text-align: center;
padding-bottom: 20px;
}
span {
color: black;
font-weight: 600;
font-size: 16px;
text-align: center;
display: block;
&.save_amount {
font-size: 14px;
color: #1d93f5;
}
&.tiny_info {
font-size: 10px;
font-weight: 300;
padding-bottom: 10px;
}
&.price {
font-size: 20px;
font-weight: 600;
padding-bottom: 10px;
}
&.button {
display: inline-block;
width: 100px;
text-align: center;
background-color: black;
color: white;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
padding-right: 40px;
border-radius: 5px;
}
}
}


I found the solution to my issue. I had to step away (always a good tactic).
To remove the button, I removed the tags and placed contents into a span element nested into a link element. That seemed to have done the trick. Thanks to everyone that read this post.


body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Readex Pro", sans-serif;
height: 100vh;
}
* {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
height: 400px;
border-radius: 2px;
}
.button {
width: 100%;
height: 40px;
background-color: black;
color: white;
font-weight: 600;
outline: none;
border: none;
border-radius: 4px;
}
.button:active {
transform: translatey(3px);
}
.other-deals-container {
margin: auto;
width: 90%;
}
p {
font-size: 20px;
font-weight: 800;
}
.save-amount {
display: flex;
align-items: center;
justify-content: center;
color: blue;
font-size: 17pt;
margin-top: 20px;
}
.tiny_info {
display: flex;
align-items: center;
justify-content: center;
color: black;
font-size: 7pt;
margin-top: 4px;
margin-bottom: 10px;
flex-direction: column;
}
.price {
margin-top: 5px;
font-size: 20pt;
}
<!-- google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght#200;300;400;500;700&display=swap" rel="stylesheet">
<!-- end google font -->
<container class="other-deals-container">
<row class="other-deals">
<columns>
<row class="offer">
<columns>
<img src="data:image/jpeg;base64,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">
<p>Cancun: 4 nights with air and Melody Maker Cancun stay. Price reflects MIA departure, other cities available.</p>
<span class="save-amount">Save up to 65%</span>
<span class="tiny_info">CheapCaribbean.com</span<br>
<span class="price">$689+</span>
</columns>
<button class="button">See Deal</button>
</row>
</columns>
</row>
</container>

Related

How to not push other elements away when increasing margin on the same line

How to not push other elements away when increasing margin on the same line. I have <a> elements and a button element. When I try to increase the left-margin of button, the <a> margin gets pushed away. I just want the button to go to the right of the page. Tried using float but I don't want it to go to the extreme left (leave some space).
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
}
.chat {
width: 100px;
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
margin-left: 0px;
}
<nav>
<div class="navbar" align='center'>
Home
Works
About
Projects
<button class='chat'>Let's chat</button>
</div>
</nav>

I just want the button to go to the right of the page.
Use flex-box. Wrap your links inside a container and set display of it's parent element to flex and remove the width property of the button.
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
}
.chat {
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
}
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
}
<nav>
<div class="navbar" align='center'>
<div class="links">
Home
Works
About
Projects
</div>
<button class='chat'>Let's chat</button>
</div>
</nav>

If you want to use float you need to set a width on nav and then float button right and navbar float left.
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
width: 600px;
}
.navbar{
float:left;
}
.chat {
width: 100px;
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
margin-left: 0px;
float:right;
}
<nav>
<div class="navbar" align='center'>
Home
Works
About
Projects
</div>
<button class='chat'>Let's chat</button>
</nav>

HTML buttons do not display properly next to list items

I'm building the traditional todo list app in an effort to increase my understanding of Vuejs. Most of the functionality is working as expected, however my todo items are not displaying properly. Each item should have a "delete" button that shows up on the right side of its row, but the buttons are bleeding into the row below (see image).
What irks me is that the checkboxes are displaying properly, but the buttons are not. I've tried changing all the css for the buttons to that for the checkbox, but this didn't work
TodoItem.vue
<template lang="html">
<li class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<div class="checkbox-holder">
<input type="checkbox" v-on:change="markComplete(todo.id)" />
</div>
<h2>{{ todo.title }}</h2>
<button v-on:click="deleteTodo(todo.id)" class="del">x</button>
</li>
</template>
App.scss
.todos {
position: absolute;
display: block;
width: 656px;
background-color: white;
margin-left: 266px;
border-right: $generic-border;
min-height: calc(100vh);
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
padding-bottom: 80px;
#include mq("900px") {
margin-left: 0;
width: auto;
}
h2 {
font-size: 20px;
font-weight: normal;
}
&__list li {
line-height: 1.4;
color: #333;
font-size: 14px;
list-style-type: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
margin-top: 20px;
padding: 20px;
&.is-complete {
text-decoration: line-through;
}
button {
#include btn("30px");
float: right;
display: block;
}
.checkbox-holder {
margin-right: 20px;
margin-left: 20px;
align-items: center;
justify-content: center;
line-height: 16px;
float: left;
.checkbox {
cursor: pointer;
border-color: gray;
color: #343434;
height: 16px;
width: 16px;
border: 1px solid gray;
border-radius: 16px;
}
}
}
}
Here's how the buttons are displaying.

You can see the below code.
li {
display: flex;
align-items: center;
}
<ul>
<li class="todo-item">
<div class="checkbox-holder">
<input type="checkbox"/>
</div>
<h2>Hello world</h2>
<button>x</button>
</li>
</ul>

background-color doesn't work when using flexbox

I started using flexbox for my footers and now on all of my pages with forms the background-color is now the default white. Here is an example of one of my pages:
login.php
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
height: 95vh;
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
content {
align-items: center;
justify-content: center;
}
.signin {
color: #99cc00;
margin: auto;
font-size: 24px;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
transition-duration: .4s;
border: greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="../../favicon.ico">
<meta charset="UTF-8">
<title>TapLovers</title>
<link rel="stylesheet" href="../background.css">
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class=content>
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input type="text" email="email" placeholder="Email" class="loginInput"><br>
<input type="text" password="password" placeholder="Password" class="loginInput"><br>
<input type="submit" name="submit" id="login" class="loginButton loginButtonColor" value="Login To TapLovers!" /><br><br>
<a href="../register/register.php">
<font color="#99cc00">Create a FREE TapLovers Account!</font>
</a>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3><br>&copy 2018 TapLovers, All Rights Reserved
</footer>
</body>
</html>
Also I was trying to center my forms and my title using flexbox as well and I haven't gotten that working either. I'm not really sure what other details would be useful for this particular problem. If you need any more details just reply below and I'll answer them as they come out.
EDIT: The snippet that compiles on stack overflow shows my background just fine. What's more is if I use ctrl+shift+i on my page then the background works but if I just reload on my page then the background will turn white.

I did not see the issue with background fluctuations. I think it is a delay in the page load. I have added comments to help with the flexbox centering of items.
/*CSS reset of browser agent. Removes the horizontal scroll currently happening in page.*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #211e1e;
display: flex;
flex-direction: column;
/* No need to restrict the height.
height: 95vh;*/
}
h1 {
color: #99cc00;
text-align: center;
}
.content {
flex: 1 0 auto;
/*make the content div flex so that the form can take the center alignment from flexbox properties. Add the centering here and avoid the margin: auto property */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer {
text-align: center;
font-weight: lighter;
color: #99cc00;
font-size: 10px;
flex-shrink: 0;
}
h3 {
position: absolute;
font-weight: bold;
color: #99cc00;
font-size: 15px;
width: 100%;
top: 91.5%;
}
.button {
background-color: #211e1e;
color: white;
font-size: 24px;
/*padding: 15px 50px;*/
transition-duration: .4s;
border: greenyellow;
width: 250px;
/* width of button */
height: 50px;
/* height of button */
}
.buttonColor:hover {
color: black;
background-color: greenyellow;
}
h1 {
text-align: center;
bottom: 25%;
}
/*Add flexbox style the inputs as blocks and remove <br> from HTML*/
.signin {
color: #99cc00;
font-size: 24px;
display: flex;
flex-direction: column;
}
.signin>* {
margin: 5px 0;
}
.loginInput {
font-size: 24px;
}
.loginButton {
background-color: #211e1e;
color: white;
font-size: 24px;
padding: 10px 50px;
/*Please check your animation ??
transition-duration: .4s;*/
/*add border size and transparency 1px solid*/
border: 1px solid greenyellow;
}
.loginButtonColor:hover {
color: black;
background-color: greenyellow;
}
<div class="content">
<h1><img src="../../36x36-icon.png">apLovers</h1>
<form class="signin">
<input class="loginInput" placeholder="Email" type="text"> <input class="loginInput" placeholder="Password" type="text"> <input class="loginButton loginButtonColor" id="login" name="submit" type="submit" value="Login To TapLovers!"> <font color="#99CC00">Create a FREE TapLovers Account!</font>
</form>
</div>
<footer>
<h3><img src="../../favicon.ico">apLovers</h3>
<p>© 2018 TapLovers, All Rights Reserved</p>
</footer>

Flexbox display issue with second div when using center

I'm using flexbox to center align a div within a div. I'm adding a third div within the second div that I want underneath the second and to float to the right of the size of the second div. If I set it to float right, it's still being forced into the second div. How can I force it below the second div and float it right like below?
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.welcometxt {
width: 450px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: justify;
}
.linksect {
width: 400px;
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<div class="w3-row w3-margin w3-container w3-white w3-padding-32">
<p class="cursive welcome w3-center">Welcome to the Historic Players Playhouse, home of The Players, founded in 1911.</p>
<hr class="w3-padding-large">
<div class="welcometxt">
<p>The Players is an organization of gentlemen dedicated to the preservation of amateur theater. Our members come from diverse backgrounds and locations but share a common interest in amateur theater. We welcome as members all gentlemen who wish to share
in the camaraderie of The Players.</p>
<div class="linksect">
Read More <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span>
</div>
</div>
</div>

You can add flex-direction: column; to your welcometxt, change the width of linksect to 100% and align its content to the right:
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.welcometxt {
width: 450px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: end;
text-align: justify;
flex-direction: column;
}
.linksect {
width: 100%;
text-align: right;
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<div class="w3-row w3-margin w3-container w3-white w3-padding-32">
<p class="cursive welcome w3-center">Welcome to the Historic Players Playhouse, home of The Players, founded in 1911.</p>
<hr class="w3-padding-large">
<div class="welcometxt">
<p>The Players is an organization of gentlemen dedicated to the preservation of amateur theater. Our members come from diverse backgrounds and locations but share a common interest in amateur theater. We welcome as members all gentlemen who wish to share
in the camaraderie of The Players.</p>
<div class="linksect">
Read More <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span>
</div>
</div>
</div>

You don't need flex to take paragraph at the center, having already margin: 0 auto;
.welcometxt {
width: 450px;
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: justify;
}
than:
.infolink {
float:right;
}
.linksect {
width: 400px;
float:right;
http://jsfiddle.net/9dhw5zLp/
}

And heres the version free of flexbox, as you asked. Html stays the same as you posted :)
.welcome, .welcometxt, .linksect{
display: block;
margin: 0 auto;
}
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
}
.welcometxt {
width: 450px;
}
.linksect {
width: 400px;
text-align: right;
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}

You can do it like this:
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.welcometxt {
width: 450px;
display: flex; /* displays children inline */
flex-direction: column; /* stacks children vertically */
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: justify;
}
.linksect {
width: 100%; /* modified */
display: flex; /* added */
justify-content: flex-end; /* horizontal alignment, aligns them to the far right */
align-items: center; /* vertical alignment / centering */
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<div class="w3-row w3-margin w3-container w3-white w3-padding-32">
<p class="cursive welcome w3-center">Welcome to the Historic Players Playhouse, home of The Players, founded in 1911.</p>
<hr class="w3-padding-large">
<div class="welcometxt">
<p>The Players is an organization of gentlemen dedicated to the preservation of amateur theater. Our members come from diverse backgrounds and locations but share a common interest in amateur theater. We welcome as members all gentlemen who wish to share
in the camaraderie of The Players.</p>
<div class="linksect">
Read More <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span>
</div>
</div>
</div>

html/css image issue inside div

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%;
}