I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>
If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>
Try with setValue('') method to reset any element value.
Related
I have 3 popup divs that open onclick. At first it you clicked inside the div it closed, i fixed that. Then i found a code to click outside the div and it would close the div. So I edited that code and it works fine, if you click outside the div it closed. So I added that code to all 3 and now none of the click outside the divs to close work. I do not understand why this is happening as I am extremely new to java script coding. If someone could help me I would be extremely grateful.Thanks
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
// Prevents menu from closing when clicked inside
document.getElementById("myPopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.amount')) {
var dropdowns =
document.getElementsByClassName("tooltiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmyPopup = dropdowns[i];
if (openmyPopup.classList.contains('show')) {
openmyPopup.classList.remove('show');
}
}
}
}
function myFunctions() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("shows");
}
// Prevents menu from closing when clicked inside
document.getElementById("mypopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbm')) {
var dropdowns =
document.getElementsByClassName("tooltipstext");
var i;
for (i = 0; i < dropdownss.length; i++) {
var openmypopup = dropdowns[i];
if (openmypopup.classList.contains('shows')) {
openmypopup.classList.remove('shows');
}
}
}
}
function myFunctionss() {
var popup = document.getElementById("mYpopup");
popup.classList.toggle("showS");
}
// Prevents menu from closing when clicked inside
document.getElementById("mYpopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbc')) {
var dropdowns =
document.getElementsByClassName("toolstiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmYpopup = dropdowns[i];
if (openmypopup.classList.contains('showS')) {
openmypopup.classList.remove('showS');
}
}
}
}
/******************************************************************************************************************************************************Header*/
.s-header {
background-color: red;
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.s-header-inner {
background-color: red;
border: 1px solid red;
height: 63px;
margin: auto;
width: 95%;
}
.s-header-links-left {
float: left;
margin-top: 12px;
}
/********************************************************************************************************************************************************Logo*/
.s-logo {
height: 65px;
position: absolute;
width: 150px;
}
.s-logo img {
position: absolute;
width: 185px;
}
/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
float: right;
margin-top: 20px;
}
.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.tooltip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltip .tooltiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 205px;
z-index: 1;
}
/* Toggle this class - hide and show the popup */
.tooltip .show {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
/***************************************************************************************************************************************Fur Baby Of The Month*/
.furbm {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}
.furbm .fa-trophy {
color: red!important;
font-size: 18px!important;
}
.furbm .fa-trophy:hover {
color: red!important;
font-size: 18px!important;
}
.tooltips {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltips .tooltipstext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -215px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: center;
visibility: hidden;
width: 205px;
z-index: 1;
}
.tooltips .shows {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.tooltipstext img {
height: 150px;
margin-top: 20px;
width: 150px
}
/***************************************************************************************************************************************Fur Baby Contest*/
.furbc {
cursor: pointer;
}
.furbc .fa-comments {
color: red!important;
font-size: 20px!important;
}
.furbc .fa-comments:hover {
color: #ffffff!important;
font-size: 20px!important;
}
.toolstip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.toolstip .toolstiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -281px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 275px;
z-index: 1;
}
.toolstip .showS {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.furbcf form {
display: flex;
position: relative;
width: 100%;
}
.furbcf input[type=text] {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0px;
padding: 5px 5px;
width: 175px;
}
.furbcf input:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf textarea {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0;
padding: 5px 5px;
width: 175px;
}
.furbcf textarea:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf input[type="submit"] {
background-color: #ffffff;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #da291c;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
outline: none;
padding: 5px;
width: 100px;
}
.furbcf input[type="submit"]:hover {
background-color: #da291c;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
padding: 5px;
width: 100px;
}
/********************************************************************************************************************************************************Menu*/
i.fa-bars {
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
margin-left: 25px;
}
i.fa-bars:hover {
color: #ffffff;
font-size: 20px;
margin-left: 25px;
}
.sidenav {
border-left: 1px solid #ccd1d4;
background-color: #ffffff;
height: 100%;
overflow-x: hidden;
padding-top: 50px;
position: fixed;
right: -1px;
top: 0;
transition: 0.5s;
width: 0;
z-index: 1;
}
.sidenav p {
color: #242527;
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
padding: 12px 8px 0px 32px;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}
.sidenav a {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: none!important;
transition: 0.3s!important;
}
.sidenav a:hover {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: underline!important;
transition: 0.3s!important;
}
.sidenav a img {
height: 12px;
margin-left: -0px;
margin-right: 10px;
}
.sidenav .closebtn {
color: #aaaaaa!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
top: 5px!important;
}
.sidenav .closebtn:hover {
color: #353748!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
text-decoration: none!important;
top: 5px!important;
}
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunctions()" title="Contest Winner">
<div class="furbm">
<i class="fa fa-trophy"></i>
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month Contest -->
<span class="toolstip" onclick="myFunctionss()">
<div class="furbc">
<i class='fas fa-comments'></i>
</div>
<span class="toolstiptext" id="mYpopup">
Enter Octobers cutest Fur Baby contest and win a bag of your Fur Babies food of choice.
</br>
</br>
<form class="furbcf" method="post" action="send_contact.php" enctype="multipart/form-data">
<label for="first_name">First Name: <font color="red">*</font></label>
</br>
<input type="text" id="first_name" name="first_name" autocomplete="off" required>
</br>
</br>
<label for="last_name">Fur Babies Name: <font color="red">*</font></label>
</br>
<input type="text" id="last_name" name="last_name" autocomplete="off" required>
</br>
</br>
<label for="email">Email: <font color="red">*</font></label>
</br>
<input type="text" id="email" name="email" autocomplete="off" required>
</br>
</br>
<input type="file" name="uploaded_file"autocomplete="off" required>
</br>
</br>
<input type="submit" name="Submit" value="Submit">
</form>
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span style="cursor:pointer" onclick="openNav()" title="Menu">
<i class="fa fa-bars"></i>
</span>
<div id="mySidenav" class="sidenav">
×
<p>WHO WE ARE:</p>
Home
About Us
Privacy Policy
Terms of Use
<p>RESOURCES:</p>
Contact Us
FAQ
Our Donations
Spread The Word
<p>KEEP IN TOUCH:</p>
<a href="https://www.facebook.com/CapeBretonCares/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/facebook.png">Facebook</a>
<a href="https://twitter.com/WeCapersCare/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/twitter.png">Twitter</a>
<p>AVAILABLE ON:</p>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/brave.png">Brave</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/chrome.png">Google Chrome</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/edge.png">Microsoft Edge</a>
<a href="https://addons.mozilla.org/en-CA/firefox/addon/cape-breton-start-page/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/firefox.png">Mozilla Firefox</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>
I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});
I am building a website for a college class and I've run into a problem. I can't seem to find the answer when I google it, so I made an account to post it here. I hope that someone is able to identify what is going on.
As you can see, the embedded twitter post is showing up on top of the hamburger menu and I'm not sure how to get it underneath.
Here is the HTML (It's still a work in progress and I'm pretty new so please forgive me for any ugly code):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="images/run.png">
</head>
<body>
<header>
<div id="weatherBar" class="weatherBar">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<nav class="menu">
<ul>
<li>
About the Events
<ul class="submenu">
<li>Starting Times</li>
<li>Course Details</li>
<li>What to Bring</li>
</ul>
</li>
<li>Upcoming Events</li>
<li>Registration</li>
<li>Packet Pick Up</li>
<li>About Us</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</nav>
<div class="socialLinks">
<img src="images/fb-ico.png" alt="" class="iconHeight">
<img src="images/twit-ico.png" alt="" class="iconHeight">
<img src="images/inst-ico.png" alt="" class="iconHeight">
</div>
</div>
</header>
<main class="wrapper">
<div id="details" class="details lightSub contentFill contentPad">
<h2 class="subHeader">What People are Saying</h2>
<div class="sub_head_line_white"></div>
<div class="socialWrapper centering">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcas222cascade%2Fposts%2F366912850439109&width=350&show_text=true&height=214&appId" width="350" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="socialWrapper centering">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Fantastic weather for training! Can't wait to get in the water for open water swims!</p>— CAS 222 (#pcccas222) May 10, 2018</blockquote>
</div>
</div>
</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/ham.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
Here is the javascript:
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").show();
$(".hamburger").on("click", function () {
$(".menu").slideToggle("slow");
$(".hamburger").hide();
$(".cross").show();
});
$(".cross").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
$(".menu a").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
});
Here is the CSS:
Menu.css
.hamburger {
background: none;
position: relative;
top: 0;
right: 0;
line-height: 35px;
color: red;
border: 0;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.cross {
background: none;
position: relative;
top: 0;
right: 0;
color: red;
border: 0;
font-size: 3em;
line-height: 55px;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.socialLinks {
background: none;
position: fixed;
top: 8px;
right: 10px;
color: red;
border: 0;
cursor: pointer;
outline: none;
z-index: 10;
}
.iconHeight {
height: 20px;
}
.menu {
/* z-index: 10;*/
font-weight: 700;
width: 100%;
height: 100vh;
background: rgb(0, 0, 0, .85);
position: absolute;
top: 25px;
padding-top: 20px;
right: 0;
text-align: left;
font-size: 2em;
text-decoration: none;
color: white;
font-family: 'Roboto Condensed', sans-serif;
z-index: 10;
}
.menu ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
.menu li {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
}
.menu li:hover {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
color: red;
}
.menu ul a {
text-decoration: none;
color: white;
margin: 0;
}
.menu ul a:hover {
text-decoration: none;
color: red;
}
.menu ul a:active {
text-decoration: none;
color: white;
}
.menu ul a:visted {
text-decoration: none;
color: gray;
}
.submenu li {
padding-left: 25px;
}
style.css
body {
.grayGradient;
}
main {}
.hero {
background-image: url(../images/run3.jpg);
background-size: auto;
background-position: center;
height: 500px;
width: 100%;
}
.heroBot {
width: 100%;
height: 20px;
background-color: #000;
}
.weatherBar {
position: fixed;
height: 40px;
width: 100%;
background: black;
border-bottom: 3px red solid;
margin-left: auto;
margin-right: auto;
}
footer {
height: 30px;
width: 100%;
background: black;
border-top: 3px red solid;
}
h1 {
.fontOswald;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
}
.headerSize {
font-size: 50px;
.fontNarrow;
font-weight: normal;
letter-spacing: 1px;
}
.titleDiv {
padding-left: 15px;
width: 95%;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
border-bottom: 3px red solid;
}
.titleText {
padding-top: 20px;
padding-bottom: 20px;
}
.disc {
margin-top: 40px;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
.fontBaseText;
font-size: 1.5em;
color: #000;
text-align: center;
font-weight: lighter;
line-height: 30px;
}
.facebookFeed {
margin-left: auto;
margin-right: auto;
display: block;
}
.contentPad {
padding: 20px 20px 45px 20px;
}
.contentFill p {
font-size: 1.2em;
.fontBaseText;
line-height: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.subHeader {
.fontNarrow;
font-size: 1.8em;
}
.subHeaderAlt {
.fontNarrow;
font-size: 1.8em;
color: #fff;
}
.sub_head_line {
height: 5px;
width: 95%;
.grayGradientBtR;
}
.sub_head_line_white {
height: 5px;
width: 95%;
.grayGradientWtR;
}
.darkSub {
background-color: #000;
color: #fff;
}
.lightSub {
background-color: #fff;
color: #000;
}
.tableDay {
text-align: center;
font-size: 1.2em;
.fontNarrow;
}
.timesTable {
margin: 10px;
margin-top: 20px;
align-content: center;
.fontBaseText;
}
.timesTable tr:first-child {
border: none;
}
.timesTable tr {
border-left: 2px #mainRed solid;
border-right: 2px #mainRed solid;
}
.timesTable table,
tr,
td,
th {
border-collapse: collapse;
padding: 3px;
}
.timesTable th {
font-weight: bold;
padding: 10px;
}
.timesTable td {
padding: 10px;
}
.timesTable tr:nth-child(even) {
background-color: #darkGray;
}
.raceName {
width: 180px;
}
.raceTime {
width: 100px;
}
.startingTimeTableWrapper {
width: 100%;
}
.centering {
.marginCenter;
}
.socialWrapper {
width: 350px;
margin-top: 10px;
z-index: -1;
}
.subHeader:before {
height: 25px;
display: block;
content: '';
}
.subHeaderAlt:before {
height: 25px;
display: block;
content: '';
}
I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>
Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}
Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.
I got a slideshow on my website but for some reason the slide make a movement that should not be the default one, it jumps from 1st slide for 3rd slide and then back to the 1st.
Then if you use the manual navigation (the circles) and go 1,2,3,4 he makes the correct movement but then he starts to make weird movements, just test by yourself a few times and you will see what i am talking about. My goal is to make 1st slide, to 2, to 3 then 4 and reset, simple.
Site live: http://optential.co.nf/
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);
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: 100%;
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: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:750px;
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 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
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 action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<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">
<div class="controls">
<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>
<div class="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</div>
</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 method="POST" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="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>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
Site live: http://optential.co.nf/
Slideshow: slider and controls on css.