So I am pretty much done with my project I was going to create a full webpage slider as a background theme for my website and it is working flawlessly!
The issue is that its too stretched vertically, you are able to scroll to the right (You should not be able to do that) & I have no idea on why it is acting like that right now.
I've been trying to fix it with JavaScript but it didnt do anything so I am here to look for some answers.
What I am trying to accomplish is to have a fixed sized webpage both horizontally(Its alreay fixed) and vertically (Which I cant seem to get to work).
It seems to work fine on fiddle (Im new to fiddle)
Here is my fiddle & source code.
https://jsfiddle.net/z8vqp7fe/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{
height:100%;
width:100%;
overflow: hidden;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>
Try this
Btw.. there is no such thing as position: top;
and font-size: 200 should be either 200%, 200em, or 200px, etc..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,
body,
img {
padding: 0;
margin: 0;
height: 100%;
width: 100%
}
body {
font-family: Sans-Serif;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev,
.cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {
background: #FFF;
}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<img src="http://3.bp.blogspot.com/-rZmCIp0C-hQ/Tx6aCFeweoI/AAAAAAAAAnQ/WqIEVBTIzRk/s1600/Cool-Tiger-Wallpaper-1920x1080-HD.jpg">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>
Related
Situtation: I am trying to make the div (contains a textbox and button) to be always in the center of the white space left after the design of clip path (as you can see in the image attached).
knowing that clip path is based on percentage it keep changing when the webpage size change
ISSUE: When the webpage size change, the element is no more centered!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Check-in</title>
</head>
<body>
<header>
<h1 id="title">MOUS AIRWAY | <span id="check-in">CHECK-IN</span></h1>
</header>
<div class="userInfo">
<span id="tooltip">É neccessario inserire un codice <br>fiscale (16 caratteri).</span>
<input type="text" id="codiceFiscale" placeholder="cf" oninput="CloseToolTip()">
<button onclick="CheckIn()" id="checkIn">Check-in</button>
</div>
<script src="js.js"></script>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
header{
font-family: bebas;
color: gold;
height: 100vh;
background-color: #00008B;
clip-path: polygon(100% 0, 30% 50%, 100% 100%, 0 100%, 0 0);
z-index: -1;
}
#title{
position: absolute;
margin-left: 50px;
margin-top: 150px;
font-size: 60px;
}
#check-in{
font-size: 30px;
font-family: 'Courier New', Courier, monospace;
color: white;
}
.userInfo{
display: flex;
position: absolute;
margin-top: -450px;
margin-left: 50%;
}
button{
width: 170px;
height: 60px;
background-color: transparent;
font-size: 20px;
color: #00008B;
cursor: pointer;
font-weight: bold;
transition: background-color 0.5s ease;
}
button:hover{
background-color: #00008B;
color: white;
transition: background-color 0.5s ease;
}
#codiceFiscale{
width: 450px;
height: 60px;
margin-right: 30px;
padding-left: 10px;
border: solid 1px black;
font-size: 30px;
text-transform: uppercase;
border-color: #00008B;
}
#codiceFiscale:focus{
outline: none;
box-shadow: 0px 3px 10px #00008B;
}
P.S: i need a solution using only html, css or js. no jquery or bootstrap library.
Thanks!
To keep content always in verticaly center like in my case. here is the solution i found. make it independently from clip-path, the solution was easiest than i was overthinking...just give it position absolute! and of course make sure it always in center by using percentage.
SOLUTION:
.userInfo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-0%,-50%);
align-items: center;
}
I want to make something like - When I press on About, so there will show overlay over the main div with text about. Now when I click, so that div will show, but it will move down that particles-js div. And I don't want to move that div, but I want to make about to show over that particle (fullscreen overlay with 50% opacity)
$(".about").click(function() {
$(".main").fadeToggle('500');
$(".aboutText").fadeToggle('500');
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
display: none;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
Is this what you are trying to do? Show the about text when clicked?
$(".about").click(function() {
$("#particles-js").toggleClass("hide")
$(".aboutText").toggleClass("hide")
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
background: #1d1d1d;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
.container {
width: 100%;
margin: 0 auto;
padding: 0;
}
#particles-js {
height: 100vh;
width: 100%;
background-color: green;
}
#about {
height: 100vh;
background-color: beige;
}
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 4.5em;
transform: translate(-50%, -50%);
}
h2 {
color: white;
position: absolute;
top: 60%;
left: 5%;
font-size: 2em;
}
a.logo {
text-decoration: none;
color: #2ecc71;
}
span.home {
position: absolute;
top: 50%;
right: 1%;
transform: rotate(90deg);
color: #fff;
font-size: 1em;
}
a.about {
position: absolute;
top: 50%;
left: 1%;
transform: rotate(270deg);
color: #fff;
font-size: 1em;
}
a.about {
text-decoration: none;
color: #fff;
}
#media only screen and (max-width: 500px) {
.site-nav a {
padding: 2em;
font-size: 1.5em;
}
}
.text {
color: #fff;
position: relative;
top: 50%;
left: 10%;
background-color: #000;
}
a.about:hover {
color: #2ecc71;
}
.aboutText {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
.hide {
display: none;
}
.aboutText--open {
background-color: #000;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0.5;
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
<div class="aboutText hide">
<div class="text">
<p>sssss</p>
</div>
</div>
<div id="particles-js">
<h1 class="main">Text</h1>
</div>
<span class="home">Home</span>
About
<div id="about">
</div>
<div id="portfolio"></div>
<div id="contact"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/particles.js"></script>
<script src="app.js"></script>
</body>
</html>
When window is in full screen it shows like this:
When I tried to make it mobile friendly or window shrink the h1 tag is overflow the image:
I also tried with overflow property but it didn't work. Also I want that my h1 and img must that particular position which one I did but also want it must be mobile friendly. If there any CSS or JavaScript I need to use, please suggest it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
position: absolute;
top: 0;
left: 40%;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
overflow: inherit;
}
h1{
position: fixed;
left: 45%;
top: 20px;
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
text-transform: uppercase;
overflow: inherit;
}
#stripe{
position : relative;
background: #404040;
height: 70px;
text-align: center;
overflow: hidden;
right: 0;
}
</style>
</head>
<body>
<div id="stripe">
<img src="logo/mask.png">
<h1>My Website</h1>
</div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test video</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Butcherman&subset=latin-ext" rel="stylesheet">
<style type="text/css">
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
display: inline-block;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
margin-left: 5px;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
display: inline-block;
}
#stripe{
background: #404040;
height: 70px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="stripe">
<img src="http://via.placeholder.com/50x50">
<h1>My Website</h1>
</div>
</body>
</html>
I think You should add the following CSS to your div and img styles.
#stripe{
position: relative;
}
#stripe img{
position: absolute;
}
and you not need to give h1 tag position: fixed style. remove it.
I suggest you to consider using flexboxes:
#stripe {
display: flex;
justify-content: center;
align-items: center;
background: #404040;
color: white;
height: 70px;
overflow: hidden;
}
img {
width: 50px;
height: 50px;
margin-right: 10px;
}
<div id="stripe">
<img src="https://cdn.pixabay.com/photo/2012/04/15/21/38/skull-35404_960_720.png" />
<h1>Someone's Website</h1>
</div>
Finally, I've solved my problem with this CSS:
html,body{
margin: 0;
padding: 0;
font-size: 100%;
}
#stripe img{
margin-left: 0;
margin-top: 0;
margin-bottom: 15px;
margin-right: 0;
}
h1{
color: white;
font-size: 2em;
font-family: 'Butcherman', cursive;
font-weight: normal;
text-align: center;
text-transform: uppercase;
}
img + h1{
display: inline-block;
}
#stripe{
position: relative;
background: #404040;
height: 70px;
text-align: center;
right: 0;
}
I Making a admin panel with HTML , CSS , JQuery .
Now I Have Problem in Side Navigation .
I Need When Admin Panel Opened , Change Header And Main-Container Width .
Width : 1279 px When Opened Width:1119 px
My Code :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Admin_Panel_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="../js/bootstrap.js"></script>
<link href="Style%20Sheet/StyleSheet.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.0.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<header class="top-header">
<section class="navigation-icon">
<span class="top-bar"></span>
<span class="middle-bar"></span>
<span class="bottom-bar"></span>
</section>
</header>
<nav class="navigation">
<span class="title-logo">Kia<span class="kala">Kala</span ></span>
<section class="logo">
<img src="../Image/1467494806_Picasa.png" />
</section>
<ul class="navigation-ul">
<li>Space</li>
<li>Galaxy</li>
<li>Alien</li>
<li>Planet</li>
<li>Life</li>
</ul>
<section class="navigation-social">
<ul class="navigation-social-ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</nav>
<div class="right-col" role="main">
</div>
</div>
</form>
<script src="../Script/JQuery.js"></script>
<script src="../Scripts/jquery-3.0.0.min.js"></script>
</body>
</html>
CSS Code :
body {
padding: 0;
margin: 0;
background-color: #ffffff;
}
*, *:after, *:before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
.top-header {
width: 1279px;
height: 57px;
background-color: #EDEDED;
float: right;
position: relative;
}
.right-col {
float: right;
background-color: #F7F7F7;
width: 1119px;
height: 1721px;
}
.navigation {
width: 70px;
height: 1721px;
background-color: #2A3F54;
float: left;
display: block;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo {
width: 65px;
height: 65px;
background-color: white;
display: block;
border-radius: 50%;
margin-top: 5px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.logo img {
width: 65px;
height: 65px;
display: block;
float: left;
}
.title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
transition: all 800ms cubic-bezier(.9,0,.33,1);
visibility: hidden;
}
.title-logo .kala {
color: red;
}
.navigation-icon {
width: 70px;
margin-left: 10px;
height: 57px;
display: block;
cursor: pointer;
}
.navigation-icon .top-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 10%;
}
.navigation-icon .middle-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 30%;
}
.navigation-icon .bottom-bar {
width: 70px;
height: 4px;
display: block;
background-color: #000000;
position: absolute;
top: 50%;
}
.bottom-bar, .middle-bar, .top-bar {
margin-top: 8px;
}
.navigation-ul {
float: right;
margin-top: 200px;
visibility: hidden;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-ul li {
list-style: none;
text-align: right;
}
.navigation-ul a {
text-decoration: none;
display: block;
font-weight: 800;
text-transform: uppercase;
color: white;
margin-bottom: 15px;
}
.navigation .navigation-social {
width: 100%;
height: 30px;
float: left;
margin-top: 30px;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation .navigation-social-ul {
float: right;
list-style: none;
visibility: hidden;
}
.navigation .navigation-social-ul li {
display: inline-block;
}
.navigation .social-icon {
width: 30px;
height: 30px;
display: inline-block;
background-color: white;
}
/*_____----------__________-------- Jquery Effect -------_________--------________*/
.navigation-open {
width: 230px;
height: 100%;
display: block;
position: absolute;
left: 0;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo {
float: right;
margin-top: 20px;
margin-right: 30px;
font-family: 'Tahoma Bold';
font-size: 35px;
color: black;
transition: all 800ms cubic-bezier(.9,0,.33,1);
}
.navigation-open .title-logo .kala {
color: red;
}
JQuery Code :
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
});
});
Simplest would be toggle a class on <body> and add corresponding css rules
$(document).ready(function () {
$(".navigation-icon").click(function () {
$(".navigation").toggleClass('navigation-open');
$('body').toggleClass('nav-open');
});
});
CSS example
body.nav-open .top-header {
width: 1119px;
}
Trying to get a main logo and then an enter button to fade in when this web page loads. Tried the below code in addition to taking the divs out after the code, but no luck.
Any ideas? Thank you in advance.
<!doctype html>
<html>
<head>
<title>The Webspace of Reality</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
$("#mainImage").hide().fadeIn("slow", function() {
$("#enterButton").hide().fadeIn("slow")
});
});
</script>
<div id="mainImage">
</div>
<div id="enterButton"></div>
</body>
</html>
#mainImage img {
width: 550px;
display: block;
position: static;
margin-right: auto;
margin-left: auto;
}
#enterButton button {
background-color: black;
font-family: Futura, Helvetica, sans-serif;
font-size: 28px;
border-radius: 10px;
height: 50px;
width: 200px;
color: white;
margin-right: auto;
margin-left: auto;
display: block;
position: static;
margin-top: 20px;
border-style: none;
}
Your problem is in css. The commas are added after name selectors:
#mainImage, img {
width: 550px;
display: block;
position: static;
margin-right: auto;
margin-left: auto;
}
#enterButton, button {
background-color: black;
font-family: Futura, Helvetica, sans-serif;
font-size: 28px;
border-radius: 10px;
height: 50px;
width: 200px;
color: white;
margin-right: auto;
margin-left: auto;
display: block;
position: static;
margin-top: 20px;
border-style: none;
}
Hope this help.
Try this in your script tags:
$("#mainImage, #enterButton").hide();
$("#mainImage").fadeIn("slow", function() {
$("#enterButton").fadeIn("slow");
});
Here's the jsfiddle.