I'm trying to move my in front my CSS animation background and set it below the buttons i tried adjusting the z-index of my text area and the animations, i gave an id to the text area and a and tried to modify that in CSS but none of this worked and it stills hidden back there, a I'm relative new and i don't know what i have to do, this is my first post so please let me know if i did something wrong.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="container">
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<textarea id="areaOfText"></textarea>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
CSS:
.textArea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 4px;
background-color:black;
font-size: 16px;
resize: none;
z-index: -1;
position: relative;
}
.buttons{
position: absolute;
}
.elven_button {
background-color: springgreen;
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.elven_button:hover{
background-color: palegreen;
cursor:url("../Media/joke3.cur"), default;
}
.dwarf_button{
background-color: rgb(187, 182, 182);
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.dwarf_button:hover{
background-color: rgb(248, 248, 247);
cursor:url("akary_Hammer.cur"),default;
}
.human_button{
background-color: chocolate;
transition: background-color.5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.human_button:hover{
background-color: wheat;
cursor: url("humanD1.cur"),default;
}
.textarea {
position: relative;
top: 40px; left: 40px;
}
.container{
position: relative;
display: block;
width: 100%;
max-width: 400px;
height: 280px;
margin: 0 auto;
z-index: 2;
}
.img{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: fade 24s infinite;
animation: fade 24s infinite;
}
#img1{
animation-delay: 0s;
background-image: url('city1.jpg');
}
#img2{
background-image: url('human2.jpg');
animation-delay: 8s;
}
#img3{
background-image: url('morgoth_ungoliath.jpg');
animation-delay: 16s;
}
#-webkit-keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.wrapper {
position: relative;
}
.pseudo-img {
position:absolute;
top: 100px;
height:200px;
width: 200px;
background-color:black;
color:orangered;
z-index: 1;
}
.textArea {
position: absolute;
color:white;
top: 200px;
left: 80px;
height: 100px;
width:100px;
z-index:2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="wrapper">
<div className="container">
<div class="pseudo-img">My animation</div>
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<p id="areaOfText">My text</p>
</div>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
Are you looking for something like this?
I think you by accident named the class .textarea instead of textArea give it a background-color and some content inside the p tag to see it clearly
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>
So pretty much I want to show text on what each of these images are when I hover over it. When you hover over it it should blur the image so you can see the text better. I am pretty new to html and couldn't figure this out on my own. -----------------------------------------------------------------------------------------------------------------------------
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url('../Images/three.png') ;
width:100%;d
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: 0% 100%;
}
.coatofarms {
width: 5%;
z-index: 15;
position: absolute;
left: 0.5%;
top: -2%;
transition: all .1s ease-in-out;
}
.coatofarms:hover {
top: -1%;
transform: scale(1.0);
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
position:absolute;
top: 0%;
width: 100%;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #3a5063;
color: white;
}
table {
background-color:#3a5063;
width:100%;
position: absolute;
height: 1.5%;
top: 6.5%;
}
a.link:link {color:#000000;text-decoration:none;}
a.link:visited {color:#000000;text-decoration:none;}
a.link:hover {text-decoration:none;}
.giza {
transition: all .1s ease-in-out;
position: absolute;
top: 12%;
left:1%;
border-radius: 40%;
}
.giza:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.luxor {
transition: all .1s ease-in-out;
position: absolute;
top: 16.2%;
left: 40%;
border-radius: 40%;
}
.luxor:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.siwalandmark {
transition: all .1s ease-in-out;
position: absolute;
top: 10.4%;
right: 1%;
border-radius: 40%;
}
.siwalandmark:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abu {
transition: all .1s ease-in-out;
position: absolute;
right: 1%;
top: 56%;
border-radius: 40%;
}
.abu:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}
/*-----------------------------------------*/
.abydos {
transition: all .1s ease-in-out;
position: absolute;
top: 65%;
left: 40%;
border-radius: 40%;
}
.abydos:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
/*-----------------------------------------*/
.whitedesert {
transition: all .1s ease-in-out;
position: absolute;
top: 62%;
left: 1%;
border-radius: 40%;
}
.whitedesert:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}
<!DOCTYPE html>
<html>
<head>
<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=Quicksand:wght#300;500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmarks</title>
<link rel="icon" href="Images/flag.png">
<link rel="stylesheet" href="CSS/landmarks.css">
</head>
<body>
<div class="coatofarms"><img src="Images/coabetter.png" class="coa" width="75px" z-index="2"></div>
<div class="topnav">
Food
Landmarks
Visit Us
</div>
<img src="Images/giza.jpg" width="25%" class="giza" >
<img src="Images/luxorstemple.jpg" width="25%" class="luxor" >
<img src="Images/siwa.png" width="25%" class="siwalandmark">
<img src="Images/abu.jpg" alt="simbel" width="25%" class="abu" >
<img src="Images/abydos.jpeg" width="25%" class="abydos">
<img src="Images/whitedesert.jpg" width="25%" class="whitedesert">
<!--Table-->
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
There are several ways of doing it and you can do this clearly in pure CSS and HTML without Javascript.
First: blur image: (as seen in example in both images)
there is a CSS filter method filter: blur(5px);
That's it. Just as simple as that.
Second: add text with a Tooltip (as seen in the snippet on the first image)
You can just add the attribute title="tooltip text" and HTML includes a tooltip for you automatically with the text of the attribute. Hover with your cursor and wait a little
Third: make div with text visible on hover (as seen in snippet in second image)
you have to wrap the image and div tag into a sourrounding container and add CSS to it. So when you hover the container then you simply set the text-div to visible
.container {
position: relative;
text-align: center;
color: white;
width: 25%;
}
.blur_and_tooltop:hover {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
.container:hover .blur_and_visibility {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.container:hover .text-box {
visibility: visible;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://picsum.photos/id/1/200" alt="blur_and_tooltop" width="25%"
title="Just a normal HTML5 tooltip. No CSS needed" class="blur_and_tooltop">
<div class="container">
<img src="https://picsum.photos/id/15/200" alt="advanced pure CSS and HTML" width="100%" class="blur_and_visibility">
<div class="text-box">
<h3>I am some fancy TEXT</h3>
</div>
</div>
</body>
</html>
There's a few different ways of doing this through things like CSS, javascript/jQuery, or utilizing built in functions of a third party extension such as Bootstrap. The quickest would be to show the title attribute on hover.
Example HTML
<img src="https://cdn.theatlantic.com/media/mt/science/cat_caviar.jpg" title="Cat Caviar" />
I am trying text animations on my home page and the text slides are not working. I have tried other methods but span: before seems to be almost workable. However, I see the code is exactly working on an Sublime Text but does not work for me in Visual Studio.
The CSS
body{
margin:0;
padding:0;
background-color: rgb(65, 51, 187);
font-family:Verdana, Tahoma, sans-serif;
}
.wrapper{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper h2{
padding: 0;
margin: 0;
color:#fff;
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
font-size: 60px;
}
.wrapper p{
color: #fff;
font-size: 18px;
margin: 0;
line-height: 35px;
}
.wrapper a{
background: crimson;
color: #fff;
text-decoration: none;
padding: 10 px 25 px;
border-radius: 5px;
display: inline-block;
margin-top: 30px;
}
span::before{
content: '';
animation: animate infinite 8s;
}
#keyframes animate{
0% {
content: 'A programmer';
}
33%{
content: 'An architect';
}
66%{
content: 'A developer';
}100%
{
content: 'An Automater';
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "style3.css"
<title>Document</title>
</head>
<body>
<div class = "wrapper">
<h2>I am a <span></span></h2>
<p>This is a trial for working out sliding texts</p>
Contact me
</div>
</body>
</html>
I have displayed the content but it still does not work.The problem could mostly be in the CSS Span::before. I know probably I am missing something very minimal. Please assist.
Changing a pseudo element's content does not work in some browsers (e.g. Safari on IOS) so here is a more general method, animating the opacity of span elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "style3.css">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
background-color: rgb(65, 51, 187);
font-family:Verdana, Tahoma, sans-serif;
}
.wrapper{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper h2{
padding: 0;
margin: 0;
color:#fff;
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
font-size: 60px;
}
.wrapper p{
color: #fff;
font-size: 18px;
margin: 0;
line-height: 35px;
}
.wrapper a{
background: crimson;
color: #fff;
text-decoration: none;
padding: 10 px 25 px;
border-radius: 5px;
display: inline-block;
margin-top: 30px;
}
h2 div, h2 div span {
position: absolute;
display: inline-block;
overflow: visible;
white-space: nowrap;
}
span {
animation: animate infinite 8s;
animation-delay: calc((var(--n) - 1) * 2s);
position: absolute;
opacity: 0;
}
h2 span:nth-child(1) {
--n: 1;
}
h2 span:nth-child(2) {
--n: 2;
}
h2 span:nth-child(3) {
--n: 3;
}
h2 span:nth-child(4) {
--n: 4;
}
#keyframes animate{
0% {
opacity: 1;
}
25% {
opacity: 1;
}
25.1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class = "wrapper">
<h2>I am <div><span>A programmer</span><span>An architect</span><span>A developer</span><span>An automater</span></div></h2>
<p>This is a trial for working out sliding texts</p>
Contact me
</div>
</body>
</html>
I am following an online video (https://www.youtube.com/watch?v=wjHTKLstbRg) to make a cool looking button I'm near the end of it and it's not doing what it should be doing I have done everything it told me to and even gone through the video 5 times to check everything over please help!
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="#">
<span>Button</span>
<div class="liquid"></div>
</a>
</body>
</html>
<style>
#keyframes fade {
0% {
transform translate(-50%,-75%) rotate(0deg);
}
100% {
transform translate(-50%,-75%) rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #24252A;
}
a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
overflow: hidden;
}
a span {
position: relative;
z-index: 1;
color: #fff;
font-size: 20px;
letter-spacing: 8px;
}
a .liquid {
position: absolute;
left: 0;
top: -80px;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
transition: 0.5s;
}
a .liquid:before,
a .liquid:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-75%);
}
a .liquid:before {
border-radius: 45%;
background: rgba(20,20,20,1);
-webkit-animation: fade 5s linear infinite;
}
a .liquid:after {
border-radius: 40%;
background: rgba(20,20,20,1);
-webkit-animation: fade 10s linear infinite;
}
</style>
The format of transform is transform: none|transform-functions|initial|inherit;, so change it to :
#keyframes fade {
0% {
transform : translate(-50%,-75%) rotate(0deg);
}
100% {
transform : translate(-50%,-75%) rotate(360deg);
}
}
I am new html css,I am pretty confused with notification bar this should be responsive to adopt full screen when it is in mobile.But I tried it is not expanding .
But for me it is not working
HTML Markup
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/InterestPage.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header>
<div class="innerwrapper">
<h1>Feel Hunt</h1>
<div class="otherOptions">
<div class="notificationdiv">
<div class="notifyCoun">
<p>3</p>
</div>
<svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#303030;}
</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M12.44998,29.25c0.4714-1.86041,0.98683-3.71044,1.39399-5.58655 c0.20076-0.92508,0.37522-1.85624,0.50479-2.79409c0.12749-0.92277,0.12761-1.86938,0.32255-2.78069 c0.17715-0.82819,0.41986-1.62416,0.79385-2.38678c0.72808-1.48468,1.84795-2.76857,3.21698-3.69551 c1.54611-1.04685,3.39019-1.61638,5.25786-1.61638c2.6,0,4.96,1.06,6.66999,2.76999 c1.1685,1.1685,1.95078,2.64423,2.40368,4.22483c0.48483,1.69205,0.49984,3.44094,0.81387,5.16177 c0.41544,2.27656,1.13475,4.46739,1.71247,6.7034"/><path class="st1" d="M36.75998,35.78003H11.24002c-0.35004,0-0.60004-0.33002-0.5-0.67004L12.44998,29.25h23.09003 l1.71997,5.85999C37.36002,35.45001,37.11002,35.78003,36.75998,35.78003z"/><path class="st1" d="M22.39999,35.86509V36.32c0,0.71,0.58,1.29,1.29,1.29h0.93c0.71,0,1.29-0.58,1.29-1.29v-0.43993"/><path class="st1" d="M21.00458,13.27578c-1.74433,0.9948-3.03389,2.64047-3.76966,4.84763"/><line class="st1" x1="16.98094" x2="16.84722" y1="20.13664" y2="21.16766"/></g></g></svg>
//this is notifcation panel DIV
<div class="notificationPanel">
this should be full screen
</div>
</div>
<div class="profilePicDrop">
<img src="./img/sky-night-space-trees%20(4).jpeg" alt="">
<div class="getDisplayNone dropDown">
vdvdv
</div>
</div>
</div>
</div>
</header>
</body>
</html>
Homepage.scss
#import "utils/_reset";
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
#import "utils/_variables";
body{
background: #EEEEEE;
}
header{
width: 100%;
position: fixed;
height:50px;
top:0;
left:0;
right: 0;
background: #ffffff;
box-shadow: 0px 11px 32px -1px rgba(0,0,0,.04);
.innerwrapper{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 75%;
margin: 0 auto;
}
h1{
color: #393e46;
font-family: $FontStyle;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 400;
a{
padding: 5px;
border: 1px solid #393e46;
text-decoration: none;
color: #393e46;
font-size: 13px;
transition: all 100ms ease-in-out;
&:hover{
background:#393e46 ;
color: #ffffff;
}
}
}
.otherOptions{
margin-left: auto;
display: flex;
align-items: center;
.profilePicDrop{
width: 25px;
height:25px;
position: relative;
margin-left: 12px;
img{
width: 25px;
height:25px;
border-radius: 50px;
}
.dropDown{
width: 150px;
height:150px;
background: #ffffff;
position: absolute;
right: 5px;
top:35px;
border-radius: 5px;
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.1);
}
}
}
}
.getDisplayNone{
display: none;
}
.getDropMenuIn{
animation: PopIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.getOutDropMenu{
animation: PopOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.notificationdiv{
margin-top: 5px;
position: relative;
svg{
width: 30px;
height:30px;
}
.notifyCoun{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #E74C3C;
width: 17.5px;
height:17.5px;
border-radius: 50px;
box-shadow: 0px 4px 14px 0px rgba(231,77,60,0.3);
p{
font-size: 12px;
font-family: $FontStyle;
color: #ffffff;
font-weight: 300;
}
}
&:hover{
cursor: pointer;
}
}
//this is notification panel css
.notificationPanel{
position: absolute;
top: 50px;
left: 0;
right: 0;
background: #ffffff;
width: 100%;
}
#keyframes PopIn {
from{
transform: scale(0.8);
opacity: 0.5;
transform-origin: 150px -5px;
}to{
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
#keyframes PopOut {
from{
opacity: 1;
}to{
opacity: 0.1;
visibility: hidden;
transform: scale(0.5);
transform-origin: 150px -5px;
}
}
Try removing position: relative from your .notificationdiv. Because your absolute element will take 100% of his first relative parent.
https://codepen.io/OliviaPaquay/pen/mwbQEj Demo here, remove line 10.