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>
Related
After the slideIn animation the buttons don't set the cursor to pointer and don't do anything that was coded in the :hover/:active.
My goal is to have the button effects after the animation.
here is an example where the button effects don't work after the animation:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Here is an example without animation where the button effects do work:
body{
background-image: url("../img/bg.png");
background-repeat: no-repeat;
background-size: 100%;
}
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Okay so a few problems here. You are trying to animate transform properties on hover and with the animation property.
The way I would solve this is by adding a container to the button where you would add the intro animation. Then add the hover animation to the button.
here's the HTML
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br /> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<div class="button-container">
<button class="btn">
<span>
1300000
</span>
</button>
</div>
</a>
</li>
</ul>
</div>
</section>
and then CSS
.content {
position: absolute;
background: linear-gradient(-45deg, #2e3192, #1bffff);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1 {
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 200%;
}
ul {
padding: 0px;
list-style: none;
}
.button-container {
animation: slideIn 1.5s 1 ease-out forwards;
}
.btn {
position: relative;
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 0.1s;
color: white;
cursor: pointer;
}
.btn:hover {
transform: translateY(-2px);
transition-duration: 0.3s;
}
.btn:active {
transform: scale(0.95);
}
span {
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
Apply display: block; to the a tag around the button to make the whole button surface be a link:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#questions a {
display: block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Updated answer (works with 2s delay):
Remove the transform: translateX(0) from the 100% keyframe on the animation. It's unnecessary, and it's overriding the :hover animation.
Old answer:.
(I changed the animation-fill-mode to none, and moved the opacity: 0 to the #keyframes). The problem was that the transform on the :hover was being overridden by the #keyframes, so changing the fill-mode fixed that.
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
I've been building my portfolio site and I'm now at the stage of making it more responsive. I built the site while using my monitors, but when the screen shrinks down to a standard laptop (i.e Macbook Pro), the div with my image overlaps with my "text-zone" div/class which contains the headings and information etc. Moving the image div outside of the container with the use of a fragment does not help either so I'm a bit stuck. My intended vision/goal is to have the image next to the text at all times but if the screen gets to small, it will shift under or over the text.
Here is the JSX:
const Home = () => {
return (
<div className="container home-page">
<div className = "text-zone">
<h1>My Name</h1>
<h2>Intern at xxx | Greater xxx Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div class = "profile-img">
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}
Here is the SCSS
.home-page {
.text-zone {
position: absolute;
left: 30%;
top: 50%;
transform: translateY(-50%);
width: 40%;
max-height: 90%;
}
h1 {
color: white;
font-size: 80px;
margin: 0;
font-family: 'Roboto Mono';
font-weight: 400;
animation: fadeIn 1s 1.7s backwards;
}
.profile-img {
position: absolute;
top: 30%;
right: 20%;
z-index: -1;
box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
&:hover {
outline:2px solid darkgoldenrod;
outline-offset: 2rem;
transition: all .2s;
border-radius: 2px;
object-fit: cover;
}
}
}
h2 {
font-family: 'Roboto Mono';
color: #8d8d8d;
animation: fadeIn 1s 1.8s backwards ;
}
.flat-button {
background-color: white;
color: black;
font-size: 1.6rem;
border-radius: 6rem;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
margin-top: 10px;
animation: fadeIn 1s 1.8s backwards;
letter-spacing: 2px;
&:hover {
background-color: #8d8d8d;
outline:2px solid darkgoldenrod;
color: white;
}
}
In my opinion, if you try it like so, you can make it sooner and easier:
.home-page {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 100vh;
.text-zone {
text-align: center;
#media (min-width: 768px) {
width: 40%;
text-align: left;
}
max-height: 90%;
padding: 0 16px;
}
h1 {
color: white;
font-size: 80px;
margin: 0;
font-family: 'Roboto Mono';
font-weight: 400;
animation: fadeIn 1s 1.7s backwards;
}
.profile-img {
margin-top: 140px;
padding: 0 16px;
z-index: -1;
box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);
#media (min-width: 1200px) {
margin-right: -180px;
}
&:hover {
outline:2px solid darkgoldenrod;
outline-offset: 2rem;
transition: all .2s;
border-radius: 2px;
object-fit: cover;
}
}
}
h2 {
font-family: 'Roboto Mono';
color: #8d8d8d;
animation: fadeIn 1s 1.8s backwards ;
}
.flat-button {
background-color: white;
color: black;
font-size: 1.6rem;
border-radius: 6rem;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
margin-top: 10px;
animation: fadeIn 1s 1.8s backwards;
letter-spacing: 2px;
&:hover {
background-color: #8d8d8d;
outline:2px solid darkgoldenrod;
color: white;
}
}
const Home = () => {
return (
<div className="container home-page">
<div className = "text-zone">
<h1>My Name</h1>
<h2>Intern at ... | Greater ... Area</h2>
<Link to = "/about" className="flat-button">Learn More</Link>
</div>
<div class = "profile-img">
<img src = {Headshot} alt = "Headshot"/>
</div>
</div>
)
}
So as said above, I have (for fun) recreated a website (hologram.io), because I'm new to CSS, and just wanted to see what I can do myself without help... But I can't figure out how I can position the whole first section which is absolute (-> On top of an Image) center, center. So vertical and horizontal, So that on bigger screens it always stays perfectly in the center of the menu... On the other sections which are not absolute, I used display: flex, justify-content: center and align-items center, which works perfectly... On the screenshots I have included, you can see the problem... Also, will include the code. It looks a bit messy, but should be fine haha...
Here you can see the noncentered Absolute item
Here you can see the flex items which are perfectly centered on every screensize and
And here for Refernce is the hologram website...
#font-face {
font-family: Robert Sans;
src: url(RobertSans-Regular.ttf);
}
#navtextonly li {
list-style-type: none;
display: inline;
padding: 15px;
text-align: center;
}
.listitem:hover {
cursor: pointer;
color: #4e6cff;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-right: 0px;
padding-right: 0px;
}
nav {
background-color: rgb(255, 255, 255);
}
body {
margin: 0px;
font-family: Robert Sans;
}
#navbarouter {
display: flex;
align-items: center;
justify-content: center;
}
#navtextonly {
white-space: nowrap;
}
#mainmenuwobtnlogo {
margin-right: 100px;
}
ul {
font-size: 16px;
}
#buttonsmenu1 {
background-color: white;
border: 1px solid #4e6cffce;
padding: 12px 23px 12px 23px;
border-radius: 25px;
margin-right: 15px;
-webkit-box-shadow: 2px 2px 15px 1px #999999;
box-shadow: 2px 2px 15px 1px #999999;
}
#buttonsmenu1:hover {
border-color: #111;
cursor: pointer;
}
#buttonsmenu2 {
background-color: #4e6cff;
padding: 12px 23px 12px 23px;
color: white;
border-radius: 25px;
-webkit-box-shadow: 2px 2px 15px 1px #999999;
box-shadow: 2px 2px 15px 1px #999999;
}
#buttonsmenu2:hover {
background-color: #788fff;
color: white;
cursor: pointer;
}
.buttonsmenuouter {
margin-left: 25px;
}
#hamburgernav {
display: none;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.mainheading {
font-size: 64px;
white-space: nowrap;
font-weight: 400;
}
#h1top,
#h1bottom {
margin: 0px;
padding: 0px;
}
article {
color: rgb(255, 255, 255);
max-width: 550px;
}
#ellipse {
position: absolute;
top: 0px;
left: 630px;
}
#drohnepng {
position: absolute;
top: -50px;
left: 880px;
height: 80px;
}
#cartpng {
position: absolute;
top: 80px;
left: 585px;
height: 250px;
}
#rollerpng {
position: absolute;
top: 140px;
left: 825px;
height: 440px;
}
#content1 {
position: absolute;
top: 250px;
left: 12%;
}
#outerouter {
max-width: 1300px;
}
#glowh1 {
background: linear-gradient(
-60deg,
#904e95,
#904e95,
#e73c7e,
#ee7752,
#4e6cff,
white
);
background-size: 600%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 600%;
}
}
#paragraph {
width: 390px;
color: rgb(199, 199, 199);
font-size: 20px;
margin-bottom: 30px;
}
#emailwithsubmit {
display: flex;
}
.emailfeld {
width: 100%;
padding: 18px 23px 18px 23px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
}
#submitbtn {
padding: 18px 35px 18px 35px;
border-radius: 25px 25px 25px 25px;
color: white;
font-weight: 600;
border-width: 0px;
background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);
position: relative;
left: -60px;
}
#mainpart2,
#mainpart3 {
display: flex;
align-items: center;
justify-content: center;
margin: 100px 60px 100px 60px;
}
#mainpart2-3outer {
}
#card {
margin-left: 60px;
margin-right: 100px;
height: 280px;
/* -webkit-animation: fadein 3.2s both;
-moz-animation: fadein 3.2s both;
-o-animation: fadein 3.2s both;
animation: fadein 3.2s both; */
animation: float2 6s ease-in-out infinite;
}
#keyframes float2 {
0% {
transform: translatey(0px);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translatey(0px);
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
-webkit-transform: translateX(-25px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
-moz-transform: translateX(-50px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
#-0-keyframes fadein {
0% {
opacity: 0;
-o-transform: translateX(-50px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
#keyframes fadein {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#ellipse {
-webkit-animation: fade 5s both;
-moz-animation: fade 5s both;
-o-animation: fade 5s both;
animation: fade 5s both;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-0-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cartpng,
#drohnepng,
#rollerpng {
/* -webkit-animation: fadein 3.2s both;
-moz-animation: fadein 3.2s both;
-o-animation: fadein 3.2s both;
animation: fadein 3.2s both;
transform: translatey(0px); */
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-50px);
}
100% {
transform: translatey(0px);
}
}
#mainh-1,
#mainp-1 {
max-width: 280px;
}
#mainh-2,
#mainp-2 {
max-width: 280px;
}
.main1h,
.main1p,
.main2h,
.main2p {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#mainh-3,
#mainp-3 {
max-width: 280px;
}
#mainh-4,
#mainp-4 {
max-width: 280px;
}
#mainh-1,
#mainh-2,
#mainh-3,
#mainh-4 {
margin: 0px;
padding: 0px;
}
#textmainpart2 {
margin-right: 60px;
}
.main2h1 {
margin-bottom: 40px;
}
.contentmainpart3-1 {
max-width: 475px;
margin-left: 60px;
}
.contentmainpart3-2 {
margin-right: 60px;
}
#beforefootercentered {
text-align: center;
margin-bottom: 75px;
}
.beforefootercolumncontent {
display: flex;
flex-direction: row;
justify-content: center;
gap: 100px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 50px;
}
.beforefootericons {
height: 66px;
width: 66px;
}
#beforefootercolumncontent1,
#beforefootercolumncontent2,
#beforefootercolumncontent3 {
max-width: 280px;
text-align: center;
}
#list2banner {
display: flex;
flex-direction: row;
margin-top: 20px;
}
#list1bannerouter {
max-width: 725px;
}
.footerbanner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-image: linear-gradient(90deg, #7831ca, #00a5ff);
margin: 0px 190px 0px 190px;
border-radius: 10px;
padding-left: 30px;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 50px;
color: white;
position: relative;
top: 100px;
}
.footerbanner h2 {
font-size: 40px;
font-weight: 400;
margin-bottom: 10px;
}
#list1banner {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#list1banner li:before {
content: "✓";
padding-right: 5px;
}
#btn1,
#btn2 {
border-radius: 25px;
padding: 10px 20px 10px 20px;
}
#btn1 {
margin-right: 20px;
background-color: #111;
border-width: 0px;
}
#btn2 {
background-image: transparent;
border: 1px solid white;
}
#pfeil {
margin-left: 5px;
}
#mainfooter {
height: 600px;
background-color: #0a1435;
}
#mainfooterupper {
height: 100px;
background-color: #0a1435;
display: none;
}
.item1 {
margin-right: 20px;
}
#placehold {
position: absolute;
top: 3100px;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(255, 255, 255);
font-size: 70px;
}
#media only screen and (max-width: 1350px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative;
}
#navtextonly {
font-size: 14px;
}
li {
padding-right: 20px;
}
#mainmenuwobtnlogo {
margin-left: 0px;
margin-right: 0px;
}
#navbarouter {
display: flex;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
width: 120px;
}
.buttonsmenuouter {
margin-left: 25px;
font-size: 14px;
margin-right: 0px;
}
#buttonsmenu1,
#buttonsmenu2 {
padding: 9px 17px 9px 17px;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 990px) {
html,
body {
overflow-x: hidden;
}
body {
position: relative;
}
#navtextonly {
display: none;
}
#navbarouter {
margin-left: 20px;
margin-right: 20px;
display: flex;
justify-content: space-between;
}
#hologramlogo {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
.buttonsmenuouter {
margin-left: 0px;
}
#hamburgernav {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
display: inline;
}
#backgroundverlauf {
height: 800px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.mainheading {
font-size: 50px;
}
#paragraph {
font-size: 19px;
}
}
#media only screen and (max-width: 570px) {
.mainheading {
font-size: 30px;
}
#paragraph {
font-size: 16px;
}
#content1 {
position: absolute;
top: 175px;
}
article {
color: rgb(255, 255, 255);
max-width: 500px;
display: flex;
flex-direction: column;
margin-right: 20px;
}
#floatingimages {
display: none;
}
#paragraph {
width: 300px;
color: rgb(199, 199, 199);
font-size: 16px;
margin-bottom: 30px;
}
#backgroundverlauf {
height: 500px;
}
.emailfeld {
width: 80%;
padding-bottom: 20px;
padding: 13px 20px 13px 20px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
}
#submitbtn {
width: 87%;
position: absolute;
left: 10px;
top: 280px;
padding-bottom: 20px;
padding: 13px 20px 13px 20px;
border-radius: 25px 26px 26px 25px;
border-width: 0px;
border: 1px red solid;
/*
padding: 13px 30px 13px 30px;
border-radius: 25px 25px 25px 25px;
color: white;
font-weight: 600;
margin-left: 0px;
border-width: 0px;
background-image: linear-gradient(90deg, #00a6ff, #7831ca, #fe17c0);*/
}
#emailwithsubmit {
display: flex;
gap: 13px;
flex-direction: column;
align-items: center;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles2.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index2</title>
</head>
<div>
<nav>
<div id="navbarouter">
<img
id="hologramlogo"
src="610f51dabc2bd752a968dfac_Hologram Logo Black Text.svg"
alt="Logo"
width="130px"
/>
<ul id="navtextonly">
<li class="listitem">Cellular IoT</li>
<li class="listitem">Why Hologram</li>
<li class="listitem">Resources</li>
<li class="listitem">Plans</li>
<li class="listitem">Jobs</li>
<li class="listitem">Store</li>
<span class="buttonsmenuouter">
<li id="buttonsmenu1">Contact Sales</li>
<li id="buttonsmenu2">Sign in</li>
</span>
</ul>
<div id="hamburgernavouter">
<img id="hamburgernav" src="hamburgernav.svg" alt="hamburgernav" />
</div>
</div>
</nav>
<div id="outerouterouter">
<img
src="background1.png"
id="backgroundverlauf"
alt="backgroundverlauf"
/>
<div id="outerouter">
<div id="content1">
<article>
<h1 class="mainheading" id="h1top">Internet everywhere.</h1>
<p class="mainheading" id="h1bottom">For every<span id="glowh1">thing</span>.</p>
<p id="paragraph">Spend less time monitoring your IoT deployments and more time innovating. Hologram's cellular platform enables you to connect and manage any device, anywhere in the world.</p>
<div id="emailwithsubmit">
<input type="email" class="emailfeld" autocomplete="email" maxlength="256" name="Email" data-name="Email" placeholder="E-Mail-Adresse" id="email" data-validation="email required email length" required="" data-validation-event="keyup change" data-validation-length="max256">
<input type="submit" value="Get started" data-wait="Please wait..." class="c-button is--gradient w-button disabled" disabled="disabled" id="submitbtn">
</div>
</article>
<div id="floatingimages">
<img class="sideimages" id="ellipse" src="backgroundellipse.png" alt="ellipse">
<img class="sideimages" id="drohnepng" src="drohne.png" alt="drohne">
<img class="sideimages" id="cartpng" src="cart.png" alt="cart">
<img class="sideimages" id="rollerpng" src="roller.png" alt="roller">
</div>
</div>
</div>
</div>
<div id="mainpart2-3outer">
<div id="mainpart2">
<div id="cardcontainer">
<img id ="card" src="card.png" alt="card">
</div>
<div id="textmainpart2">
<h1 class="main2h1"> Testüberschrift: global IoT connectivity platform</h1>
<div class="main1h">
<h2 id="mainh-1">One global SIM card</h2>
<h2 id="mainh-2">Automatic carrier switching</h2>
</div>
<div class="main1p">
<p id="mainp-1">Connect to 470+ networks in 200 countries using a single hardware-agnostic SIM card or eSIM eUICC chip. </p>
<p id="mainp-2">Hologram SIMs automatically switch between local carriers to ensure you have top performance and never lose service.</p>
</div>
<div class="main2h">
<h2 id="mainh-3">Flexible, scalable pricing</h2>
<h2 id="mainh-4">Connectivity tools for your team</h2>
</div>
<div class="main2p">
<p id="mainp-3">No contracts, quotas, or negotiations. Activate, change, or pause plans anytime via our Hologram Dashboard or APIs.</p>
<p id="mainp-4">Collaboratively manage your fleet with ease via our easy-to-use Dashboard or our modern REST API.</p>
</div>
</div>
</div>
<div id="mainpart3">
<div class="contentmainpart3-1">
<img src="hyper.svg" alt="hyper">
<h1>Testüberschrift2: flexibility and coverage with Hyper</h1>
<p>Future-proof your SIMs and scale faster globally with Hyper, Hologram’s eUICC SIMs and platform. Hyper provides over-the-air, updatable access to Hologram’s full portfolio of IoT connectivity partners and profiles.</p>
<p>What is Hyper? --></p>
</div>
<div class="contentmainpart3-2">
<img src="image maincontent3.png" alt="ballwiththingsmainpart3right" height= "570px">
</div>
</div>
</div>
<div id="beforefootercentered">
<h1>Scaling connectivity has never been so easy</h1>
<p>The simplest way to get your IoT deployment connected worldwide.</p>
</div>
<div class="beforefootercolumncontent">
<div id="beforefootercolumncontent1">
<img src="antenne.svg" loading="lazy" alt="cell tower icon" class="beforefootericons">
<h3 class="">No hassles or headaches</h3>
<p class="">Focus on your product and data — not connectivity infrastructure, negotiations, and pricing.</p>
</div>
<div id="beforefootercolumncontent2">
<img src="speedometer.svg" loading="lazy" alt="dashboard icon" class="beforefootericons">
<h3 class="">Ready to grow your business</h3>
<p class="">Manage global deployments from a single connectivity platform with pricing that scales as you do.</p>
</div>
<div id="beforefootercolumncontent3">
<img src="settings.svg" loading="lazy" alt="gear icon" class="beforefootericons">
<h3 class="">All the tools you need</h3>
<p class="">Our Hologram Dashboard, REST API, and supported hardware make integrating connectivity easy.</p>
</div>
</div>
<footer>
<div id="mainfooterupper"></div>
<div class="footerbanner">
<div id="list1bannerouter">
<h2>Try Hologram today.</h2>
<ul id="list1banner">
<li class="item1">Free Sim</li>
<li class="item1">1 MB/mo free</li>
<li>Connect and scale in days</li>
</ul>
</div>
<div id="list2banner">
<div id="btn1">Sign up free<img id="pfeil" src="pfeil.svg"></div>
<div id="btn2">Contact sales <img id="pfeil" src="pfeil.svg"></div>
</div>
</div>
<div id="mainfooter">
<h1 id="placehold">Footer Items Soon</h1>
</div>
</footer>
</main>
</body>
</html>
Use this to your container[absolute] element
.container{
position: absolute;
/* For Vertically center */
top: 50%;
transform: translateY(-50%);
/* For Horizontally center */
left: 50%;
transform: translateX(-50%);
}
If You're using height and width without positioning use this
.container{
--height: 100px;
height: var(--height);
/* Horizontally Center */
margin: auto;
/* Vertically Center */
margin-top: calc(50% - var(--height));
}
I need help about how to link likes with Firebase and show real time count? How should I connect this https://firebase.google.com/docs/database/web/lists-of-data with HTML page?
<!DOCTYPE html>
<html>
<head>
<style>
.like-content {
display: inline-block;
width: 100%;
margin: 40px 0 0;
padding: 40px 0 0;
font-size: 18px;
border-top: 10px dashed #eee;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
#keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="like-content">
<button class="btn-secondary like-review">
<i class="fa fa-heart" aria-hidden="true"></i> Like
</button>
</div>
</body>
</html>
This is my basic code for Like HTML Page with like button. The event should happen on click. Thanks in advance.
Imagine the data is like :
posts
-post1
-likes
-caption
-id
-photoLink
-post2
-likes
-caption
-id
-photoLink
The JS code looks like:
var ref = firebase.database().ref('posts');
ref.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key; //holds id like posts1,posts2
var childData = childSnapshot.val(); //holds rest of data in object format
displayPosts(childData);
});
});
function displayPosts(childData)
{
var bodyCode='<div class="like-content">
<button class="btn-secondary like-review">
<i class="fa fa-heart" aria-hidden="true">'+childData.likes+'</i> Like
</button>
</div>';
document.getElementById("post-conatainer").appendChild(bodyCode);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.like-content {
display: inline-block;
width: 100%;
margin: 40px 0 0;
padding: 40px 0 0;
font-size: 18px;
border-top: 10px dashed #eee;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
#keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div id="post-container">
</div>
</body>
</html>
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