Working on personal site, found that whenever ANY of the HTML anchors is clicked, it completely breaks the site OR simply doesn't link to the appropriate location on the webpage. Typically occurs on Firefox, but site works fine on Edge and Chrome.
The live version of the site is here: http://smithchrisgraphics.com/
The issue is most obvious when using Firefox; when I tested my site using Edge, I didn't have any problems. I tried reducing the HTML and CSS down to see if I could pinpoint the issue, and I still don't know what is causing the bug. Any help pinpointing what's wrong would help. I removed all external js files.
#charset "UTF-8";
/* CSS Document */
html
{
overflow-x:hidden;
scroll-behavior: smooth;
}
body
{
min-height: 500vh;
max-width: 100vw;
width: 100%;
font-family: 'Roboto Slab', serif;
overflow: hidden;
position: absolute;
left: -13px;
z-index: -3;
/*outline: 1px solid red;*/
}
.displaySection
{
position: relative;
top: 100vh;
left: 0;
width: 100%;
background-color: red;
padding: 20px 0 20px;
margin: 5px 0 5px 5px;
min-height: 100vh;
overflow-y: visible;
overflow-x: hidden;
}
a
{
text-decoration: none;
}
ul
{
list-style: none;
}
hr
{
margin: 50px 10px 10px 10px;
}
#wrapper
{
width:100vw;
}
#NameDrop
{
position: relative;
top: 50vh;
transform: translateY(-60%);
list-style:none;
margin:0;
padding:0;
text-align:center;
z-index: 5;
}
#NameDrop ul
{
text-decoration-line: none;
list-style-type: none;
margin: 0 auto;
left: 40%;
}
#NameDrop ul li
{
text-decoration-line: none;
display: inline;
text-align: center;
width: 25%;
margin: 0 auto;
}
#NameDrop li a
{
display:inline-block;
position: relative;
padding:10px 20px;
left: -20px;
color: black;
text-decoration-line: none;
font-size: 14pt;
border-radius: 30px;
opacity: 1;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: SlowFade;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.7s;
-webkit-animation-iteration-count: 1;
/* Standard syntax */
animation-name: SlowFade;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0.7s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: forwards;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
-mozilla-transition: 0.3s;
transition: 0.3s;
}
#NameDrop li a:hover
{
background-color:rgba(151,0,2,1.00);
color: white;
text-decoration-line: none;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- External CSS Files -->
<link href="css/home.css" rel="stylesheet" type="text/css">
<!-- Need script for anchors due to HTML5 Bug on browsers -->
<script>
function snapToAnchor(anchor)
{
document.getElementById(anchor).scrollIntoView(true);
}
</script>
</head>
<body>
<div id="NameDrop">
<ul>
<li>About</li>
<li><a onclick="snapToAnchor('link02')">Design</a></li>
<li><a onclick="snapToAnchor('link03')">Experience</a></li>
<li>Education</li>
<li><a onclick="snapToAnchor('link05')">Contact</a></li>
</ul>
</div>
<!-- Each section should take up a minimum of at least 1 full screen -->
<div id="link01" class="displaySection">
</div>
<div id="link02" class="displaySection">
</div>
<div id="link03" class="displaySection">
</div>
<div id="link04" class="displaySection">
</div>
<div id="link05" class="displaySection">
</div>
</body>
</html>
If there is ANY extra details I can provide to help, or you have any clue what could be causing this, please let me know!
Related
Currently, I'm trying to make a tooltip of an image in my navbar and I can't figure out how to center it. Essentially, I have a div in mynavbar and I have tooltip that comes out when hovered. I want the tooltip to be positioned such that the center of the tooltip aligns with the center of the image in the div. The problem is I can't use 'left:50%' since it refers to 50% of the parent navbars width which is 100%. This positions the tooltip in the middle of the entire screen instead of the middle of the div. Is there any way I can prevent it from referring to the parent width and instead have it be 50% of its own width? I've added my code here and also in a jsfiddle
*{
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body{
background-color:rgb(80,155,192);
}
header{
display: grid;
grid-template-columns: 25% 20% 5% 5% 20% 25%;
/* 1 2 3 4 5 6*/
justify-content: center;
align-items: center;
width: 100%;
background-color: white;
position: sticky;
top: 0;
z-index:1;
}
header h1{
grid-column: 1;
margin-left: 5%;
padding:10px;
font-size: 40px;
font-weight: 500;
color:rgb(80,155,192);
cursor: pointer;
transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header h1:hover{
color: black;
}
header h1 a:visited{
color:rgb(80,155,192);
}
.water-container{
grid-column: 3;
background:gray;
}
.water-container:before,
.water-container:after{
position: absolute;
bottom: -0.25rem;
left: 50%;
}
.water-container:before{
content: attr(title);
color:white;
padding:0.5rem;
border-radius: 0.3rem;
background: #333;
}
.water-icon{
display: block;
margin:auto;
width:3rem;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transform-origin: center;
}
.water-icon:hover{
transform: scale(1.2);
}
.fairy-container{
grid-column: 4;
}
.fairy-container:hover:after{
content: attr(data-tooltip);
}
.fairy-icon{
display: block;
margin:auto;
width:3rem;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transform-origin: center;
}
.fairy-icon:hover{
transform: scale(1.2);
}
nav {
grid-column: 6;
}
.nav_links li{
display: inline-block;
margin-inline: 30px;
}
.nav_links li a{
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 15px;
width: 100px;
height: 40px;
border-radius: 50px;
background-color: rgb(80,155,192);
color: white;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nav_links li a:hover{
background-color: rgb(60, 136, 173);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>asdasd</h1>
<div class="water-container" title="water">
<img src="graphics/water.png" class="water-icon" alt="water icon">
</div>
<div class="fairy-container" data-tooltip="fairy">
<img src="graphics/fairy.png" class="fairy-icon" alt="fairy icon">
</div>
<nav>
<ul class="nav_links">
<li>Why?</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
here is the fiddle code
Btw Im aware of the other issues in the code, I can fix them. I'm just confused about this one thing that I dont know how to fix. Thanks!
for referring to its parents width, you must use
position: absolute;
and to refer to itself,
position: relative;
Below is where I think the issue is to fix the card display issue
I appreciate your help so much.
justify-content: space-evenly;
/*flex-start: no* items are stacked to the far left
*space-around:no items are stacked on top of the other*
*padding: no*
space-between no items are stacked to the far left */
/*added
align-content: center;
*/
I want to stack the cards side by side but I have given it many values and it is still not working it either lines it to far left, far right center and I want the cards to be aligned side by side.
Thank you so much.
HEre is my style.css
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn', serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
#keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
#keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}
<!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 href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Check out this snippet:
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn', serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)), url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
#keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
#keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}
<!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 href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy, non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C, Assembly, Machine Code, Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans, C, Assembly, Compilers,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,C,P,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Actually you forget to add </div> for Card A.
I've followed a youtube tutorial at [https://www.youtube.com/watch?v=H4MkGzoACpQ] to create a nice responsive Navbar.
The problem is when I try and personalise it and add a logo on the left side of the Nav, it seems to push the other nav links off the navbar when viewed in full screen.
As well as that, when the viewport goes below a certain width, there seems to be a circle visible around the hamburger icon.
Please help me to clean up this Navbar. Many thanks, I'm just a beginner at web design.
Here is a link to what the logo should be also - [https://www.google.com/search?q=rossnowlagh+surf+school+logo&sxsrf=ALeKk00Hg24OG5c7Wefc6jal-JyqLmB18Q:1586961567476&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjxpYHE1OroAhXXiVwKHQi3CEsQ_AUoAXoECAwQAw&biw=1440&bih=789#imgrc=36AEO3-lo_sGxM]
I've included my HTML, CSS and JS code here...
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
nav {
height: 12vh;
background: #5b78c7;
}
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing h1 {
margin: 100px;
font-size: 50px;
color: #ae5fce;
}
#media screen and (max-width: 768px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
position: fixed;
background: #5b78c7;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}
<!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="./style.css" />
<title>Rossnowlagh Surf</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<img id="nav-logo" src="img/rossnowlagh-logo.png">
<ul class="nav-links">
<li>About</li>
<li>Packages</li>
<li>Contact</li>
</ul>
</nav>
<section class="landing">
<img src="./circles.svg" alt="dots" />
<h1>Dots</h1>
</section>
<script src="app.js"></script>
</body>
</html>
What's happening here is that your nav logo is taking up space, and is pushing things off the screen in a way that is breaking the layout.
There are probably a few ways to address this, including using a flexbox and arranging the items for your nav inside it, but I think that the following option is probably going to be the simplest for your task:
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
position: absolute; // add this to take the logo out of the layout
z-index: 5; // add this to keep the logo in front of the other content
}
I am practicing JS and CSS animations and for some reason, I am not able to enable animation when the "menu" element is using position absolute. Is there a way to use the transition to achieve the smooth sliding effect in css3 or Js?
I have tried a lot of online tutorials but none of them have worked.
Here's the codepen link: https://codepen.io/mithunbaiju/pen/XWrMqaG
$("button#toggle-button").click(function(){
$("#toggle-button").toggleClass("toggler toggler-closed-active");
$("#main-navigation").toggleClass("site-nav site-nav-toggled");
});
$("button#toggle-button-closed").click(function(){
$("#toggle-button-closed").toggleClass("toggler-closed-active toggler");
$("#main-navigation").toggleClass("site-nav-toggled site-nav");
});
html, * {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
font-family: 'Nunito', sans-serif;
font-size: 1.6rem;
line-height: 1.625;
}
input [type="submit"],
button{
cursor: pointer;
padding: 1.5rem;
background-color: darkviolet;
border-radius: 4px;
}
button:focus {
outline: none;
}
.mast-head {
background-color: #013243;
}
.wrap {
padding: 2.5rem;
display: flex;
justify-content: space-between
}
.site-branding a{
text-decoration: none;
color: ghostwhite;
font-weight: bolder;
}
#main-navigation {
position: absolute;
background: black;
top: 0;
left: 0;
width: 100%;
display: flex;
list-style-type: none;
flex-direction: column;
height: 100%;
}
.site-nav {
transform: translateX(-100vw);
transition: all .2s linear;
}
.site-nav-toggled {
transform: translateX(0px);
}
.site-nav a{
color: whitesmoke;
text-decoration: none;
}
#toggle-button {
border: 0px;
color: whitesmoke;
font-weight: bold;
}
.toggler-closed {
display: none;
}
.toggler-closed-active {
display: absolute;
top: 2.5rem;
right: 2.5rem;
z-index: 2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu Practice</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
</head>
<body>
<header id="site-header" class="mast-head">
<div class="wrap">
<div class="site-branding">
Site Logo
</div>
<button id="toggle-button" class="toggler">Menu +</button>
<button id="toggle-button-closed" class="toggler-closed">Close +</button>
<ul id="main-navigation" class="site-nav">
<li>Home</li>
<li>About</li>
<li>Resources</li>
<li>Blog</li>
<li>Resourves</li>
</ul>
</div>
</header>
<script src="app.js"></script>
</body>
</html>
Any help would be appreciated.
Thanks in advance.
You can simply add a keyframe to do the animation and apply the class on body tag.
Example of fadeIn class :-
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
animation-duration: 5s;
}
your css transition on .site-nav but not on .site-nav-toggled, toggle multiple class not work, use addClass/removeClass to #main-navigation instead of toggle multiple class, you should learn chrome Devtools.
I think, w3schools can help here a lot. Don't rush, take your time to understand the css animation property. It takes about a good hour, to get the hang of it but when you have it, it will be very fun, to use it. I just figured it out a few days ago and you can really make stuff look beautiful. I hope to have helped.
i am doing a simple animation to my header text box which i placed in the center of the header however when i added a animation the entire wrapper move down and to the right. how do i fix this? i added a code snippet as well as a image to see where the wrapper is moved
$(document).ready(function(){
$('.header-text-box').addClass('text-animation');
});
/*--#00b300*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
background-color: #fff;
color:#333333;
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.clearfix{zoom: 1}
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.row{
max-width: 1240px;
margin: 0 auto;
}
.row-small{
max-width: 100%;
margin: 0 auto;
}
section{
padding: 80px 0;
}
h1,
h2{
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
h2{
font-size: 250%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
}
h2:after{
display: block;
height: 2px;
background-color: #00919b;
content: " ";
width: 180px;
margin: 0 auto;
margin-top: 20px;
}
/* --------------------------------------------------- HEADER -------------------------------*/
header{
height: 100vh;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 34%, rgba(31, 31, 31, 0.69) 190%);
}
.header-text-box{
width: 1140px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.header-text-box h1{
border: 5px solid #333333;
padding: 5px;
font-size: 450%;
font-weight: 400;
color: #333333;
}
.header-text-box h3{
font-size: 150%;
font-weight: 300;
color: #00919b;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes text-animation{
0%{
opacity: 0;
-webkit-transform: translateY(-100px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes text-animation{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.text-animation{
-webkit-animation-name: text-animation;
animation-name: text-animation;
display:block !important;
}
<html lang = "en-us">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="css/grid.css">
<link rel="stylesheet" type = "text/css" href="css/animate.css">
<link rel="stylesheet" type = "text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type = "text/css" href="css/main.css">
<link rel="stylesheet" type = "text/css" href="css/responsive.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,300i,400" rel="stylesheet">
<title>Carlos Elizondo</title>
</head>
<body>
<header>
<nav>
</nav>
<div class="header-text-box anim">
<h3>Hi. My name is </h3>
<h1>Carlos Elizondo</h1>
<h3>I am an aspiring web developer and current graduate</h3>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "js/jquery.waypoints.min.js"></script>
<script src= "js/wow.min.js"></script>
<script>new WOW().init();</script>
<script src = "js/portfolio.js"></script>
</body>
</html>
There were few errors with positioning. The main problem was that you positioned .header-text-box div absolutely and added left: 50% property to it, which caused that basically the div was constantly moved off the left margin of the document by 50% of the parent element length.
I have just deleted that property and centered it horizontally and vertically with flex.
Jsfiddle link
Edit: Centering some content with following code:
left: 50%;
transform: translateY(-50%);
Is quite handy when you want to center element with minimal width, e.g. a straight, vertical line. But in such cases as yours, it doesn't work properly because it just moves the element by 50% away of the left margin of the parent element, without taking element's width into account. You can easily notice it on my attached image:
That's why you should use flexbox. However, it had some problems with compability with older browsers though, but currently the most of the modern browsers supports it and it's quite easy to implement.