I have a multi-step form (created in HubSpot): Demo
The form in the demo is Step 1. Once a user completes, step 1, they hit the button and it'll move to step 2 (as you would expect!).
However, I can't seem to get this action working. I have two issues:
If a user is on step 1, I want the step 1 anchor link to remain underlined. Unsure on how I can check what form the user is on using JavaScript.
I need the form to submit and then change to step 2. Issue is they're HubSpot embedded forms, which means I can't really (and don't want to) alter the HTML. I've seen many Bootstrap approaches, but again, don't want to alter the HTML too much and would therefore, like to avoid it.
Step 1 form embed code (in code below):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
</script>
Step 2 form embed code (What I want to appear after form 1 is submitted):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "103687",
formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844"
});
</script>
What I've tried:
$(document).ready(function() {
$(".modal-content .hs-button").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content .form-columns-2 .form-columns-1").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
Any help/advice would be appreciated!
Full demo code:
$(document).ready(function() {
$(".modal-content .hs-button").click(function() {
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".modal-content").submit(function(e) {
e.preventDefault();
});
if (currentSectionIndex === 3) {
$(document).find(".modal-content").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
a {
cursor: pointer;
}
p {
margin: 0 0 1rem;
font-weight: 400;
}
a {
color: inherit;
cursor: pointer;
}
ul {
padding-left: 0;
margin: 0;
}
.input textarea {
padding-left: 10px !important;
}
.modal-content {
background-color: #097afb;
margin: 4% auto 15% auto;
padding-bottom: 30px;
border-radius: 3px;
}
.steps {
text-align: center;
}
.steps li {
display: inline-block;
margin: 20px;
color: #fff;
font-size: 0.875rem;
padding-bottom: 5px;
text-transform: uppercase;
}
.imgcontainer {
text-align: center;
position: relative;
display: block;
}
.imgcontainer h2 {
font-size: 29px;
padding-top: 50px;
color: #fff;
margin: 0;
text-transform: uppercase;
}
.imgcontainer p {
font-size: 18px !important;
padding-top: 10px;
color: #fff;
}
input[type=text],
input[type=email] {
width: 90%;
padding: 12px 12px;
margin: 10px 50%;
display: inline-block;
border-bottom: 1px solid #414141;
box-sizing: border-box;
font-size: 16px;
background: transparent;
text-transform: uppercase;
border-top: none;
border-left: none;
box-shadow: none;
border-right: none;
}
textarea {
width: 98% !important;
padding: 12px 20px;
margin: 8px 25%;
display: inline-block;
border-bottom: 1px solid #414141 !important;
box-sizing: border-box;
font-size: 16px !important;
background: transparent;
text-transform: uppercase;
border-top: none !important;
border-left: none !important;
box-shadow: none !important;
border-right: none !important;
resize: none;
}
form span:not(.close) {
display: none !important;
}
form .actions {
padding: 0px 20px 0px 0px;
width: 87%;
display: inline-block;
}
form .actions input[type=submit]:hover {
background-color: #000;
color: #fff;
border: 2px solid #000;
}
form .actions input[type=submit] {
border: 2px solid #fff !important;
background-color: #097afb;
padding: 12px 25px !important;
color: #fff !important;
text-decoration: none;
font-size: 0.8125rem;
font-family: "Lato";
font-weight: 700;
float: right;
background-image: none;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="visible" class="button-outline hero-button button-arrow" onclick="document.getElementById('modal-wrapper').style.display='block'">Click here</a>
<div id="modal-wrapper" class="modal" style="display: none;">
<div>
<div>
<div>
<div>
<span>
<form class="modal-content animate">
<div class="imgcontainer">
<h2 style="text-align: center;">Title</h2>
<p>Lorum Ipsum</p>
</div>
<div class="container">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
// <![CDATA[
hbspt.forms.create({
portalId: "103687",
formId: "7c124354-e1ff-411d-9245-2b214e943a90"
});
// ]]>
</script>
<div></div>
<ul class="steps">
<li class="is-active"><a>Step 1</a></li>
<li>/</li>
<li><a>Step 2</a></li>
<li>/</li>
<li><a>Step 3</a></li>
</ul>
</div>
</form>
</span>
</div>
</div>
</div>
</div>
</div>
i hope this is what you looking for .
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
if(currentSectionIndex === 3){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
}
h1, h2, h3, h4, h5 ,h6{
font-weight: 200;
}
a{
text-decoration: none;
}
p, li, a{
font-size: 14px;
}
fieldset{
margin: 0;
padding: 0;
border: none;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
display: block;
float:left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.container{
width: 100%;
max-width: 700px;
margin: 0 auto;
position: relative;
}
.row{
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper{
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps{
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
text-align: center;
}
.steps li{
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active{
border-bottom: 1px solid #3498db;
color: #3498db;
}
/* FORM */
.form-wrapper .section{
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
position: absolute;
width: 100%;
min-height: 300px
}
.form-wrapper .section h3{
margin-bottom: 30px;
}
.form-wrapper .section.is-active{
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
background-color: #3498db;
display: inline-block;
padding: 8px 30px;
color: #fff;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .submit{
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"]{
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
display: none;
}
.form-wrapper input[type="radio"] + label{
display: block;
border: 1px solid #ccc;
width: 100%;
max-width: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.form-wrapper input[type="radio"] + label:before{
content: "✔";
position: absolute;
right: -10px;
top: -10px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
background-color: #3498db;
color: #fff;
display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
display: block;
}
.form-wrapper input[type="radio"] + label h4{
margin: 15px;
color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
color: #3498db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Account Type</h3>
<div class="row cf">
<div class="four col">
<input type="radio" name="r1" id="r1" checked>
<label for="r1">
<h4>Designer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r2"><label for="r2">
<h4>Developer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r3"><label for="r3">
<h4>Project Manager</h4>
</label>
</div>
</div>
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="submit button" type="submit" value="Sign Up">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button">Reset Form</div>
</fieldset>
</form>
</div>
</div>
Related
I have a problem on the site, I do not know how to add this type of slider to my site, I have never used java script, so could you please help me
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fbf9f1;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fbf9f1;;
/*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
position: fixed;
width: 100%;
z-index: 99;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fbf9f1;;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #fbf9f1;;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
color: green;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
color: green;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.icons {
/* display:block; */
display: flex;
gap: 20px;
float: right;
padding: 16px;
margin-right: 50px;
align-items:center;
/* clear:both; */
}
ion-icon {
font-size: 25px;
}
.search {
border: none;
background-color: #fbf9f1;
}
.search::placeholder {
font-size: 19px;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: center;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.slider {
position: relative;
width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
transform: translateY(40%);
}
.slider input[name="switch"] {
display: none;
}
.switch {
position: absolute;
left: 0;
bottom: 10px;
text-align: center;
width: 100%;
z-index: 1;
}
.switch label {
display: inline-block;
width: 8px;
height: 8px;
cursor: pointer;
margin: 0 0px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
border-radius: 50%;
border: 5px solid #2f363c;
background-color: #738290;
}
#btn1:checked~.switch label[for="btn1"] {
background-color: white;
}
#btn2:checked~.switch label[for="btn2"] {
background-color: white;
}
#btn3:checked~.switch label[for="btn3"] {
background-color: white;
}
.slider-inner {
overflow: hidden;
}
.slides {
width: 500%;
transition: all 0.5s;
position: relative;
}
.slides .slide-wrapper {
width: 680px;
height: 340px;
float: left;
}
#btn1:checked~slider-inner slides {
transform: translate(0);
}
#btn2:checked~.slider-inner .slides {
transform: translate(-680px);
}
#btn3:checked~.slider-inner .slides {
transform: translate(-1360px);
}
/* Code For Your Question */
.slides .slide-wrapper {
background-size: cover;
background-repeat: no-repeat;
}
.slides .slide-wrapper:nth-child(1){
background-image: url('https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp');
}
.slides .slide-wrapper:nth-child(2){
background-image: url('https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp');
}
.slides .slide-wrapper:nth-child(3){
background-image: url('https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp');
}
.m1{
color: #2a6049;
transform: translateX(3%);
}
.m2{
color: green;
font-size: 31px;
transform: translateX(3%);
}
.m3{
transform: translateX(19%);
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
font-size: 20px;
}
.m3:hover{
background-color: #2a6049;
}
div.mini-text{
text-align: center;
transform: translateY(160%)
}
h1{
color: green;
}
.Ls:hover{
color:green;
}
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<meta charset="UTF-8">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<header class="header">
Fresh market
<input class="menu-btn" type="checkbox" id="menu-btn" />
<link rel="stylesheet" href="styles.css">
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
<div class="icons">
<input class="search" placeholder="Search.." type="text">
<ion-icon name="search-outline"></ion-icon>
<p class="Ls">Login</p>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-icon name="bag-handle-outline"></ion-icon>
</div>
</ul>
</header>
<div class="slider">
<input type="radio" name="switch" id="btn1" checked>
<input type="radio" name="switch" id="btn2">
<input type="radio" name="switch" id="btn3">
<div class="switch">
<label for="btn1"></label>
<label for="btn2"></label>
<label for="btn3"></label>
</div>
<div class="slider-inner">
<div class="slides">
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_f2ae964f4e3d4bb8af8b6cdda0ad86bd~mv2.webp" /> -->
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
</div>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.jpg/v1/fill/w_1112,h_601,q_90/ad420a_d2d8311f21fe4d7bb4836f82c5011a46~mv2.webp" /> -->
<div class="slide-wrapper">
<h1 class = "m1">Fresh Market</h1>
<p class = "m2">We'll Deliver</p>
<p class = "m2">Everything</p>
<p class = "m2">You Need</p>
<button class = "m3">Shop Online</button>
<!-- <img
src="https://static.wixstatic.com/media/ad420a_01886647b6df44198b05bc86420472c0~mv2.jpg/v1/fill/w_1112,h_601,fp_0.73_0.29,q_90/ad420a_01886647b6df44198b05bc86420472c0~mv2.webp" /> -->
</div>
</div>
</div>
</div>
<div class = "mini-text">
<h1>Weekly Deals</h1>
<h3>I'm a paragraph. Click here to add your own text and edit me.<h3>
</div>
</body>
</html>
here is such a slider, but I don't even know how to add it, please help
it has very simple styles, but I don't have enough experience to add this slider to the site
I have created a simple hardcoded popup with an unstyled Mailchimp form. But when I deploy it to a WordPress webpage through the "Insert Headers and Footers" plugin it does not work. When I test the code on an online HTML editor, then it works. I am trying to find out what is the problem, I presume that there is somewhere on the server-side something that is blocking the link to be clicked.
code for the popup:
<script>
var element = document.getElementById("wrapper");
var t=setTimeout(openPopUp,3000);
function openPopUp() {
element = document.getElementById("wrapper");
element.style.visibility = "visible";
element.style.opacity = "1";
}
/* Get all elements with class="close" */
function zatvori() {
var x = document.getElementById("wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<!DOCTYPE html>
<html lang="de-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Newsletter XXX</title>
<style>
* {
box-sizing: border-box;
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
line-height: 1.2;
}
#wrapper {
position: relative;
height: 950px;
max-width: 100%;
overflow: hidden;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 430px;
height: 950px;
opacity: 0.5;
-webkit-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
-moz-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
}
.content {
position: absolute;
width: 435px;
height: auto;
padding: 28px 25px;
background-color: #82BB28;
z-index: 1;
}
/* Style the close button (span) */
.close {
cursor: pointer;
color:white;
float: right;
position: absolute;
top: 5%;
right: 2%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: red;}
div .text-1 p {
text-transform: uppercase;
font-weight: normal;
font-size: 18px;
margin: 0;
line-height: 1.1;
text-transform: uppercase;
color: #000;
}
.text-spacing {
letter-spacing: 1px;
}
.text-2 p {
margin: 40px 0 30px 0;
text-transform: uppercase;
font-size: 19px;
font-weight: bold;
letter-spacing: 1px;
}
.text-3 {
font-size: 12px;
color: #A1A199;
}
.email-btn {
display: flex;
justify-content: space-between;
}
/* Full-width input fields */
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Set a style for button */
.button-form {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.button-form:hover {
opacity:1;
}
#ad-email {
height: 36px;
width: 65%;
padding: 0px 14px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 3px;
font-size: 12px;
color: #332c2c;
}
/*placeholder*/
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 10px;
color: #ababab;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 10px;
color: #ababab;
}
:-ms-input-placeholder {
/* IE 10+ */
font-size: 10px;
color: #ababab;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 10px;
color: #ababab;
}
#send {
width: 29%;
height: 36px;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight: bold;
font-size: 10px;
color: #000000;
cursor: pointer;
transition: all 0.3s;
}
#send:hover {
background-color: #332c2c;
color: #fff;
}
.accept {
position: relative;
margin: 14px 0 35px 0;
}
#check {
position: absolute;
top: 0;
left:0;
opacity: 0;
}
.accept label {
display: flex;
cursor: pointer;
font-size: 10px;
line-height: 12px;
}
.checkbox-box {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
border: 1px solid #332c2c;
}
#check:checked+label>.checkbox-box {
background-color: #332c2c;
}
.checkbox-label {
margin-left: 5px;
width: calc(100% - 18px);
line-height: 14px;
}
.checkbox-label a {
color: #000;
display: block;
}
.profit-1 {
font-size: 20px;
line-height: 25px;
}
ul.benefits {
column-count: 2;
margin-left: 15px;
padding: 0;
}
li {
width: 95%;
font-size: 10px;
line-height: 14px;
}
#media all and (max-width: 434px) {
.content {
width: 100%;
}
}
#media all and (max-width: 387px) {
.text-1 p, .text-2 p {
font-size: 20px;
}
}
#media all and (max-width: 379px) {
.content {
padding: 20px;
}
.text-2 p {
margin: 20px 0 30px 0;
}
#inputs {
position: relative;
padding-bottom: 15px;
}
#ad-email {
width: 100%;
}
#send {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.checkbox-label a {
display: inline;
}
.profit {
margin-top: 20px;
}
ul.benefits {
column-count: 1;
}
li {
width: 100%;
}
}
#media all and (max-width: 324px) {
.profit-1 {
font-size: 16px;
line-height: 20px;
}
.text-1 p {
text-align: center;
}
.text-2 p {
margin: 15px 0 20px 0;
text-align: center;
}
#send {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<!-- width - 655 x height -450-->
<div id="wrapper">
<div id="mc_embed_signup">
<form action="https://ozg.us3.list-manage.com/subscribe/post?u=da98377a6d05e2f01558d3e04&id=67aaab10f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mask"></div>
<div class="content">
<div class="text-1">
<p>OZG - DER SPEZIALIST FÜR KOMPLETTAUSSTATTUNG IM<span class="close" onclick="zatvori()">X</span></p>
<p class="text-spacing"> GESUNDHEITSWESEN</p>
</div>
<div class="text-2">
<p>Haben Sie eine Anfrage oder möchten einen persönlichen Beratungstermin buchen?</p>
</div>
<!--
<div id="inputs">
<div class="email-btn">
<input type="email" name="#" placeholder="Adres e-mail" id="ad-email" required />
<input type="submit" name="#" id="send" value="ZAPISUJĘ →">
</div>
</div>
-->
<!--New code-->
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span>zeigt erforderlich an</div>
<div class="mc-field-group email-btn text-3">
<input type="email" value="" name="EMAIL" placeholder="Email Address *" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="FNAME" placeholder="Name" class="" id="mce-FNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="LNAME" placeholder="Vorname" class="" id="mce-LNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="UNTERNEHME" placeholder="Unternehmen" class="" id="mce-UNTERNEHME">
</div>
<div class="mc-field-group">
<textarea rows="4" cols="50" name="NACHRICHT" class="text-3" form="usrform" id="mce-NACHRICHT" placeholder="Nachricht">Nachricht
</textarea>
</div>
<div class="accept">
<input type="checkbox" name="#" value="true" id="check" required>
<label for="check"><span class="checkbox-box"></span><span class="checkbox-label">Ja, ich möchte aktuelle News und Aktionen erhalten
</span></label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_da98377a6d05e2f01558d3e04_67aaab10f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button-form"></div>
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</body>
</html>
So the endpoint does not go to Mailchimp, instead goes to wp-admin/admin-ajax.php
Any help is much appreciated.
I have a JS file linked to my index.HTML file that works fine but it will not work for other .HTML file. Why is this. They elements I needs Javascript to apply to are the same and only have added ID tags on some of them. As I understand it, that should cause no issues as they have the same class name.
below are the first and second HTML files along with the JS file.
What am I missing here? I thought you could link to the same JS file as long as the HTMLs are the same and have a script tag to link to the JS file. Please help.
Working HTML File:
<script src="js/scripts.js"></script>
<title>Test 1</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu">
Home
About Us
Products
Services
Training & Support
Contact Us
Careers
<div class="dropdown">
Log-in
<div class="dropdown-content">
<h4>Account Number</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
Not working HTML File:
<script src="js/scripts.js"></script>
<title>test file 2</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu" id="cNavbar-menu">
Home
<div class="dropdown">
Log-in
<div class="dropdown-content">
<h4>Account Name</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
JavaScript:
var form = document.getElementById('formData');
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});
$(".goTop").click(function () {
scroll(0, 0);
});
$(".menu-toggle").click(function () {
$(this).toggleClass("active");
$(".navbar-menu").toggleClass("active");
});
This is the code i've moved to it's own file. the Html file and JS have been unchanged.
.navbar {
position: fixed;
background-color: transparent;
width: 100%;
padding: 30px 0;
top: 0;
z-index: 999;
transition: 0.3s linear;
}
.inner-width {
max-width: 1300px;
margin: auto;
padding: 0 20px;
}
.navbar .inner-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 500px;
height: 44px;
background-image: url(../images/Full\ Logo\ white.png);
background-repeat: no-repeat;
background-size: contain;
z-index:9999;
}
.menu-toggle {
background: none;
width: 30px;
border: none;
cursor: pointer;
position: relative;
outline: none;
z-index: 999;
display: none;
}
.menu-toggle span {
display: block;
height: 3px;
background-color: #fff;
margin: 6px 0;
position: relative;
transition: 0.3s linear;
}
.navbar-menu a {
color:#f1f1f1;
font-size: 15px;
font-weight: 500;
margin-left: 20px;
transition: 0.2s linear;
}
.navbar-menu a:hover {
color: #d03228 !important;
}
.sticky {
background-color: #fff;
padding: 18px 0;
}
.sticky .logo {
background-image: url(../images/Full\ Logo\ black.png);
}
.sticky .navbar-menu a {
color: #111;
}
.sticky .menu-toggle span {
background-color: #111;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: white;
cursor: pointer;
font-size: 15px;
border: none;
top: 0;
}
.dropdown {
position: absolute;
display: inline-block;
width: 10%;
}
.dropdown-content {
margin-top: 10px;
margin-left: -100px;
padding: 10px;
display: none;
position: relative;
background-color: #353b48;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content h4 {
color: white;
padding: 5px 0 5px 0;
}
.dropdown-content .login {
margin-top: 15px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .login:hover {
background-color: #d03228;
color: #fff;
}
.dropdown-content .register {
margin-top: 10px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .register:hover {
background-color: #d03228;
color: #fff;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.goTop {
position: fixed;
z-index: 999;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
background-color: #d03228;
border: none;
border-radius: 6px;
cursor: pointer;
color: #fff;
outline: none;
display: none;
}
#media screen and (max-width: 980px) {
.menu-toggle {
display: block;
}
.navbar-menu {
position: fixed;
height: 100vh;
width: 100%;
background-color: #353b48;
top: 0;
right: -100%;
max-width: 400px;
padding: 80px 50px;
transition: 0.3s linear;
}
.navbar-menu a {
display: block;
font-size: 30px;
margin: 30px 0;
}
.sticky .navbar-menu {
background-color: #f1f1f1;
}
.navbar-menu.active {
right: 0;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(-45deg);
top: 4px;
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(45deg);
bottom: 14px;
}
.dropdown {
width: 70%;
}
.dropdown-content
{
margin: 10px;
}
}
#media screen and (max-width: 600px) {
.inner-width {
padding: 0 20px;
}
}
One major difference ive noticed since moving the navbar CSS is that the "Go to Top" Button now appears when you first load into a page rather than only appearing when scrolling down.
Adding Main CSS file below for more context.
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
::selection {
background-color: #d03228;
}
::-webkit-scrollbar {
width: 12px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #d03228;
}
/*home page*/
#home{
height: 100vh;
margin: 0;
}
#videoBG {
position:absolute;
z-index: 1;
margin: 0;
top:0;
left:0;
}
#media (min-aspect-ratio: 16/9) {
#videoBG {
width:100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
#videoBG {
width:auto;
height: 100%;
}
}
#media (max-width: 767px) {
#videoBG {
display: none;
}
#home {
background-image: url(../images/fuji.JPG);
background-size: cover;
}
}
Could someone explain why this is happening?
Please check this you have to write like this,
In the HTML file, you have to add one attribute id/class
<form action="#" id="formData">
</form>
In jquery/javascript "use anyone it's up to you"
//javascript
var form = document.getElementById('formData');
//jquery
var form = $("#formData");
/*add your script code like this*/
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});
try deleted id="cNavbar-menu" in the unworked html
I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!
body {
padding: 0;
margin: 0;
}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left.
If you remove the top left and transform from the mainDiv you will see following:
This is where this whitespace come from.
You should add an element to clear:both under the toolbar (see snipped below)
body {
padding: 0;
margin: 0;
}
/* ADDED THIS*/
.clear{clear:both}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
box-sizing:border-box;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
<div class="clear"></div><!-- ADDED THIS -->
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
You can use flex to align items which makes it easier:
body {
padding: 0;
margin: 0;
display: flex;
align-items: 'center';
justify-content: 'center';
}
.totalCenter {
display: flex;
justify-content: 'center';
}
When you set the display property to flex of a class you can use these properties:
align-items : aligns items vertically.
justify-content : alings items horizontally.
Flex is really cool if you cant to know more you can check out these two articles:
Aligning Items in a Flex Container
A Complete Guide to Flexbox
I am trying to move a button underneath the drop down box in my product page. so that the information is presented with one information per row. I tried placing a div tag around the button to see if that be seen as a separate element that goes below the previous element but that did not work so I am lost in what to do to make the buy button to go underneath the size and 1 boxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" >
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<br>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 130%;
}
h2{
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p{
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product{
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2{
width: 100%;
height: 100%;
float: left;
}
.product-image{
/*border: 1px dotted #aaa;*/
}
.product-image .bg{
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator{
text-align:center;
}
.dot:hover{
background-color: #444;
}
.product-info{
padding: 0px 8%;
}
.product-info h1{
margin-bottom: 5px;
}
.product-info h2{
margin-bottom: 50px;
}
.product-info .select-dropdown{
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select{
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active, select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn{
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover{
background-color: #555;
}
.product-info p{
margin-bottom: 30px;
}
.product-info p a{
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover{
opacity: .7;
}
.product-info ul{
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li{
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before{
content:"\2022";
margin-right: 20px;
}
.product-info a.share-link{
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover{
border-bottom: 2px solid #aaa;
}
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
height:10%;
}
There are multiple things wrong here.
The <br> tag should not be used for element positioning. This should be strictly reserved for text.
If you don't want your elements to display a line, it's probably a good idea to not set their display property to an inline-block for starters.
There are even some syntactical errors (eg. excessive </div> tag and what not). In general, I'd recommend writing your code in some sort of linter as it has some readability issues.
I did the baremost minimum of removing the unnecessary <br> tag and added clear:both to the .Buy class formatting. Producing the desired result.
body {
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 130%;
}
h2 {
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p {
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.Buy {
clear: both;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product {
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2 {
width: 100%;
height: 100%;
float: left;
}
.product-image {
/*border: 1px dotted #aaa;*/
}
.product-image .bg {
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator {
text-align: center;
}
.dot:hover {
background-color: #444;
}
.product-info {
padding: 0px 8%;
}
.product-info h1 {
margin-bottom: 5px;
}
.product-info h2 {
margin-bottom: 50px;
}
.product-info .select-dropdown {
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select {
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active,
select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn {
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover {
background-color: #555;
}
.product-info p {
margin-bottom: 30px;
}
.product-info p a {
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover {
opacity: .7;
}
.product-info ul {
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li {
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before {
content: "\2022";
margin-right: 20px;
}
.product-info a.share-link {
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover {
border-bottom: 2px solid #aaa;
}
#footer {
width: 100%;
background-color: #222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear: both;
height: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet">
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {
plusSlides(1)
}, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
You have <br/> tag before button, just add style to it like this
<br style="clear: both;" />
and you should be fine :)