We Keep Coding

How can I solve the problem of my quiz project?

I've been working on this project for a while. I found the code from the Internet. I have never created a quiz game before. I edited the code a little. But unfortunately there are some problems with the code, which are difficult for me.
So far only digits are represented as questions. I want letters to be used for questions as well. The button to run the game, the limited reflection time and the score works. Unfortunately, if you press the right answer, the spear doesn't go on, but stops, but you get a point. I want that after a correct answer new questions are added and that the user gets a point. If the user presses the wrong answer, I want the game to stop and the scores achieved to be displayed.
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
hide('try');
show('correct');
setTimeout(function(){
hide('correct');
},1000);
genQA();
}else{
show('try');
hide('correct');
setTimeout(function(){
hide('try');
},1000);
}
}
}
}
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: none;
}
#correct
{
display: none;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct">Correct</div>
<div id="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>

I looked at your javascript code and i found some solutions .
This code will works for you . Its a little different : i corrected some errors .
I also added the classes for 'correct' and 'try' and modified the css file .
Here you are your corrected codes :
Javascript code:
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('try').innerHTML=""
document.getElementById('correct').innerHTML="Correct";
setTimeout(function(){
document.getElementById('correct').innerHTML="";
},1000);
genQA();
}else{
document.getElementById('try').innerHTML="Try Again";
document.getElementById('correct').innerHTML="";
setTimeout(function(){
document.getElementById('try').innerHTML="";
},1000);
}
}
}
}
Css file :
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;
}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
Html Page :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-
scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct" class="correct">Correct</div>
<div id="try" class="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>
You only have to replace your files with this codes .
I hope it helps you ! :-)

Html button works well, but css button doesn't

I'm not a pro on coding, I created a popup script to use with a cpa redirect after user click the css button on the second popup.
But when user clicks the css button, nothing happens. I added a html button and it works like a charm. I tried to figure out the root cause but had no luck.
run the code here on w3schools.com
$(function() {
openUp('#overlay')
$("#popup").on('click', function() {
openUp('#overlay2')
closeDown('#overlay')
});
function openUp(el) {
$(el).fadeIn(500, function() {
$(this).next().show();
});
}
function closeDown(el) {
$(el).fadeOut(500, function() {
$(this).next().hide();
});
}
$('a').each(function(index, element) {
$(this).click(function(e) {
e.preventDefault();
});
});
});
#DIV_1 {
bottom: 0px;
box-shadow: rgba(255, 255, 255, 0.298) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.298) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 39px;
left: 0px;
letter-spacing: 2px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 79, 132) 0px 1px 0px;
text-size-adjust: 100%;
top: 0px;
width: 135px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 53.2344px 19.5px;
transform-origin: 53.2344px 19.5px;
caret-color: rgb(255, 255, 255);
background: rgb(0, 109, 183) linear-gradient(0deg, rgb(0, 109, 183), rgb(0, 139, 234)) repeat scroll 0% 0% / auto padding-box border-box;
border-top: 1px solid rgb(0, 79, 132);
border-right: 1px solid rgb(0, 79, 132);
border-bottom: 2px solid rgb(0, 79, 132);
border-left: 1px solid rgb(0, 79, 132);
font: normal normal 700 normal 10px / 10px Lego, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 13px 14px;
}
/*#DIV_1*/
img {
width: 100%;
object-fit: scale-down;
min-width: 100%;
height: auto;
}
.form-style-5 {
max-width: 500px;
display: inline-block;
padding: 8px 16px;
background: #f4f7f8;
margin: 8px auto;
padding: 16px;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 8px;
}
.form-style-5 label {
display: block;
margin-bottom: 6px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 30px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 17px 37px 16px 37px;
color: #000;
margin: 0 auto;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #ffcf00;
border-width: 1px 1px 3px;
margin-bottom: 10px;
background: rgb(255, 207, 0) none repeat scroll 0% 0% / auto padding-box border-box;
box-shadow: rgba(232, 105, 2, 0.5) 0px 0px 25px 0px inset;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
background: #ffae00;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.1s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?id={removed my aff id}"></script>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup" style="position:fixed; display:none; top:110px; width:90%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<img class="aligncenter wp-image-21 size-full" src="https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg" alt="ALT TEXT" width="492" height=a uto; />
<p <div id="DIV_1">
PROCEED >>
</p>
</div>
<div id="overlay2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup2" style="position:fixed; display:none; top:110px; width:85%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<p style="color:#FFFFFF;">
</p>
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number"></span> Please enter your information</legend>
<input type="text" name="field1" placeholder="Receiver's full name *">
<input type="email" name="field2" placeholder="Email *">
<textarea name="field3" placeholder="Shipping address:"></textarea>
<label for="job">Country:</label>
<select id="job" name="field4">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<textarea name="field5" placeholder="Greeting message: Eg. Hi Jonathan, ..Loving sister, Christina."></textarea>
</fieldset>
<button type="button" id="myBtn" onclick="og_load();">Apply</button>
<button class="button" style="vertical-align:middle" onclick="og_load();"><span>Apply </span></button>
</form>
</div>
</div>
<head>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?(removed my affiliate code)"></script>
</head>

Not sure what a 'css-button' is, but why not just add your .button class to the button like so:
<button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>

Meta Viewport Tag options does not work on iOS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fox News</title>
<link rel="icon" href="https://s2.googleusercontent.com/s2/favicons?domain_url=http://foxnews.com" type="image/gif" sizes="16x16">
<style>
body {
margin: auto;
}
.iframe-container {
position: relative;
height: 100%;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
margin: 0px;
border: 0;
}
.social-magnet {
position: fixed;
left: 10px;
font-family: 'Source Sans Pro', sans-serif;
}
.clx_iframe {
position: absolute;
display: block;
bottom: 30px;
left: 5%;
width: 100%;
height: 100px;
font-family: sans-serif;
}
.socialbar {
width: 87px;
height: 87px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: none;
pointer-events: fill;
box-shadow: none;
z-index: 101;
position: absolute;
top: 35%;
left: 147px;
border-radius: 50% !important;
}
.profilePhoto {
width: 87px;
height: 87px;
border-radius: 50%;
border: 3px dashed lightgray;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
object-fit: contain;
}
.messageContainer {
width: 390px;
height: auto;
line-height: 18px;
padding: 10px 15px 10px 15px;
font-size: 16px;
border: 2px solid white;
border-radius: 5px;
position: absolute;
text-align: center;
color: black;
background-color: white;
text-shadow: none;
pointer-events: fill;
box-shadow: none;
opacity: 1;
z-index: 100;
}
.circle-div {
background: #4C4E60;
height: 20px;
border-radius: 50% !important;
width: 20px;
float: right;
position: relative;
top: -20px;
right: -25px;
color: white;
}
#minimizeToggle {
color: white;
opacity: 0.75;
cursor: pointer;
font-weight: bolder;
font-size: 13px;
text-decoration: none;
}
#logosocial {
float: right;
text-decoration: none;
padding-right: 2.5px;
padding-left: 2.5px;
}
.logoImage {
width: 46px;
height: 20px;
margin-top: -5px;
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.6;
position: relative;
right: -25px;
}
#profileName {
width: 77%;
line-height: 20px;
font-size: 15px;
padding-bottom: 3px;
text-align: left;
color: rgb(34, 34, 34);
display: block;
opacity: 0.6;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
font-weight: bold;
}
#message {
height: 36px;
margin-top: 4px;
display: table;
text-align: left;
overflow: hidden;
width: auto;
letter-spacing: 0.5px;
color: rgb(34, 34, 34);
}
#messageText {
height: auto;
width: 100%;
display: table-cell;
vertical-align: middle;
font-weight: 400;
font-size: 14px;
color: rgb(34, 34, 34);
word-wrap: break-word;
word-break: break-all;
}
#formButton {
float: right;
margin-left: 15px;
cursor: pointer;
color: rgb(255, 255, 255);
background-color: #4C4E60;
width: 90%;
}
.triangle {
box-sizing: border-box;
background: white;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 45%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent white white;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.buttonCTA {
height: 36px;
width: auto;
display: table-cell;
padding: 0 15px 0 15px;
margin: 0 0 0 15px;
border-radius: 5px;
border: 3px solid #4C4E60;
line-height: 35px;
font-weight: 400 !important;
text-decoration: none;
text-align: center;
}
/* Media Queiries */
#media screen and (max-width: 359px) and (min-width: 320px) {
.messageContainer {
width: 300px;
}
.socialbar {
left: 107px;
}
}
#media screen and (max-width: 374px) and (min-width: 360px) {
.messageContainer {
width: 340px;
}
.socialbar {
left: 125px;
}
}
#media screen and (max-width: 413px) and (min-width: 375px) {
.messageContainer {
width: 355px;
}
.socialbar {
left: 133px;
}
}
</style>
</head>
<body>
<div id="iframeWrapper" class="iframe-container">
<iframe id="website_frame" class="iframe" src="https://foxnews.com" sandbox='allow-forms allow-scripts allow-same-origin' allowfullscreen></iframe>
<div class="social-magnet">
<div class="messageContainer triangle">
<div class="circle-div"><a id="minimizeToggle" href="http://foxnews.com">x</a></div>
<a id="logosocial" href="https://clickx.io?utm_source=http://www.clickx.io&utm_campaign=contact&utm_medium=offerwidget" target="_blank">
<div class="logoImage"></div>
<a id="profileName" href="http://foxnews.com" target="_blank">Kannan Devan</a>
</a>
<span id="message">
<span id="messageText" class="text-left">
Good evening. Spent the Evening with a cup of TEA
</span>
</span>
<a class="buttonCTA" id="formButton" href="http://foxnews.com" target="_blank">
Hello Guys
</a>
</div>
<span class="socialbar">
<a id="imageLink" href="http://foxnews.com" target="_blank">
<img id="image_src" class="profilePhoto" src='https://ffb2efd5105ff0aedbc9-9cdacdeebf0faa19b665bf427f0c8092.ssl.cf1.rackcdn.com/assets/new-creator/plus-icon4.png' alt="Brand Logo">
</a>
</span>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var wrapper = document.getElementsByClassName('social-magnet')[0];
var image_wrapper = document.getElementsByClassName('socialbar')[0];
var height = document.getElementsByClassName('messageContainer')[0].offsetHeight;
wrapper.style.bottom = (height + 132).toString() + 'px';
image_wrapper.style.marginTop = (height + 40).toString() + 'px';
</script>
</body>
</html>
I tried to load a website in a plain HTML page using iFrame.
When opening in desktops, the desktop version of the site is opened.
Also when opening in Android phones, the mobile version is loaded, which is the expected behavior.
But the problem is that, when opening in iPhones, the desktop version of the website is loaded.

Setting the iFrame property scrolling='no' made it look like the mobile version of the website to be loaded correctly on iOS.
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "<%= #social_snip.url %>");
ifrm.id = 'ContentFrame';
ifrm.scrolling = 'yes';
if (check) {
document.getElementById('iframeWrapper').className += ' mobile-theme';
}
var IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(IOS) {
ifrm.scrolling = 'no';
}
The above code checks whether the OS is an iOS, if yes it will set the scrolling property of iFrame with a no value.

CSS or JS conflict?

I'm a novice so this may seem like a rather basic problem.
A html page has 4 html embedded audio players which looked as styled and worked fine.
I then added a slide player called Fancy Box. The CSS and JS files are linked to separate folders than the CSS and JS files of the audio player.
The audio players continue to work fine however, the style attributes no longer show up, instead the browser’s audio player shows. Fancy Box works fine.
Is there a CSS or JS conflict of some sort?
Any advice is much appreciated in solving my dilemma.
(Sorry for all my incompetence.)
Here is the HTML and Both CSS.
/** audio player styles **/
.audio-player,
.audio-player div,
.audio-player h2,
.audio-player a,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.audio-player {
position: relative;
width: 300px;
height: 70px;
margin: 0 auto;
}
.audio-player h2 {
position: absolute;
top: 7px;
left: 10px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 11px;
color: #000000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* play/pause control */
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 34px;
height: 34px;
top: 32px;
left: 7px;
background: transparent url('playpause.png') 0 0 no-repeat;
}
.mejs-controls .mejs-pause button {
background-position: 0 -35px;
}
/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 23px;
right: 85px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 85px;
height: 11px;
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 9px;
top: 1px;
left: 1px;
background: #c82530;
background: -webkit-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -moz-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -o-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -ms-linear-gradient(top, #c82530 0%, #c82530 100%);
background: linear-gradient(top, #c82530 0%, #c82530 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* time scrubber bar */
.mejs-controls div.mejs-time-rail {
width: 160px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 160px;
height: 12px;
top: 40px;
left: 55px;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #565860;
width: 160px !important;
/* fixes display bug using jQuery 1.8+ */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
top: 0;
left: 0;
width: 0;
background: #7b7d82;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
top: 0;
left: 0;
width: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #00873d;
background: -webkit-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -moz-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -o-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -ms-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: linear-gradient(top, #00873d 0%, #83bb63 100%);
}
/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 20px;
height: 22px;
top: -6px;
background: url('handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -1px;
background: url('handle-sm.png') no-repeat;
}
/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
z-index: 9999;
background: url('time-box.png');
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666;
text-align: center;
z-index: 9999;
}
/** clearfix **/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Paul Minotto: Music</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
a:link {
color: #00873d;
text-decoration: none;
}
a:visited {
color: #cc3333;
text-decoration: none;
}
a {
font-size: 14px;
}
a:hover {
color: #cc3333;
text-decoration: none;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 36px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.green {color: #11772E;
}
.red {color: #cc3333;
}
#rcorners { border-radius: 45%;
border: 5px solid #000000;
padding: 0px;
width: 700px;
height: 130px;
}
.color {
color: #FFF;
}
</style>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>
<title>slideShow</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen"/>
<link rel="stylesheet" href="/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen"/>
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
</head>
CSS for slide show player.
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #FFF;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 0px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}

Place bullets navigation bar inside the slideshow

I created a site, where i have a slideshow with a bullet navigation, i think its called bullet, but its located outside of the slideshow and i want it inside close to the bottom.
However i cant figure how to do it. How can i place the circles for navigation inside the images of the slideshow ?
I placed into a free host in order to you see the issue with the images: http://optential.co.nf/
var seconds = 5; //time beetwen 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);
background-size: cover;
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: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
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 {
width: 100%;
height: 90%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: 100%;
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundos.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: 100%;
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/fixedbar.js"></script>
<script src="js/slider.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">
<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...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" 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>
<script src="js/slider.js"></script>
</body>
</html>

You can add a simple negative CSS margin to your dots blocs:
.controls > div {
margin-top: -20px;
}