CODEWITHSUNDEEP
htmlcss
Kai
Kai

Reputation: 1

My footer is not aligning to the bottom of the page

I have my page with a div class called footer. It's set to position:absolute; with bottom: 0;, but it doesn't align with the bottom of the page like a footer should. Instead, it sticks to the bottom of the browser window, and moves along with the page when I scroll.

I want it to stay at the bottom of the page, out of site, until the user scrolls to the bottom. How do I fix this, and what exactly is preventing it from going to the bottom?

Thanks in advance!

body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onclick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onclick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>

Upvotes: 0

Views: 51

Answers (3)

Vali D
Vali D

Reputation: 541

Footer in position fixed is not a good solution to what you are looking for because you want to see it only once you scroll down.

The main idea behind that is to use position absolute as you have done, but it is important to define the right parent with position relative and its dimensions. In your example, the main container has 100% but it is not an actual size, if you try to use dev tools in your browser and hover the main element you will see that its height is 0.

Please take a look at the changes I have done in your css code so that the footer is in the bottom:

body {
  font-size: 62.5%;
  margin: 0;
}

#main {
  height: 100em;
  position: relative;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onclick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onclick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>

Upvotes: 1

RohitIUC
RohitIUC

Reputation: 261

You can use footer position fixed

	body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: fixed;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onClick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onClick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

You just need to position:fixed; instead of position:absolute; like below:-

	body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}

/* a href corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* stop */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: fixed;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}

#subContainer {
  position: relative;
  left: 14em;
  top: 7em;
  max-width: 127.5em;
  margin-bottom: 10em;
  font-family: "Rubik";
}

#logo {
  width: 10em;
  height: 10em;
  margin: 0;
  position: relative;
  top: 1.5em;
  left: 1.9em;
  cursor: pointer;
}

#headHeader {
  display: flex;
}

#menu {
  list-style-type: none;
  display: flex;
  margin-left: 4.2em;
  position: relative;
  top: 1.7em;
  padding: 0;
}

.menuItem {
  margin-top: auto;
  margin-bottom: auto;
}

.menuItem a {
  font-family: "Rubik";
  font-size: 2.1em;
  color: #f5f3f5;
  background-color: #233039;
  padding: 0.9em 1.1em;
  /* max-height: 1.15em; */
}

.menuItem a:hover {
  background-color: #f5f3f5;
  color: #000913;
}

#headText {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 5.0em;
  color: #233039;
}

#headText2 {
  font-family: "Rubik";
  font-weight: bold;
  font-size: 4.5em;
  color: #233039;
  text-align: center;
  margin: 0;
  padding: 0;
}

#headSubText {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
}

.ruleHeader {
  font-family: "Rubik";
  color: #233039;
  font-size: 2.3em;
  margin: 0;
  padding-top: 0.5em;
  font-weight: bold;
}

.ruleList {
  color: #233039;
  font-size: 2.2em;
}

#widget {
  margin-top: 3em;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

#btnRow {
  margin-top: 1em;
}

.btnHead, .btnHead2 {
  font-family: "Rubik";
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.6em 0.6em;
  background-color: #233039;
  border: none;
  color: #f5f3f5;
  margin-right: 1em;
  margin-top: 1em;
  margin-left: 0.4em;
  border-radius: 0.4em;
  border: solid 0.2em #233039;
  cursor: pointer;
}

.btnHead2 {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.btnHead2:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #233039;
}

.btnHead:hover {
  background-color: #f5f3f5;
  color: #233039;
  border: solid 0.2em #f5f3f5;
}

/*
Color Palette:
#f5f3f5 - White Smoke
#69b4b2 - Green Sheen
#2ac15d - UFO Green
#233039 - Gunmetal
#000913 - Rich Black
*/

* {
  outline: solid;
}
<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onClick="window.location.href = 'index.html';"/>
        <ul id="menu">
          <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
          <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
          <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
          <li class="menuItem"><a href="" class="nav">Forum</a></li>
          <li class="menuItem"><a href="" class="nav">Mods</a></li>
          <li class="menuItem"><a href="" class="nav">Admin</a></li>
          <li class="menuItem"><a href="" class="nav">Apply</a></li>
          <li class="menuItem"><a href="" class="nav">Donate</a></li>
          <li class="menuItem"><a href="" class="nav">Complaint</a></li>
          <li class="menuItem"><a href="" class="nav">About</a></li>
          <li class="menuItem"><a href="" class="nav">Contact</a></li>
        </ul>
      </div>
      <div id="head">
        <span id="headText">Opening Title</span>
        <div id="btnRow">
          <button class="btnHead" onClick="window.location.href = 'discord.html';">JOIN DISCORD</button>
          <button class="btnHead">DOWNLOAD MODS</button>
        </div>
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>

Upvotes: 0

Related Questions