Nested Accordions Overlapping in Javascript - javascript

I'm trying to create some nested accordions using CSS, html, and Javascript. Everything was working as intended until I attempted to add sliding animations, they do slide, but now the maxHeight isn't adjusted to account for the height of the elements inside of it, and as such the elements overlap and can't be seen properly.
Can I update the maxHeight of each element only when the button is active to achieve the desired result, and if so, what would be the best way to accomplish that?
var buttonListLB = document.getElementsByClassName("button-lightblue");
var buttonListB = document.getElementsByClassName("button-blue");
var buttonListDB = document.getElementsByClassName("button-darkblue");
var i;
var j;
var k;
function openDropbox() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") { //The parent's status should be considered here
panel.style.display = "none";
panel.style.maxHeight = null;
} else {
panel.style.display = "block";
panel.style.maxHeight = (panel.scrollHeight) + "px";
}
}
for (i = 0; i < buttonListLB.length; i++) {
for (j = 0; j < buttonListB.length; j++) {
for (k = 0; k < buttonListDB.length; k++) {
buttonListDB[k].addEventListener("click", openDropbox);
}
buttonListB[j].addEventListener("click", openDropbox);
}
buttonListLB[i].addEventListener("click", openDropbox);
}
.column {
float: left;
width: 48%;
padding: 2px;
height: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
.button-lightblue {
background-color: #0287c5;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: 1px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-lightblue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-lightblue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-blue {
background-color: #005aab;
color: white;
cursor: pointer;
padding: 16px;
width: 100%;
border: 2px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-blue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-blue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-darkblue {
background-color: #003c71;
color: white;
cursor: pointer;
padding: 14px;
width: 100%;
border: 2px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-darkblue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-darkblue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-link {
padding: 14px;
background-color: #f1f1f1;
height: 0;
color: black;
cursor: pointer;
text-align: left;
font-size: 12px;
font-family: Arial;
}
.accordion-content {
padding: 0 2px;
background-color: white;
max-height: 0;
font-family: Arial;
display: none;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.dropbox-content {
position: fixed;
padding: 0 2px;
background-color: #f1f1f1;
max-height: 0;
display: none;
width: 35%;
z-index: 1;
transition: max-height 0.2s ease-out;
}
.dropbox-content a {
color: #0085d8;
font-family: Arial;
transition: max-height 0.4s ease-out;
}
.dropbox-content font {
color: #0085d8;
font-family: Arial;
transition: max-height 0.4s ease-out;
}
.additional-content {
padding: 5px 5px;
display: block;
background-color: #003c71;
font-family: Arial;
color: white;
overflow: visible;
}
<div class="row">
<div class="column">
<button class="button-lightblue"> Top Button 1</button>
<div class="accordion-content">
<button class="button-blue"> Middle Button 1</button>
<div class="accordion-content">
<button class="button-darkblue"> Bottom Button 1</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
<button class="button-darkblue"> Bottom Button 2</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
</div>
<button class="button-blue"> Middle Button 2</button>
<div class="accordion-content">
<button class="button-darkblue"> Bottom Button 3</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
<button class="button-darkblue"> Bottom Button 4</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
</div>
</div>
</div>
</div>
Running the above snippet should make the problem very clear. I'm open to any suggestions, thank you in advance.
EDIT: I removed an erroneous function I left in the script by mistake.

Related

My code hamburger menu doesn't close after I click an anchor tag

I am new to front end, so I am trying to make my hamburger menu close when I click on some of the menu to navigate to the same page but another place. Kindly help me with what to do. below are my code for my projects. It is a portfolio I built for myself, thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>David Bankole Abel</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/50d8f330a2.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav>
<ul class="nav-links">
<li>About</li>
<li>Projects</li>
<li>Get in touch</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section class="intro">
<h1>Let's find the solution that best fits you...</h1>
</section>
<section class=portfolio>
<p>Hello, I'm David, a designer and developer from Lagos.
My dream is to build solutions for global problem, while providing for young people a place to learn and explore their naturally creative side. </p>
</section>
<a name="container-frames"></a>
<div class="container-frames">
<h6>Selected works</h6>
<div class="column">
<a href="https://532services.ng" target="_blank">
<img src="532serv.jpg" height="188" alt="ecommerce"></a>
<h5>Preorder site</h5>
</div>
<div class="column">
<a href="https://1drv.ms/u/s!AgmcHhJeK0Xow14h3ARPShMs_Ado?e=e4Yp1c" target="_blank">
<img src="ttsunity.jpg" height="188" alt="ecommerce"></a>
<h5>Mobile game APK</h5>
</div>
<div class="column">
<a href="https://www.figma.com/files/recent" target="_blank">
<img src="Lambdap.png" height="188" alt="design"></a>
<h5>UI designs</h5>
</div>
</div>
<a name="contact-us"></a>
<section class="contact-us">
<h3>Get in touch</h3>
<form action="https://formspree.io/f/xnqorqrg" method="POST" id="my-form">
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Enter Message"></textarea>
<button type="submit">SUBMIT</button>
</form>
<div id="status"></div>
</section>
</div>
<footer>
<p class="foot">©2021 - David B. Abel</p>
</footer>
<script src="app.js"></script>
</body>
</html>
-- CSS here
#font-face {
font-family: silka;
src: url(silka/Silka-Bold.otf);
font-style: normal;
font-weight: 700;
}
#font-face {
font-family: silka;
src: url(silka/Silka-Light.otf);
font-style: normal;
font-weight: 300;
}
* {
padding: 0;
margin-left: 0%;
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0px;
height: 100%;
}
nav {
font-family: silka;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #fff;
}
.container {
min-height: 100%
}
h5 {
margin-left: 10px;
}
h1 {
font-family: Silka;
font-weight: 700;
color: #220077;
font-size: 550%;
margin-left: 190px;
margin-right: 190px;
}
p {
font-family: Silka;
font-weight: 300;
color: #220077;
text-align: left;
font-size: 150%;
margin-left: 190px;
margin-right: 190px;
}
.nav-links{
display: flex;
justify-content: space-evenly;
width: 40%;
list-style: none;
}
.nav-links a{
font-family: silka;
color: #220077;
text-decoration: none;
font-size: 16px;
padding: 14px 16px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: #007722;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 100%;
}
}
#media screen and (max-width: 601px) {
html,body{
overflow-x: hidden! important;
position: relative;
}
.nav-links {
position: absolute;
right: 0px;
height: 265vh;
top: -3vh;
background-color: #007722;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
padding-top: 0;
}
.burger {
position: absolute;
top: 0;
right: 0;
}
.nav-links li{
opacity: 0;
}
.nav-links a{
font-family: silka;
text-decoration: none;
font-size: 24px;
padding: 10px 12px;
color: #fff;
}
.logoo{
font-family: silka;
border-radius: 30px;
margin-left: -98px;
height: 35px;
width: 35px;
margin-bottom: 10px;
}
h5{
margin-left: 20px;
}
h1 {
font-family: silka;
color: #220077;
font-size: 280%;
margin-left: 20px;
margin-right: 20PX;
}
.contact-us form {
max-width:90%;
margin:10px auto;
}
.feedback-input {
color:black;
font-family: Helvetica, Arial, sans-serif;
font-weight:300;
font-size: 12px;
border-radius: 2px;
line-height: 11px;
background-color: transparent;
border:2px solid #220077;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #220077; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 50%;
background:#220077;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:12px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:350;
}
[type="submit"]:hover { background:#007722; }
p {
font-family: silka;
color: #220077;
font-size: 150%;
margin-top: auto;
margin-bottom: auto;
margin-left: 20px;
margin-right: 20px;
}
nav {
background-color: #fff;
}
.burger{
display: block;
}
.burger div{
background-color: #007722;
}
}
.nav-active{
transform: translate(0%);
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translate(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
background-color: #fff;
}
.toggle .line2{
opacity: 0;
background-color: #fff;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
background-color: #fff;
}
.name {
color: #220077;
font-weight: bold;
margin-left: 8%;
}
.column {
float: left;
width: 32%;
margin: 1px;
text-align: left;
padding: 2px;
margin-left: 10px;
height: auto;
border-radius: 8px;
}
.container-frames {
background-color: #220077;
}
h5{
font-family: silka;
font-weight: 700;
font-size: 18;
color: #fff;
text-decoration: none;
}
h6{
font-family: silka;
font-weight: 700;
font-size: 24px;
margin-left: 190px;
padding-top: 50px;
color: #fff;
}
/* Clear floats after the columns */
.container-frames:after {
content: "";
display: table;
clear: both;
background-color: #220077;
border-radius: 8px;
}
.contact-us {
font-family: silka;
}
.contact-us h3 {
font-size: 24px;
font-family: silka;
color: #220077;
margin-left: 210px;
text-decoration: none;
}
#status{
width: 90%;
max-width: 400px;
text-align: center;
padding: 10px;
margin: 0 auto;
border-radius: 8px;
}
#status.success{
background-color: rgb(211, 250, 153);
animation: status 4s ease forwards;
}
#status.error{
background-color: rgb(250, 129, 92);
color: white;
animation: status 4s ease forwards;
}
#keyframes status{
0%{
opacity: 1;
pointer-events: all;
}
90%{
opacity: 1;
pointer-events: all;
}
100%{
opacity: 0;
pointer-events: none;
}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
h6 {
font-family: silka;
font-weight: 700;
font-size: 24px;
margin-left: 20px;
padding-top: 50px;
}
.contact-us h3 {
margin-left: 20px;
}
}
img {
margin: 10px;
width: 90%;
border-radius: 4px;
}
body { background:#ffffff; }
form {
max-width:70.5%;
margin:10px auto;
}
.feedback-input {
color:black;
font-family: Helvetica, Arial, sans-serif;
font-weight:300;
font-size: 12px;
border-radius: 2px;
line-height: 11px;
background-color: transparent;
border:2px solid #220077;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #220077; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 50%;
background:#220077;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:12px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:350;
}
[type="submit"]:hover { background:#007722; }
footer {
font-family: silka;
width: 100%;
padding: 12px;
bottom: 0;
position: fixed;
background-color:#007722;
}
.foot{
font-family: silka;
font-weight: 300;
font-size: 14px;
margin-left: 10px;
}
.fab {
padding: 10px;
font-size: 13px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px 10px 10px;
border-radius: 50%;
background: #fff;
}
.fab:hover {
background-color: #007722;;
}
.fa-facebook {
background: #fff;
text-decoration: none;
}
.fa-twitter {
background: #fff;
text-decoration: none;
}
.fa-linkedin-in {
background: #fff;
text-decoration: none;
}
.fa-github {
background: #fff;
text-decoration: none;
}
here is the Javascript for the code
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
}else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
window.addEventListener("DOMContentLoaded", function() {
// get the form elements defined in your form HTML above
var form = document.getElementById("my-form");
//var button = document.getElementById("my-form-button");
var status = document.getElementById("satus");
// Success and Error functions for after the form is submitted
function success() {
form.reset();
status.classList.add('success');
status.innerHTML = "Thanks!";
}
function error() {
status.classList.add('error');
status.innerHTML = "Oops! There was a problem.";
}
// handle the form submission event
form.addEventListener("submit", function(ev) {
ev.preventDefault();
var data = new FormData(form);
ajax(form.method, form.action, data, success, error);
});
});
// helper function for sending an AJAX request
function ajax(method, url, data, success, error) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
success(xhr.response, xhr.responseType);
} else {
error(xhr.status, xhr.response, xhr.responseType);
}
};
xhr.send(data);
}
enter code here
This is solution. I added an event listener for the click event on all the ul items (li) and made function after click (on li) remove class .nav-active.
document.querySelectorAll('ul.nav-links li').forEach(element => element.addEventListener('click', () => {
document.querySelector('ul.nav-links').classList.remove('nav-active');
})
);

3 popup div click outside to close

I have 3 popup divs that open onclick. At first it you clicked inside the div it closed, i fixed that. Then i found a code to click outside the div and it would close the div. So I edited that code and it works fine, if you click outside the div it closed. So I added that code to all 3 and now none of the click outside the divs to close work. I do not understand why this is happening as I am extremely new to java script coding. If someone could help me I would be extremely grateful.Thanks
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
// Prevents menu from closing when clicked inside
document.getElementById("myPopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.amount')) {
var dropdowns =
document.getElementsByClassName("tooltiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmyPopup = dropdowns[i];
if (openmyPopup.classList.contains('show')) {
openmyPopup.classList.remove('show');
}
}
}
}
function myFunctions() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("shows");
}
// Prevents menu from closing when clicked inside
document.getElementById("mypopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbm')) {
var dropdowns =
document.getElementsByClassName("tooltipstext");
var i;
for (i = 0; i < dropdownss.length; i++) {
var openmypopup = dropdowns[i];
if (openmypopup.classList.contains('shows')) {
openmypopup.classList.remove('shows');
}
}
}
}
function myFunctionss() {
var popup = document.getElementById("mYpopup");
popup.classList.toggle("showS");
}
// Prevents menu from closing when clicked inside
document.getElementById("mYpopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbc')) {
var dropdowns =
document.getElementsByClassName("toolstiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmYpopup = dropdowns[i];
if (openmypopup.classList.contains('showS')) {
openmypopup.classList.remove('showS');
}
}
}
}
/******************************************************************************************************************************************************Header*/
.s-header {
background-color: red;
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.s-header-inner {
background-color: red;
border: 1px solid red;
height: 63px;
margin: auto;
width: 95%;
}
.s-header-links-left {
float: left;
margin-top: 12px;
}
/********************************************************************************************************************************************************Logo*/
.s-logo {
height: 65px;
position: absolute;
width: 150px;
}
.s-logo img {
position: absolute;
width: 185px;
}
/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
float: right;
margin-top: 20px;
}
.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.tooltip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltip .tooltiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 205px;
z-index: 1;
}
/* Toggle this class - hide and show the popup */
.tooltip .show {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
/***************************************************************************************************************************************Fur Baby Of The Month*/
.furbm {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}
.furbm .fa-trophy {
color: red!important;
font-size: 18px!important;
}
.furbm .fa-trophy:hover {
color: red!important;
font-size: 18px!important;
}
.tooltips {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltips .tooltipstext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -215px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: center;
visibility: hidden;
width: 205px;
z-index: 1;
}
.tooltips .shows {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.tooltipstext img {
height: 150px;
margin-top: 20px;
width: 150px
}
/***************************************************************************************************************************************Fur Baby Contest*/
.furbc {
cursor: pointer;
}
.furbc .fa-comments {
color: red!important;
font-size: 20px!important;
}
.furbc .fa-comments:hover {
color: #ffffff!important;
font-size: 20px!important;
}
.toolstip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.toolstip .toolstiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -281px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 275px;
z-index: 1;
}
.toolstip .showS {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.furbcf form {
display: flex;
position: relative;
width: 100%;
}
.furbcf input[type=text] {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0px;
padding: 5px 5px;
width: 175px;
}
.furbcf input:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf textarea {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0;
padding: 5px 5px;
width: 175px;
}
.furbcf textarea:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf input[type="submit"] {
background-color: #ffffff;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #da291c;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
outline: none;
padding: 5px;
width: 100px;
}
.furbcf input[type="submit"]:hover {
background-color: #da291c;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
padding: 5px;
width: 100px;
}
/********************************************************************************************************************************************************Menu*/
i.fa-bars {
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
margin-left: 25px;
}
i.fa-bars:hover {
color: #ffffff;
font-size: 20px;
margin-left: 25px;
}
.sidenav {
border-left: 1px solid #ccd1d4;
background-color: #ffffff;
height: 100%;
overflow-x: hidden;
padding-top: 50px;
position: fixed;
right: -1px;
top: 0;
transition: 0.5s;
width: 0;
z-index: 1;
}
.sidenav p {
color: #242527;
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
padding: 12px 8px 0px 32px;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}
.sidenav a {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: none!important;
transition: 0.3s!important;
}
.sidenav a:hover {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: underline!important;
transition: 0.3s!important;
}
.sidenav a img {
height: 12px;
margin-left: -0px;
margin-right: 10px;
}
.sidenav .closebtn {
color: #aaaaaa!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
top: 5px!important;
}
.sidenav .closebtn:hover {
color: #353748!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
text-decoration: none!important;
top: 5px!important;
}
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunctions()" title="Contest Winner">
<div class="furbm">
<i class="fa fa-trophy"></i>
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month Contest -->
<span class="toolstip" onclick="myFunctionss()">
<div class="furbc">
<i class='fas fa-comments'></i>
</div>
<span class="toolstiptext" id="mYpopup">
Enter Octobers cutest Fur Baby contest and win a bag of your Fur Babies food of choice.
</br>
</br>
<form class="furbcf" method="post" action="send_contact.php" enctype="multipart/form-data">
<label for="first_name">First Name: <font color="red">*</font></label>
</br>
<input type="text" id="first_name" name="first_name" autocomplete="off" required>
</br>
</br>
<label for="last_name">Fur Babies Name: <font color="red">*</font></label>
</br>
<input type="text" id="last_name" name="last_name" autocomplete="off" required>
</br>
</br>
<label for="email">Email: <font color="red">*</font></label>
</br>
<input type="text" id="email" name="email" autocomplete="off" required>
</br>
</br>
<input type="file" name="uploaded_file"autocomplete="off" required>
</br>
</br>
<input type="submit" name="Submit" value="Submit">
</form>
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span style="cursor:pointer" onclick="openNav()" title="Menu">
<i class="fa fa-bars"></i>
</span>
<div id="mySidenav" class="sidenav">
×
<p>WHO WE ARE:</p>
Home
About Us
Privacy Policy
Terms of Use
<p>RESOURCES:</p>
Contact Us
FAQ
Our Donations
Spread The Word
<p>KEEP IN TOUCH:</p>
<a href="https://www.facebook.com/CapeBretonCares/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/facebook.png">Facebook</a>
<a href="https://twitter.com/WeCapersCare/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/twitter.png">Twitter</a>
<p>AVAILABLE ON:</p>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/brave.png">Brave</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/chrome.png">Google Chrome</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/edge.png">Microsoft Edge</a>
<a href="https://addons.mozilla.org/en-CA/firefox/addon/cape-breton-start-page/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/firefox.png">Mozilla Firefox</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>

accordion button unhidden text

hi I am building a button where hide/show content when click on, however when I apply some styles to the content it won't hide anymore, I suspect it has got something to do with the css position, but can't figure it out why, could someone please help me? thanks in advance
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
button.accordion {
background-color: #13294b;
border: 2px solid #59cbe8;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
button.accordion.active, button.accordion:hover {
background-color: #1f447b;
}
button.accordion:after {
content: '\002B';
color: #59cbe8;
font-weight: bold;
float: right;
}
button.accordion.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.action1 {
position: absolute;
margin-top: -115px;
margin-left: 35px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}
.action2 {
position: absolute;
margin-top: -115px;
margin-left: 175px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}
<button class="accordion">This is the button</button>
<div class="panel">
<p><img width="650" height="114" style="border: 0px solid rgb(0, 0, 0); border-image: none;" src="./?a=654193" /><br /></p>
<p class="action1">Recognise</p>
<p class="action2">Remove from play</p>
</div>
Your paragraphs are absolutely positioned, but not relative to the panel that is hiding/showing. To position those relative to .panel, add position: relative to .panel, and the paragraphs will hide/show with `.panel.

i cant redirect and go to a specific section

i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

How to make sticky navigation change colour when scrolling past a certain div?

I am curious as to how you would make your sticky navigation bar fade into a colour as you scroll down to a certain point or DIV on the page.
I would like to have this so I can see the white over the white background when I scroll to the end of my div or at the beginning of the div.
One of my issues is not being able to get the JS to work as well as having my background image inserted into my css... header {} with a width... how do I target just the logo (on the left) and the navagation bar on the right... so a transparent bar appears underneath the two, taking up a desired height and 100% width of the page without messing up the background image!
Also in codepen you'll notice that the header... which changes color goes underneath the main div.
Here is my codepen...
http://codepen.io/uchmanowicz/pen/qEebbN
Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aesthetic Media</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="styles.js"></script>
</head>
<body>
<header>
<a class="logo" href="#">Aesthetic</a>
<nav>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</nav
<div class="clears"></div>
<div class="maintext">
<h1>We're Aesthetic</h1>
<h2>A Visual Agency from Niagara</h2>
</div>
</header>
<main>
<h2 class="whatwedo">Expertise</h2>
<div class="whatwedobox one"><div class="icon"></div><p>Lorem ipsum dolor sit amet.</p></div>
<div class="whatwedobox two"></div>
<div class="whatwedobox three"></div>
</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background: white;
}
header {
width: 100%;
height: 550px;
background: white;
background: url('images/main.jpg') center center;
background-size: cover;
padding: 30px 30px 30px 30px;
position: relative;
}
.logo {
position: fixed;
top: 33px;
left: 30px;
width: 200px;
height: 80px;
display: block;
float: left;
z-index: 30;
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}
.logo a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}
nav {
float: right;
z-index: 30;
position: fixed;
top: 20px;
right: 0px;
letter-spacing: .2em;
}
nav li {
float: left;
list-style: none;
padding: 10px 15px 10px 15px;
}
nav li:last-child {
border-right: none;
}
nav li a {
padding: 5px 10px 5px 10px;
color: white;
display: block;
font-weight: 400;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
nav li a:hover {
background-color: rgba(40, 40, 40, 0.5);
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-transition: all .3s ease;
-webkit-transition: all .3s ease;
-webkit-font-smoothing: antialiased;
}
.clears {
clear: both;
}
.maintext {
margin: auto;
width: 600px;
text-align: center;
margin-top: 200px;
color: white;
z-index: 30;
position: relative;
}
.maintext h1 {
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
.maintext h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
main {
max-width: 1180px;
margin: auto;
margin-top: 20px;
overflow: hidden;
}
h2.whatwedo {
text-align: center;
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
-webkit-font-smoothing: antialiased;
}
.whatwedobox {
width: 30%;
height: 300px;
border: 1px solid blue;
float: left;
margin-right: 5%;
padding: 20px;
margin-top: 20px;
}
.whatwedobox:last-child {
margin-right: 0%;
}
.icon {
width: 100%;
height: 100px;
background: url(#) no-repeat center center;
}
JS
$(document).ready(function(){
var scroll_start = 0;
var startchange = $(".maintext");
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$("header").css('background-color', '#B5B5B5');
} else {
$('header').css('background-color', 'transparent');
}
});
}
});
I think what you meant to have is the sticky navbar, and changing background when the main content reaches it on scroll. See the updated code and the pen demo as follows.
$(document).ready(function () {
var scroll_start = 0;
var startchange = $(".maintext");
var offset = startchange.offset();
if (startchange.length) {
$(document).scroll(function () {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$("nav").css('background-color', 'rgba(0,0,0,.75)');
} else {
$('nav').css('background-color', 'transparent');
}
});
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #666;
min-height: 5000px;
}
header {
/* background-image: url('images/main.jpg'); */
background-position: center center;
background-size: cover;
position: relative;
}
nav {
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1;
letter-spacing: .2em;
line-height: 1;
padding: 30px;
}
nav ul {
text-align: right;
list-style: none;
padding: 0;
margin: 0;
}
nav li {
padding: 0 10px;
display: inline-block;
}
nav li:last-child {
border-right: none;
}
nav li a {
padding: 10px;
color: white;
display: block;
font-weight: 400;
text-decoration: none;
color: #FFFFFF;
font-family:'Raleway', sans-serif, Helvetica, Verdana;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
nav li a:hover {
background-color: rgba(40, 40, 40, 0.5);
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-transition: all .3s ease;
-webkit-transition: all .3s ease;
-webkit-font-smoothing: antialiased;
}
.logo {
width: 200px;
display: block;
float: left;
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family:'Raleway', sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}
.logo a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family:'Raleway', sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}
.clears {
clear: both;
}
.maintext {
padding-top: 90px;
margin: 200px auto;
width: 600px;
text-align: center;
color: white;
}
.maintext h1 {
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #FFFFFF;
font-family:'Raleway', sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
.maintext h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFFFFF;
font-family:'Raleway', sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
main {
max-width: 1180px;
margin: auto;
margin-top: 20px;
overflow: hidden;
}
.whatwedohd {
text-align: center;
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #000000;
font-family:'Raleway', sans-serif, Helvetica, Verdana;
-webkit-font-smoothing: antialiased;
}
.whatwedobox {
width: 30%;
height: 300px;
border: 1px solid blue;
float: left;
margin-right: 5%;
padding: 20px;
margin-top: 20px;
}
.whatwedobox.three {
margin-right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<nav>
<a class="logo" href="#">Aesthetic</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<div class="maintext">
<h1>We're Aesthetic</h1>
<h2>A Visual Agency from Niagara</h2>
</div>
</header>
<main>
<h2 class="whatwedohd">Expertise</h2>
<div class="whatwedobox one"></div>
<div class="whatwedobox two"></div>
<div class="whatwedobox three"></div>
</main>
<footer></footer>
Pen Demo: http://codepen.io/anon/pen/qEemdp

Categories