I am not able to run my code and produce an image under header 2
Are there any reason why as I have already input the right code.
I believe another css layout is blocking the image from popping out. Below here is the code to check
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
<div class="section-container">
<h2 class="title-container">Here are my other socials you can find me on
</h2>
<img src="//placekitten.com/150/150" alt="">Image
</div>
My CSS below
html {
height: 100%;
}
body {
margin:0;
padding:0;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.login-box {
position: absolute;
top: 78%;
left: 50%;
width: 400px;
padding: 30px;
transform: translate(-50% , -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius: 20px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top:0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 100px #03e9f4;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
#keyframes btn-anim1 {
0% {
left: -100%;
}
50%,100% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
#keyframes btn-anim2 {
0% {
top: -100%;
}
50%,100% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
#keyframes btn-anim3 {
0% {
right: -100%;
}
50%,100% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
#keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,100% {
bottom: 100%;
}
}
.section-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
width: 100%;
background-image: linear-gradient( 60deg, rgba(57, 60, 90, 0.85), rgba(180, 180, 120, 0.5) );
background-position: center;
background-size: cover;
font-weight: bold;
text-shadow: rgb(56, 50, 50) 1px 1px
}
.title-container {
display: block;
color: white;
text-shadow: 2px 2px black;
width: 40%;
padding: 30px;
margin-bottom: 20%;
margin-right: 50px;
border-top: 1px black solid;
}
I tried to put the img code under . but did not get the image to pop up under the h2 tag
html {
height: 100%;
}
body {
margin:0;
padding:0;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.login-box {
position: absolute;
top: 78%;
left: 50%;
width: 400px;
padding: 30px;
transform: translate(-50% , -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius: 20px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top:0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 100px #03e9f4;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
#keyframes btn-anim1 {
0% {
left: -100%;
}
50%,100% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
#keyframes btn-anim2 {
0% {
top: -100%;
}
50%,100% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
#keyframes btn-anim3 {
0% {
right: -100%;
}
50%,100% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
#keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,100% {
bottom: 100%;
}
}
.section-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
width: 100%;
background-image: linear-gradient( 60deg, rgba(57, 60, 90, 0.85), rgba(180, 180, 120, 0.5) );
background-position: center;
background-size: cover;
font-weight: bold;
text-shadow: rgb(56, 50, 50) 1px 1px
}
.title-container {
display: block;
color: white;
text-shadow: 2px 2px black;
width: 40%;
padding: 30px;
margin-bottom: 20%;
margin-right: 50px;
border-top: 1px black solid;
}
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
<div class="section-container">
<h2 class="title-container">Here are my other socials you can find me on
</h2>
<img src="https://placekitten.com/150/150" alt="">Image
</div>
Not a css issue. You don't have the correct path to the image. I've inserted the correct path.
The margin on the heading element is causing this.
Instead of adding the img element, consider adding the image as a background to another element...
CSS added:
body {
background: url("//placekitten.com/150/150");
background-repeat: no-repeat;
background-size: cover;
}
Below I have added it to the body, but this could be done to any element of your choosing really.
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.login-box {
position: absolute;
top: 78%;
left: 50%;
width: 400px;
padding: 30px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 20px;
}
.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box {
position: relative;
}
.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.login-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}
.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}
.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}
.login-box a span {
position: absolute;
display: block;
}
.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}
#keyframes btn-anim1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
#keyframes btn-anim2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
#keyframes btn-anim3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
#keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
.section-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
width: 100%;
background-image: linear-gradient( 60deg, rgba(57, 60, 90, 0.85), rgba(180, 180, 120, 0.5));
background-position: center;
background-size: cover;
font-weight: bold;
text-shadow: rgb(56, 50, 50) 1px 1px
}
.title-container {
display: block;
color: white;
text-shadow: 2px 2px black;
width: 40%;
padding: 30px;
margin-bottom: 20%;
margin-right: 50px;
border-top: 1px black solid;
}
body {
background: url("//placekitten.com/150/150");
background-repeat: no-repeat;
background-size: cover;
}
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Submit
</a>
</form>
</div>
<div class="section-container">
<h2 class="title-container">Here are my other socials you can find me on
</h2>
</div>
I want to set the h2 text on the animation. But i cant able to do that -_-.
here is the live link http://leander.web.dnodes.net/
source code: https://github.com/LeleEdits/website-new
change css to
.h2-parent {
position: absolute;
top: 0;
left: 0;
height: 100%;
max-width: 600px;
width: 600px;
padding-left: 10px;
padding-right: 10px;
z-index: 10;
}
h2
{
position: relative;
width: 100%;
top: 40%;
transform: translateY(-50%);
font-size: 5vw;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
}
.abs-h2
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: #5865f2;
-webkit-text-stroke: 0vw rgb(51, 51, 51);
border-right: 2px solid #5865f2;
overflow: hidden;
animation: animate-t 6s linear infinite;
}
.abs-h2 h2
{
position: relative;
width: 600px;
top: 40%;
left:10px;
transform: translateY(-50%);
font-size: 5vw;
color: #5865f2;
text-transform: uppercase;
}
and change html to
<div class="h2-parent">
<h2 data-text="Improve your Server...">Improve your Server...</h2>
<div class="abs-h2">
<h2 data-text="Improve your Server...">Improve your Server...</h2>
</div>
</div>
demo in js<>fiddle
I'm trying to make it where the percentage text and loading text stays in the middle of the loader when I resize. The width change works when I resize the window, but when I change the height it moves the text. I'm not sure why this is happening but if someone is able to help me under why this is happening that would be nice.
CSS:
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
background: url("https://cdn.cporigins.com/site/images/bg.jpg");
margin: 0;
}
.container {
display: none;
position: relative;
font-family: 'Do Hyeon', sans-serif;
font-size: 27px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
bottom: 50px;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
a {
text-decoration: none;
}
a:hover {
color: #add8e6;
}
i#heart-icon {
height: 18px;
width: 18px;
background-image: url(https://cdn.cporigins.com/site/images/heart_icon.png);
background-repeat: no-repeat;
}
i#heart-icon:before {
content: "";
padding-right: 18px;
}
.loader {
font-size: 10px;
margin: 50px auto;
border: 16px solid #f3f3f3;
border-top: 16px solid #6294f9;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
background-repeat: no-repeat;
position: relative;
bottom: -32%;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loadingDiv {
position: relative;
top: -50px;
left: 0;
width: 100%;
height: 100%;
background: #8360c3;
background: -webkit-linear-gradient(to top, #2ebf91, #8360c3);
background: linear-gradient(to top, #2ebf91, #8360c3);
}
#loaderTxt {
position: relative;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
top: 297px;
font-weight: bold;
text-align: center;
}
#loaderPercent {
position: relative;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
top: 128px;
font-weight: bold;
text-align: center;
}
</style>
I basically have it where it appends the divs to the html tag in js.
$('html').append('<div id="loadingDiv"><div class="loader"></div><div id="loaderTxt">Initializing Origins</div><div id="loaderPercent">0%</div></div>');
In these type of design you got to put the container to flex and center all items ( make it relative too )... Now make all items inside it absolutely positioned ... Here all items will come to the center ( of that container )... Viola, You will never get a problem of putting out the elements based on px size ever again..
html {
height: 100%;
width: 100%;
}
body {
background: url("https://cdn.cporigins.com/site/images/bg.jpg");
margin: 0;
}
#loadingDiv {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #8360c3;
background: -webkit-linear-gradient(to top, #2ebf91, #8360c3);
background: linear-gradient(to top, #2ebf91, #8360c3);
}
.loader {
font-size: 10px;
margin: 50px auto;
border: 16px solid #f3f3f3;
border-top: 16px solid #6294f9;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
background-repeat: no-repeat;
position: relative;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loaderTxt {
position: absolute;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
bottom: 10vh;
font-weight: bold;
text-align: center;
}
#loaderPercent {
position: absolute;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
font-weight: bold;
text-align: center;
}
<div id="loadingDiv">
<div class="loader"></div>
<div id="loaderTxt">Initializing Origins</div>
<div id="loaderPercent">0%</div>
</div>
Try to end your css alignment line with !important
so if you want to align this html text
<p>THIS IS MY TEXT</p>
You can use css like this
p{text-align:center !important;}
I hope this answer helps.
I am trying to create a skill bar where the background color of the progress slides in but the label for the Skill bar stays in the same place.
.skill-container * {
box-sizing: border-box;
}
.skill-container {
width: 100%;
border-radius: 5px;
background-color: lightgray;
margin: 20px 0;
overflow: hidden;
}
.skill-container .skill {
display: inline-block;
text-align: left;
color: white;
padding: 10px 0 10px 4px;
border-radius: inherit;
background-color: #312E81;
white-space: nowrap;
position: relative;
animation: animateLeft 1s ease-out;
}
#keyframes animateLeft {
from {
left: -100%
}
to {
left: 0
}
}
.skill-container .skill.skill-level-70 {
width: 70%
}
<div class="skill-container">
<span class="skill skill-level-70">CSS</span>
</div>
So far the animation works well, but the only thing I need to figure out is how to keep the text (CSS) on the left and animate the sliding of the background color to show the progress
Use a pseudo element for the background:
.skill-container .skill {
color: white;
background-color: lightgray;
margin: 5px 0;
padding: 10px 0 10px 4px;
overflow: hidden;
border-radius: 5px;
white-space: nowrap;
position: relative;
z-index:0;
}
.skill-container .skill::before {
content: "";
position: absolute;
background-color: #312E81;
border-radius: inherit;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
animation: animateLeft 1s ease-out;
}
#keyframes animateLeft {
from {
transform: translateX(-100%);
}
}
.skill-container .skill.skill-level-70::before {
width: 70%
}
.skill-container .skill.skill-level-40::before {
width: 40%
}
.skill-container .skill.skill-level-100::before {
width: 100%
}
<div class="skill-container">
<div class="skill skill-level-100">CSS</div>
<div class="skill skill-level-70">HTML</div>
<div class="skill skill-level-40">PHP</div>
</div>
You can optimize with CSS variables:
.skill-container .skill {
color: white;
background-color: lightgray;
margin: 5px 0;
padding: 10px 0 10px 4px;
overflow: hidden;
border-radius: 5px;
white-space: nowrap;
position: relative;
z-index:0;
}
.skill-container .skill::before {
content: "";
position: absolute;
background-color: #312E81;
border-radius: inherit;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
width:var(--l,0%);
animation: animateLeft 1s ease-out;
}
#keyframes animateLeft {
from {
transform: translateX(-100%);
}
}
<div class="skill-container">
<div class="skill" style="--l:100%">CSS</div>
<div class="skill" style="--l:70%">HTML</div>
<div class="skill" style="--l:40%">PHP</div>
</div>
I have an input with a pseudo element that I'm trying to animate on hover.. I wanted the white line on the input to infinitely scroll to the right out of view and come back in on the left etc.. Is this possible?
.buttonWrap {
position: relative;
}
.buttonWrap:before {
content: '';
width: 20px;
border-bottom: solid 2px #fff;
position: absolute;
top: 50%;
right: .5rem;
transform: translateY(-50%);
}
.buttonWrap:hover::before {
animation: J 1s ease 0s infinite normal none;
}
.uiBtn.redBtn {
background: #1a1a1a;
text-transform: uppercase;
text-align: left;
color: #fff;
min-width: 16.25rem;
font-size: .6875rem;
cursor: pointer;
letter-spacing: 1px;
line-height: 1rem;
width: auto;
margin-top: 2rem;
font-weight: 600;
padding:10px;
}
<span class="buttonWrap">
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>
An example using transform property (I've slow down the duration just to check the fluidity)
.buttonWrap {
position: relative;
}
.buttonWrap:before {
content: '';
width: 20px;
border-bottom: solid 2px #fff;
position: absolute;
top: calc(50% - 1px);
right: .5rem;
}
.buttonWrap:hover::before {
animation: J 5s linear 0s infinite;
}
.uiBtn.redBtn {
background: #1a1a1a;
text-transform: uppercase;
text-align: left;
color: #fff;
min-width: 16.25rem;
font-size: .6875rem;
cursor: pointer;
letter-spacing: 1px;
line-height: 1rem;
width: auto;
margin-top: 2rem;
font-weight: 600;
padding:10px;
}
#keyframes J {
0% { transform: translateX(0); right: .5rem; }
10% { transform: translateX(calc(100% + .5rem)); right: .5rem; }
10.01% { transform: translateX(-100%); right: 100%; }
93% { transform: translateX(-100%); right: .5rem; }
}
<span class="buttonWrap">
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>
FYI; here's what ended up working for me! .. animation happens when you hover over the button..
.underline::after {
content: "";
height: 2px;
display: inline-block;
position: absolute;
left: 0;
width: 30px;
top:50%;
background: #fff;
transition: all;
}
.underline {
position: absolute;
right: .5rem;
top: 50%;
width: 30px;
}
.underlined-animated:hover .underline::after {
animation: underline-animated 1s infinite;
width: auto;
animation-delay: -.5s;
}
.underlined-animated {
position: relative;
}
#keyframes underline-animated {
0% {
right: 100%;
}
50% {
right: 0;
left: 0;
}
100% {
right: 0;
left: 100%;
}
}
.uiBtn.redBtn {
background: #1a1a1a;
text-transform: uppercase;
text-align: left;
color: #fff;
min-width: 16.25rem;
font-size: .6875rem;
cursor: pointer;
letter-spacing: 1px;
line-height: 1rem;
width: auto;
margin-top: 2rem;
font-weight: 600;
padding:10px;
}
<span class="underlined-animated">
<span class="underline"></span>
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>