I had 2 questions. These are like as below:
First, How can I move the animation of the moving bar (blue colored) above the border at the top? Second, How can I move text (get in touch with me) and logos (LinkedIn and StackOverflow) centered to the bottom of the page? I have added some descriptions to the image.
The code:
.headerStyle {
border-color: black;
}
body {
border-style: solid;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: "";
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%;
}
50% {
width: 10%;
left: 90%;
}
75% {
width: 50%;
left: 0%;
}
100% {
width: 10%;
left: 0%;
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
<html>
<body>
<div class="footer">
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</a>
<div class="container">
<div class="Loading"></div>
</div>
</div>
</body>
</html>
By "moving the loading bar above the border", I am assuming that you want the loading bar instead of the top border!
You can set the border-top: none for the body tag and move the loading div to the top most part.
For centering the text you can use text-align and for the images use the flex property.
<html>
<html>
<style>
.headerStyle {
border-color: black;
text-align: center;
margin-top: 85vh;
}
.flex-box {
display: flex;
justify-content: center;
}
body {
border-style: solid;
border-top: none;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
}
.Loading {
position: relative;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
</style>
<body>
<div class="footer">
<div class="container">
<div class="Loading"></div>
</div>
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<div class="flex-box">
<a href="https://stackoverflow.com/"><img class="image1"
src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60"
height="60"></a>
<a href="https://www.linkedin.com"><img class="image2"
src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60"
height="60">
</a>
</div>
</div>
</body>
</html>
<html>
<style>
.headerStyle{
border-color: black;
}
body {
border-style: solid;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
</style>
<body>
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
">
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<div> <div style="
display: flex;
justify-content: center;
">
<a href="https://stackoverflow.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
alt="linkedin icon" width="60" height="60">
</a>
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</body>
</html>
.footer set
display: flex; is use to set flexbox.
flex-direction: Column; is use to set flexbox direction.
justify-content: space-between is use to set space between items.
.footer inside logos and bottom bar set on div
logos > div set display: flex; and justify-content: center; set logos in center.
Here i changed some corruption in your code hope you can find the sollution .
you check in below code
.headerStyle{
border-color: black;
}
body {
border-style: solid;
border-width: 10px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 0px 0px;
height: 100vh;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: red;
}
25% {
border-color: orange;
}
50% {
border-color: brown;
}
75% {
border-color: #d94d5f;
}
100% {
border-color: #ffcccb;
}
}
.footer .contact-us {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="footer">
<div class="contact-us">
<p class="headerStyle"><b>Get In Touch With Me</b></p>
<a href="https://stackoverflow.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
alt="linkedin icon" width="60" height="60">
</a>
</div>
<div class="container">
<div class="Loading"></div>
</div>
</div>
</body>
Related
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'm trying to make the hr tag to animate from left to right and repeat,
and stay kinda center under the h2 tag,
but the animation not working... is anyone know why?
.div-projects {
margin-top: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.div-projects h2 {
font-size: 55px;
padding: 90px;
color: white;
transform: skewY(-9deg);
}
.hr-projects {
width: 20%;
border-radius: 30px;
z-index: 2;
left: 900px;
bottom: 60px;
transform: skewY(-6deg);
border: 3px solid rgba(0, 136, 169, 1);
position: relative;
animation: alternate hr 19s infinite;
}
#keyframes hr {
from {
left: 900px;
}
to {
right: 600px;
}
}
<div class="div-projects">
<h2>Projects</h2>
</div>
<hr class="hr-projects">
You need to make animation/transition on same property.
So far example change from left 0 to left 100%, or left:50px to left:200px etc.
.div-projects {
margin-top: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.div-projects h2 {
font-size: 55px;
padding: 90px;
color: white;
transform: skewY(-9deg);
}
.hr-projects {
width: 20%;
border-radius: 30px;
z-index: 2;
left: 900px;
bottom: 60px;
transform: skewY(-6deg);
border: 3px solid rgba(0, 136, 169, 1);
position:relative;
animation:alternate hr 19s infinite;
}
#keyframes hr {
from {
left: 0;
}
to {
left: 100%;
}
}
<div class="div-projects">
<h2>Projects</h2>
</div>
<hr class="hr-projects">
The code:
<html>
<style>
.img
{
max-width: 100%;
}
.Headerstyle
{
color:Black;
transition: transform .2s;
text-align: center;
margin-top: 80vh;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack
{
color:white;
transition: transform .2s;
text-align: center;
margin-top: 80vh;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 15px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 10px 3px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 7px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: orange;
#color: white;
#background-image: url('');
background-size: cover;
transform: rotateY(180deg);
}
</style>
<body >
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b>Get in Touch With Me</b></p>
<div><div style="display: flex;justify-content: center;">
<a href="https://stackoverflow.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
alt="linkedin icon" width="60" height="60"></a>
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>E-MAIL ADRESS</b></p>
<div><div style="display: flex;justify-content: center;">
<a href="https://stackoverflow.com/"><img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png"
alt="linkedin icon" width="60" height="60"></a>
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello friends, I had more than one question:
The logos are on the border and there is an overlap problem. How can I fix this for both sides (front and back)? The shape which I want is available in the image below.
The size of the Stackoverflow logo does not change on both sides when hovering over it.
I want to change the color of the blue bar which is moving on the container to white when it turns back side.
4) How can I make the flip card move more accurately? When a mouse comes to the body part, it immediately turns around.
You can use like this if you want:
<html>
<style>
.img {
max-width: 100%;
}
.Headerstyle {
color: Black;
transition: transform .2s;
text-align: center;
margin-top: 41%;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.HeaderstyleBack {
color: white;
transition: transform .2s;
text-align: center;
margin-top: 41%;
}
.HeaderstyleBack:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback1 {
padding: 10px;
transition: transform .2s;
}
.imageback2 {
padding: 10px;
transition: transform .2s;
}
.imageback1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.imageback2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 5%;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 17px;
border-radius: 5px;
padding: 100px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
width: 100%;
margin: 0px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
.LoadingBack {
position: relative;
display: inline-block;
width: 100%;
height: 10%;
background: #000000;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
margin-bottom: -50px;
}
.LoadingBack:after {
content: '';
position: absolute;
background: white;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
#keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
#keyframes pulse {
0% {
border-color: gray;
}
25% {
border-color: gray;
}
50% {
border-color: gray;
}
75% {
border-color: #282828;
}
100% {
border-color: #282828;
}
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1.5s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:active .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #FFFDD0;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: orange;
#color: white;
#background-image: url('');
background-size: cover;
transform: rotateY(180deg);
}
</style>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="Headerstyle"><b>Get in Touch With Me</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60">
<img class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="Loading"></div>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;">
<p class="HeaderstyleBack"><b>E-MAIL ADRESS</b></p>
<div>
<div style="display: flex;justify-content: center;">
<img class="imageback1" src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60">
<img class="imageback2" src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60">
</div>
<div class="container">
</div>
<div class="LoadingBack"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Could some one bring me on track? How could I make that wave on the bottom of the header?
This is what I have so far: https://codepen.io/zimex/pen/XaQjZL
<header id="header">
<div class="container">
<div class="logo">
</div>
<div class="mobile-wrap">
<div class="inner">
<div class="user">
<div class="wrap">
<span>Hi</span>
</div>
</div>
<div class="nav">
<ul>
<li>Menu</li>
<li>Items</li>
<li>Are</li>
<li>Located</li>
<li>Here</li>
</ul>
</div>
</div>
</div>
<div class="burger">
<span></span>
</div>
</div>
</header>
1) you can use img for this - bad solution but work
2) check http://dev.wavemaker.com/wiki/bin/wmdoc_6.3/CSS
3)
html, body {
height: 100%;
}
html {
background: #eee;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 300px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(black, .2);
background: lighten(#f0f4c3, 10%);
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.wave {
opacity: .4;
position: absolute;
top: 3%;
left: 50%;
background: #0af;
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 3000ms infinite linear;
}
.wave.-three {
animation: drift 5000ms infinite linear;
}
.wave.-two {
animation: drift 7000ms infinite linear;
opacity: .1;
background: yellow;
}
.box:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
z-index: 11;
transform: translate3d(0, 0, 0);
}
.title {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
line-height: 300px;
text-align: center;
transform: translate3d(0, 0, 0);
color: white;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
letter-spacing: .4em;
font-size: 24px;
text-shadow: 0 1px 0 rgba(black, .1);
text-indent: .3em;
}
#keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}
sample
I have a spinner with a white background which is animated through a keyframe. So, having this code pen, how could I remove this color to "smt-spinner-inner-circle" class without affecting the original desing? If the background is removed, the portion is visible. I have tried to apply a clip but the result is not the expected.
http://codepen.io/anon/pen/WpagJN
Html:
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
<div class="smt-spinner-inner-circle"></div>
</div>
To sum up, I need the background of the spinner transparent, not red, since the website will be different backgrounds depending on the page you are (grey, white, etc)...
Why not do like this, which will be transparent on top of any backgrounds, images included
.test {
display: inline-block;
padding: 20px;
}
.test.red{
background: red;
}
.test.green{
background: green;
}
.test.image{
background: url(http://lorempixel.com/500/200/nature/1/);
}
.smt-spinner-circle {
width: 50px;
height: 50px;
position: relative;
margin: 20px;
border-radius: 50%;
}
.smt-spinner {
height: 100%;
width: 100%;
border-radius: 50%;
border-right: 2px solid rgba(255,255,255,0.6);
border-top: 2px solid blue;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
animation: rotate--spinner 1.6s infinite;
}
#keyframes rotate--spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="test red">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>
<div class="test green">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>
<div class="test image">
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
</div>
</div>
Your background-color hides triangle that rotates, so simply change background: white to match your background color.
body{
background: red;
}
.smt-spinner-circle {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: blue;
border-radius: 50%;
}
.smt-spinner-inner-circle {
width: 92%;
height: 92%;
background: red;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.smt-spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 25px solid rgba(255,255,255,0.6);
border-top: 25px solid transparent;
border-left: 25px solid transparent;
border-bottom: 25px solid transparent;
animation: rotate--spinner 1.6s infinite;
}
#keyframes rotate--spinner {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
<div class="smt-spinner-circle">
<div class="smt-spinner"></div>
<div class="smt-spinner-inner-circle"></div>
</div>
You could create a simple spinner with only one element and different border styles.
.loader{
border: 2px solid #CECECE;
border-top-color: #14B48C;
width: 40px;
height: 40px;
border-radius: 50%;
animation: spin 1s infinite;
}
#keyframes spin{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
CSS Code
#keyframes ldio-rpinwye8j0b {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.ldio-rpinwye8j0b div {
position: absolute;
animation: ldio-rpinwye8j0b 1s linear infinite;
width: 160px;
height: 160px;
top: 20px;
left: 20px;
border-radius: 50%;
box-shadow: 0 4px 0 0 #e15b64;
transform-origin: 80px 82px;
}
.loadingio-eclipse {
width: 200px;
height: 200px;
display: inline-block;
overflow: hidden;
}
.ldio-rpinwye8j0b {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-rpinwye8j0b div { box-sizing: content-box; }
<div
class="loadingio-eclipse">
<div class="ldio-rpinwye8j0b">
<div>
</div>
</div>
</div>