I have this image that I want as the background for the index page. But when I zoom in the background images appears between the form fields instead of going behind the form as it should. The body of the index page comprises a main element which consists of an aside element and a section. The section contains two forms, one for login and another for sign up with 2 buttons for the same. For clarity, vide the code given below.
1) The main problem I am facing is when I zoom in, approximately around and beyond 400%. The background image appears between the "email" and "password" fields of the login-form(active) on zooming in. I want the background image to actually be in the background and stay behind all of the content of the main tag, i.e basically behind the entire form and the aside image.
2) Additionally, you may notice when you zoom in that the log in or the sign up button do not appear at the end of the form, rather they appear mid-way with a big white space below it. I want those buttons to be at the very bottom of the form on zooming in.
3) Lastly, one may also notice how the upper portion of the svg image I have used in the aside tag is cut off when zoomed in and repositioned. With that, the intro text below the svg also appear behind the "LOGIN" and "SIGN UP" anchor tags when zoomed in. It would be nicer if they would all be non-overlapping or not cropped off.
P.S.- I have used inline svg. So skip or fold the long piece of svg code to not be agonised.(*Brownie points for someone who can suggest how to use external svg with the animation working. I have tried object, embed and img but to no avail*).
You can use any downloaded image as background by placing it inside the img folder and naming it "bg-index.jpeg".
HTML/JSP
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Login << Exam Nation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Take an Exam--Test Yourself | Exam Nation " />
<meta name="keywords" content="exam nation, online examination system, log in, sign up, index, default page, fallback page" />
<meta name="author" content="Akash Das" />
<!--===============================================================================================-->
<script src="https://use.typekit.net/lkh0ago.js"></script>
<!--===============================================================================================-->
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!--===============================================================================================-->
<link rel="shortcut icon" href="img/icons/favicon.ico" type="image/x-icon">
<!--===============================================================================================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="css/style.css">
<!--===============================================================================================-->
</head>
<!--style="background: url(img/bg-index.jpeg) no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden;"-->
<body>
<main ontouchstart class="with-hover">
<aside>
<div></div>
<svg viewBox="0 0 100 100">
<g stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M65.892702,73 C70.3362168,68.5836139 73.0845878,62.4824333 73.0845878,55.7432553 C73.0845878,49.0040774 70.3362168,42.9028968 65.892702,38.4865107 C61.4491873,34.0701246 55.3105288,31.338533 48.5299539,31.338533 C41.749379,31.338533 35.6107205,34.0701246 31.1672058,38.4865107 C26.723691,42.9028968 23.97532,49.0040774 23.97532,55.7432553 C23.97532,62.4824333 26.723691,68.5836139 31.1672058,73 C31.1672058,73 65.892702,73 65.892702,73 Z M73.0594097,62.3985471 C76.4680437,61.2200182 88.5607213,56.1793944 85.5117743,37.8371245 L81.6924976,37.9360303 C80.8526284,43.134546 77.152648,46.6051883 72.4845099,46.6051883 M24.4062209,60.319036 C24.3904842,60.3191058 24.3747393,60.3191408 24.3589862,60.3191408 C18.6378761,60.3191408 14,55.70958 14,50.0233985 C14,44.3372171 18.6378761,39.7276563 24.3589862,39.7276563 C26.0569266,39.7276563 27.6594543,40.133673 29.0736464,40.8533508 M65.8946819,38.4867877 L31.1652244,38.4844448 M37.6782363,44.9577899 C34.9010396,47.7180312 33.1833077,51.5312691 33.1833077,55.7432553 C33.1833077,59.9552416 34.9010396,63.7684794 37.6782363,66.5287208 M45.4606247,29.0505903 L51.5992831,29.0505903 M48.5299539,26 L48.5299539,31.338533"></path>
</g>
</svg>
<div>
<p id="intro-signup"><br/>Be a citizen of <strong>Exam Nation</strong> with an account.</p>
<p id="intro-login" class="active"><br/>Welcome back to<br/><strong>Exam Nation</strong>!</p>
</div>
</aside>
<section>
<h1>
<a id="link-login" class="active">Login</a>
<a id="link-signup">Register</a>
</h1>
<form id="form-signup" action="test1.html" method="POST">
<div>
<fieldset>
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Full Name" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="abc#xyz.com" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="••••••••" required/>
</div>
</fieldset>
</div>
<ul>
<li>
<button class="fb">Connect with Facebook</button>
</li>
<li>
<button class="tw">Connect with Twitter</button>
</li>
</ul>
<input type="submit" value="Sign Up"/>
</form>
<form id="form-login" class="active" action="test2.html" method="POST">
<div>
<fieldset>
<div>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="abc#xyz.com" required/>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="••••••••" required/>
</div>
</fieldset>
</div>
<ul>
<li>
<button class="fb">Connect with Facebook</button>
</li>
<li>
<button class="tw">Connect with Twitter</button>
</li>
</ul>
<input type="submit" value="Log In"/>
</form>
</section>
</main>
<!--===============================================================================================-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<!--===============================================================================================-->
<script src="js/index.js"></script>
<!--===============================================================================================-->
</body>
</html>
CSS
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:focus {
outline: none !important;
}
body, html {
height: 100%;
}
body {
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
margin: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
color: #857567;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main {
background: white;
height: 100%;
}
main aside {
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
height: calc(100% / 3);
padding: 12px;
background: #DFB72C url("../img/table-pc.jpg") no-repeat center center/cover;
}
.
.
.
main aside svg {
position: relative;
margin-top: -24px;
width: 120px;
height: 120px;
}
main aside p {
position: relative;
width: 100%;
padding : 5px;
margin: 0;
color: white;
font-size: 22px;
line-height: 1.2;
text-align: center;
text-shadow: 0 0 10px rgba(133, 117, 103, 0.5);
}
main aside p strong {
font-weight: 700;
}
main section form input[type="submit"] {
display: block;
align-self: flex-end;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
border: 0;
border-radius: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 24px;
text-transform: capitalize;
line-height: 2;
background: #DFB72C;
color: white;
cursor: pointer;
}
.
.
.
#media only screen and (min-width: 624px) {
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
}
main {
display: flex;
border-radius: 2px;
overflow: hidden;
height: 100%;
max-height: 370px;
box-shadow: 0 0 10px rgba(56, 54, 53, 0.5);
}
SCREENSHOTS
a. Login Page without zoom
b. Login Page with 500% zoom
c. Login Page with 400% zoom
d. White weird space after the log in button on 500% zoom
e. On zooming in, the intro-text goes behind the LOGIN & REGISTER anchors. The svg image is cut off.
EDIT:- For complete CSS code(minus the webkit-keyframes), see the answer below. I have also attached the background image herewith.
Here's the full CSS code. I had reached the word-limit for the question.
CSS
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:focus {
outline: none !important;
}
body, html {
height: 100%;
}
body {
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
margin: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
color: #857567;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
main {
background: white;
height: 100%;
}
main aside {
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
height: calc(100% / 3);
padding: 12px;
background: #DFB72C url("../img/table-pc.jpg") no-repeat center center/cover;
}
main aside div:empty {
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #DFB72C url("../img/table-pc.jpg") no-repeat center center/cover;
background-blend-mode: screen;
}
main aside svg {
position: relative;
margin-top: -24px;
width: 120px;
height: 120px;
}
main aside div:not(:empty) {
position: relative;
width: 100%;
margin-top: -24px;
}
main aside p {
position: relative;
width: 100%;
padding : 5px;
margin: 0;
color: white;
font-size: 22px;
line-height: 1.2;
text-align: center;
text-shadow: 0 0 10px rgba(133, 117, 103, 0.5);
}
main aside p strong {
font-weight: 700;
}
main aside p:nth-child(2) {
position: absolute;
top: 0;
left: 0;
}
main aside p.active {
visibility: visible;
opacity: 1;
-webkit-transform: none;
transform: none;
}
main aside p:not(.active) {
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
main section {
position: relative;
height: calc(100% / 3 * 2);
}
main section h1 {
display: flex;
justify-content: center;
padding: 18px;
color: #DFB72C;
font-size: 22px;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
main section h1 a {
display: block;
margin: 0 6px;
cursor: pointer;
-webkit-transform: none;
transform: none;
}
main section h1 a:hover, main section h1 a:focus {
color: #976a36;
}
main section h1 a:active {
color: #857567;
}
main section h1 a.active {
font-weight: 500;
}
main section h1 a:not(.active) {
font-weight: 300;
}
main section form {
display: flex;
flex-flow: row wrap;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 40px);
}
main section form > div, main section form > ul {
width: 100%;
padding: 6px;
}
main section form fieldset {
padding: 6px;
}
main section form fieldset div {
display: flex;
border-radius: 2px;
overflow: hidden;
}
main section form fieldset div label {
display: block;
margin: 0;
padding: 6px 9px;
background: #DFB72C;
color: white;
font-size: 16px;
cursor: pointer;
line-height: 25px;
}
main section form fieldset div input {
display: block;
background: white;
border: 1px solid #DFB72C;
border-left: 0;
border-radius: 0 2px 2px 0;
box-shadow: none;
margin: 0;
padding: 6px 9px;
width: 100%;
color: #857567;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
}
main section form fieldset div input::-webkit-input-placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input:-ms-input-placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input::-ms-input-placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input::placeholder {
color: rgba(133, 117, 103, 0.4);
}
main section form fieldset div input:focus {
background: rgba(233, 226, 213, 0.5);
}
main section form fieldset div input:focus::-webkit-input-placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form fieldset div input:focus:-ms-input-placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form fieldset div input:focus::-ms-input-placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form fieldset div input:focus::placeholder {
color: rgba(133, 117, 103, 0.6);
}
main section form li {
padding: 6px;
}
main section form li button {
display: block;
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
border: 0;
border-radius: 100px;
color: white;
font-size: 16px;
padding: 6px 12px;
cursor: pointer;
}
main section form li button.fb {
background: #3b5998;
}
main section form li button.fb:hover, main section form li button.fb:focus {
background: #5f7ec1;
}
main section form li button.fb:active {
background: #263961;
}
main section form li button.tw {
background: #00aced;
}
main section form li button.tw:hover, main section form li button.tw:focus {
background: #3bc9ff;
}
main section form li button.tw:active {
background: #0074a1;
}
main section form input[type="submit"] {
display: block;
align-self: flex-end;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
border: 0;
border-radius: 0;
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 24px;
text-transform: capitalize;
line-height: 2;
background: #DFB72C;
color: white;
cursor: pointer;
}
main section form input[type="submit"]:hover, main section form input[type="submit"]:focus {
background: #976a36;
}
main section form input[type="submit"]:active {
background: #857567;
}
main section form.active {
opacity: 1;
z-index: 1;
}
main section form.active fieldset, main section form.active li, main section form.active input[type="submit"] {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
main section form:not(.active) {
opacity: 0;
z-index: 0;
}
main section form:not(.active) fieldset, main section form:not(.active) li, main section form:not(.active) input[type="submit"] {
-webkit-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
}
main.with-hover aside p {
transition: all 250ms ease-out;
}
main.with-hover section h1 a {
transition: all 150ms ease-out;
}
main.with-hover section h1 a:hover, main.with-hover section h1 a:focus {
transition: all 300ms ease-out;
}
main.with-hover section h1 a:active {
transition: all 150ms ease-in;
}
main.with-hover section form {
transition: all 1000ms ease-out;
}
main.with-hover section form fieldset, main.with-hover section form li, main.with-hover section form input[type="submit"] {
transition: all 500ms ease-out;
}
main.with-hover section form button, main.with-hover section form input {
transition: all 150ms ease-out;
}
main.with-hover section form button:hover, main.with-hover section form button:focus, main.with-hover section form input:hover, main.with-hover section form input:focus {
transition: all 300ms ease-out;
}
main.with-hover section form button:active, main.with-hover section form input:active {
transition: all 150ms ease-in;
}
main.with-hover section form.active#form-signup fieldset:nth-child(2) {
transition-delay: 50ms;
}
main.with-hover section form.active#form-signup fieldset:nth-child(3) {
transition-delay: 100ms;
}
main.with-hover section form.active#form-signup li:nth-child(1) {
transition-delay: 150ms;
}
main.with-hover section form.active#form-signup li:nth-child(2) {
transition-delay: 200ms;
}
main.with-hover section form.active#form-signup input[type="submit"] {
transition-delay: 250ms;
}
main.with-hover section form.active#form-login fieldset:nth-child(2) {
transition-delay: 50ms;
}
main.with-hover section form.active#form-login li:nth-child(1) {
transition-delay: 100ms;
}
main.with-hover section form.active#form-login li:nth-child(2) {
transition-delay: 150ms;
}
main.with-hover section form.active#form-login input[type="submit"] {
transition-delay: 200ms;
}
main.with-hover section form:not(.active)#form-signup fieldset:nth-child(1) {
transition-delay: 250ms;
}
main.with-hover section form:not(.active)#form-signup fieldset:nth-child(2) {
transition-delay: 200ms;
}
main.with-hover section form:not(.active)#form-signup fieldset:nth-child(3) {
transition-delay: 150ms;
}
main.with-hover section form:not(.active)#form-signup li:nth-child(1) {
transition-delay: 100ms;
}
main.with-hover section form:not(.active)#form-signup li:nth-child(2) {
transition-delay: 50ms;
}
main.with-hover section form:not(.active)#form-login fieldset:nth-child(1) {
transition-delay: 200ms;
}
main.with-hover section form:not(.active)#form-login fieldset:nth-child(2) {
transition-delay: 150ms;
}
main.with-hover section form:not(.active)#form-login li:nth-child(1) {
transition-delay: 100ms;
}
main.with-hover section form:not(.active)#form-login li:nth-child(2) {
transition-delay: 50ms;
}
main.pre-enter aside {
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transform: scaleY(0);
transform: scaleY(0);
visibility: hidden;
}
main.pre-enter aside svg {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(0) rotate(90deg);
transform: scale(0) rotate(90deg);
visibility: hidden;
}
main.pre-enter aside p.active {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
visibility: hidden;
}
main.pre-enter section h1 a {
visibility: hidden;
opacity: 0;
}
main.pre-enter section h1 a:first-child {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: translateX(200px) scaleX(0);
transform: translateX(200px) scaleX(0);
}
main.pre-enter section h1 a:last-child {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: translateX(-200px) scaleX(0);
transform: translateX(-200px) scaleX(0);
}
main.pre-enter section form fieldset, main.pre-enter section form li {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
visibility: hidden;
}
main.pre-enter section form input[type="submit"] {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: scaleY(0);
transform: scaleY(0);
color: #DFB72C;
visibility: hidden;
}
main.on-enter aside {
-webkit-animation: scaleYIn 1000ms linear forwards;
animation: scaleYIn 1000ms linear forwards;
visibility: visible;
}
main.on-enter aside svg {
-webkit-animation: bounceIn-rotate 1000ms linear forwards 250ms;
animation: bounceIn-rotate 1000ms linear forwards 250ms;
visibility: visible;
}
main.on-enter aside p.active {
-webkit-animation: slideInUp-fadeIn 1000ms linear forwards 500ms;
animation: slideInUp-fadeIn 1000ms linear forwards 500ms;
visibility: visible;
}
main.on-enter section h1 a {
visibility: visible;
}
main.on-enter section h1 a:first-child {
-webkit-animation: scaleX-slideInRight 1000ms linear forwards 750ms;
animation: scaleX-slideInRight 1000ms linear forwards 750ms;
}
main.on-enter section h1 a:last-child {
-webkit-animation: scaleX-slideInLeft 1000ms linear forwards 750ms;
animation: scaleX-slideInLeft 1000ms linear forwards 750ms;
}
main.on-enter section form fieldset, main.on-enter section form li {
-webkit-animation: slideInUp-fadeIn 1000ms linear forwards;
animation: slideInUp-fadeIn 1000ms linear forwards;
visibility: visible;
}
main.on-enter section form fieldset:nth-child(1) {
-webkit-animation-delay: 1250ms;
animation-delay: 1250ms;
}
main.on-enter section form fieldset:nth-child(2) {
-webkit-animation-delay: 1350ms;
animation-delay: 1350ms;
}
main.on-enter section form fieldset:nth-child(3) {
-webkit-animation-delay: 1450ms;
animation-delay: 1450ms;
}
main.on-enter section form li:nth-child(1) {
-webkit-animation-delay: 1550ms;
animation-delay: 1550ms;
}
main.on-enter section form li:nth-child(2) {
-webkit-animation-delay: 1650ms;
animation-delay: 1650ms;
}
main.on-enter section form input[type="submit"] {
-webkit-animation: scaleYIn 1000ms linear forwards 1750ms, lemon-white 250ms linear forwards 2150ms;
animation: scaleYIn 1000ms linear forwards 1750ms, lemon-white 250ms linear forwards 2150ms;
visibility: visible;
}
#media only screen and (min-width: 624px) {
body {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: url(../img/bg-index.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
overflow: auto;
}
main {
display: flex;
border-radius: 2px;
overflow: hidden;
height: 100%;
max-height: 370px;
box-shadow: 0 0 10px rgba(56, 54, 53, 0.5);
}
main aside, main section {
height: 100%;
width: 300px;
}
main.pre-enter {
opacity: 0;
visibility: hidden;
}
main.pre-enter aside {
-webkit-transform: none;
transform: none;
}
main.on-enter {
-webkit-animation: slideDown-fadeIn 1000ms linear forwards;
animation: slideDown-fadeIn 1000ms linear forwards;
visibility: visible;
}
main.on-enter aside {
-webkit-animation: none;
animation: none;
}
}
#-webkit-keyframes lemon-white {
0% {
color: #DFB72C;
}
100% {
color: white;
}
}
#keyframes lemon-white {
0% {
color: #DFB72C;
}
100% {
color: white;
}
}
Background Image
bg-index.jpeg
Related
The content begins to appear on the page overlapped with the navbar, I cannot really figure out where can I solve this.
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 href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="stil.css">
<script src="s.js"></script>
<title>Document</title>
</head>
<header>
<nav id="navbar" class="">
<div class="nav-wrapper">
<div class="logo">
<i class="fa fa-angellist"></i> Logo
</div>
<ul id="menu">
<li>Home</li>
<li>Matematica</li>
<li>Limba romana</li>
<li>Informatica</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="menuIcon">
<span class="icon icon-bars"></span>
<span class="icon icon-bars overlay"></span>
</div>
<div class="overlay-menu">
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
<body>
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
</div>
</body>
</html>
CSS
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: rgb(250, 250, 250) url(http://lorempixel.com/1920/1080/nature/);
font-family: Lato, Helvetica, Arial, sans-serif;
}
header{
z-index: 1;
}
a {
color: inherit;
font-family: inherit;
font-size: inherit;
text-decoration: none;
}
/*======================================================
Navbar
======================================================*/
#navbar {
background: white;
color: rgb(13, 26, 38);
position: fixed;
top: 0;
height: 60px;
line-height: 60px;
width: 100vw;
z-index: 10;
}
.nav-wrapper {
margin: auto;
text-align: center;
width: 70%;
} #media(max-width: 768px) {
.nav-wrapper {
width: 90%;
}
} #media(max-width: 638px) {
.nav-wrapper {
width: 100%;
}
}
.logo {
float: left;
margin-left: 28px;
font-size: 1.5em;
height: 60px;
letter-spacing: 1px;
text-transform: uppercase;
} #media(max-width: 768px) {
.logo {
/* margin-left: 5px; */
}
}
#navbar ul {
display: inline-block;
float: right;
list-style: none;
/* margin-right: 14px; */
margin-top: -2px;
text-align: right;
transition: transform 0.5s ease-out;
-webkit-transition: transform 0.5s ease-out;
} #media(max-width: 640px) {
#navbar ul {
display: none;
}
} #media(orientation: landscape) {
#navbar ul {
display: inline-block;
}
}
#navbar li {
display: inline-block;
}
#navbar li a {
color: rgb(13, 26, 38);
display: block;
font-size: 0.7em;
height: 50px;
letter-spacing: 1px;
margin: 0 20px;
padding: 0 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#navbar li a:hover {
border-bottom: 1px solid rgb(28, 121, 184);
color: rgb(28, 121, 184);
transition: all 1s ease;
-webkit-transition: all 1s ease;
}
/* Animated Bottom Line */
#navbar li a:before, #navbar li a:after {
content: '';
position: absolute;
width: 0%;
height: 1px;
bottom: -1px;
background: rgb(13, 26, 38);
}
#navbar li a:before {
left: 0;
transition: 0.5s;
}
#navbar li a:after {
background: rgb(13, 26, 38);
right: 0;
/* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}
#navbar li a:hover:before {
background: rgb(13, 26, 38);
width: 100%;
transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}
#navbar li a:hover:after {
background: transparent;
width: 100%;
/* transition: 0s; */
}
/*======================================================
Mobile Menu Menu Icon
======================================================*/
#media(max-width: 640px) {
.menuIcon {
cursor: pointer;
display: block;
position: fixed;
right: 15px;
top: 20px;
height: 23px;
width: 27px;
z-index: 12;
}
/* Icon Bars */
.icon-bars {
background: rgb(13, 26, 38);
position: absolute;
left: 1px;
top: 45%;
height: 2px;
width: 20px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.icon-bars::before {
background: rgb(13, 26, 38);
content: '';
position: absolute;
left: 0;
top: -8px;
height: 2px;
width: 20px;
/* -webkit-transition: top 0.2s ease 0.3s;
transition: top 0.2s ease 0.3s; */
-webkit-transition: 0.3s width 0.4s;
transition: 0.3s width 0.4s;
}
.icon-bars::after {
margin-top: 0px;
background: rgb(13, 26, 38);
content: '';
position: absolute;
left: 0;
bottom: -8px;
height: 2px;
width: 20px;
/* -webkit-transition: top 0.2s ease 0.3s;
transition: top 0.2s ease 0.3s; */
-webkit-transition: 0.3s width 0.4s;
transition: 0.3s width 0.4s;
}
/* Bars Shadows */
.icon-bars.overlay {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 20px;
animation: middleBar 3s infinite 0.5s;
-webkit-animation: middleBar 3s infinite 0.5s;
} #keyframes middleBar {
0% {width: 0px}
50% {width: 20px}
100% {width: 0px}
} #-webkit-keyframes middleBar {
0% {width: 0px}
50% {width: 20px}
100% {width: 0px}
}
.icon-bars.overlay::before {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 10px;
animation: topBar 3s infinite 0.2s;
-webkit-animation: topBar 3s infinite 0s;
} #keyframes topBar {
0% {width: 0px}
50% {width: 10px}
100% {width: 0px}
} #-webkit-keyframes topBar {
0% {width: 0px}
50% {width: 10px}
100% {width: 0px}
}
.icon-bars.overlay::after {
background: rgb(97, 114, 129);
background: rgb(183, 199, 211);
width: 15px;
animation: bottomBar 3s infinite 1s;
-webkit-animation: bottomBar 3s infinite 1s;
} #keyframes bottomBar {
0% {width: 0px}
50% {width: 15px}
100% {width: 0px}
} #-webkit-keyframes bottomBar {
0% {width: 0px}
50% {width: 15px}
100% {width: 0px}
}
/* Toggle Menu Icon */
.menuIcon.toggle .icon-bars {
top: 5px;
transform: translate3d(0, 5px, 0) rotate(135deg);
transition-delay: 0.1s;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menuIcon.toggle .icon-bars::before {
top: 0;
transition-delay: 0.1s;
opacity: 0;
}
.menuIcon.toggle .icon-bars::after {
top: 10px;
transform: translate3d(0, -10px, 0) rotate(-270deg);
transition-delay: 0.1s;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menuIcon.toggle .icon-bars.overlay {
width: 20px;
opacity: 0;
-webkit-transition: all 0s ease 0s;
transition: all 0s ease 0s;
}
}
/*======================================================
Responsive Mobile Menu
======================================================*/
.overlay-menu {
background: lightblue;
color: rgb(13, 26, 38);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
padding-right: 15px;
transform: translateX(-100%);
width: 100vw;
height: 100vh;
-webkit-transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
.overlay-menu ul, .overlay-menu li {
display: block;
position: relative;
}
.overlay-menu li a {
display: block;
font-size: 1.8em;
letter-spacing: 4px;
/* opacity: 0; */
padding: 10px 0;
text-align: right;
text-transform: uppercase;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
/* -webkit-transition: 0.2s opacity 0.2s ease-out;
transition: 0.2s opacity 0.2s ease-out; */
}
.overlay-menu li a:hover,
.overlay-menu li a:active {
color: rgb(28, 121, 184);
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.timetable {
display: grid;
grid-template-areas: ". week" "time content";
grid-template-columns: 120px;
grid-template-rows: 60px;
width: 100vw;
height: 100vh;
}
.timetable .week-names {
grid-area: week;
display: grid;
grid-template-columns: repeat(5, 1fr);
text-transform: uppercase;
font-size: 12px;
}
.timetable .week-names > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height:100%;
box-shadow: inset 3px 0 0 black;
margin-top: 50px;
font: inherit;
font-size: large;
}
.timetable .time-interval {
grid-area: time;
display: grid;
grid-template-rows: repeat(7, 1fr);
font-size: 14px;
}
.timetable .time-interval > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-shadow: inset 0 3px 0 0 black;
}
.timetable .content {
grid-area: content;
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-template-columns: repeat(5, 1fr);
}
.timetable .content > div {
box-shadow: inset 3px 0 0 black, inset 0 3px 0 0 black;
font: inherit;
font-size: large;
display: flex;
align-items: center;
justify-content: center;
}
.container {
margin: 20px auto;
width: 400px;
height: 400px;
background-color: #fff;
display: grid;
grid-template-columns: 200px 200px;
grid-row: auto auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.container .box {
background-color: #333;
padding: 20px;
border-radius: 10px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-family: sans-serif;
}
The fixed attribute doesn't affect the layout of the rest of the page,
Since you have a fixed height for your fixed element, you can add
margin-top: 60px;
to your primary container element to add in the space that the fixed element would normally have taken.
Good Evening all, I am trying to re-create a login page for my project, I am going to have roughly 20 html page's and I am trying attach all of my html files to the one CSS file. In order to do that I know I have to assign the parameters of my css elements so that they are only assigned to a singular page. In this case, I am trying to assign these SCSS elements only to my login page. However, the right side of my page is not displaying as it should. I have searched everywhere, and I am not sure of what I am doing wrong. Can anyone more experienced give me an idea of how I could handle this differently to get the intended result? Thanks in advance!
<!DOCTYPE>
<HTML>
<head>
<meta charset="utf-8">
<title>blank title</title>
</head>
<body class = loginPage>
<div class="container">
<div class="left">
<div class="header">
<h2 class="animation a1">Welcome Back</h2>
<h4 class="animation a2">Log in to your account using email and password</h4>
</div>
<div class="form">
<input type="email" class="form-field animation a3" placeholder="Email Address">
<input type="password" class="form-field animation a4" placeholder="Password">
<p class="animation a5">Forgot Password</p>
<button class="animation a6">LOGIN</button>
</div>
</div>
</div>
<div class="right"></div>
</body>
</HTML>
* { box-sizing: border-box; }
#import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');
.loginPage .body {
font-family: 'Rubik', sans-serif;
}
.loginpage .container {
display: flex;
height: 100vh;
}
.loginpage .left {
overflow: hidden;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
animation-name: left;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1s;
}
.right {
flex: 1;
background-color: black;
transition: 1s;
background-image: url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.loginPage .header > h2 {
margin: 0;
color: #4f46a5;
}
.loginPage .header > h4 {
margin-top: 10px;
font-weight: normal;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.loginPage .form {
max-width: 80%;
display: flex;
flex-direction: column;
}
.loginPage .form > p {
text-align: right;
}
.loginPage .form > p > a {
color: #000;
font-size: 14px;
}
.loginPage .form-field {
height: 46px;
padding: 0 16px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: 'Rubik', sans-serif;
outline: 0;
transition: 0.2s;
margin-top: 20px;
}
.loginPage .form-field:focus {
border-color: #0f7ef1;
}
.loginPage .form > button {
padding: 12px 10px;
border: 0;
background: linear-gradient(to right, #de48b5 0%, #0097ff 100%);
border-radius: 3px;
margin-top: 10px;
color: #fff;
letter-spacing: 1px;
font-family: 'Rubik', sans-serif;
}
.loginPage .animation {
animation-name: move;
animation-duration: 0.4s;
animation-fill-mode: both;
animation-delay: 2s;
}
.loginPage .a1 {
animation-delay: 2s;
}
.loginPage .a2 {
animation-delay: 2.1s;
}
.loginPage .a3 {
animation-delay: 2.2s;
}
.loginPage .a4 {
animation-delay: 2.3s;
}
.loginPage .a5 {
animation-delay: 2.4s;
}
.loginPage .a6 {
animation-delay: 2.5s;
}
#keyframes .loginPage .move {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-40px);
}
100% {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
#keyframes .loginPage .left {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
padding: 20px 40px;
width: 440px;
}
}
enter image description here
So I'm not sure if this was an issue with typing the code into StackOverflow or if your base code is like this but there are several issues with class names both in the HTML and CSS that are causing some errors. For example, your loginPage class name for the body is not surrounded by quotations so that will cause errors with the class names in your CSS. Also, there are several .loginPage identifiers in the CSS that are typed in as .loginpage, which again would cause errors as the CSS won't tie that with the class name in the HTML. Furthermore, .loginPage .body in your CSS won't do anything as the body is an element tag, not a class name. Since this is the main part of your code, I would just recommend changing that to .loginPage. After the changes were made to those typos, your page started looking more like what you provided.
Next, I started off by changing the .loginPage CSS section to be display: flex so that I could make some flexbox style layout. I changed the .loginPage .container section to be display: inline-flex with height: 100vh to cover the entire viewport and prevent the child elements from being block level and taking up the entire width of the page, which would push your picture down below the container. I then set height: 100vh for the .right element to again take up the entire viewport, set width: 80% to bring both the .container and the .right elements on the same line, and combined your separate background css into one for simplification.
There are some other modifications I made for appearance, such as margin on the .loginPage .container and flex specifications on that one as well as the .right element. Below is the final code. When using this code in your project, I would recommend playing around with the margins and flex specification though just to make sure it works across various screen sizes. I hope this answers your question!
<body class="loginPage">
<div class="container">
<div class="left">
<div class="header">
<h2 class="animation a1">Welcome Back</h2>
<h4 class="animation a2">Log in to your account using email and password</h4>
</div>
<div class="form">
<input type="email" class="form-field animation a3" placeholder="Email Address">
<input type="password" class="form-field animation a4" placeholder="Password">
<p class="animation a5">Forgot Password</p>
<button class="animation a6">LOGIN</button>
</div>
</div>
</div>
<div class="right"></div>
</body>
CSS:
* { box-sizing: border-box; }
#import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');
.loginPage {
font-family: 'Rubik', sans-serif;
display: flex;
}
.loginPage .container {
display: inline-flex;
height: 100vh;
flex: 1 1 auto;
margin: 2rem;
}
.loginPage .left {
overflow: hidden;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
animation-name: left;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1s;
}
.right {
flex: 1 1 auto;
height: 100vh;
width: 80%;
display: inline-flex;
transition: 1s;
background: center / cover no-repeat url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
}
.loginPage .header > h2 {
margin: 0;
color: #4f46a5;
}
.loginPage .header > h4 {
margin-top: 10px;
font-weight: normal;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.loginPage .form {
max-width: 80%;
display: flex;
flex-direction: column;
}
.loginPage .form > p {
text-align: right;
}
.loginPage .form > p > a {
color: #000;
font-size: 14px;
}
.loginPage .form-field {
height: 46px;
padding: 0 16px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: 'Rubik', sans-serif;
outline: 0;
transition: 0.2s;
margin-top: 20px;
}
.loginPage .form-field:focus {
border-color: #0f7ef1;
}
.loginPage .form > button {
padding: 12px 10px;
border: 0;
background: linear-gradient(to right, #de48b5 0%, #0097ff 100%);
border-radius: 3px;
margin-top: 10px;
color: #fff;
letter-spacing: 1px;
font-family: 'Rubik', sans-serif;
}
.loginPage .animation {
animation-name: move;
animation-duration: 0.4s;
animation-fill-mode: both;
animation-delay: 2s;
}
.loginPage .a1 {
animation-delay: 2s;
}
.loginPage .a2 {
animation-delay: 2.1s;
}
.loginPage .a3 {
animation-delay: 2.2s;
}
.loginPage .a4 {
animation-delay: 2.3s;
}
.loginPage .a5 {
animation-delay: 2.4s;
}
.loginPage .a6 {
animation-delay: 2.5s;
}
#keyframes .loginPage .move {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-40px);
}
100% {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
#keyframes .loginPage .left {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
padding: 20px 40px;
width: 440px;
}
}
Giving your #keyframes the proper animation name you used seemed to compile well
https://jsfiddle.net/oeat97m2/
* { box-sizing: border-box; }
#import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');
.loginPage .body {
font-family: 'Rubik', sans-serif;
}
.loginpage .container {
display: flex;
height: 100vh;
}
.loginpage .left {
overflow: hidden;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
animation-name: left;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1s;
}
.right {
flex: 1;
background-color: black;
transition: 1s;
background-image: url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.loginPage .header > h2 {
margin: 0;
color: #4f46a5;
}
.loginPage .header > h4 {
margin-top: 10px;
font-weight: normal;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.loginPage .form {
max-width: 80%;
display: flex;
flex-direction: column;
}
.loginPage .form > p {
text-align: right;
}
.loginPage .form > p > a {
color: #000;
font-size: 14px;
}
.loginPage .form-field {
height: 46px;
padding: 0 16px;
border: 2px solid #ddd;
border-radius: 4px;
font-family: 'Rubik', sans-serif;
outline: 0;
transition: 0.2s;
margin-top: 20px;
}
.loginPage .form-field:focus {
border-color: #0f7ef1;
}
.loginPage .form > button {
padding: 12px 10px;
border: 0;
background: linear-gradient(to right, #de48b5 0%, #0097ff 100%);
border-radius: 3px;
margin-top: 10px;
color: #fff;
letter-spacing: 1px;
font-family: 'Rubik', sans-serif;
}
.loginPage .animation {
animation-name: move;
animation-duration: 0.4s;
animation-fill-mode: both;
animation-delay: 2s;
}
.loginPage .a1 {
animation-delay: 2s;
}
.loginPage .a2 {
animation-delay: 2.1s;
}
.loginPage .a3 {
animation-delay: 2.2s;
}
.loginPage .a4 {
animation-delay: 2.3s;
}
.loginPage .a5 {
animation-delay: 2.4s;
}
.loginPage .a6 {
animation-delay: 2.5s;
}
#keyframes move {
0% {
opacity: 0;
visibility: hidden;
transform: translateY(-40px);
}
100% {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
#keyframes left {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
padding: 20px 40px;
width: 440px;
}
}
I have downloaded from codepen this animated login here
I am simply trying to add an a href link within the html container div where folks can reset their password.
The strange thing is, I can not get this or any link of any sorts to work. (all links irrespective of destination are not live).
I think that there may be a CSS property preventing all href from working.
Any reason for this?
Index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="css/loginstyle.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Login</h1>
<form class="form" action="" method="post" enctype="multipart/form-data">
<input type="text" name="username" required placeholder="Enter Username">
<input type="password" name="password" required placeholder="Enter Password">
<button type="submit" name="submit" id="login-button">Login</button>
</form>
<!-- is this link being prevented from working by bg-bubbles class or its css -->
LINK
</div>
<!-- bg-bubbles class seems to prevent all a href's from working -->
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
loginstyle.css
#font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype');
}
#font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
/* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
/* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: #50a3a2;
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
overflow: hidden;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
transition-duration: 1s;
transition-timing-function: ease-in-put;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #53e3a6;
}
form button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
}
form button:hover {
background-color: #f5f7f9;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
You need to set z-index:2; to the a tag along with position: relative; Here is the updated codepen.
I've created a class
.forgot-password{
z-index:2;
position:relative;
cursor: pointer;
}
and added it to anchor tag.
So what I need to do might be simple but I have no clue after long hours of research.
I want to make my page shifting down when I am hovering on my dropdown menu. (if this is not possible) I would like to avoid a big padding between my HEADER and the rest of my page, SECTION>TITLE...
Is there any chance to do so without using any jQuery or JavaScript?
Many thanks for your time and patience.
HTML code:
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<title>Emblem Collectible Books</title>
<link rel="stylesheet" href="css/style.css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<script src="shifter.js"></script>
</head>
<body>
<div id="page">
<header id="pageheader" role="banner">
<div id="commonlink">
<nav id="commonlinkbar">
<ul>
<li>Contact us</li>
<li>Accessibility</li>
<li>Login</li>
</ul>
</nav>
</div>
<div id="logo">
<div class="innerlogo">
<img src="images/logo.png" alt="logo">
</div>
</div>
<div id="mainnav">
<div id="navwrapper">
<nav id="primary" role="navigation">
<ul>
<li class="navbar">Home</li><li class="dropdown">
Books
<ul>
<li>20th Century Books</li>
<li>19th Century Books</li>
<li>18th Century Books</li>
<li>Rare Books</li>
</ul></li><li>
Delivery</li><li>
About</li><li>
Books as an Investment</li>
</ul>
</nav>
</div>
</div>
</header>
<main id="mainc" role="main">
<section id="introduction" role="introduction">
<div id="title">
<h1>Welcome to <span class="titleintro">Emblem</span>, Rare collectible Books</h1>
</div>**
Here is the css
/* Embed the fonts before anything else */
#font-face {
font-family: 'parisr';
src:url("../fonts/parisr.eot?#iefix") format("embedded-opentype"),
url("../fonts/parisr.woff") format("woff"),
url("../fonts/parisr.ttf") format("truetype"),
url("../fonts/parisr.svg#parisr") format("svg");
font-weight: normal;
font-style: normal;
}
/* Page Styling */
#page {
width: 100%;
margin: 0 auto;
}
#pageheader {
overflow: hidden;
padding-top: 1%;
width: 100%;
height: 455px;
}
/* Common links styling */
#commonlink{
float: right;
padding-left: 4%;
width: 30%;
}
/* Commmon link bar */
#commonlinkbar{
margin: 0 auto;
padding: 0;
max-width: 100%;
font-family: Verdana, Geneva, sans-serif;
}
#commonlinkbar li a{
font-size: 1em;
color: #236841;
font-family: Verdana, Geneva, sans-serif;
padding-bottom: 5%;
}
#commonlinkbar ul li{
display: inline-block;
background-color: #ffffff;
padding: 2%;
position: relative;
}
#commonlink ul li :hover:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #236841;
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
#commonlink ul li a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #236841;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
#commonlink ul li a:hover{
color: #309c64;
}
/* Logo */
#logo{
max-width: 100%;
margin-bottom: 2%;
}
.innerlogo{
width: 55%;
padding: 0% 20%;
}
.innerlogo img{
max-width: 100%;
}
/* Main navigation bar styling */
#mainnav{
width: 100%;
}
#navwrapper{ /* Navigation bar position */
width: 66%;
height: auto;
margin: 0 auto;
text-align: left;
float: right;
padding: 0% 14%;
}
#mainnav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#mainnav ul li{ /* Navigation bar border design */
display: inline-block;
background-color: #236841;
border-left-color: #3cc37d;
border-left-width: 5px;
border-left-style: inset;
border-right-color: #ffffff;
border-right-width: 5px;
border-right-style: solid;
border-radius: 0 10px 0px 0;
}
#mainnav li a{
font-size: 1.5em;
font-family: 'parisr', Verdana, Geneva, sans-serif;
}
#mainnav ul li:hover{
background-color: #ffffff;
animation: bounce 1s;
}
#mainnav ul li a,visited{
color: #000;
display: block;
padding: 10px;
text-decoration: none;
}
#mainnav ul li a:hover{ /* Navigation bar bounce effect */
color: #236841;
text-decoration: none;
border-right-color: #236841;
border-right-width: 5px;
border-right-style: solid;
border-radius: 0 20px 20px 0;
animation: bounce 1s;
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
#keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
#mainnav ul li:hover ul{ /* Navigation bar dropdown menu design */
display: inline-block;
color: #236841;
}
#mainnav ul ul{
color: #fff;
display: none;
position: absolute;
background-color: #fff;
}
#mainnav ul ul li{
display: block;
margin: 2px 0px 2px 0px;
}
#mainnav ul ul li a,visited{
color: #fff;
}
#mainnav ul ul li:hover{ /* Navigation bar dropdown menu bounce effect */
color: #236841;
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
#keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
/* breadcrumbs */
#breadcrumbs{
width: auto;
padding: 1%;
}
#breadcrumbs a{
color: #000;
font-style: italic;
}
/* Main content style */
#mainc{
overflow: hidden;
width: 100%;
padding-bottom: 50px;
}
/* Section Introduction style */
#introduction{
width: 90%;
max-width: 100%;
padding: 0% 5% 0% 5%;
}
/* Title page style */
#title{
max-width: 100%;
padding: 0% 10%;
}
try this.
make a div the size you need
add to css
myDiv {
display: none;
}
a:hover + myDiv {
display: block;
}
Remove or adjust the declared height of the header div....
#pageheader {
overflow: hidden;
padding-top: 1%;
width: 100%;
height: 455px; /* <-- either remove this line or change it to something correct */
}
Based on the pieces you've supplied, it seems that height is the bulk of the header. If you want it smaller, you need to change or remove that declaration.
Removing it would allow the header div to be whatever automatic height is needed to display the contents within the div which are not set as floats.
For some reason, one of the sections of my page becomes the last section of my page despite having more sections below it in the HTML document. If the section is removed the other sections are shown. Is there something in the HTMl or CSS that affected my page? I need the rest of the page to be shown because it contains important information.
The HTML:
<!-- ===========================================================================
START NATURAL LANGUAGE MARKUP
=========================================================================== -->
<section id="nlmarkup">
<div class="inner">
<h2>Who I am. <i class="title_line"></i> </h2>
<p class="lead">The most important thing to me is
<br>building products people love.</p>
<form id="nl-form" class="nl-form">"I feel like making a
<select>
<option value="1" selected>app</option>
<option value="2">website</option>
<option value="3">mockup</option>
</select>
<br />that is
<input type="text" value="" placeholder="(adjective)" data-subline="For example: <em>Responsive</em> or <em>Cool</em>"
/>within
<br />the next
<select>
<option value="1" selected>week</option>
<option value="1">two weeks</option>
<option value="2">month</option>
<option value="3">six months</option>
<option vlaue="4">year</option>
</select>and
<br>delivered to me via
<select>
<option value="1" selected>email</option>
<option value="1">dribbble</option>
<option value="2">behance</option>
</select>."
<div class="nl-overlay"></div>
</form>
</div>
</div>
</section>
The CSS:
#font-face {
font-family: 'nlicons';
src:url('../fonts/nlicons/nlicons.eot');
src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/nlicons/nlicons.woff') format('woff'),
url('../fonts/nlicons/nlicons.ttf') format('truetype'),
url('../fonts/nlicons/nlicons.svg#nlicons') format('svg');
font-weight: normal;
font-style: normal;
}
/* general style for the form */
.nl-form {
width: 100%;
margin: 0.3em auto 0 auto;
font-size: 4em;
line-height: 1.5;
}
.nl-form ul {
list-style: none;
margin: 0;
padding: 0;
}
/* normalize the input elements, make them look like everything else */
.nl-form input,
.nl-form select,
.nl-form button {
border: none;
background: transparent;
font-family: inherit;
font-size: inherit;
color: inherit;
font-weight: inherit;
line-height: inherit;
display: inline-block;
padding: 0;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
.nl-form input:focus {
outline: none;
}
/* custom field (drop-down, text element) styling */
.nl-field {
display: inline-block;
position: relative;
}
.nl-field.nl-field-open {
z-index: 10000;
}
/* the toggle is the visible part in the form */
.nl-field-toggle,
.nl-form input,
.nl-form select {
line-height: inherit;
display: inline-block;
color: #b14943;
cursor: pointer;
border-bottom: 1px dashed #b14943;
}
/* drop-down list / text element */
.nl-field ul {
position: absolute;
visibility: hidden;
background: #00aed7;
left: -0.5em;
top: 50%;
font-size: 80%;
opacity: 0;
-webkit-transform: translateY(-40%) scale(0.9);
-moz-transform: translateY(-40%) scale(0.9);
transform: translateY(-40%) scale(0.9);
-webkit-transition: visibility 0s 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: visibility 0s 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s;
}
.nl-field.nl-field-open ul {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
-webkit-transition: visibility 0s 0s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: visibility 0s 0s, opacity 0.3s, -moz-transform 0.3s;
transition: visibility 0s 0s, opacity 0.3s, transform 0.3s;
}
.nl-field ul li {
color: #fff;
position: relative;
}
.nl-dd ul li {
padding: 0 1.5em 0 0.5em;
cursor: pointer;
white-space: nowrap;
}
.nl-dd ul li.nl-dd-checked {
color: #478982;
}
.no-touch .nl-dd ul li:hover {
background: rgba(0,0,0,0.05);
}
.no-touch .nl-dd ul li:hover:active {
color: #478982;
}
/* icons for some elements */
.nl-dd ul li.nl-dd-checked:before,
.nl-submit:before,
.nl-field-go:before {
font-family: 'nlicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.nl-dd ul li.nl-dd-checked:before {
content: "\e000";
position: absolute;
right: 1em;
font-size: 50%;
line-height: 3;
}
.nl-ti-text ul {
min-width: 8em;
}
.nl-ti-text ul li.nl-ti-input input {
width: 100%;
padding: 0.2em 2em 0.2em 0.5em;
border-bottom: none;
color: #fff;
}
.nl-form .nl-field-go {
position: absolute;
right: 0;
top: 0;
height: 100%;
cursor: pointer;
background: rgba(0,0,0,0.1);
width: 1.8em;
text-align: center;
color: transparent;
}
.nl-field-go:before {
content: "\e001";
font-size: 75%;
color: #fff;
width: 100%;
line-height: 2.5;
display: block;
}
/* custom placeholder color */
input::-webkit-input-placeholder {
color: rgba(255,255,255,0.8);
}
input:active::-webkit-input-placeholder ,
input:focus::-webkit-input-placeholder {
color: rgba(255,255,255,0.2);
}
input::-moz-placeholder {
color: rgba(255,255,255,0.8);
}
input:active::-moz-placeholder,
input:focus::-moz-placeholder {
color: rgba(255,255,255,0.2);
}
input:-ms-input-placeholder {
color: rgba(255,255,255,0.8);
}
input:active::-ms-input-placeholder ,
input:focus::-ms-input-placeholder {
color: rgba(255,255,255,0.2);
}
/* example field below text input */
.nl-ti-text ul li.nl-ti-example {
font-size: 40%;
font-style: italic;
font-weight: 400;
padding: 0.4em 1em;
color: rgba(0,0,0,0.2);
border-top: 1px dashed rgba(255,255,255,0.7);
}
.nl-ti-text ul li.nl-ti-example em {
color: #fff
}
/* submit button */
.nl-submit-wrap {
margin-top: 0.4em;
}
/* overlay becomes visible when a field is opened */
.nl-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
z-index: 9999;
visibility: hidden;
-webkit-transition: visibility 0s 0.3s, opacity 0.3s;
-moz-transition: visibility 0s 0.3s, opacity 0.3s;
transition: visibility 0s 0.3s, opacity 0.3s;
}
.nl-field.nl-field-open ~ .nl-overlay {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
#media screen and (max-width: 45em) {
.nl-form {
font-size: 3em;
}
}
#media screen and (max-width: 25em) {
.nl-form {
font-size: 2em;
}
}
An additional </div> towards the bottom which has no opening <div>.
You open a section but you close a div.
Any decent IDE / Text editor could warn you about it. It's time to get one or it will become a pain.