I have a big problem with pure CSS Slider that I found in YouTube, the end result is pretty good, but there are many shortcomings.
-responsive design
-multi elements(images, paragraph, or divs)
-autoplay
I would like a slide with 1-2 text and 2-3 elements in animation for every slide and most important all Responsive
I hope someone can help me thanks.
Video original src link https://www.youtube.com/watch?v=MQUh-KhGjlU
I want try build something like this http://codepen.io/SitePoint/pen/KwBWJd but only with CSS and HTML if is possible (maybe a few lines of javascrip is fine but no jquery)
HTML
<body>
<input type="radio" name="slide" id="slide-1-radio" checked>
<input type="radio" name="slide" id="slide-2-radio">
<input type="radio" name="slide" id="slide-3-radio">
<div id="slider">
<div id="slide-1">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/square-icon.png" alt="slide-1">
<h2>Slide 1</h2>
</div>
<div id="slide-2">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/square-icon.png" alt="slide-2">
<h2>Slide 2</h2>
</div>
<div id="slide-3">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/square-icon.png" alt="slide-3">
<h2>Slide 3</h2>
</div>
<div id="slider-next">
<label for="slide-1-radio" id="slide-1-next"></label>
<label for="slide-2-radio" id="slide-2-next"></label>
<label for="slide-3-radio" id="slide-3-next"><span>></span></label>
</div>
<div id="slider-prev">
<label for="slide-1-radio" id="slide-1-prev"></label>
<label for="slide-2-radio" id="slide-2-prev"></label>
<label for="slide-3-radio" id="slide-3-prev"><span><</span></label>
</div>
</div>
</body>
CSS
input{display: none;}
#slider{
width: 100%;
height: 400px;
position: relative;
}
#slider #slide-1,#slide-2,#slide-3{
width: 100%;
height: 400px;
position: absolute;
top: 0;
opacity: 0;
z-index: 0;
transition: 1s;
left: 0;
overflow: hidden;
}
#slider div img{
position: absolute;
bottom: -400;
left: 300px;
}
#slider div h2{
position: absolute;
font-size: 100px;
top: -300px;
right: 400px;
font-weight: 100;
}
/**********SLIDE-1****************/
#slide-1 img{
animation: none;
}
#keyframes slide-1-img{
0%{bottom: -400px;}
50%{bottom: 10px;}
75%{bottom: -10px;}
100%{bottom: 0px;}
}
/**********SLIDE-2****************/
#slide-2 img{
animation: none;
}
#keyframes slide-2-img{
0%{bottom: -400px;}
50%{bottom: 10px;}
75%{bottom: -10px;}
100%{bottom: 0px;}
}
/**********SLIDE-3****************/
#slide-3 img{
animation: none;
}
#keyframes slide-3-img{
0%{bottom: -400px;}
50%{bottom: 10px;}
75%{bottom: -10px;}
100%{bottom: 0px;}
}
/*****************H2********************/
#slide-1 h2{
animation: none;
}
#keyframes slide-1-h2{
0%{top: -300px;}
50%{top: 80px;}
75%{top: 60px;}
100%{top: 70px;}
}
#slide-2 h2{
animation: none;
}
#keyframes slide-2-h2{
0%{top: -300px;}
50%{top: 80px;}
75%{top: 60px;}
100%{top: 70px;}
}
#slide-3 h2{
animation: none;
}
#keyframes slide-3-h2{
0%{top: -300px;}
50%{top: 80px;}
75%{top: 60px;}
100%{top: 70px;}
}
/***************NEXT*********************/
#slider-next{
position: absolute;
top: 50%;
right: 10px;
margin-top: -20px;
z-index: 2;
}
#slider-next label{
width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
display: inline-block;
color: #ffffff;
cursor: pointer;
z-index: 0;
}
#slider-next #slide-3-next{
background-color: rgba(0,0,0,.3);
}
#slider-next #slide-3-next:hover{
background-color: rgba(0,0,0,.5);
}
#slider-next #slide-1-next:hover~#slide-3-next{
background-color: rgba(0,0,0,.5);
}
#slider-next #slide-2-next:hover~#slide-3-next{
background-color: rgba(0,0,0,.5);
}
#slider-next label span{
display: block;
margin-top: 9px;
font-size: 20px;
text-align: center;
cursor: pointer;
}
/***************PREV*********************/
#slider-prev{
position: absolute;
top: 50%;
left: 10px;
margin-top: -20px;
z-index: 2;
}
#slider-prev label{
width: 40px;
height: 40px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50%;
display: inline-block;
color: #ffffff;
cursor: pointer;
z-index: 0;
}
#slider-prev #slide-3-prev{
background-color: rgba(0,0,0,.3);
}
#slider-prev #slide-3-prev:hover{
background-color: rgba(0,0,0,.5);
}
#slider-prev #slide-1-prev:hover~#slide-3-prev{
background-color: rgba(0,0,0,.5);
}
#slider-prev #slide-2-prev:hover~#slide-3-prev{
background-color: rgba(0,0,0,.5);
}
#slider-prev label span{
display: block;
margin-top: 9px;
font-size: 20px;
text-align: center;
cursor: pointer;
}
/**************************SLIDER RADIO******************/
/*********SLIDE-1****************/
#slide-1-radio:checked~#slider #slide-1{
opacity: 1;
z-index: 1;
left: 0;
}
#slide-1-radio:checked~#slider #slide-1 img{
animation: slide-1-img 1s;
animation-fill-mode: forwards;
}
#slide-1-radio:checked~#slider #slide-1 h2{
animation: slide-1-h2 1s;
animation-fill-mode: forwards;
}
#slide-1-radio:checked~#slider #slider-next #slide-2-next{
z-index: 2;
}
#slide-1-radio:checked~#slider #slider-prev #slide-3-prev{
z-index: 2;
}
/*********SLIDE-2****************/
#slide-2-radio:checked~#slider #slide-2{
opacity: 1;
z-index: 1;
left: 0;
}
#slide-2-radio:checked~#slider #slide-2 img{
animation: slide-2-img 1s;
animation-fill-mode: forwards;
}
#slide-2-radio:checked~#slider #slide-2 h2{
animation: slide-2-h2 1s;
animation-fill-mode: forwards;
}
#slide-2-radio:checked~#slider #slider-next #slide-3-next{
z-index: 2;
}
#slide-2-radio:checked~#slider #slider-prev #slide-1-prev{
z-index: 2;
}
/*********SLIDE-3****************/
#slide-3-radio:checked~#slider #slide-3{
opacity: 1;
z-index: 1;
left: 0;
}
#slide-3-radio:checked~#slider #slide-3 img{
animation: slide-3-img 1s;
animation-fill-mode: forwards;
}
#slide-3-radio:checked~#slider #slide-3 h2{
animation: slide-3-h2 1s;
animation-fill-mode: forwards;
}
#slide-3-radio:checked~#slider #slider-next #slide-1-next{
z-index: 2;
}
#slide-3-radio:checked~#slider #slider-prev #slide-2-prev{
z-index: 2;
}
If you meant your problem is with the buttons being in the wrong place, seems you forgot the px after a position change.
#slider-next{
position: absolute;
top: 50%;
right: 10px;
margin-top: -20px;
z-index: 2;
}
Related
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&family=Reggae+One&display=swap');
html {
margin: 0;
padding: 0;
background-image: url(main.jpg);
width: 100%;
height: auto;
background-size: cover;
z-index: 100;
}
html::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
z-index: -10;
}
/*Main text on the main page*/
.maintext {
display: block;
height: auto;
/* border: 2px solid red; */
padding: 0;
margin: 0;
}
.maintext h1 {
color: transparent;
display: inline-block;
position: relative;
font-family: 'Reggae One', cursive;
/* border: 2px solid red; */
margin-top: -10px;
animation: show .5s ease forwards;
animation-delay: 1s;
color: black;
}
.maintext h1 span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background-color: red;
animation: overlay 1s ease forwards;
animation-delay: .5s;
}
h1:nth-child(1) {
animation-delay: 1s;
}
h1:nth-child(2) {
animation-delay: 2s;
}
h1:nth-child(3) {
animation-delay: 3s;
}
h1:nth-child(1) span {
animation-delay: .5s;
}
h1:nth-child(2) span {
animation-delay: 1.5s;
}
h1:nth-child(3) span {
animation-delay: 2.5s;
}
.maintext .butt {
position: relative;
left: 900px;
top: 200px;
width: 250px;
height: 50px;
padding: 5px 30px;
border-radius: 8px;
background-color: transparent;
font-size: 25px;
font-weight: bolder;
font-family: 'Reggae One', cursive;
letter-spacing: 4px;
transition-duration: 2s;
transition-timing-function: ease;
color: white;
}
.maintext .butt:hover {
color: black;
box-shadow: 1px 1px 200px 200px rgba(92, 137, 204, .3);
background: transparent;
}
#keyframes overlay {
50% {
width: 100%;
left: 0;
}
100% {
left: 100%;
width: 0;
}
}
#keyframes show {
100% {
color: white;
}
}
<section class="hero">
<div class="maintext">
<h1>Hello, <span></span></h1><br>
<h1>My Name is <span></span></h1><br>
<h1>ABC XYZ <span></span></h1><br>
<button class="butt">Portfolio</button>
</div>
</section>
Output is: as in code but only scans one line at a time one after another.
I have been through the code several times, I did every h1 one by one, I cant see whats wrong. I have had a look at other posts as well but could not find the solution, I am sure I have typed correctly but for some reason its playing up.
You guidance would be greatly appreciated.
There you added <br> after every h1. So in css you can't get second h1 by :nth-child(2). You have need to change those by :nth-child(1) :nth-child(3) :nth-child(5)
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&family=Reggae+One&display=swap');
html
{
margin:0;
padding:0;
background-image: url(main.jpg);
width: 100%;
height: auto;
background-size: cover;
z-index: 100;
}
html::after{
content:"";
position: absolute;
left:0;
top:0;
height: 100%;
width:100%;
background-color: black;
opacity: .5;
z-index: -10;
}
/*Main text on the main page*/
.maintext
{
display:block;
height:auto;
/* border: 2px solid red; */
padding:0;
margin:0;
}
.maintext h1{
color:transparent;
display:inline-block;
position: relative;
font-family: 'Reggae One', cursive;
/* border: 2px solid red; */
margin-top: -10px;
animation: show .5s ease forwards;
animation-delay: 1s;
color:black;
}
.maintext h1 span{
position: absolute;
left:0;
top:0;
height: 100%;
width: 0;
background-color: red;
animation: overlay 1s ease forwards;
animation-delay: .5s;
}
h1:nth-child(1){
animation-delay:1s;
}
h1:nth-child(3){
animation-delay:2s;
}
h1:nth-child(5){
animation-delay:3s;
}
h1:nth-child(1) span{
animation-delay:.5s;
}
h1:nth-child(3) span{
animation-delay: 1.5s;
}
h1:nth-child(5) span{
animation-delay: 2.5s;
}
.maintext .butt{
position: relative;
left: 900px;
top: 200px;
width: 250px;
height: 50px;
padding :5px 30px;
border-radius: 8px;
background-color: transparent;
font-size: 25px;
font-weight: bolder;
font-family: 'Reggae One', cursive;
letter-spacing: 4px;
transition-duration: 2s;
transition-timing-function:ease;
color:white;
}
.maintext .butt:hover
{
color: black;
box-shadow: 1px 1px 200px 200px rgba(92,137,204,.3);
background: transparent;
}
#keyframes overlay {
50%{
width: 100%;
left: 0;
}
100%{
left:100%;
width:0;
}
}
#keyframes show{
100%{
color:white;
}
}
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<section class="hero">
<!-- <div class="menu">
<ul>
<li>About Me</li>
<li>Work Experience</li>
<li>Hobbies</li>
<li>Gallery</samp></li>
</ul>
</div> -->
<div class="maintext">
<h1>Hello, <span></span></h1><br>
<h1>My Name is <span></span></h1><br>
<h1>ABC XYZ <span></span></h1><br>
<button class="butt">Portfolio</button>
</div>
</section>
</body>
</html>
I make my project in Bootstrap 4.
I have this code:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
justify-content: center;
padding-top: 5px;
position: fixed;
bottom: 25px;
right: 15px;
display: none;
z-index: 999;
transition: opacity .5s;
}
.back-to-top::before {
padding-top: 15px;
animation-name: animation-arrow;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
#keyframes animation-arrow {
0% {
padding-top: 0px
}
50% {
padding-top: 5px
}
100% {
padding-top: 10px
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button"><img src="images/back.png" class="img-fluid"> </a>
I'd like to move the images / back.png up / down arrow.
(I would like the picture to move slightly up / down) - but it doesn't work
How can I repair it?
check this out:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
position: fixed;
bottom: 25px;
right: 15px;
z-index: 999;
transition: opacity .5s;
}
.back-to-top > i {
width: 15px;
height: 15px;
margin-top: 15px;
display: inline-block;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDkwLjY4OCA0OTAuNjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTAuNjg4IDQ5MC42ODg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRkMxMDc7IiBkPSJNNDcyLjMyOCwxMjAuNTI5TDI0NS4yMTMsMzQ3LjY2NUwxOC4wOTgsMTIwLjUyOWMtNC4yMzctNC4wOTMtMTAuOTktMy45NzUtMTUuMDgzLDAuMjYyDQoJYy0zLjk5Miw0LjEzNC0zLjk5MiwxMC42ODcsMCwxNC44MmwyMzQuNjY3LDIzNC42NjdjNC4xNjUsNC4xNjQsMTAuOTE3LDQuMTY0LDE1LjA4MywwbDIzNC42NjctMjM0LjY2Nw0KCWM0LjIzNy00LjA5Myw0LjM1NC0xMC44NDUsMC4yNjItMTUuMDgzYy00LjA5My00LjIzNy0xMC44NDUtNC4zNTQtMTUuMDgzLTAuMjYyYy0wLjA4OSwwLjA4Ni0wLjE3NiwwLjE3My0wLjI2MiwwLjI2Mg0KCUw0NzIuMzI4LDEyMC41Mjl6Ii8+DQo8cGF0aCBkPSJNMjQ1LjIxMywzNzMuNDE1Yy0yLjgzMSwwLjAwNS01LjU0OC0xLjExNS03LjU1Mi0zLjExNUwyLjk5NCwxMzUuNjMzYy00LjA5My00LjIzNy0zLjk3NS0xMC45OSwwLjI2Mi0xNS4wODMNCgljNC4xMzQtMy45OTIsMTAuNjg3LTMuOTkyLDE0LjgyLDBsMjI3LjEzNiwyMjcuMTE1bDIyNy4xMTUtMjI3LjEzNmM0LjA5My00LjIzNywxMC44NDUtNC4zNTQsMTUuMDgzLTAuMjYyDQoJYzQuMjM3LDQuMDkzLDQuMzU0LDEwLjg0NSwwLjI2MiwxNS4wODNjLTAuMDg2LDAuMDg5LTAuMTczLDAuMTc2LTAuMjYyLDAuMjYyTDI1Mi43NDQsMzcwLjI3OQ0KCUMyNTAuNzQ4LDM3Mi4yODEsMjQ4LjAzOSwzNzMuNDA4LDI0NS4yMTMsMzczLjQxNXoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat;
}
.bounce {
animation: bounce 2s infinite;
}
#keyframes bounce {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button">
<i class="arrow bounce"></i>
</a>
Can someone teach me how to keep the text in my About Me section to not run over my nav links if the screen is too small (like on mobile). If you go to my portfolio site, still in the works of course, you can see what I mean. https://portfolio-kw.herokuapp.com. I'll post my CSS below. I know the about me stuff is pretty basic, but I'm just trying to keep it simple while I develop my portfolio. I'll make it sound much better later lol. I'm also wanting to play with different background animations, but liked the look of this simple animation to start.
#import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.aboutnav {
height: 55px;
background: transparent;
}
.menu {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
float: right;
text-align: center;
}
.menu li {
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
}
.menu li a {
color: white;
text-decoration: none;
float: right;
font-family: "Muli", serif;
font-size: 24px;
display: block;
margin-right: 15px;
}
.menu li a:hover {
background-color: white;
color: black;
transition: 0.3s;
}
#media screen and (max-width: 600px) {
.menu {
justify-content: center;
width: 100%;
}
}
.about-animation-area {
background: linear-gradient(to left, #eb6134, #f2873f);
width: 100%;
height: 100vh;
position: relative;
}
.box-area {
position: fixed;
width: 100%;
height: 100%;
}
.box-area ul {
top: 50;
left: 50;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.box-area li {
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animate 30s linear infinite;
}
.box-area li:nth-child(1) {
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.box-area li:nth-child(2) {
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area li:nth-child(3) {
left: 70%;
width: 100px;
height: 100px;
animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
left: 55%;
width: 300px;
height: 3000px;
animation-delay: 0s;
animation-duration: 15s;
}
.box-area li:nth-child(5) {
left: 65%;
width: 40px;
height: 40px;
animation-delay: 0s;
animation-duration: 9.8s;
}
.box-area li:nth-child(6) {
left: 15%;
width: 110px;
height: 110px;
animation-delay: 3.5s;
}
.box-area li:nth-child(7) {
left: 38%;
width: 45px;
height: 110px;
animation-delay: 4s;
animation-duration: 10s;
}
.box-area li:nth-child(8) {
left: 50%;
width: 95px;
height: 65px;
animation-delay: 2s;
animation-duration: 5s;
}
.box-area li:nth-child(9) {
left: 28%;
width: 45px;
height: 105px;
animation-delay: 0.5s;
animation-duration: 12s;
}
.box-area li:nth-child(10) {
left: 19%;
width: 100px;
height: 135px;
animation-delay: 0s;
animation-duration: 7s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
.animation-area-text {
font-family: "Muli";
font-weight: normal;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
Here is the solution with a bit updated version of your code
#import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
background: linear-gradient(to left, #eb6134, #f2873f);
width: 100%;
height: 100vh;
position: absolute;
}
.aboutnav {
height: 55px;
background: transparent;
}
.menu {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
float: right;
text-align: center;
}
.menu li {
list-style-type: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
}
.menu li a {
color: white;
text-decoration: none;
float: right;
font-family: "Muli", serif;
font-size: 24px;
display: block;
margin-right: 15px;
}
.menu li a:hover {
background-color: white;
color: black;
transition: 0.3s;
}
#media screen and (max-width: 600px) {
.menu {
justify-content: center;
width: 100%;
}
.menu li {
padding: 5px 0px;
}
.menu li a {
font-size: 20px;
}
.animation-area-text {
position: absolute;
top: 0 !important;
left: 0 !important;
transform: none !important;
color: white !important;
padding: 10% !important;
}
}
.about-animation-area {
}
.box-area {
position: fixed;
width: 100%;
height: 100%;
}
.box-area ul {
top: 50;
left: 50;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.box-area li {
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animate 30s linear infinite;
}
.box-area li:nth-child(1) {
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.box-area li:nth-child(2) {
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area li:nth-child(3) {
left: 70%;
width: 100px;
height: 100px;
animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
left: 55%;
width: 300px;
height: 3000px;
animation-delay: 0s;
animation-duration: 15s;
}
.box-area li:nth-child(5) {
left: 65%;
width: 40px;
height: 40px;
animation-delay: 0s;
animation-duration: 9.8s;
}
.box-area li:nth-child(6) {
left: 15%;
width: 110px;
height: 110px;
animation-delay: 3.5s;
}
.box-area li:nth-child(7) {
left: 38%;
width: 45px;
height: 110px;
animation-delay: 4s;
animation-duration: 10s;
}
.box-area li:nth-child(8) {
left: 50%;
width: 95px;
height: 65px;
animation-delay: 2s;
animation-duration: 5s;
}
.box-area li:nth-child(9) {
left: 28%;
width: 45px;
height: 105px;
animation-delay: 0.5s;
animation-duration: 12s;
}
.box-area li:nth-child(10) {
left: 19%;
width: 100px;
height: 135px;
animation-delay: 0s;
animation-duration: 7s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
.animation-area-text {
font-family: "Muli";
font-weight: normal;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
<html>
<head>
<title>Kyle Williamson</title>
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token"
content="ZNcsatemMEgKW5ckpHur1jbYUoFaTvZTH6HJM4P+TXsvY8hrF3p0x+pbC5D/x3drnQs150Or5/Vdf/dqnNcHRA==">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" media="all"
href="/assets/application-c111a4191915f76ef50e14eedf2f8b59b029f6c825026c9959ef938fbf4b36d9.css"
data-turbolinks-track="reload">
<script src="/assets/application-2fe6185b86bcc188be41be2247b8672f5a57c6a539d20a93e86c7e5f54df593d.js"
data-turbolinks-track="reload"></script>
</head>
<body data-gr-c-s-loaded="true">
<div class="about-animation-area">
<div class="aboutnav">
<ul class="menu">
<li>
<a class="nav-link" href="/">Home</a>
</li>
<li>
<a class="nav-link" href="/projects">Portfolio</a>
</li>
<li>
<a class="nav-link" href="/contacts">Contact me</a>
</li>
</ul>
</div>
<div class="animation-area-text">
<h1>About Me</h1>
<p>Hello. My name is Kyle and I'm a Web Developer.
I graduated the University of Denver's Coding Bootcamp on February 10th, 2020
and received my certificate. This course's main subject was the Ruby language and
Ruby on Rails. Throughout the course, I was walked through building multiple small
web applications using Rails along with HTML and CSS of course. Then eventually some Javascript
and Jquery. My focus now is to continue growing my skills as a Web Developer and learn more
in the ever-evolving world of programming.
Currently continuing to gain knowlege in JavaScript for front end. Then I plan to learn
Node.js as well as React.</p>
</div>
</div>
<ul class="box-area">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
it is mainly happening due to the flex-wrap property. As the screen size decreases and there is not enough space, the wrap property will wrap the links, so it's better set the wrap property to nowrap.
.menu {
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
padding: 0;
margin: 0;
float: right;
text-align: center;
}
For more on flex-wrap.
I am having some issues I cannot seem to figure out with styling a toggle switch as required. I currently have it like this:
It however needs to look like this:
Here is my HTML:
<label class="switch"><input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
Here is my css:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 50px!important;
height: 24px!important;
cursor: pointer;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
display: block;
width: 22px!important;
height: 22px!important;
margin: 1px;
background: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 26px;
border-radius: 20px;
transition: margin .3s ease-in 0s;
transition-property: margin;
transition-duration: 0.3s;
transition-timing-function: ease-in;
transition-delay: 0s;
box-shadow: 1px 2px 7px #444;
}
input:checked + .slider {
background-color: #236093;
}
input:focus + .slider {
box-shadow: 0 0 1px #236093;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
Not sure where I am going wrong here or what I need to adjust. I have tried changing the transform and the padding but I cannot seem to get it right.
You can use the following solution:
.switch {
cursor: pointer;
display: inline-block;
height: 24px;
position: relative;
width: 50px;
overflow:hidden;
}
.switch input {
height: 0;
opacity: 0;
width: 0;
}
.slider {
background: #ccc;
bottom: 0;
cursor: pointer;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
background: #fff;
border-radius: 50%;
bottom: 1px;
box-shadow: 3px 0px 7px #444;
content: "";
display: block;
height: 22px;
left: 1px;
position: absolute;
right: 50px;
top: 1px;
width: 22px;
transition-property: all;
transition-duration: .6s;
}
input:checked + .slider {
background: #236093;
}
input:checked + .slider:before {
box-shadow: -3px 0px 7px #002551;
left: calc(100% - 23px); /** width of .slider:before + 1px */
}
.slider.round {
border-radius: 24px;
}
<label class="switch">
<input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(change)="handlingUnitAdvancedOptionsToggle(handlingUnitAdvancedOptionsCheckBox.checked)" />
<span class="slider round"></span>
</label>
My body no matter how hard I try wont get any bigger than a small line on the top of my page, I've tried just about everything so if someone could help me maybe something is wrong with my css i'm not seeing let me know
html {
height: 100%;
}
#wrapper {
height: 100%;
position: relative;
overflow: hidden;
}
body {
color: #fff;
margin: 0;
padding: 0;
position: relative;
}
.rw-wrapper {
width: 80%;
position: fixed;
margin: 110px auto 0 auto;
font-family: 'Cinzel Decorative', cursive;
padding: 30px;
font-size: 20px;
margin-left: 40px;
margin-top: 138px;
}
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 2px 2px 2px rgba(255, 255, 255, 0, 0.8);
}
.rw-sentence span {
color: white;
white-space: nowrap;
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words span {
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #F13D19;
}
.rw-words-1 span {
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span {
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
animation-delay: 3s;
color: #11B61B;
}
.rw-words span:nth-child(3) {
animation-delay: 6s;
color: #2CCBC1;
}
.rw-words span:nth-child(4) {
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
animation-delay: 12s;
color: #E91313;
}
.rw-words span:nth-child(6) {
animation-delay: 15s;
color: white;
}
.rw-hero {
font-style: bold;
font-size: 75px;
}
#keyframes rotateWordsFirst {
0% {
opacity: 1;
animation-timing-function: ease-in;
height: 0px;
}
8% {
opacity: 1;
height: 60px;
}
19% {
opacity: 1;
height: 60px;
}
25% {
opacity: 0;
height: 60px;
}
100% {
opacity: 0;
}
}
#keyframes rotateWordsSecond {
0% {
opacity: 1;
animation-timing-function: ease-in;
width: 0px;
}
10% {
opacity: 0.3;
width: 0px;
}
20% {
opacity: 1;
width: 100%;
}
27% {
opacity: 0;
width: 100%;
}
100% {
opacity: 0;
}
}
img {
position: fixed;
top: 25px;
left: 25px;
min-width: 97.5%;
margin: 0;
padding: 0;
z-index: -1;
}
.words {
text-align: left;
padding-top: 160px;
padding-left: 0px;
}
#ap {
position: absolute;
width: 1860;
height: 200px;
z-index: 15;
top: 81.5%;
left: 9s.5%;
margin: -100px 0 0 -150px;
padding: 0;
text-align: center;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Neverwinter Beginners Guide</title>
<meta charset="utf-8">
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:700" rel="stylesheet">
<script type="text/javascript" src="scripts/scripts.js"></script>
<img class="img" src="images/full_drag.png">
</head>
<body id="wrapper">
<div class="words">
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>Are you a</span>
<div class="rw-words rw-words-1">
<span>Fighter?</span>
<span>Hunter?</span>
<span>Paladin?</span>
<span>Wizard?</span>
<span>Rogue?</span>
<span class="rw-hero">Hero?</span>
</div>
</h2>
</section>
</div>
gnkrsjl;l
</body>
</html>