Only one out of my two “Order Now” buttons seems to work. Can’t find out the issue. The link and the :hover function works for the first button but for the second one none of them works. The first button is showcasebutton and the second one is showcasebutton2. They use the same code in CSS but it still isn’t working.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.nametext {
position: absolute;
top: 20px;
width: 100%;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
z-index: 2;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div class="nametext">
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">
I added a container class and deleted the nametext class.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
width: 100%;
padding-bottom: 20px;
}
nav {
position: absolute;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container{
position: relative;
width: 100%;
align-content: center;
padding-bottom:20px;
height: auto;
background: #2421fe;
display: block;
z-index:1;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div>
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">
Related
I have a HTML page that works on both desktop and mobile. It has a button that when pressed scrolls to the top of the page. But I only want it to appear when in desktop mode. It's hidden until you scroll down the page, and then becomes clickable.
This is my code:
index.html:
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
×
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact</li>
<hr>
<li class="mobile-nav-link">About Us</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
main.css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
width: 150px;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 20px;
}
.desktop-nav-links a {
margin: 20px 25px 0;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 150px;
}
mobile.css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 30px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
width: 150px;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
display: none;
}
.menu-button {
display: block;
margin: 30px 15px;
font-size:25px;
cursor:pointer;
color:white;
float: right;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
float: right;
margin-right: 20px;
}
.mobile-nav-panel {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.mobile-nav a {
margin: 20px 0 0 0;
padding: 0 0 20px;
color: white;
font-size: 20px;
}
.mobile-nav-panel .closebtn {
position: absolute;
top: 0px;
right: 25px;
font-size: 50px;
}
.mobile-nav-link-list {
margin-right: 25px;
padding-top: 50px;
font-size: 1px;
list-style: none;
text-align: right;
}
.mobile-nav-link {
padding: 25px 0;
font-size: 1px;
}
.footer-logo {
width: 125px;
}
This is the result (bottom-right corner):
Is there any way to do this?
Thanks
Add this to mobile.css and the button will be gone, visually.
#return {
opacity: 0;
pointer-events: none;
}
Otherwise you would have to compare against window.width to get the equivalent of media query (or actually viewport width, see this answer)
Another option, if you're using bootstrap is to check against visibility of the "width" classes. see this answer.
I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.
Try width: 100vw; in the body element(or the element that have background color)
When I click the input the page is going crazy on the phone. There is not problem on the desktop. I believe the problem is because of the CSS but couldn't figure it out. I am a beginner designer and I am working on responsive web designers. When I click the input the background changes and page is not loading correctly.
This is the HTML of the site
body {
font-family: 'Playfair Display', serif;
position: relative;
background-image: url("pop-zebra-4q3Ogm3Kt44-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
body::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8)
}
#all {
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
padding: 3rem;
z-index: 1;
color: #fff;
}
.showcase-top {
text-align: center;
margin-right: 2rem;
}
.showcase-top h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.8rem;
}
.showcase-top p {
font-size: 1.1rem;
letter-spacing: 5px
}
#second {
margin-top: 0.2rem
}
.tabs {
display: flex;
text-align: center;
padding: 2rem;
}
.tab {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid rgba(166, 151, 7, 0.8);
border-radius: 50%;
margin-right: 2rem;
}
.tabs .tab h1 {
margin-top: 0.9rem;
}
.form {
padding: 0.5rem 5rem;
text-align: center;
margin-right: 2.5rem;
width: 90%;
max-width: 900px;
padding: 10px 50px;
margin-left: 0.6rem;
}
.form input {
width: 70%;
padding: 0.8rem;
border: none;
border-radius: 1.5rem;
margin-right: 0.5rem;
outline: none;
}
.form button {
width: 25%;
padding: 0.8rem;
border-radius: 1.5rem;
border: none;
background-color: #a69802;
color: #edece1;
cursor: pointer;
outline: none;
}
.footer {
color: rgba(255, 255, 255, 0.6);
width: 100%;
font-size: 6px;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-10%, 51%);
letter-spacing: 1px
}
#media screen and (max-width:768px) {
.tabs {
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
margin-left: 0.6rem;
}
.tab {
margin-bottom: 1rem;
height: 90px;
width: 90px;
}
.form {
display: inline-block;
margin-right: 1rem;
margin-left: 1rem;
margin-top: -3rem;
width: 100%;
}
.form button {
width: 100px;
}
.showcase-top {
width: 500px;
margin-left: 1rem;
}
.showcase-top h1 {
font-size: 2rem;
}
.showcase-top p {
font-size: 1rem;
letter-spacing: 3px;
}
}
#media screen and (min-width:320px) and (max-width:480px) {
.form {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
.form input {
width: 65%;
}
.form button {
width: 40%;
margin-top: 1rem;
}
.showcase-top p {
font-size: 0.7rem
}
.tabs {
padding: 0;
padding-top: 1.2rem
}
.tab {
height: 90px;
width: 90px;
}
.footer {
bottom: 15%;
left: 23%
}
}
<body>
<showcase id="all">
<div class="showcase-top">
<h1>Coming Soon</h1>
<p>My website is under construction</p>
<p id="second">Follow us now!</p>
</div>
<section class="tabs">
<div class="tab">
<h1 id="day">na</h1>
<p>Days</p>
</div>
<div class="tab">
<h1 id="hour">na</h1>
<p>Hours</p>
</div>
<div class="tab">
<h1 id="min">na</h1>
<p>Minutes</p>
</div>
<div class="tab">
<h1 id="sec">na</h1>
<p>Seconds</p>
</div>
</section>
<form class="form">
<input type="email" placeholder="Enter Email...">
<button type="submit">Subscribe</button>
</form>
</showcase>
<footer class="footer">
<h1>Designed by Cag | Copyright © 2021</h1>
</footer>
I created simple website, by used HTML5, CSS3, JS and Bootstrap. I have conflict with jumbotron and img-responsive. When I minimize the screen aprox. below 760, I see two wallpapers the div.jumbotron, and img-responsive. but I want to see only the img-responsive.
I was checking many times what's going on, but I have no idea.
Do somebody can review the code. I will be really grateful.
Link to this web -https://magdalena-dering.github.io/RWD-Coffee-Corner/
/*BODY*/
body {
background-color: #ffeee6;
font-family: 'Mirza', cursive;
}
/*HEADER*/
#header-nav {
background-color: #ffffff;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand a:focus,
.navbar-brand a:hover {
text-decoration: none;
}
.navbar-brand h1 {
/* Restaurant name */
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
line-height: .75;
}
.navbar-brand span {
font-size: 1em;
color: #4d0000;
}
#nav-list a {
font-size: 1.6em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin-top: 5px;
margin-left: 5px;
background-color: #ffeee6;
border: 1px solid #ffffff;
box-shadow: 0 0 30px #ff9999;
}
#nav-list a:hover {
background: #ffeee6;
box-shadow: 3px 3px 3px #ff9999;
}
.navbar-header button.navbar-toggle,
.navbar-header .icon-bar {
border: 1px solid #661400;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
/*HOME PAGE*/
.container .jumbotron {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #4d1a00;
padding: 0;
border: 1px solid #ffffff;
}
#menu-tile,
#specials-tile,
#map-tile {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 280px;
margin: 30px;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#menu-tile:hover,
#specials-tile:hover,
#map-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
#menu-tile {
background: url('../images/menu.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#specials-tile {
background: url('../images/specials1.jpg') no-repeat;
background-position: center;
background-color: #ffccb3;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
/* FOOTER */
.panel-footer {
background-color: #ffffff;
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 20px;
}
.visible-xs {
border-top: 1px solid #800000;
}
#hours span,
#address span,
#sentence span {
color: #4d0000;
text-align: center;
text-shadow: 3px 3px 3px #ff9999;
font-size: 1.3em;
}
/***********MENU SIDE*********/
.category-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
}
.category-tile:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.category-tile+div {
margin-bottom: 50px;
}
#menu-title {
font-size: 1.8em;
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
}
span {
font-size: 1.4em;
text-align: center;
}
.text-center {
margin-top: 0px;
margin-bottom: 30px;
}
/***********COFFEE CATEGORY SIDE*********/
.coffee-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 180px;
height: 180px;
margin: 0 auto 15px;
margin-bottom: 120px;
}
.coffee-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.coffee-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.row {
margin-right: 0px;
margin-left: 0px;
}
.coffee-price {
font-size: 1.2em;
text-align: center;
margin-top: -110px;
margin-bottom: 20px;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 230px;
height: 230px;
margin: 0 auto 15px;
}
.sweets-position:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.sweets-position span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.3em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
.sweet-price {
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 35px;
}
/***********SPECIALS SIDE*********/
.specials-tile {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/bday.jpg') no-repeat;
}
.specials-tile2 {
position: relative;
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
overflow: hidden;
width: 300px;
height: 300px;
margin: auto;
background: url('../images/catering.jpg') no-repeat;
}
.specials-tile:hover,
.specials-tile2:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.specials-tile span,
.specials-tile2 span {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1.6em;
color: #800000;
background-color: #ffcccc;
opacity: .7;
width: 100%;
}
h4 {
color: #4d0000;
margin-left: 10px;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text1,
.text2 {
font-size: 1.3em;
text-align: center;
margin-top: 10px;
position: relative;
border: solid 1px #ffcccc;
padding: 5px;
background-color: #ffe6e6;
}
.text1 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
.text2 a {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
}
/***********CONTACT SIDE*********/
#map-contact {
box-shadow: 0 0 30px #ff9999;
border: 1px solid #ffffff;
height: 250px;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
object-position: center;
}
#map-contact:hover {
box-shadow: 3px 3px 3px #ff9999;
}
.head-text {
color: #4d0000;
text-shadow: 5px 5px 5px #ff9999;
font-weight: bold;
text-align: center;
margin: 20px;
}
.contact-description {
font-size: 1.3em;
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
margin: 30px;
}
}
/********** Large devices only **********/
#media (min-width: 1200px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
}
.container .jumbotron {
background: url(../images/coffee-wallpapers-1200.jpg) no-repeat;
height: 675px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
}
/* Home Page */
.container .jumbotron {
background: url(../images/coffee-wallpapers-992.jpg) no-repeat;
height: 558px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
/* Header */
#logo-img {
background: url('../images/logo.png') no-repeat;
height: 120px;
width: 318px;
margin-top: 20px;
margin: 5px;
}
/* Home Page */
.container .jumbotron {
background: url('../images/coffee-wallpapers-768.jpg') no-repeat;
height: 432px;
box-shadow: 0 0 30px #ff9999;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand {
padding-top: 10px;
}
.navbar-brand h1 {
/* Restaurant name */
padding-top: 10px;
font-size: 5vw;
/* 1vw = 1% of viewport width */
margin-top: -10px;
}
#nav-list a {
font-size: 4vw;
}
.navbar-brand span {
font-size: 3vw;
color: #4d0000;
}
/*Home Page*/
#logo-img {
background: url('../images/md.png') no-repeat;
height: 76px;
width: 210px;
}
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
/*Footer*/
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: vw;
}
.panel-footer {
font-size: 3vw;
}
#hours span,
#address span,
#sentence span {
font-size: 4vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 4vw;
}
#menu-title {
font-size: 4vw;
}
span {
font-size: 3vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 4vw;
}
.coffee-price {
font-size: 4vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 4vw;
}
.sweet-price {
font-size: 4vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 4vw;
}
.text1,
.text2 {
font-size: 3vw;
margin: 15px;
}
.text-center span {
font-size: 4vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 4vw;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
#media (max-width: 479px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 6vw;
margin-left: 10px;
}
#nav-list a {
font-size: 5vw;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 6vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 6vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
/********** Super EXTRA (created by me) extra small devices Only :-)**********/
#media (max-width: 423px) {
/* Header */
#nav-list a {
color: #4d0000;
text-shadow: 3px 3px 3px #ff9999;
font-weight: bold;
text-align: center;
background-color: #ffeee6;
border: 2px solid #ffffff;
margin-top: 6px;
margin-bottom: 3px;
}
.navbar-nav {
margin: 0px;
margin-top: 3px;
margin-left: -3px;
}
.navbar-brand h1 {
font-size: 7vw;
}
#nav-list a {
font-size: 6vw;
}
#logo-img {
background: url('../images/sm.png') no-repeat;
width: 150px;
height: 54px;
}
.navbar-brand span {
font-size: 4vw;
color: #4d0000;
}
/*Home Page*/
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
}
#menu-tile span,
#specials-tile span,
#map-tile span {
font-size: 5vw;
}
/*Footer*/
.panel-footer {
font-size: 5vw;
}
#hours span,
#address span,
#sentence span {
font-size: 6vw;
}
/***********MENU SIDE*********/
.category-tile span {
font-size: 6vw;
}
#menu-title {
font-size: 6vw;
}
span {
font-size: 5vw;
}
/***********COFEE CATEGORY SIDE*********/
.coffee-position span {
font-size: 6vw;
}
.coffee-price {
font-size: 5vw;
}
/***********SWEETS CATEGORY SIDE*********/
.sweets-position span {
font-size: 7vw;
}
.sweet-price {
font-size: 5vw;
}
/***********SPECIALS SIDE*********/
.specials-tile {
background: url('../images/bday 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
margin-bottom: 10px;
}
.specials-tile2 {
background: url('../images/catering 200x200.jpg') no-repeat;
width: 200px;
height: 200px;
}
.specials-tile span,
.specials-tile2 span {
font-size: 6vw;
}
.text1,
.text2 {
font-size: 5vw;
margin: 15px;
}
.text-center span {
font-size: 5vw;
}
/***********CONTACT SIDE*********/
.head-text span {
font-size: 6vw;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive design - coffee corner</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Mirza:400,500,600,700" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-xs visible-sm visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>coffee corner</h1><span> Magdalena Dering ©<br> RWD</span></a>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navMenuButton">
<a href="menu.html " onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> menu</a>
</li>
<li>
<a href="specials.html">
<span class="glyphicon glyphicon-star-empty"></span><br class="hidden-xs"> specials</a>
</li>
<li>
<a href="contact.html">
<span class="glyphicon glyphicon-envelope"></span><br class="hidden-xs"> contact</a>
</li>
</ul>
<!-- #nav-list -->
</div>
<!-- .collapse .navbar-collapse -->
</div>
<!-- .container -->
</nav>
<!-- #header-nav -->
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/coffee-wallpapers-768.jpg" alt="Picture of restaurant" class="img-responsive visible-xs">
</div>
</div>
<div class="row"></div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu.html">
<div id="menu-tile"><span>menu</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="specials.html">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="https://www.google.pl/maps/place/1211+6th+Ave,+New+York,+NY+10036,+Stany+Zjednoczone/#40.7586101,-73.9841164,17z/data=!3m1!4b1!4m5!3m4!1s0x89c258ff14d2b811:0x3569ce18f2731425!8m2!3d40.7586101!4d-73.9819277" target="_blank">
<div id="map-tile">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.155246285712!2d-73.98411638459368!3d40.75861007932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258ff14d2b811%3A0x3569ce18f2731425!2s1211+6th+Ave%2C+New+York%2C+NY+10036%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1482304685186"
width=315 height="280" frameborder="0" style="border:0" allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div>
<!-- End of #home-tiles -->
</div>
<!-- End of #main content -->
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span><b>hours:</b><br></span> monday - friday: 11am- 8pm<br> saturday - sunday: 10am - 9pm<br>
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
<span><b>address:</b><br></span> 1211 6th Ave, New York<br> NY 10036
<hr class="visible-xs">
</section>
<section id="sentence" class="col-sm-4">
<span><b>quots:</b><br></span><i>
“Let me wake up next to you, have coffee in the morning and wander through<br>the city with your hand in mine, and I'll be happy for the rest of my fucked<br> up little life.”</i><br> ― Charlotte Eriksson
<hr class="visible-xs">
</section>
</div>
</div>
</footer>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Best,
Megi
add background for 760 media without url & height 100% to your custom style css
#media (max-width: 767px) {
.container .jumbotron {
margin-top: 30px;
padding: 0;
box-shadow: 0 0 30px #ff9999;
background: url('');
height: 100%;
}
}
I´ve trying to implement this simple slideshow: http://codepen.io/rafaelcastrocouto/pen/doZNMo
But im not having sucess and i dont know what the problem is, the only thing that shows up is the last image of the slideshow, i added the path to the js file, checked if the name are correct, but stil no luck.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>
I believe your jquery wasn't included. Here is the same code with jquery included and the slideshow working.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>