HTML CSS Javascript Index page











up vote
0
down vote

favorite












I think I've written myself in circles and am bodging elements to get them to work rather than understanding how the page and elements should work together. I've used contrasting colours in each of the containers so I can see where one starts and one finishes.



Would you mind looking at my CSS and give me some advice on where I've gone wrong and how I could get a similar layout in a more efficient way? I feel what I have written contradicts itself, if that makes sense. 



    <!DOCTYPE html>

    <html>

    <head>

        <title>Conductive Life</title>



        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



        <!--Custom styles and fonts-->

    <link rel="stylesheet" type="text/css" href="styles/custom.css">

        <link href="https://fonts.googleapis.com/css?family=Calibri" rel="stylesheet">



        <!--JS Controllers-->

        <script language="JavaScript" type="text/javascript" src="controllers/menu.js"></script>

        <script language="JavaScript" type="text/javascript" src="controllers/login.js"></script>



    </head>

    <body>

        <div class="container" id="headerAndNav">

            <div class="row">

                <header>

                    <div class="eleven-twelths column">

                        <nav>

                    <span class="flex-container">

                            <div class="align">

                                <div class="hamburger">

                                    <span></span>

                                    <span></span>

                                    <span></span>

                                </div>

                                <ul class="nav">

                                    <li class="nav-item">

                                        <a class="nav-link" href="index.html">Home</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" href="login.html">Login</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" href="signup.html">Signup</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" href="successes.html">Successes</a>

                                    </li>

                                    <li class="nav-item">

                                    <a class="nav-link" href="prices.html">Prices</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" href="about.html">About</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" href="contact.html">Contact</a>

                                    </li>

                                </ul>

                            </div>

                        </span>

                </nav>

                    </div>

                    <div class="one-twelth column">

                <img alt="logo" class="header-logo" src="images/site/opaque-logo.png">

            </div>  <!-- end of one-twelth-->

            </div> <!-- end of row -->

            </header>

        </div> <!-- end of container -->



        <!-- Start of Main Content -->

        <div class="container">

            <div class="row">

                <h2>Login</h2>

            </div>

                <div class="row rowBanner">

                    <form id="loginForm">



                        <div class="field">

                            <div class="input">

                                <input name="email" class="inputField" id="email" type="text" placeholder="email*" required>

                            </div> <!-- end of input -->

                        </div> <!-- end of field -->



                        <div class="field">

                            <div class="input">

                                <input name="password" class="inputField" id="password" type="text" placeholder="Password*" required>

                            </div> <!-- end of input -->

                        </div> <!-- end of field -->



                    <div id="btn-login">

                        <button class="lgnbtn-submit">Login

                        </button>

                    </div>

                </form> <!-- end of login form -->



                </div> <!-- end of row1 -->

        </div><!-- end of container -->



        <footer>

        <div class="container">

                <div class="row">

                    <div class="one-third container">

                        <img class="footer-logo" src="images/site/opaque-logo.png" alt="logo">

                    </div> <!-- end of one-third -->



                    <div class="two-thirds container">

                        <p class="p-footer p-padding">Call Us: <a href="tel:07585765982">07585 762 982<a/></p>

                        <p class="p-footer p-padding">Email: <a href="mailto:tunde@conductivelifeservice.com">tunde@conductivelifeservice.com</a></p>

                    </div> <!-- end of two-thirds -->

                </div> <!-- end of row -->



                <div class="row">

                    <span class="social-media">

                        <img class="i-facebook" src="images/socialMedia/m-facebook.png" alt="facebook logo">

                        <img class="i-google" src="images/socialMedia/m-google.png" alt="facebook logo">

                        <img class="i-insta" src="images/socialMedia/m-insta.png" alt="facebook logo">

                        <img class="i-linkedin" src="images/socialMedia/m-linkedin.png" alt="facebook logo">

                        <img class="i-youtube" src="images/socialMedia/m-youtube.png" alt="facebook logo">

                    </span> <!-- end of social-media span -->

                </div>

            </div> <!-- end of container -->

    </footer> <!-- end of footer -->

    </body>

    </html>


CSS



*, *:before, *:after {

  box-sizing: inherit;

}

* {

  margin: 0;

  padding: 0;

  border: none;

}

html {

  box-sizing: border-box;

}



body {

  font-family: "Arial";

  font-size: 1.2em;

}



.container {

  margin: 0 auto;

  padding-top: 10px;

  max-width: 1000px;

}



.container-bottom-pad {

  margin: 0 auto;

  padding-top: 10px;

  max-width: 1000px;

  padding-bottom: 80px;

}



.outerContainer {

  background-color: #F1F1F1;

}



.row::before, .row::after {

  display: table;

  content: " ";

  clear: both;

}



.row {

  padding: 10px 0;

}



.one, .one-third,.two-thirds, .one-fourth {

  width: 100%;

}





#headerAndNav {

  background-color: rgba(135,196,66,0.60);

  margin-bottom: 10px;

}



header img {

  z-index: -2;

  position: absolute;

  width: 20%;

  margin: 0 auto;

}



.header-logo {

  position: relative;

  height: 100px;

  width: auto;

}



.testimonial-quote {

    font-size: 18px;

    padding-left: 14px;

    padding-right: 14px;

}



.testimonial-quote blockquote {

    background: none;

    color: gray;

    font-family: Georgia, serif;

    font-size: 1.1em;

    font-style: italic;

    line-height: 1.4 !important;

    position: relative;

    text-shadow: 0 1px white;

    z-index: 600;

}



.testimonial-quote blockquote * {

    box-sizing: border-box;

}



.testimonial-quote blockquote p {

    color: #75808a;

    line-height: 1.4 !important;

}



.testimonial-quote blockquote p:first-child:before {

    content: '201C';

    color: #4D512C;

    font-size: 3.5em;

    font-weight: 700;

    opacity: .8;

    position: absolute;

    top: -.53em;

    left: -.2em;

    text-shadow: none;

    z-index: -300;

}



.testimonial-quote cite {

    color: gray;

    display: block;

    font-size: .6em;

}



.testimonial-quote cite span {

    color: #5e5e5e;

    font-size: 1em;

    font-style: normal;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-shadow: 0 1px white;

}



.testimonial-quote {

    position: relative;

}



h2 {

  color: #f2f2f2;

  padding-left: 10px;

}



.flex-container {

  display: flex;

}



.spacer {

  height: 500px;

  width: 100%;

}



.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bot: 0;

  background: #3498db;

  margin: 0;

  padding: 0;

  border-bottom: 9px solid #2980b9;

}



.main-content {

  background: #ecf0f1;

  margin: 0;

  padding: 0;

}



.align {

  max-width: 60%;

  margin: 10px;

  float: right;

}



.spacer {

  width: 100%;

  height: 60px;

  clear: both;

}



.nav {

  display: none;

  padding: 0;

  overflow: hidden; /* Makes the sliding animation cleaner */

}



.nav-item {

  list-style-type: none;

  text-align: center;

  background: #87c442;

  display: block;

  margin: 12px 0;

  padding: 10px 20px;

  border-radius: 5px;

  box-shadow: 0px 6px #2c3e50;

}



.nav-link {

  text-decoration: none;

  color: #333;

}



.nav-item:active {

  box-shadow: none;

  transform: translate(0px, 6px);

  transition: transform .20s;

}



.hamburger span {

  display: block;

  width: 35px;

  height: 4px;

  background: #625948;

  margin: 5px 0px;

  padding: 0;

}



.hamburger:hover span {

  transition: background ease-in-out .25s;

  background: #87c442;

}



.hamburger:hover {

  cursor: pointer;

}



.headline {

  margin:m 15px 0px 0px 0px;

  font-size: 35px;

  width: 100%;

  float: left;

}



.image {

  float: right;

  width: 200px;

  height: auto;

  border-top: 15px solid #e67e22;

}



.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bot: 0;

  background: #3498db;

  margin: 0;

  padding: 0;

  border-bottom: 9px solid #2980b9;

}



.rowBanner, .rowBanner a{

  background: #2E4431;

  opacity: .8;

  color: white;

}



.rowEarly {

  background: #FF8732;

  opacity: .8;

}



#blog-row {

  background-color: #F2F1C1;

}



.main-content {

  background: #ecf0f1;

  margin: 0;

  padding: 0;

}



.align {

  max-width: 60%;

  margin: 10px;

  float: left;

}



.spacer {

  width: 100%;

  height: 60px;

  clear: both;

}



.nav {

  display: none;

  padding: 0;

  overflow: hidden; /* Makes the sliding animation cleaner */

}



.nav-item {

  list-style-type: none;

  text-align: center;

  background: #625948;

  display: block;

  margin: 12px 0;

  padding: 10px 20px;

  border-radius: 5px;

  box-shadow: 0px 6px #2E4431;

}



.nav-link {

  text-decoration: none;

  color: #F2F1C1;

}



.nav-item:active {

  box-shadow: none;

  transform: translate(0px, 6px);

  transition: transform .20s;

}



.hamburger span {

  display: block;

  width: 35px;

  height: 4px;

  background: #625948;

  margin: 5px 0px;

  padding: 0;

}



.hamburger:hover span {

  transition: background ease-in-out .25s;

  background: #87c442;

}



.hamburger:hover {

  cursor: pointer;

}



.headline {

  margin:m 15px 0px 0px 0px;

  font-size: 35px;

  width: 100%;

  float: left;

}



.image {

  float: right;

  width: 200px;

  height: auto;

  border-top: 15px solid #e67e22;

}



#embed-CANp {

  display: block;

  margin:  0 auto;

}



.more {

  padding-top: 10px;

}



.morecontent span {

    display: none;

}

.morelink {

    display: block;

}



.p-interventions {

  padding: 10px 13px 10px 13px;

  font-size: .88em;

  }



  .earlyInterventionImg {

    width: 250px;

    margin: 10px auto;

    display: block;

  }



#columnBlog {

  margin-top: 10px;

}



.blog-image {

  width: 90%;

  margin: 0 auto;

  display: block;

}



.blog-header {

  font-weight: 900;

  padding-top: 10px;

  padding-right: 13px;

  padding-bottom: 10px;

  padding-left: 13px;

  text-align: justify;

  color: #2E4431;

}



.blog-p {

  padding-top: 10px;

  padding-right: 13px;

  padding-bottom: 10px;

  padding-left: 13px;

  text-align: justify;

}



.circlePhoto {

  margin: 0 auto;

  display: block;





}



.circlePhotoOverlay{

  border-radius:50%;

  border: 1px solid #2E4431;

}



.p-a{

  padding-top: 5px;

  padding-bottom: 10px;

  padding-left: 13px;

  font-weight: 900;

  color: #2E4431;

}



footer {

  margin-top: 10px;

  text-align: center;

  background-color: rgba(98,89,72,0.60);

  position: relative;

  overflow: hidden;

}



.footer-logo {

  position: absolute;

  left: 10px;

  bottom: 12px;

  z-index: -3;

  width: 100px;

}



footer h3 {

  z-index: 1;

  color: #F2F1C1;

  position: absolute;

  top: 20%;

  left: 0;

  right: 0;

  font-size: 30px;

  width: 100%;

  height: 20px;

  padding: 0;

  margin: 0;

  margin-top: -13px; /* 1/2 height */

  text-align: center;

}



footer p:first-of-type{

  padding-top: 20px;

}



.p-footer{

  color: #FFF;

  font-size: .626em;

  text-align: left;

}



.p-padding {

  padding-left: 100px;

}



.social-media {

  float:right;

}



#loginForm, #signUp, #contactForm {

  display: block;

}



.formColour {

  background-color: #2E4431;

}



.field {

  margin: 0;

  display: block;

}



.input {

  font-size: 15px;

  margin-left: 30px;

  margin-right: 30px;

  margin-bottom: 15px;

  padding: 8px 12px;

  height: 42px;

  -webkit-appearance: none;

  border-radius: 6px;

  box-shadow: none;

}



.inputField {

  font-size: 17px;

  text-indent: 3px;

  padding: .4em;

  line-heigh: 1.4em;

  display: block;

  width: 100%;

}



#btn-login {

  margin-left: 30px;

  margin-right: 30px;

  display: block;

  padding: 0px 12px;

  padding-bottom: 8px;

}



.supbtn-submit, .lgnbtn-submit {

  font-size: 16px;

  display: block;

  background: #f6f6f6;

  border-color: #FFF;

  margin: .5em 0;

  padding: .7em 1em;

  font-size: 16px;

  display: block;

  position: relative;

  text-align: center;

  text-overflow: ellipsis;

  overflow: hidden;

  font-weight: bold;

  width: 100%;

}



.header-half {

  width: calc(100% / 2);

  float: left;

  position: relative;

}



.right {

  float:right;

}



@media only screen and (min-width: 800px) {

  #inputField {

    height: 100%;

  }



  .nav {

    margin-left: 10px;

  }



  .one {

    width: 100%;

  }

  .half {

    width: calc(100% / 2);

  }

  .one-third {

    width: calc(100% / 3);

  }

  .one-fourth {

    width: calc(100% / 4);

  }

  .two-thirds {

    width: calc(100% / 3 * 2);

  }



  .column {

    float: left;

  }



  .flex{

    display: flex;

    flex-direction: column-reverse;

  }



}/*End of screen & min-width:800px query*/


Javascript



$(document).ready(function() {

  $(".hamburger").click(function() {

    $(".nav").slideToggle("slow");

  });







});





javascript html css







share|improve this question


























    up vote
    0
    down vote

    favorite












    I think I've written myself in circles and am bodging elements to get them to work rather than understanding how the page and elements should work together. I've used contrasting colours in each of the containers so I can see where one starts and one finishes.



    Would you mind looking at my CSS and give me some advice on where I've gone wrong and how I could get a similar layout in a more efficient way? I feel what I have written contradicts itself, if that makes sense. 



        <!DOCTYPE html>
    
    <html>
    
    <head>
    
        <title>Conductive Life</title>
    

    
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    

    
        <!--Custom styles and fonts-->
    
    <link rel="stylesheet" type="text/css" href="styles/custom.css">
    
        <link href="https://fonts.googleapis.com/css?family=Calibri" rel="stylesheet">
    

    
        <!--JS Controllers-->
    
        <script language="JavaScript" type="text/javascript" src="controllers/menu.js"></script>
    
        <script language="JavaScript" type="text/javascript" src="controllers/login.js"></script>
    

    
    </head>
    
    <body>
    
        <div class="container" id="headerAndNav">
    
            <div class="row">
    
                <header>
    
                    <div class="eleven-twelths column">
    
                        <nav>
    
                    <span class="flex-container">
    
                            <div class="align">
    
                                <div class="hamburger">
    
                                    <span></span>
    
                                    <span></span>
    
                                    <span></span>
    
                                </div>
    
                                <ul class="nav">
    
                                    <li class="nav-item">
    
                                        <a class="nav-link" href="index.html">Home</a>
    
                                    </li>
    
                                    <li class="nav-item">
    
                                        <a class="nav-link" href="login.html">Login</a>
    
                                    </li>
    
                                    <li class="nav-item">
    
                                        <a class="nav-link" href="signup.html">Signup</a>
    
                                    </li>
    
                                    <li class="nav-item">
    
                                        <a class="nav-link" href="successes.html">Successes</a>
    
                                    </li>
    
                                    <li class="nav-item">
    
                                    <a class="nav-link" href="prices.html">Prices</a>
    
                                    </li>
    
                                    <li class="nav-item">
    
                                        <a class="nav-link" href="about.html">About</a>
    
                                    </li>
    
                                    <li class="nav-item">
    
                                        <a class="nav-link" href="contact.html">Contact</a>
    
                                    </li>
    
                                </ul>
    
                            </div>
    
                        </span>
    
                </nav>
    
                    </div>
    
                    <div class="one-twelth column">
    
                <img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
    
            </div>  <!-- end of one-twelth-->
    
            </div> <!-- end of row -->
    
            </header>
    
        </div> <!-- end of container -->
    

    
        <!-- Start of Main Content -->
    
        <div class="container">
    
            <div class="row">
    
                <h2>Login</h2>
    
            </div>
    
                <div class="row rowBanner">
    
                    <form id="loginForm">
    

    
                        <div class="field">
    
                            <div class="input">
    
                                <input name="email" class="inputField" id="email" type="text" placeholder="email*" required>
    
                            </div> <!-- end of input -->
    
                        </div> <!-- end of field -->
    

    
                        <div class="field">
    
                            <div class="input">
    
                                <input name="password" class="inputField" id="password" type="text" placeholder="Password*" required>
    
                            </div> <!-- end of input -->
    
                        </div> <!-- end of field -->
    

    
                    <div id="btn-login">
    
                        <button class="lgnbtn-submit">Login
    
                        </button>
    
                    </div>
    
                </form> <!-- end of login form -->
    

    
                </div> <!-- end of row1 -->
    
        </div><!-- end of container -->
    

    
        <footer>
    
        <div class="container">
    
                <div class="row">
    
                    <div class="one-third container">
    
                        <img class="footer-logo" src="images/site/opaque-logo.png" alt="logo">
    
                    </div> <!-- end of one-third -->
    

    
                    <div class="two-thirds container">
    
                        <p class="p-footer p-padding">Call Us: <a href="tel:07585765982">07585 762 982<a/></p>
    
                        <p class="p-footer p-padding">Email: <a href="mailto:tunde@conductivelifeservice.com">tunde@conductivelifeservice.com</a></p>
    
                    </div> <!-- end of two-thirds -->
    
                </div> <!-- end of row -->
    

    
                <div class="row">
    
                    <span class="social-media">
    
                        <img class="i-facebook" src="images/socialMedia/m-facebook.png" alt="facebook logo">
    
                        <img class="i-google" src="images/socialMedia/m-google.png" alt="facebook logo">
    
                        <img class="i-insta" src="images/socialMedia/m-insta.png" alt="facebook logo">
    
                        <img class="i-linkedin" src="images/socialMedia/m-linkedin.png" alt="facebook logo">
    
                        <img class="i-youtube" src="images/socialMedia/m-youtube.png" alt="facebook logo">
    
                    </span> <!-- end of social-media span -->
    
                </div>
    
            </div> <!-- end of container -->
    
    </footer> <!-- end of footer -->
    
    </body>
    
    </html>


    CSS



    *, *:before, *:after {
    
  box-sizing: inherit;
    
}
    
* {
    
  margin: 0;
    
  padding: 0;
    
  border: none;
    
}
    
html {
    
  box-sizing: border-box;
    
}
    

    
body {
    
  font-family: "Arial";
    
  font-size: 1.2em;
    
}
    

    
.container {
    
  margin: 0 auto;
    
  padding-top: 10px;
    
  max-width: 1000px;
    
}
    

    
.container-bottom-pad {
    
  margin: 0 auto;
    
  padding-top: 10px;
    
  max-width: 1000px;
    
  padding-bottom: 80px;
    
}
    

    
.outerContainer {
    
  background-color: #F1F1F1;
    
}
    

    
.row::before, .row::after {
    
  display: table;
    
  content: " ";
    
  clear: both;
    
}
    

    
.row {
    
  padding: 10px 0;
    
}
    

    
.one, .one-third,.two-thirds, .one-fourth {
    
  width: 100%;
    
}
    

    

    
#headerAndNav {
    
  background-color: rgba(135,196,66,0.60);
    
  margin-bottom: 10px;
    
}
    

    
header img {
    
  z-index: -2;
    
  position: absolute;
    
  width: 20%;
    
  margin: 0 auto;
    
}
    

    
.header-logo {
    
  position: relative;
    
  height: 100px;
    
  width: auto;
    
}
    

    
.testimonial-quote {
    
    font-size: 18px;
    
    padding-left: 14px;
    
    padding-right: 14px;
    
}
    

    
.testimonial-quote blockquote {
    
    background: none;
    
    color: gray;
    
    font-family: Georgia, serif;
    
    font-size: 1.1em;
    
    font-style: italic;
    
    line-height: 1.4 !important;
    
    position: relative;
    
    text-shadow: 0 1px white;
    
    z-index: 600;
    
}
    

    
.testimonial-quote blockquote * {
    
    box-sizing: border-box;
    
}
    

    
.testimonial-quote blockquote p {
    
    color: #75808a;
    
    line-height: 1.4 !important;
    
}
    

    
.testimonial-quote blockquote p:first-child:before {
    
    content: '201C';
    
    color: #4D512C;
    
    font-size: 3.5em;
    
    font-weight: 700;
    
    opacity: .8;
    
    position: absolute;
    
    top: -.53em;
    
    left: -.2em;
    
    text-shadow: none;
    
    z-index: -300;
    
}
    

    
.testimonial-quote cite {
    
    color: gray;
    
    display: block;
    
    font-size: .6em;
    
}
    

    
.testimonial-quote cite span {
    
    color: #5e5e5e;
    
    font-size: 1em;
    
    font-style: normal;
    
    font-weight: 700;
    
    letter-spacing: 1px;
    
    text-transform: uppercase;
    
    text-shadow: 0 1px white;
    
}
    

    
.testimonial-quote {
    
    position: relative;
    
}
    

    
h2 {
    
  color: #f2f2f2;
    
  padding-left: 10px;
    
}
    

    
.flex-container {
    
  display: flex;
    
}
    

    
.spacer {
    
  height: 500px;
    
  width: 100%;
    
}
    

    
.header {
    
  position: fixed;
    
  top: 0;
    
  left: 0;
    
  right: 0;
    
  bot: 0;
    
  background: #3498db;
    
  margin: 0;
    
  padding: 0;
    
  border-bottom: 9px solid #2980b9;
    
}
    

    
.main-content {
    
  background: #ecf0f1;
    
  margin: 0;
    
  padding: 0;
    
}
    

    
.align {
    
  max-width: 60%;
    
  margin: 10px;
    
  float: right;
    
}
    

    
.spacer {
    
  width: 100%;
    
  height: 60px;
    
  clear: both;
    
}
    

    
.nav {
    
  display: none;
    
  padding: 0;
    
  overflow: hidden; /* Makes the sliding animation cleaner */
    
}
    

    
.nav-item {
    
  list-style-type: none;
    
  text-align: center;
    
  background: #87c442;
    
  display: block;
    
  margin: 12px 0;
    
  padding: 10px 20px;
    
  border-radius: 5px;
    
  box-shadow: 0px 6px #2c3e50;
    
}
    

    
.nav-link {
    
  text-decoration: none;
    
  color: #333;
    
}
    

    
.nav-item:active {
    
  box-shadow: none;
    
  transform: translate(0px, 6px);
    
  transition: transform .20s;
    
}
    

    
.hamburger span {
    
  display: block;
    
  width: 35px;
    
  height: 4px;
    
  background: #625948;
    
  margin: 5px 0px;
    
  padding: 0;
    
}
    

    
.hamburger:hover span {
    
  transition: background ease-in-out .25s;
    
  background: #87c442;
    
}
    

    
.hamburger:hover {
    
  cursor: pointer;
    
}
    

    
.headline {
    
  margin:m 15px 0px 0px 0px;
    
  font-size: 35px;
    
  width: 100%;
    
  float: left;
    
}
    

    
.image {
    
  float: right;
    
  width: 200px;
    
  height: auto;
    
  border-top: 15px solid #e67e22;
    
}
    

    
.header {
    
  position: fixed;
    
  top: 0;
    
  left: 0;
    
  right: 0;
    
  bot: 0;
    
  background: #3498db;
    
  margin: 0;
    
  padding: 0;
    
  border-bottom: 9px solid #2980b9;
    
}
    

    
.rowBanner, .rowBanner a{
    
  background: #2E4431;
    
  opacity: .8;
    
  color: white;
    
}
    

    
.rowEarly {
    
  background: #FF8732;
    
  opacity: .8;
    
}
    

    
#blog-row {
    
  background-color: #F2F1C1;
    
}
    

    
.main-content {
    
  background: #ecf0f1;
    
  margin: 0;
    
  padding: 0;
    
}
    

    
.align {
    
  max-width: 60%;
    
  margin: 10px;
    
  float: left;
    
}
    

    
.spacer {
    
  width: 100%;
    
  height: 60px;
    
  clear: both;
    
}
    

    
.nav {
    
  display: none;
    
  padding: 0;
    
  overflow: hidden; /* Makes the sliding animation cleaner */
    
}
    

    
.nav-item {
    
  list-style-type: none;
    
  text-align: center;
    
  background: #625948;
    
  display: block;
    
  margin: 12px 0;
    
  padding: 10px 20px;
    
  border-radius: 5px;
    
  box-shadow: 0px 6px #2E4431;
    
}
    

    
.nav-link {
    
  text-decoration: none;
    
  color: #F2F1C1;
    
}
    

    
.nav-item:active {
    
  box-shadow: none;
    
  transform: translate(0px, 6px);
    
  transition: transform .20s;
    
}
    

    
.hamburger span {
    
  display: block;
    
  width: 35px;
    
  height: 4px;
    
  background: #625948;
    
  margin: 5px 0px;
    
  padding: 0;
    
}
    

    
.hamburger:hover span {
    
  transition: background ease-in-out .25s;
    
  background: #87c442;
    
}
    

    
.hamburger:hover {
    
  cursor: pointer;
    
}
    

    
.headline {
    
  margin:m 15px 0px 0px 0px;
    
  font-size: 35px;
    
  width: 100%;
    
  float: left;
    
}
    

    
.image {
    
  float: right;
    
  width: 200px;
    
  height: auto;
    
  border-top: 15px solid #e67e22;
    
}
    

    
#embed-CANp {
    
  display: block;
    
  margin:  0 auto;
    
}
    

    
.more {
    
  padding-top: 10px;
    
}
    

    
.morecontent span {
    
    display: none;
    
}
    
.morelink {
    
    display: block;
    
}
    

    
.p-interventions {
    
  padding: 10px 13px 10px 13px;
    
  font-size: .88em;
    
  }
    

    
  .earlyInterventionImg {
    
    width: 250px;
    
    margin: 10px auto;
    
    display: block;
    
  }
    

    
#columnBlog {
    
  margin-top: 10px;
    
}
    

    
.blog-image {
    
  width: 90%;
    
  margin: 0 auto;
    
  display: block;
    
}
    

    
.blog-header {
    
  font-weight: 900;
    
  padding-top: 10px;
    
  padding-right: 13px;
    
  padding-bottom: 10px;
    
  padding-left: 13px;
    
  text-align: justify;
    
  color: #2E4431;
    
}
    

    
.blog-p {
    
  padding-top: 10px;
    
  padding-right: 13px;
    
  padding-bottom: 10px;
    
  padding-left: 13px;
    
  text-align: justify;
    
}
    

    
.circlePhoto {
    
  margin: 0 auto;
    
  display: block;
    

    

    
}
    

    
.circlePhotoOverlay{
    
  border-radius:50%;
    
  border: 1px solid #2E4431;
    
}
    

    
.p-a{
    
  padding-top: 5px;
    
  padding-bottom: 10px;
    
  padding-left: 13px;
    
  font-weight: 900;
    
  color: #2E4431;
    
}
    

    
footer {
    
  margin-top: 10px;
    
  text-align: center;
    
  background-color: rgba(98,89,72,0.60);
    
  position: relative;
    
  overflow: hidden;
    
}
    

    
.footer-logo {
    
  position: absolute;
    
  left: 10px;
    
  bottom: 12px;
    
  z-index: -3;
    
  width: 100px;
    
}
    

    
footer h3 {
    
  z-index: 1;
    
  color: #F2F1C1;
    
  position: absolute;
    
  top: 20%;
    
  left: 0;
    
  right: 0;
    
  font-size: 30px;
    
  width: 100%;
    
  height: 20px;
    
  padding: 0;
    
  margin: 0;
    
  margin-top: -13px; /* 1/2 height */
    
  text-align: center;
    
}
    

    
footer p:first-of-type{
    
  padding-top: 20px;
    
}
    

    
.p-footer{
    
  color: #FFF;
    
  font-size: .626em;
    
  text-align: left;
    
}
    

    
.p-padding {
    
  padding-left: 100px;
    
}
    

    
.social-media {
    
  float:right;
    
}
    

    
#loginForm, #signUp, #contactForm {
    
  display: block;
    
}
    

    
.formColour {
    
  background-color: #2E4431;
    
}
    

    
.field {
    
  margin: 0;
    
  display: block;
    
}
    

    
.input {
    
  font-size: 15px;
    
  margin-left: 30px;
    
  margin-right: 30px;
    
  margin-bottom: 15px;
    
  padding: 8px 12px;
    
  height: 42px;
    
  -webkit-appearance: none;
    
  border-radius: 6px;
    
  box-shadow: none;
    
}
    

    
.inputField {
    
  font-size: 17px;
    
  text-indent: 3px;
    
  padding: .4em;
    
  line-heigh: 1.4em;
    
  display: block;
    
  width: 100%;
    
}
    

    
#btn-login {
    
  margin-left: 30px;
    
  margin-right: 30px;
    
  display: block;
    
  padding: 0px 12px;
    
  padding-bottom: 8px;
    
}
    

    
.supbtn-submit, .lgnbtn-submit {
    
  font-size: 16px;
    
  display: block;
    
  background: #f6f6f6;
    
  border-color: #FFF;
    
  margin: .5em 0;
    
  padding: .7em 1em;
    
  font-size: 16px;
    
  display: block;
    
  position: relative;
    
  text-align: center;
    
  text-overflow: ellipsis;
    
  overflow: hidden;
    
  font-weight: bold;
    
  width: 100%;
    
}
    

    
.header-half {
    
  width: calc(100% / 2);
    
  float: left;
    
  position: relative;
    
}
    

    
.right {
    
  float:right;
    
}
    

    
@media only screen and (min-width: 800px) {
    
  #inputField {
    
    height: 100%;
    
  }
    

    
  .nav {
    
    margin-left: 10px;
    
  }
    

    
  .one {
    
    width: 100%;
    
  }
    
  .half {
    
    width: calc(100% / 2);
    
  }
    
  .one-third {
    
    width: calc(100% / 3);
    
  }
    
  .one-fourth {
    
    width: calc(100% / 4);
    
  }
    
  .two-thirds {
    
    width: calc(100% / 3 * 2);
    
  }
    

    
  .column {
    
    float: left;
    
  }
    

    
  .flex{
    
    display: flex;
    
    flex-direction: column-reverse;
    
  }
    

    
}/*End of screen & min-width:800px query*/


    Javascript



    $(document).ready(function() {
    
  $(".hamburger").click(function() {
    
    $(".nav").slideToggle("slow");
    
  });
    

    

    

    
});





    javascript html css







    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I think I've written myself in circles and am bodging elements to get them to work rather than understanding how the page and elements should work together. I've used contrasting colours in each of the containers so I can see where one starts and one finishes.



      Would you mind looking at my CSS and give me some advice on where I've gone wrong and how I could get a similar layout in a more efficient way? I feel what I have written contradicts itself, if that makes sense. 



          <!DOCTYPE html>
      
    <html>
      
    <head>
      
        <title>Conductive Life</title>
      

      
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
        <!--Custom styles and fonts-->
      
    <link rel="stylesheet" type="text/css" href="styles/custom.css">
      
        <link href="https://fonts.googleapis.com/css?family=Calibri" rel="stylesheet">
      

      
        <!--JS Controllers-->
      
        <script language="JavaScript" type="text/javascript" src="controllers/menu.js"></script>
      
        <script language="JavaScript" type="text/javascript" src="controllers/login.js"></script>
      

      
    </head>
      
    <body>
      
        <div class="container" id="headerAndNav">
      
            <div class="row">
      
                <header>
      
                    <div class="eleven-twelths column">
      
                        <nav>
      
                    <span class="flex-container">
      
                            <div class="align">
      
                                <div class="hamburger">
      
                                    <span></span>
      
                                    <span></span>
      
                                    <span></span>
      
                                </div>
      
                                <ul class="nav">
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="index.html">Home</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="login.html">Login</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="signup.html">Signup</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="successes.html">Successes</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                    <a class="nav-link" href="prices.html">Prices</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="about.html">About</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="contact.html">Contact</a>
      
                                    </li>
      
                                </ul>
      
                            </div>
      
                        </span>
      
                </nav>
      
                    </div>
      
                    <div class="one-twelth column">
      
                <img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
      
            </div>  <!-- end of one-twelth-->
      
            </div> <!-- end of row -->
      
            </header>
      
        </div> <!-- end of container -->
      

      
        <!-- Start of Main Content -->
      
        <div class="container">
      
            <div class="row">
      
                <h2>Login</h2>
      
            </div>
      
                <div class="row rowBanner">
      
                    <form id="loginForm">
      

      
                        <div class="field">
      
                            <div class="input">
      
                                <input name="email" class="inputField" id="email" type="text" placeholder="email*" required>
      
                            </div> <!-- end of input -->
      
                        </div> <!-- end of field -->
      

      
                        <div class="field">
      
                            <div class="input">
      
                                <input name="password" class="inputField" id="password" type="text" placeholder="Password*" required>
      
                            </div> <!-- end of input -->
      
                        </div> <!-- end of field -->
      

      
                    <div id="btn-login">
      
                        <button class="lgnbtn-submit">Login
      
                        </button>
      
                    </div>
      
                </form> <!-- end of login form -->
      

      
                </div> <!-- end of row1 -->
      
        </div><!-- end of container -->
      

      
        <footer>
      
        <div class="container">
      
                <div class="row">
      
                    <div class="one-third container">
      
                        <img class="footer-logo" src="images/site/opaque-logo.png" alt="logo">
      
                    </div> <!-- end of one-third -->
      

      
                    <div class="two-thirds container">
      
                        <p class="p-footer p-padding">Call Us: <a href="tel:07585765982">07585 762 982<a/></p>
      
                        <p class="p-footer p-padding">Email: <a href="mailto:tunde@conductivelifeservice.com">tunde@conductivelifeservice.com</a></p>
      
                    </div> <!-- end of two-thirds -->
      
                </div> <!-- end of row -->
      

      
                <div class="row">
      
                    <span class="social-media">
      
                        <img class="i-facebook" src="images/socialMedia/m-facebook.png" alt="facebook logo">
      
                        <img class="i-google" src="images/socialMedia/m-google.png" alt="facebook logo">
      
                        <img class="i-insta" src="images/socialMedia/m-insta.png" alt="facebook logo">
      
                        <img class="i-linkedin" src="images/socialMedia/m-linkedin.png" alt="facebook logo">
      
                        <img class="i-youtube" src="images/socialMedia/m-youtube.png" alt="facebook logo">
      
                    </span> <!-- end of social-media span -->
      
                </div>
      
            </div> <!-- end of container -->
      
    </footer> <!-- end of footer -->
      
    </body>
      
    </html>


      CSS



      *, *:before, *:after {
      
  box-sizing: inherit;
      
}
      
* {
      
  margin: 0;
      
  padding: 0;
      
  border: none;
      
}
      
html {
      
  box-sizing: border-box;
      
}
      

      
body {
      
  font-family: "Arial";
      
  font-size: 1.2em;
      
}
      

      
.container {
      
  margin: 0 auto;
      
  padding-top: 10px;
      
  max-width: 1000px;
      
}
      

      
.container-bottom-pad {
      
  margin: 0 auto;
      
  padding-top: 10px;
      
  max-width: 1000px;
      
  padding-bottom: 80px;
      
}
      

      
.outerContainer {
      
  background-color: #F1F1F1;
      
}
      

      
.row::before, .row::after {
      
  display: table;
      
  content: " ";
      
  clear: both;
      
}
      

      
.row {
      
  padding: 10px 0;
      
}
      

      
.one, .one-third,.two-thirds, .one-fourth {
      
  width: 100%;
      
}
      

      

      
#headerAndNav {
      
  background-color: rgba(135,196,66,0.60);
      
  margin-bottom: 10px;
      
}
      

      
header img {
      
  z-index: -2;
      
  position: absolute;
      
  width: 20%;
      
  margin: 0 auto;
      
}
      

      
.header-logo {
      
  position: relative;
      
  height: 100px;
      
  width: auto;
      
}
      

      
.testimonial-quote {
      
    font-size: 18px;
      
    padding-left: 14px;
      
    padding-right: 14px;
      
}
      

      
.testimonial-quote blockquote {
      
    background: none;
      
    color: gray;
      
    font-family: Georgia, serif;
      
    font-size: 1.1em;
      
    font-style: italic;
      
    line-height: 1.4 !important;
      
    position: relative;
      
    text-shadow: 0 1px white;
      
    z-index: 600;
      
}
      

      
.testimonial-quote blockquote * {
      
    box-sizing: border-box;
      
}
      

      
.testimonial-quote blockquote p {
      
    color: #75808a;
      
    line-height: 1.4 !important;
      
}
      

      
.testimonial-quote blockquote p:first-child:before {
      
    content: '201C';
      
    color: #4D512C;
      
    font-size: 3.5em;
      
    font-weight: 700;
      
    opacity: .8;
      
    position: absolute;
      
    top: -.53em;
      
    left: -.2em;
      
    text-shadow: none;
      
    z-index: -300;
      
}
      

      
.testimonial-quote cite {
      
    color: gray;
      
    display: block;
      
    font-size: .6em;
      
}
      

      
.testimonial-quote cite span {
      
    color: #5e5e5e;
      
    font-size: 1em;
      
    font-style: normal;
      
    font-weight: 700;
      
    letter-spacing: 1px;
      
    text-transform: uppercase;
      
    text-shadow: 0 1px white;
      
}
      

      
.testimonial-quote {
      
    position: relative;
      
}
      

      
h2 {
      
  color: #f2f2f2;
      
  padding-left: 10px;
      
}
      

      
.flex-container {
      
  display: flex;
      
}
      

      
.spacer {
      
  height: 500px;
      
  width: 100%;
      
}
      

      
.header {
      
  position: fixed;
      
  top: 0;
      
  left: 0;
      
  right: 0;
      
  bot: 0;
      
  background: #3498db;
      
  margin: 0;
      
  padding: 0;
      
  border-bottom: 9px solid #2980b9;
      
}
      

      
.main-content {
      
  background: #ecf0f1;
      
  margin: 0;
      
  padding: 0;
      
}
      

      
.align {
      
  max-width: 60%;
      
  margin: 10px;
      
  float: right;
      
}
      

      
.spacer {
      
  width: 100%;
      
  height: 60px;
      
  clear: both;
      
}
      

      
.nav {
      
  display: none;
      
  padding: 0;
      
  overflow: hidden; /* Makes the sliding animation cleaner */
      
}
      

      
.nav-item {
      
  list-style-type: none;
      
  text-align: center;
      
  background: #87c442;
      
  display: block;
      
  margin: 12px 0;
      
  padding: 10px 20px;
      
  border-radius: 5px;
      
  box-shadow: 0px 6px #2c3e50;
      
}
      

      
.nav-link {
      
  text-decoration: none;
      
  color: #333;
      
}
      

      
.nav-item:active {
      
  box-shadow: none;
      
  transform: translate(0px, 6px);
      
  transition: transform .20s;
      
}
      

      
.hamburger span {
      
  display: block;
      
  width: 35px;
      
  height: 4px;
      
  background: #625948;
      
  margin: 5px 0px;
      
  padding: 0;
      
}
      

      
.hamburger:hover span {
      
  transition: background ease-in-out .25s;
      
  background: #87c442;
      
}
      

      
.hamburger:hover {
      
  cursor: pointer;
      
}
      

      
.headline {
      
  margin:m 15px 0px 0px 0px;
      
  font-size: 35px;
      
  width: 100%;
      
  float: left;
      
}
      

      
.image {
      
  float: right;
      
  width: 200px;
      
  height: auto;
      
  border-top: 15px solid #e67e22;
      
}
      

      
.header {
      
  position: fixed;
      
  top: 0;
      
  left: 0;
      
  right: 0;
      
  bot: 0;
      
  background: #3498db;
      
  margin: 0;
      
  padding: 0;
      
  border-bottom: 9px solid #2980b9;
      
}
      

      
.rowBanner, .rowBanner a{
      
  background: #2E4431;
      
  opacity: .8;
      
  color: white;
      
}
      

      
.rowEarly {
      
  background: #FF8732;
      
  opacity: .8;
      
}
      

      
#blog-row {
      
  background-color: #F2F1C1;
      
}
      

      
.main-content {
      
  background: #ecf0f1;
      
  margin: 0;
      
  padding: 0;
      
}
      

      
.align {
      
  max-width: 60%;
      
  margin: 10px;
      
  float: left;
      
}
      

      
.spacer {
      
  width: 100%;
      
  height: 60px;
      
  clear: both;
      
}
      

      
.nav {
      
  display: none;
      
  padding: 0;
      
  overflow: hidden; /* Makes the sliding animation cleaner */
      
}
      

      
.nav-item {
      
  list-style-type: none;
      
  text-align: center;
      
  background: #625948;
      
  display: block;
      
  margin: 12px 0;
      
  padding: 10px 20px;
      
  border-radius: 5px;
      
  box-shadow: 0px 6px #2E4431;
      
}
      

      
.nav-link {
      
  text-decoration: none;
      
  color: #F2F1C1;
      
}
      

      
.nav-item:active {
      
  box-shadow: none;
      
  transform: translate(0px, 6px);
      
  transition: transform .20s;
      
}
      

      
.hamburger span {
      
  display: block;
      
  width: 35px;
      
  height: 4px;
      
  background: #625948;
      
  margin: 5px 0px;
      
  padding: 0;
      
}
      

      
.hamburger:hover span {
      
  transition: background ease-in-out .25s;
      
  background: #87c442;
      
}
      

      
.hamburger:hover {
      
  cursor: pointer;
      
}
      

      
.headline {
      
  margin:m 15px 0px 0px 0px;
      
  font-size: 35px;
      
  width: 100%;
      
  float: left;
      
}
      

      
.image {
      
  float: right;
      
  width: 200px;
      
  height: auto;
      
  border-top: 15px solid #e67e22;
      
}
      

      
#embed-CANp {
      
  display: block;
      
  margin:  0 auto;
      
}
      

      
.more {
      
  padding-top: 10px;
      
}
      

      
.morecontent span {
      
    display: none;
      
}
      
.morelink {
      
    display: block;
      
}
      

      
.p-interventions {
      
  padding: 10px 13px 10px 13px;
      
  font-size: .88em;
      
  }
      

      
  .earlyInterventionImg {
      
    width: 250px;
      
    margin: 10px auto;
      
    display: block;
      
  }
      

      
#columnBlog {
      
  margin-top: 10px;
      
}
      

      
.blog-image {
      
  width: 90%;
      
  margin: 0 auto;
      
  display: block;
      
}
      

      
.blog-header {
      
  font-weight: 900;
      
  padding-top: 10px;
      
  padding-right: 13px;
      
  padding-bottom: 10px;
      
  padding-left: 13px;
      
  text-align: justify;
      
  color: #2E4431;
      
}
      

      
.blog-p {
      
  padding-top: 10px;
      
  padding-right: 13px;
      
  padding-bottom: 10px;
      
  padding-left: 13px;
      
  text-align: justify;
      
}
      

      
.circlePhoto {
      
  margin: 0 auto;
      
  display: block;
      

      

      
}
      

      
.circlePhotoOverlay{
      
  border-radius:50%;
      
  border: 1px solid #2E4431;
      
}
      

      
.p-a{
      
  padding-top: 5px;
      
  padding-bottom: 10px;
      
  padding-left: 13px;
      
  font-weight: 900;
      
  color: #2E4431;
      
}
      

      
footer {
      
  margin-top: 10px;
      
  text-align: center;
      
  background-color: rgba(98,89,72,0.60);
      
  position: relative;
      
  overflow: hidden;
      
}
      

      
.footer-logo {
      
  position: absolute;
      
  left: 10px;
      
  bottom: 12px;
      
  z-index: -3;
      
  width: 100px;
      
}
      

      
footer h3 {
      
  z-index: 1;
      
  color: #F2F1C1;
      
  position: absolute;
      
  top: 20%;
      
  left: 0;
      
  right: 0;
      
  font-size: 30px;
      
  width: 100%;
      
  height: 20px;
      
  padding: 0;
      
  margin: 0;
      
  margin-top: -13px; /* 1/2 height */
      
  text-align: center;
      
}
      

      
footer p:first-of-type{
      
  padding-top: 20px;
      
}
      

      
.p-footer{
      
  color: #FFF;
      
  font-size: .626em;
      
  text-align: left;
      
}
      

      
.p-padding {
      
  padding-left: 100px;
      
}
      

      
.social-media {
      
  float:right;
      
}
      

      
#loginForm, #signUp, #contactForm {
      
  display: block;
      
}
      

      
.formColour {
      
  background-color: #2E4431;
      
}
      

      
.field {
      
  margin: 0;
      
  display: block;
      
}
      

      
.input {
      
  font-size: 15px;
      
  margin-left: 30px;
      
  margin-right: 30px;
      
  margin-bottom: 15px;
      
  padding: 8px 12px;
      
  height: 42px;
      
  -webkit-appearance: none;
      
  border-radius: 6px;
      
  box-shadow: none;
      
}
      

      
.inputField {
      
  font-size: 17px;
      
  text-indent: 3px;
      
  padding: .4em;
      
  line-heigh: 1.4em;
      
  display: block;
      
  width: 100%;
      
}
      

      
#btn-login {
      
  margin-left: 30px;
      
  margin-right: 30px;
      
  display: block;
      
  padding: 0px 12px;
      
  padding-bottom: 8px;
      
}
      

      
.supbtn-submit, .lgnbtn-submit {
      
  font-size: 16px;
      
  display: block;
      
  background: #f6f6f6;
      
  border-color: #FFF;
      
  margin: .5em 0;
      
  padding: .7em 1em;
      
  font-size: 16px;
      
  display: block;
      
  position: relative;
      
  text-align: center;
      
  text-overflow: ellipsis;
      
  overflow: hidden;
      
  font-weight: bold;
      
  width: 100%;
      
}
      

      
.header-half {
      
  width: calc(100% / 2);
      
  float: left;
      
  position: relative;
      
}
      

      
.right {
      
  float:right;
      
}
      

      
@media only screen and (min-width: 800px) {
      
  #inputField {
      
    height: 100%;
      
  }
      

      
  .nav {
      
    margin-left: 10px;
      
  }
      

      
  .one {
      
    width: 100%;
      
  }
      
  .half {
      
    width: calc(100% / 2);
      
  }
      
  .one-third {
      
    width: calc(100% / 3);
      
  }
      
  .one-fourth {
      
    width: calc(100% / 4);
      
  }
      
  .two-thirds {
      
    width: calc(100% / 3 * 2);
      
  }
      

      
  .column {
      
    float: left;
      
  }
      

      
  .flex{
      
    display: flex;
      
    flex-direction: column-reverse;
      
  }
      

      
}/*End of screen & min-width:800px query*/


      Javascript



      $(document).ready(function() {
      
  $(".hamburger").click(function() {
      
    $(".nav").slideToggle("slow");
      
  });
      

      

      

      
});





      javascript html css







      share|improve this question













      I think I've written myself in circles and am bodging elements to get them to work rather than understanding how the page and elements should work together. I've used contrasting colours in each of the containers so I can see where one starts and one finishes.



      Would you mind looking at my CSS and give me some advice on where I've gone wrong and how I could get a similar layout in a more efficient way? I feel what I have written contradicts itself, if that makes sense. 



          <!DOCTYPE html>
      
    <html>
      
    <head>
      
        <title>Conductive Life</title>
      

      
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      
        <!--Custom styles and fonts-->
      
    <link rel="stylesheet" type="text/css" href="styles/custom.css">
      
        <link href="https://fonts.googleapis.com/css?family=Calibri" rel="stylesheet">
      

      
        <!--JS Controllers-->
      
        <script language="JavaScript" type="text/javascript" src="controllers/menu.js"></script>
      
        <script language="JavaScript" type="text/javascript" src="controllers/login.js"></script>
      

      
    </head>
      
    <body>
      
        <div class="container" id="headerAndNav">
      
            <div class="row">
      
                <header>
      
                    <div class="eleven-twelths column">
      
                        <nav>
      
                    <span class="flex-container">
      
                            <div class="align">
      
                                <div class="hamburger">
      
                                    <span></span>
      
                                    <span></span>
      
                                    <span></span>
      
                                </div>
      
                                <ul class="nav">
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="index.html">Home</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="login.html">Login</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="signup.html">Signup</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="successes.html">Successes</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                    <a class="nav-link" href="prices.html">Prices</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="about.html">About</a>
      
                                    </li>
      
                                    <li class="nav-item">
      
                                        <a class="nav-link" href="contact.html">Contact</a>
      
                                    </li>
      
                                </ul>
      
                            </div>
      
                        </span>
      
                </nav>
      
                    </div>
      
                    <div class="one-twelth column">
      
                <img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
      
            </div>  <!-- end of one-twelth-->
      
            </div> <!-- end of row -->
      
            </header>
      
        </div> <!-- end of container -->
      

      
        <!-- Start of Main Content -->
      
        <div class="container">
      
            <div class="row">
      
                <h2>Login</h2>
      
            </div>
      
                <div class="row rowBanner">
      
                    <form id="loginForm">
      

      
                        <div class="field">
      
                            <div class="input">
      
                                <input name="email" class="inputField" id="email" type="text" placeholder="email*" required>
      
                            </div> <!-- end of input -->
      
                        </div> <!-- end of field -->
      

      
                        <div class="field">
      
                            <div class="input">
      
                                <input name="password" class="inputField" id="password" type="text" placeholder="Password*" required>
      
                            </div> <!-- end of input -->
      
                        </div> <!-- end of field -->
      

      
                    <div id="btn-login">
      
                        <button class="lgnbtn-submit">Login
      
                        </button>
      
                    </div>
      
                </form> <!-- end of login form -->
      

      
                </div> <!-- end of row1 -->
      
        </div><!-- end of container -->
      

      
        <footer>
      
        <div class="container">
      
                <div class="row">
      
                    <div class="one-third container">
      
                        <img class="footer-logo" src="images/site/opaque-logo.png" alt="logo">
      
                    </div> <!-- end of one-third -->
      

      
                    <div class="two-thirds container">
      
                        <p class="p-footer p-padding">Call Us: <a href="tel:07585765982">07585 762 982<a/></p>
      
                        <p class="p-footer p-padding">Email: <a href="mailto:tunde@conductivelifeservice.com">tunde@conductivelifeservice.com</a></p>
      
                    </div> <!-- end of two-thirds -->
      
                </div> <!-- end of row -->
      

      
                <div class="row">
      
                    <span class="social-media">
      
                        <img class="i-facebook" src="images/socialMedia/m-facebook.png" alt="facebook logo">
      
                        <img class="i-google" src="images/socialMedia/m-google.png" alt="facebook logo">
      
                        <img class="i-insta" src="images/socialMedia/m-insta.png" alt="facebook logo">
      
                        <img class="i-linkedin" src="images/socialMedia/m-linkedin.png" alt="facebook logo">
      
                        <img class="i-youtube" src="images/socialMedia/m-youtube.png" alt="facebook logo">
      
                    </span> <!-- end of social-media span -->
      
                </div>
      
            </div> <!-- end of container -->
      
    </footer> <!-- end of footer -->
      
    </body>
      
    </html>


      CSS



      *, *:before, *:after {
      
  box-sizing: inherit;
      
}
      
* {
      
  margin: 0;
      
  padding: 0;
      
  border: none;
      
}
      
html {
      
  box-sizing: border-box;
      
}
      

      
body {
      
  font-family: "Arial";
      
  font-size: 1.2em;
      
}
      

      
.container {
      
  margin: 0 auto;
      
  padding-top: 10px;
      
  max-width: 1000px;
      
}
      

      
.container-bottom-pad {
      
  margin: 0 auto;
      
  padding-top: 10px;
      
  max-width: 1000px;
      
  padding-bottom: 80px;
      
}
      

      
.outerContainer {
      
  background-color: #F1F1F1;
      
}
      

      
.row::before, .row::after {
      
  display: table;
      
  content: " ";
      
  clear: both;
      
}
      

      
.row {
      
  padding: 10px 0;
      
}
      

      
.one, .one-third,.two-thirds, .one-fourth {
      
  width: 100%;
      
}
      

      

      
#headerAndNav {
      
  background-color: rgba(135,196,66,0.60);
      
  margin-bottom: 10px;
      
}
      

      
header img {
      
  z-index: -2;
      
  position: absolute;
      
  width: 20%;
      
  margin: 0 auto;
      
}
      

      
.header-logo {
      
  position: relative;
      
  height: 100px;
      
  width: auto;
      
}
      

      
.testimonial-quote {
      
    font-size: 18px;
      
    padding-left: 14px;
      
    padding-right: 14px;
      
}
      

      
.testimonial-quote blockquote {
      
    background: none;
      
    color: gray;
      
    font-family: Georgia, serif;
      
    font-size: 1.1em;
      
    font-style: italic;
      
    line-height: 1.4 !important;
      
    position: relative;
      
    text-shadow: 0 1px white;
      
    z-index: 600;
      
}
      

      
.testimonial-quote blockquote * {
      
    box-sizing: border-box;
      
}
      

      
.testimonial-quote blockquote p {
      
    color: #75808a;
      
    line-height: 1.4 !important;
      
}
      

      
.testimonial-quote blockquote p:first-child:before {
      
    content: '201C';
      
    color: #4D512C;
      
    font-size: 3.5em;
      
    font-weight: 700;
      
    opacity: .8;
      
    position: absolute;
      
    top: -.53em;
      
    left: -.2em;
      
    text-shadow: none;
      
    z-index: -300;
      
}
      

      
.testimonial-quote cite {
      
    color: gray;
      
    display: block;
      
    font-size: .6em;
      
}
      

      
.testimonial-quote cite span {
      
    color: #5e5e5e;
      
    font-size: 1em;
      
    font-style: normal;
      
    font-weight: 700;
      
    letter-spacing: 1px;
      
    text-transform: uppercase;
      
    text-shadow: 0 1px white;
      
}
      

      
.testimonial-quote {
      
    position: relative;
      
}
      

      
h2 {
      
  color: #f2f2f2;
      
  padding-left: 10px;
      
}
      

      
.flex-container {
      
  display: flex;
      
}
      

      
.spacer {
      
  height: 500px;
      
  width: 100%;
      
}
      

      
.header {
      
  position: fixed;
      
  top: 0;
      
  left: 0;
      
  right: 0;
      
  bot: 0;
      
  background: #3498db;
      
  margin: 0;
      
  padding: 0;
      
  border-bottom: 9px solid #2980b9;
      
}
      

      
.main-content {
      
  background: #ecf0f1;
      
  margin: 0;
      
  padding: 0;
      
}
      

      
.align {
      
  max-width: 60%;
      
  margin: 10px;
      
  float: right;
      
}
      

      
.spacer {
      
  width: 100%;
      
  height: 60px;
      
  clear: both;
      
}
      

      
.nav {
      
  display: none;
      
  padding: 0;
      
  overflow: hidden; /* Makes the sliding animation cleaner */
      
}
      

      
.nav-item {
      
  list-style-type: none;
      
  text-align: center;
      
  background: #87c442;
      
  display: block;
      
  margin: 12px 0;
      
  padding: 10px 20px;
      
  border-radius: 5px;
      
  box-shadow: 0px 6px #2c3e50;
      
}
      

      
.nav-link {
      
  text-decoration: none;
      
  color: #333;
      
}
      

      
.nav-item:active {
      
  box-shadow: none;
      
  transform: translate(0px, 6px);
      
  transition: transform .20s;
      
}
      

      
.hamburger span {
      
  display: block;
      
  width: 35px;
      
  height: 4px;
      
  background: #625948;
      
  margin: 5px 0px;
      
  padding: 0;
      
}
      

      
.hamburger:hover span {
      
  transition: background ease-in-out .25s;
      
  background: #87c442;
      
}
      

      
.hamburger:hover {
      
  cursor: pointer;
      
}
      

      
.headline {
      
  margin:m 15px 0px 0px 0px;
      
  font-size: 35px;
      
  width: 100%;
      
  float: left;
      
}
      

      
.image {
      
  float: right;
      
  width: 200px;
      
  height: auto;
      
  border-top: 15px solid #e67e22;
      
}
      

      
.header {
      
  position: fixed;
      
  top: 0;
      
  left: 0;
      
  right: 0;
      
  bot: 0;
      
  background: #3498db;
      
  margin: 0;
      
  padding: 0;
      
  border-bottom: 9px solid #2980b9;
      
}
      

      
.rowBanner, .rowBanner a{
      
  background: #2E4431;
      
  opacity: .8;
      
  color: white;
      
}
      

      
.rowEarly {
      
  background: #FF8732;
      
  opacity: .8;
      
}
      

      
#blog-row {
      
  background-color: #F2F1C1;
      
}
      

      
.main-content {
      
  background: #ecf0f1;
      
  margin: 0;
      
  padding: 0;
      
}
      

      
.align {
      
  max-width: 60%;
      
  margin: 10px;
      
  float: left;
      
}
      

      
.spacer {
      
  width: 100%;
      
  height: 60px;
      
  clear: both;
      
}
      

      
.nav {
      
  display: none;
      
  padding: 0;
      
  overflow: hidden; /* Makes the sliding animation cleaner */
      
}
      

      
.nav-item {
      
  list-style-type: none;
      
  text-align: center;
      
  background: #625948;
      
  display: block;
      
  margin: 12px 0;
      
  padding: 10px 20px;
      
  border-radius: 5px;
      
  box-shadow: 0px 6px #2E4431;
      
}
      

      
.nav-link {
      
  text-decoration: none;
      
  color: #F2F1C1;
      
}
      

      
.nav-item:active {
      
  box-shadow: none;
      
  transform: translate(0px, 6px);
      
  transition: transform .20s;
      
}
      

      
.hamburger span {
      
  display: block;
      
  width: 35px;
      
  height: 4px;
      
  background: #625948;
      
  margin: 5px 0px;
      
  padding: 0;
      
}
      

      
.hamburger:hover span {
      
  transition: background ease-in-out .25s;
      
  background: #87c442;
      
}
      

      
.hamburger:hover {
      
  cursor: pointer;
      
}
      

      
.headline {
      
  margin:m 15px 0px 0px 0px;
      
  font-size: 35px;
      
  width: 100%;
      
  float: left;
      
}
      

      
.image {
      
  float: right;
      
  width: 200px;
      
  height: auto;
      
  border-top: 15px solid #e67e22;
      
}
      

      
#embed-CANp {
      
  display: block;
      
  margin:  0 auto;
      
}
      

      
.more {
      
  padding-top: 10px;
      
}
      

      
.morecontent span {
      
    display: none;
      
}
      
.morelink {
      
    display: block;
      
}
      

      
.p-interventions {
      
  padding: 10px 13px 10px 13px;
      
  font-size: .88em;
      
  }
      

      
  .earlyInterventionImg {
      
    width: 250px;
      
    margin: 10px auto;
      
    display: block;
      
  }
      

      
#columnBlog {
      
  margin-top: 10px;
      
}
      

      
.blog-image {
      
  width: 90%;
      
  margin: 0 auto;
      
  display: block;
      
}
      

      
.blog-header {
      
  font-weight: 900;
      
  padding-top: 10px;
      
  padding-right: 13px;
      
  padding-bottom: 10px;
      
  padding-left: 13px;
      
  text-align: justify;
      
  color: #2E4431;
      
}
      

      
.blog-p {
      
  padding-top: 10px;
      
  padding-right: 13px;
      
  padding-bottom: 10px;
      
  padding-left: 13px;
      
  text-align: justify;
      
}
      

      
.circlePhoto {
      
  margin: 0 auto;
      
  display: block;
      

      

      
}
      

      
.circlePhotoOverlay{
      
  border-radius:50%;
      
  border: 1px solid #2E4431;
      
}
      

      
.p-a{
      
  padding-top: 5px;
      
  padding-bottom: 10px;
      
  padding-left: 13px;
      
  font-weight: 900;
      
  color: #2E4431;
      
}
      

      
footer {
      
  margin-top: 10px;
      
  text-align: center;
      
  background-color: rgba(98,89,72,0.60);
      
  position: relative;
      
  overflow: hidden;
      
}
      

      
.footer-logo {
      
  position: absolute;
      
  left: 10px;
      
  bottom: 12px;
      
  z-index: -3;
      
  width: 100px;
      
}
      

      
footer h3 {
      
  z-index: 1;
      
  color: #F2F1C1;
      
  position: absolute;
      
  top: 20%;
      
  left: 0;
      
  right: 0;
      
  font-size: 30px;
      
  width: 100%;
      
  height: 20px;
      
  padding: 0;
      
  margin: 0;
      
  margin-top: -13px; /* 1/2 height */
      
  text-align: center;
      
}
      

      
footer p:first-of-type{
      
  padding-top: 20px;
      
}
      

      
.p-footer{
      
  color: #FFF;
      
  font-size: .626em;
      
  text-align: left;
      
}
      

      
.p-padding {
      
  padding-left: 100px;
      
}
      

      
.social-media {
      
  float:right;
      
}
      

      
#loginForm, #signUp, #contactForm {
      
  display: block;
      
}
      

      
.formColour {
      
  background-color: #2E4431;
      
}
      

      
.field {
      
  margin: 0;
      
  display: block;
      
}
      

      
.input {
      
  font-size: 15px;
      
  margin-left: 30px;
      
  margin-right: 30px;
      
  margin-bottom: 15px;
      
  padding: 8px 12px;
      
  height: 42px;
      
  -webkit-appearance: none;
      
  border-radius: 6px;
      
  box-shadow: none;
      
}
      

      
.inputField {
      
  font-size: 17px;
      
  text-indent: 3px;
      
  padding: .4em;
      
  line-heigh: 1.4em;
      
  display: block;
      
  width: 100%;
      
}
      

      
#btn-login {
      
  margin-left: 30px;
      
  margin-right: 30px;
      
  display: block;
      
  padding: 0px 12px;
      
  padding-bottom: 8px;
      
}
      

      
.supbtn-submit, .lgnbtn-submit {
      
  font-size: 16px;
      
  display: block;
      
  background: #f6f6f6;
      
  border-color: #FFF;
      
  margin: .5em 0;
      
  padding: .7em 1em;
      
  font-size: 16px;
      
  display: block;
      
  position: relative;
      
  text-align: center;
      
  text-overflow: ellipsis;
      
  overflow: hidden;
      
  font-weight: bold;
      
  width: 100%;
      
}
      

      
.header-half {
      
  width: calc(100% / 2);
      
  float: left;
      
  position: relative;
      
}
      

      
.right {
      
  float:right;
      
}
      

      
@media only screen and (min-width: 800px) {
      
  #inputField {
      
    height: 100%;
      
  }
      

      
  .nav {
      
    margin-left: 10px;
      
  }
      

      
  .one {
      
    width: 100%;
      
  }
      
  .half {
      
    width: calc(100% / 2);
      
  }
      
  .one-third {
      
    width: calc(100% / 3);
      
  }
      
  .one-fourth {
      
    width: calc(100% / 4);
      
  }
      
  .two-thirds {
      
    width: calc(100% / 3 * 2);
      
  }
      

      
  .column {
      
    float: left;
      
  }
      

      
  .flex{
      
    display: flex;
      
    flex-direction: column-reverse;
      
  }
      

      
}/*End of screen & min-width:800px query*/


      Javascript



      $(document).ready(function() {
      
  $(".hamburger").click(function() {
      
    $(".nav").slideToggle("slow");
      
  });
      

      

      

      
});





      javascript html css




      javascript html css






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked yesterday









      Duncan Skilton

      13




      13



























          active

          oldest

          votes











          Your Answer





          StackExchange.ifUsing("editor", function () {
          return StackExchange.using("mathjaxEditing", function () {
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          });
          });
          }, "mathjax-editing");

          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "196"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f208864%2fhtml-css-javascript-index-page%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid …



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f208864%2fhtml-css-javascript-index-page%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Ellipse (mathématiques)

          Image
          Pour les articles homonymes, voir Ellipse. L'ellipse est le lieu des points dont la somme des distances à deux points fixes, dits foyers, est constante. Section du cône ou projection du cercle. En géométrie, une ellipse est une courbe plane fermée obtenue par l’intersection d’un cône de révolution avec un plan, à condition que celui-ci coupe l'axe de rotation du cône ou du cylindre : c'est une conique d'excentricité strictement comprise entre 0 et 1. On peut également la définir comme le lieu des points dont la somme des distances à deux points fixes, dits foyers, est constante (sa construction par la méthode du jardinier est très simple). Dans la vie courante, l’ellipse est la forme qu'on perçoit en regardant un cercle en perspective, ou la figure formée par l’ombre d'un disque sur une surface plane. On retrouve aussi, en première approximation [ 1 ] , des ellipses dans les trajectoires des corps célestes (planètes, comètes ou satellites arti...
          Read more

          Quarter-circle Tiles

          Image
          up vote 0 down vote favorite I have $99$ identical square tiles, each with a quarter-circle drawn on it like this: [asy] size(1.5cm); draw(Arc((2,0),1,90,180),red+1); draw((0,0)--(2,0)--(2,2)--(0,2)--(0,0)); [/asy] When I arrange the tiles in a $9times 11$ rectangular grid, each with a random orientation, what is the expected value of the number of full circles I form? I think this problem has to do with finding the chance any given 2x2 square has a circle, but I can't find it. expected-value share | cite | improve this question asked Nov 20 at 15:03 6minecraftninja 1 2 ...
          Read more

          Mont Emei

          Image
          Mont Emei.mw-parser-output .entete.map{background-image:url("//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png")} Vue du sommet Wanfo du mont Emei Géographie Altitude 3 099  m , Wanfo Coordonnées 29° 31′ 11″ nord, 103° 19′ 57″ est Administration Pays   Chine Province Sichuan Ville-préfecture Leshan Géolocalisation sur la carte : Sichuan Mont Emei Géolocalisation sur la carte : Chine Mont Emei modifier   Paysage panoramique du mont Emei, incluant le paysage panoramique du grand Bouddha de Leshan *   Patrimoine mondial de l'UNESCO Passerelle en bois sur le versant ouest Pays   Chine Subdivision Sichuan Type Mixte Critères (iv) (vi) (x) Superficie 15 400 ha Numéro d’identification 779 Zone géographique Asie et Pacifique  ** Année d’inscription 1996 (20 e session) * Descriptif officiel UNESCO ** Classification géog...
          Read more