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");

  });







});

asked yesterday

Duncan Skilton

add a comment |

up vote
0
down vote

favorite

    <!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");

  });







});

asked yesterday

Duncan Skilton

add a comment |

up vote
0
down vote

favorite

    <!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");

  });







});

asked yesterday

Duncan Skilton

    <!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

asked yesterday

Duncan Skilton

asked yesterday

Duncan Skilton

asked yesterday

Duncan Skilton

asked yesterday

Duncan Skilton

asked yesterday

Duncan Skilton

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Krdytkyu