I'm trying to style this HTML page using the style used here
https://codepen.io/Lewitje/pen/BNNJjo
I have added the style reference and <div> tags.But the style is not properly applied.Please advice.
<html>
<head>
<title>User Validation</title>
<link href="newstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="container">
<!-- our form -->
<form id='userForm' class="form">
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<div id='response'></div>
</div>
<!-- where the response will be displayed -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Validating Email...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.post('test.php', $(this).serialize(), function(data){
// show the response
$('#response').html(data);
}).fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
StyleSheet
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
#prim: #53e3a6;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body{
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
::-webkit-input-placeholder { /* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
}
.wrapper{
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
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;
&.form-success{
.container{
h1{
transform: translateY(85px);
}
}
}
}
.container{
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
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;
input{
display: block;
appearance: none;
outline: 0;
border: 1px solid fade(white, 40%);
background-color: fade(white, 20%);
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;
&:hover{
background-color: fade(white, 40%);
}
&:focus{
background-color: white;
width: 300px;
color: #prim;
}
}
button{
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #prim;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
&:hover{
background-color: rgb(245, 247, 249);
}
}
}
.bg-bubbles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
li{
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: fade(white, 15%);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
&:nth-child(1){
left: 10%;
}
&:nth-child(2){
left: 20%;
width: 80px;
height: 80px;
animation-delay: 2s;
animation-duration: 17s;
}
&:nth-child(3){
left: 25%;
animation-delay: 4s;
}
&:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-duration: 22s;
background-color: fade(white, 25%);
}
&:nth-child(5){
left: 70%;
}
&:nth-child(6){
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: fade(white, 20%);
}
&:nth-child(7){
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
&:nth-child(8){
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 40s;
}
&:nth-child(9){
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 40s;
background-color: fade(white, 30%);
}
&:nth-child(10){
left: 90%;
width: 160px;
height: 160px;
animation-delay: 11s;
}
}
}
#-webkit-keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
#keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
There are two things you can try.
First, make sure that your HTML and CSS files are in same folder.
Second, your attached CSS file is a Less file and not compiled. You must select "View Compiled CSS" from your link of codepen and then copy it.
I hope it would help you
Related
The background appears but after 5 seconds authorization appears
first the circle will appear smoothly and slowly, then the authorization window should appear in this video https://www.youtube.com/watch?v=16j4MkPrI1Y&t=1s
searched all over the internet and couldn't find anything
Maybe I forgot the form somewhere, please help
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
input {
height: 45px;
width: 100%;
color: #385983;
font-size: 14px;
line-height: 16px;
border: 2px solid #E9F2FF;
border-radius: 5px;
padding-left: 25px;
}
input:focus {
outline: none;
border: 2px solid #C1D9FD;
}
main {
background: #F1F5FE;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.circle {
position: absolute;
z-index: 1;
width: 2534px;
height: 2534px;
border-radius: 50%;
background: #F7FAFF;
box-shadow: 0px 4px 70px 6px rgba(217, 229, 255, 0.25);
animation-name: fadeCircle;
animation-direction: .7s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeCircle {
0% {
width: 2534px;
height: 2534px;
}
25% {
width: 2000px;
height: 2000px;
}
50% {
width: 1500px;
height: 1500px;
}
75% {
width: 1000px;
height: 1000px;
}
100% {
width: 534px;
height: 534px;
}
}
.register-form-container {
opacity: 0;
position: relative;
z-index: 2;
max-width: 415px;
width: 100%;
background: #FFFFF;
box-shadow: 0px 6px 50px rgba(217, 229, 225, 0.7);
border-radius: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 38px;
padding-bottom: 38px;
animation-name: fadeForm;
animation-direction: .7s;
animation-timing-function: ease-in-out;
animation-delay: 1.4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeForm {
0% {
opacity: 0;
}
25% {
opacity: .25;
}
50% {
opacity: .5;
}
75% {
opacity: .75;
}
100% {
opacity: 1;
}
}
.form-title {
color: #30507D;
font-weight: 500;
font-size: 20px;
line-height: 23px;
margin-bottom: 38px;
}
.form-field {
margin-bottom: 13px;
}
.button {
font-weight: bold;
font-size: 14px;
display: block;
height: 45px;
background: #247FFF;
border-radius: 5px;
color: #fff;
text-transform: uppercase;
text-align: center;
line-height: 45px;
cursor: pointer;
}
.button:hover {
background-color: #0D6CF2;
}
a.button {
text-decoration: none;
}
.button-google {
color: #C6CFDC;
background: #F2F6FF;
}
.button-google:hover {
background: #E2E6F0;
color: #fff
}
.divider {
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: #405D87;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>book.py</title>
</head>
<body>
<main>
<div class="circle"></div>
<div class="register-form-container">
<h1 class="form-title">
Регистрация
</h1>
<div class="form-flield">
<div class="form-flield">
<input type="text" placeholder="Имя">
</div>
<div class="form-flield">
<input type="text" placeholder="Почта">
</div>
<div class="form-flield">
<input type="text" placeholder="Пароль">
</div>
<div class="form-flield">
<input type="text" placeholder="Подтвердить Пароль">
</div>
</div>
<div class="form-buttons">
<buttton class="button">Регистрация</buttton>
<div class="divider">или</div>
Google
</div>
</div>
</main>
</body>
</html>
For some context, I am trying to add a hamburger navigation menu to the top right of my website. When you click on it and it expands out into a full page. Nothing crazy. This part actually works. It's all HTML and CSS, no JS. The rest of the website so far is a 3D globe use ArcGIS API for Javascript contained in a #sceneContainer. I've been playing around with this for a while but can't spot the issue.
There are two main issues:
I initially added the navbar #keyframe BEFORE the scene container in the main.css file, but what would happen is that the navbar would work just fine, but it is covered up by an all-white background. I could tell the globe was still rendering because right when you refresh the website it quickly appears and gets covered up. The second part of this is...
I tried putting the #keyframe AFTER the #sceneContainer which allowed the globe to become visible again, but the navbar won't open up.
Almost seems like they are overlapping each other. I want them to coexist together in the same screen where when you click on the menu it covers the whole map. I know it's probably something obvious but I'm stumped. My guess is I messed up somewhere with the sizing or something with the sceneContainer.
Any help would be super cool! 🙏
Here is my Code:
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<script src="main.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
</body>
</html>
Well, I played with the CSS a little... tweaked some things. And I found that this did the job-
<style>
.esri-view {
z-index: -1;
position: absolute;
}
</style>
full example-
<!DOCTYPE html>
<html>
<head>
<title>Half Earth</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
<!-- <link rel="stylesheet" href="main.css"> -->
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://js.arcgis.com/4.17/"></script>
<!-- <script src="main.js"></script> -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
.esri-view {
z-index: -1;
position: absolute;
}
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
/* clip-path: circle(25px at calc(0% + 45px) 45px); */
background: #000;
clip-path: circle(25px at calc(100% - 45px) 45px);
transition: all 0.3s ease-in-out;
}
#active:checked~.wrapper {
clip-path: circle(75%);
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/* left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
cursor: pointer;
/*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
background: rgb(235, 153, 86);
transition: all 0.3s ease-in-out;
}
#active:checked~.menu-btn {
color: #fff;
}
#active:checked~.menu-btn i:before {
content: "\f00d";
}
.wrapper ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li {
margin: 15px 0;
}
.wrapper ul li a {
color: none;
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
background: #000;
position: relative;
line-height: 50px;
transition: all 0.3s ease;
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 104%;
height: 110%;
left: -2%;
top: -5%;
/* if the font is 'Oswald'*/
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
animation: rotate 1.5s linear infinite;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #fff;
}
input[type="checkbox"] {
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#sceneContainer {
height: 100vh;
width: 100vw;
background: rgb(0, 0, 0);
}
#keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
<div class="wrapper">
<ul>
<li>Home</li>
<li>Encyclopedia</li>
<li>About</li>
<li>Community</li>
<li>Feedback</li>
</ul>
</div>
<div id="sceneContainer"></div>
<!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
<script>
require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new SceneView({
container: "sceneContainer", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
});
</script>
</body>
</html>
I have a simple login page, which I wanted to beautify with some snow in the background. However this makes it unable for me to input anything into the input box, even if z-index is set to 100:
/* CSS (Login) : */
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: linear-gradient(to left, #76b852, /*#8DC26F*/
#333);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* CSS (Snow) : */
.background {
color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.winter-is-coming,
.snow {
z-index: -1;
pointer-events: none;
}
.winter-is-coming {
overflow: hidden;
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: initial;
background: #333;
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
}
.snow--near {
animation-duration: 10s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- large-075d267ecbc42e3564c8ed43516dd557.png');
background-size: contain;
}
.snow--near+.snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
background-size: contain;
}
.snow--mid+.snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- small-1ecd03b1fce08c24e064ff8c0a72c519.png');
background-size: contain;
}
.snow--far+.snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
<div class="winter-is-coming login-page">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
<div class="form" style="z-index:100;">
<form class="login-form">
<h1>Login</h1>
<input type="text" placeholder="Username" id="usernameBox" />
<input type="password" placeholder="Password" id="passwordBox" />
<button runat="server" onclick="loginClicked">login</button>
</form>
</div>
</div>
I know that the error lays in Snow.css, because if I don't use it, I can use my login normally, but I can't find anything wrong within the file
pointer-events is to be set on .snow only ;)
/* CSS (Login) : */
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: linear-gradient(to left, #76b852, /*#8DC26F*/
#333);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* CSS (Snow) : */
.background {
color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.winter-is-coming,
.snow {
z-index: -1;
}
.winter-is-coming {
overflow: hidden;
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: initial;
background: #333;
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
pointer-events: none;
}
.snow--near {
animation-duration: 10s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- large-075d267ecbc42e3564c8ed43516dd557.png');
background-size: contain;
}
.snow--near+.snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
background-size: contain;
}
.snow--mid+.snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- small-1ecd03b1fce08c24e064ff8c0a72c519.png');
background-size: contain;
}
.snow--far+.snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
<div class="winter-is-coming login-page">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
<div class="form" style="z-index:100;">
<form class="login-form">
<h1>Login</h1>
<input type="text" placeholder="Username" id="usernameBox" />
<input type="password" placeholder="Password" id="passwordBox" />
<button runat="server" onclick="loginClicked">login</button>
</form>
</div>
</div>
or reset on the form.
/* CSS (Login) : */
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
pointer-events:auto
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: linear-gradient(to left, #76b852, /*#8DC26F*/
#333);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* CSS (Snow) : */
.background {
color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.winter-is-coming,
.snow {
z-index: -1;
pointer-events: none;
}
.winter-is-coming {
overflow: hidden;
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: initial;
background: #333;
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
}
.snow--near {
animation-duration: 10s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- large-075d267ecbc42e3564c8ed43516dd557.png');
background-size: contain;
}
.snow--near+.snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
background-size: contain;
}
.snow--mid+.snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- small-1ecd03b1fce08c24e064ff8c0a72c519.png');
background-size: contain;
}
.snow--far+.snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
<div class="winter-is-coming login-page">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
<div class="form" style="z-index:100;">
<form class="login-form">
<h1>Login</h1>
<input type="text" placeholder="Username" id="usernameBox" />
<input type="password" placeholder="Password" id="passwordBox" />
<button runat="server" onclick="loginClicked">login</button>
</form>
</div>
</div>
I'm trying to replicate an example on Codepen on my own HTML files on my computer but it isn't rendering properly. the static layout looks the same as whats being rendered in codepen, but the background with the moving squares is not working when i'm putting it on my machine and files. Here's the codepen link im trying to use/replicate:
https://codepen.io/Lewitje/pen/BNNJjo
i can get the background color to show up & the login boxes to pop up, but i was really trying to replicate it so i could get the animated background.
Here's the code on my desktop that isn't working in my browser (i tried chrome and safari both):
As you will see the moving rectangles in the background don't show up.
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
#prim: #53e3a6;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body{
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
::-webkit-input-placeholder { /* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
}
.wrapper{
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
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;
&.form-success{
.container{
h1{
transform: translateY(85px);
}
}
}
}
.container{
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
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;
input{
display: block;
appearance: none;
outline: 0;
border: 1px solid fade(white, 40%);
background-color: fade(white, 20%);
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;
&:hover{
background-color: fade(white, 40%);
}
&:focus{
background-color: white;
width: 300px;
color: #prim;
}
}
button{
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #prim;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
&:hover{
background-color: rgb(245, 247, 249);
}
}
}
.bg-bubbles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
li{
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: fade(white, 15%);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
li:nth-child(1){
left: 10%;
}
li:nth-child(2){
left: 20%;
width: 80px;
height: 80px;
animation-delay: 2s;
animation-duration: 17s;
}
&:nth-child(3){
left: 25%;
animation-delay: 4s;
}
&:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-duration: 22s;
background-color: fade(white, 25%);
}
&:nth-child(5){
left: 70%;
}
&:nth-child(6){
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: fade(white, 20%);
}
&:nth-child(7){
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
&:nth-child(8){
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 40s;
}
&:nth-child(9){
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 40s;
background-color: fade(white, 30%);
}
&:nth-child(10){
left: 90%;
width: 160px;
height: 160px;
animation-delay: 11s;
}
}
}
#-webkit-keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
#keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<link href="styles/test.css" rel="stylesheet">
<form class="form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit" id="login-button">Login</button>
</form>
</div>
<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>
</body>
</html>
My issue was that i was trying to use the "less" code on CodePen when replicating the example. I needed to select the tab in the upper right area of Codepen to look at the full CSS code. #Gerard was able to bring me to this solution.
I've fairly simple CSS code for my tabs. Problem is I'm adding this as part of larger CSS base and I keep getting it overwritten by defaults. For example I have a * { font-size: 8pt; } which forces itself into my new added CSS.
/*
#import url('https://fonts.googleapis.com/css?family=Roboto');
*/
/*
#import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
*/
/*
body {
font-family: 'Roboto', sans-serif;
}
*/
.tabsWrapper {
text-align: center;
margin: 50px auto;
font-family: 'Roboto', sans-serif !important;
}
.tabs {
font-family: 'Roboto', sans-serif !important;
margin-top: 50px;
font-size: 15px;
padding: 0px;
list-style: none;
background: #fff;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
/*
display: inline-block;
*/
/*
border-radius: 50px;
*/
position: relative;
}
.tabs a {
text-decoration: none;
color: #777;
text-transform: uppercase;
padding: 10px 20px;
display: inline-block;
position: relative;
z-index: 1;
transition-duration: 0.6s;
}
.tabs a.active {
color: #fff;
}
.tabs a i {
margin-right: 5px;
}
.tabs .selector {
display: none;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
/*
border-radius: 50px;
*/
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background: #05abe0;
background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}
.tabs-content {
display: none;
}
.tabs-content.active {
display: block;
}```
/*
#import url('https://fonts.googleapis.com/css?family=Roboto');
*/
/*
#import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
*/
/*
body {
font-family: 'Roboto', sans-serif;
}
*/
.tabsWrapper {
text-align: center;
margin: 50px auto;
font-family: 'Roboto', sans-serif !important;
}
.tabs {
font-family: 'Roboto', sans-serif !important;
margin-top: 50px;
font-size: 15px;
padding: 0px;
list-style: none;
background: #fff;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
/*
display: inline-block;
*/
/*
border-radius: 50px;
*/
position: relative;
}
.tabs a {
text-decoration: none;
color: #777;
text-transform: uppercase;
padding: 10px 20px;
display: inline-block;
position: relative;
z-index: 1;
transition-duration: 0.6s;
}
.tabs a.active {
color: #fff;
}
.tabs a i {
margin-right: 5px;
}
.tabs .selector {
display: none;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
/*
border-radius: 50px;
*/
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background: #05abe0;
background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}
.tabs-content {
display: none;
}
.tabs-content.active {
display: block;
}
<body>
<div class="tabsWrapper">
<div class="tabs">
<div class="selector"></div>
<a href="javascript:void(0)" class="active" data-id="Tab-40w1lgn2"><i class="fas fa-bomb">Test
</i>
</a>
<a href="javascript:void(0)" data-id="Tab-w2mo0zn9"><i class="fas fa-bomb">Test5
</i>
</a>
</div>
</div>
</body>
My understanding was that if I add !Important for tabs CSS it would make sure that everything down of tabs gets that setting including A/I and so on. But it doesn't work. It only works if I move font-size down to A/I element which is not what I want. I would like to make sure that settings go down properly to the elements below. What is the easiest way?
The universal selector will be applied to each and every element. Even when the font-size is set on .tabs, the * will set font-size again on the a and i children.
If you want to have proper inheritance, use
body {
font-size: 8pt;
}
This will keep the 8pt size until an element defines another size.
Some more information here
Could it be because your include: #import url('https://fonts.googleapis.com/css?family=Roboto'); is commented out?