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>
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>
im really new at this but made owl carousel appear at the main page of my blog just the way i like it.
the thing is, now i want it to appear the same way in all the pages of the blog. is there a way i can make the call in the pages or anything i can add to the theme or main page so it can show it in all the articles?
i have it in the html of the theme like this
* ######## Top Feature Css ######################### */
.recent-boxes .carousel {
position: relative;
margin: 0 0 0!important;
padding: 0;
overflow: visible;
height: auto;
display: block;
clear: both
}
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
#keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out
}
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0px, 0px, 0px)
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel .owl-refresh .owl-item {
display: none
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d
}
.owl-carousel.owl-text-select-on .owl-item {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto
}
.owl-carousel .owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.no-js .owl-carousel {
display: block
}
.owl-prev,
.owl-next {
top: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.75);
font-family: FontAwesome;
position: absolute;
z-index: 1;
display: block;
padding: 0;
cursor: pointer;
padding: 0;
text-align: center;
overflow: hidden
}
.owl-prev {
left: 0
}
.owl-prev:before {
content: "\f104"
}
.owl-next {
right: 0
}
.owl-next:before {
content: "\f105"
}
.owl-prev:hover,
.owl-next:hover {
background-color: #000
}
.owl-dots {
position: absolute;
bottom: 1px;
width: 33.33%;
left: 0;
right: 0;
margin: auto;
text-align: center
}
.owl-dot {
background: #fff;
height: 3px;
width: 10px;
display: inline-block;
margin: 0 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
opacity: .6
}
.owl-dot.active,
.owl-dot:hover {
background: #e74c3c
}
.main-carousel {
height: 350px;
overflow: hidden
}
.main-carousel .owl-item {
width: 100%;
}
.carousel-item {
height: 350px;
width: 100%;
position: relative;
padding: 0!important;
display: block;
overflow: hidden
}
.carousel-item .box-image {
height: 350px;
position: relative;
width: 100%;
display: block
}
.carousel-item .box-image:after {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 151px;
background: url(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
opacity: .8
}
.carousel-content {
position: absolute;
bottom: 0;
width: 100%;
z-index: 2;
box-sizing: border-box
}
.carousel-item .carousel-content {
padding: 15px;
text-align: center;
}
.carousel-item .recent-title {
margin: 10px 0 5px;
font-size: 19px;
font-weight: 400
}
.carousel-item .recent-title a {
color: #fff;
display: block;
line-height: 1.4em;
text-shadow: 0 .5px .5px rgba(34, 34, 34, 0.3)
}
.carousel-item .recent-author {
color: #fff;
}
.carousel-item .recent-date {
visibility: hidden;
display: none;
}
.carousel-tag a {
display: inline-block;
background-color: #e74c3c;
color: #fff;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 11px;
text-transform: uppercase;
border-radius: 2px
}
.carousel-tag a:before {
content: "\f091";
font-family: FontAwesome;
font-weight: 400;
font-style: normal;
line-height: 1;
padding-right: 4px;
}
.recent-author::before {
content: '\f007';
font-family: fontawesome;
color: #bbb;
margin-right: 5px;
}
.recent-author {
margin-right: 10px;
}
.carousel-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40, 35, 40, 0.05)
}
.main-carousel .owl-item:hover .carousel-overlay {
background-color: $mainbgcolor;
opacity:0.5;
}
.carousel-overlay:before {
z-index: 3;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.carousel-overlay:after {
z-index: 3;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
.carousel-overlay:before, .carousel-overlay:after {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.main-carousel .owl-item:hover .carousel-overlay:before, .main-carousel .owl-item:hover .carousel-overlay:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.main-carousel .owl-prev,
.main-carousel .owl-next {
margin-top: 0px;
width: 40px;
height: 40px;
font-size: 25px;
line-height: 40px
}
.main-carousel .owl-prev {
left: -50px
}
.main-carousel:hover .owl-prev {
left: 0
}
.main-carousel .owl-next {
right: -50px
}
.main-carousel:hover .owl-next {
right: 0
}
.main-carousel .owl-dots {
bottom: 10px
}
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 have a problem that my transition does not get applied on an absolute positon child div.
Here is my codepen:
https://codepen.io/Data-Mastery/pen/oNvRdGv
On line 213 (&:hover .image) in the SASS file I want to scale the image and also set a filter, which works fine, but the transition-duration does not get applied.
If I just apply the hover statement on the parent element and not the image, the transition works fine. What is wrong here, can anyone help me?
Just add a transition to the .image class (or to the hover function, whatever you want to achieve)
&:hover .image {
transform: scale(1.1);
filter: grayscale(50%);
transition: your parameter;
}
Add transition property to the
& .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
transition:0.5s;
}
This will work for you
Why man , it works see this:-
#import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
#keyframes moveInLeft {
0% {
transform: translateX(-200px);
opacity: 0;
}
80% {
transform: translateX(10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInRight {
0% {
transform: translateX(200px);
opacity: 0;
}
80% {
transform: translateX(-10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInBottom {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.leftanimation {
animation: moveInLeft 1.2s forwards;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.4rem;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
p {
margin: 0.75rem;
}
.l-heading-light {
font-size: 3rem;
color: white;
padding-top: 3rem;
padding-bottom: 1rem;
}
.l-heading-dark {
font-size: 3rem;
color: #c2453b;
padding-top: 3rem;
padding-bottom: 1rem;
}
.primary-btn {
display: inline-block;
background: #c2453b;
color: #fff;
padding: 0.5rem 2rem;
font-size: 1.25rem;
border-radius: 20px;
transition: all 0.3s ease-in;
}
.primary-btn:hover {
background: #fff;
color: #c2453b;
transform: translateY(-3px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.primary-btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.navbar {
display: flex;
z-index: 1;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
top: 0;
padding: 1rem;
background: #333;
color: #fff;
}
.navbar__nav {
display: flex;
justify-content: space-between;
}
.navbar__nav li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
.navbar__nav li a:hover {
background: #fff;
border-radius: 5px;
color: #333;
}
.showcase {
background-image: linear-gradient(to bottom right, rgba(194, 69, 59, 0.4), rgba(178, 86, 65, 0.4)), url("https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg");
background-size: cover;
background-position: top;
height: 100vh;
position: relative;
}
.showcase__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-transform: uppercase;
}
.showcase__content p {
color: white;
font-size: 1.2rem;
margin-bottom: 1rem;
animation: moveInRight 1.2s forwards;
}
.showcase__content a {
animation: moveInBottom 1.2s 0.8s linear backwards;
}
#tours {
text-align: center;
background: #f7f7f7;
}
#tours .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
max-width: 1200px;
justify-content: space-between;
display: flex;
color: #fff;
}
#tours .container .card {
position: relative;
height: 35rem;
width: 20rem;
margin: 2rem 1rem;
padding: 0;
background: #b25641;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease-in-out;
overflow: hidden;
}
#tours .container .card:hover .image {
transform: scale(1.1);
filter: grayscale(100%);
transition-duration: 0.5s;
}
#tours .container .card .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
}
#tours .container .card__content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 15rem;
}
<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>Malamar Hotels</title>
</head>
<body>
<nav class="navbar">
<h1 class="navbar__logo">
Malamar
</h1>
<ul class="navbar__nav">
<li>Home</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</nav>
<header class="showcase">
<div class="showcase__content">
<h1 class="l-heading-light leftanimation">
Hiking this fall
</h1>
<p>
Book the best hikings tours for this fall in beautiful areas across
europe
</p>
See our tours
</div>
</header>
<section id="tours">
<h1 class="l-heading-dark">Our best offers</h1>
<div class="container">
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Hiking</h1>
<p>2-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Rafting tour</h1>
<p>3-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Mountainbiking</h1>
<p>5-day tour</p>
Book now!
</div>
</div>
</div>
</section>
</body>
</html>
I have a codepen below. Basically, I'm trying to show a popup on hover of the highlighted circles (red), however some highlighted circles are showing up above some of the popups, even when the popups are always given a higher z-index all the time.
http://codepen.io/Wolfmans55/pen/jPwKqZ
This is the animation used for the popup, which I believe maybe the culprit.
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
Take out the z-index setting on .white-popup and set a higher z-index on .white-popup:hover .popup and .white:hover.
see jsfiddle
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
html {
height: 100%;
}
body {
background: #343837;
transition: opacity .25s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
overflow: hidden;
}
.show-body {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.page {
background: #343837;
font-family: 'Roboto', sans-serif;
font-size: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
}
.page-2 {
left: auto;
right: -100%;
background: blue;
}
.prev-page,
.next-page {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: red;
}
.next-page {
right: 20px;
}
.prev-page {
left: 20px;
}
.page-wrapper {
position: absolute;
top: 50%;
margin-top: -303px;
width: 100%;
}
.header_section {
text-shadow: 1px 1px 1px #000;
font-size: 2em;
}
h1 {
margin: 0;
}
.blue_title {
color: #54c8e7;
font-weight: normal;
}
.primary_title {
font-size: 4em;
margin-top: -34px;
margin-bottom: 20px;
}
.sub_title {
position: relative;
font-size: 1em;
background: #343837;
padding: 0 4px;
display: inline-block;
}
.sub_title_divider {
border-top: 1px solid #54c8e7;;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.city-name {
font-size: 2em;
}
.emphasis {
font-weight: bold;
}
.inlineblock {
display: inline-block;
}
.centertxt {
text-align: center;
}
.pos_rel {
position: relative;
}
.overflow_hidden {
overflow: hidden;
}
.vert_mid {
vertical-align: middle;
}
table {
cursor: pointer;
margin: 0 auto;
border-spacing: 1px;
}
td {
width: 10px;
height: 10px;
border-radius: 50%;
}
.white,
.white-popup {
background: #000;
position: relative;
-webkit-animation: in .25s;
}
.white-popup {
background: red;
}
/*.plan-to {
background: #018c9e;
z-index: 2;
}*/
.white-popup .popup {
cursor: auto;
-webkit-animation: popup .25s forwards;
z-index: 10;
}
.popup {
position: absolute;
width: 100px;
height: 100px;
font-size: 5px;
overflow: hidden;
background: #54c8e7;
z-index:10;
top: -45px;
left: -45px;
padding: 8px;
border: 1px solid #343837;
border-radius: 3px;
box-sizing: border-box;
}
.white-popup:hover .popup {
-webkit-animation: out .25s forwards;
z-index: 50;
}
.white:hover {
-webkit-animation: out .25s forwards;
z-index: 50;
}
#-webkit-keyframes in {
from {background:#fff; transform: scale(1);}
to {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes out {
0% {background:#fff; transform: scale(1);}
100% {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
.key {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 2px;
}
.key_1 {
background: #54c8e7;
}
.key_2 {
background: #018c9e;
}
.key_3 {
background: #fff;
}
.legend {
text-transform:uppercase;
font-size: 12px;
color: #fff;
margin-bottom: 30px;
}
.legend_item {
margin-left: 15px;
}
#media screen and (min-width: 768px) {
.page-wrapper {
margin-top: -388px;
}
td {
width: 15px;
height: 15px;
}
}
I added the following CSS:
td:hover {
z-index: 1;
}
And inside .white-popup selector, I removed:
z-index: 2;
line.
Seems to work for me.