JavaScript auto type writer function

JavaScript auto type writer function - javascript

I'm having an issue with a automatic typing function that I have created for this website. Everything works great but when it finish going thru my array of words it move the page up then when it starts again it moves the page down. I want the page to stay in place when it finish the array of words as well as when it starts the array of words.
var messages=["Your word is a lamp to my feet and a light to my path.","","Be still, and know that I am God! I will be exalted among the nations, I will be exalted in the earth!","Beauty for ashes"];
var rank=0;
// Code for Chrome, Safari and Opera
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt);
// Standard syntax
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt);
function changeTxt(e){
_h1 = this.getElementsByTagName("h1")[0];
_h1.style.webkitAnimation = 'none'; // set element animation to none
setTimeout(function() { // you surely want a delay before the next message appears
_h1.innerHTML=messages[rank];
var speed =2.8*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length
_h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; // switch to the original set of animation
(rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message
}, 1000);
}
body{
margin: 0;
padding: 0;
background-color: purple;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/*-------------Header/Nav----------*/
header{
width: 100%;
}
#start{
width: 90%;
margin: 0 auto;
text-align: center;
}
#start h1{
color: white;
letter-spacing:6px;
font-size: 3em;
font-family: 'Anton', sans-serif;
}
nav ul{
list-style-type: none;
padding: 0;
margin-left: 32%;
}
nav a{
float: left;
font-size: 1.2em;
margin-right: 38px;
}
#wrapper{
width: 100%;
margin: 0 auto;
background-color: Fuchsia;
color:white;
}
#nav{
width: 80%;
margin: 0 auto;
}
a:nth-child{
margin-right: 0;
}
/**************Type writer***********/
.myTypewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
#wrapper-two{
background: purple;
color: #fff;
font-family: monospace;
padding-top: 3em;
display: flex;
justify-content: center;
}
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: blue; }
}
/*--------------section two---------------*/
#wrapper-home{
width: 90%;
margin:0 auto;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
}
h2{
float: left;
}
img{
float: left;
}
/*----------------Media Queries-----------*/
#media only screen and (max-width: 1200px){
nav ul{
margin-left: 20%
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="otkcdim.css">
<title>Home</title>
</head>
<body>
<header>
<div id="start">
<h1>Only </h1>
</div>
</header>
<nav >
<div id="wrapper" class="cf">
<div id="nav" class="cf">
<ul class="cf">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Events</a></li>
<li><a>Encouragement</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<!--*****************Type Writer*************************-->
<section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper-two">
<div class="myTypewriter" id="myTypewriter">
<h1> Beauty for Ashes</h1>
</div>
</div>
</section>
<!--**********Home Page***************-->
<div id="wrapper-home">
<div class="yes">
<img src="ma.jpg">
<h2>Welcome.</h2>
</div>
</div>
<script type="text/javascript" src="otkcdim.js"></script>
</body>
</html>

I made a small change to your CSS to fix this problem. Hope it's helpful.
.myTypewriter h1 {
overflow: hidden;
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
// Set minimum height of auto-typewriter to hold it's place even when empty.
min-height: 25px;
/* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}

Related

Make a card burger menu dropdown

Okay so this is a bit of a longer code I've posted but I will try to explain what I'm trying to do here.
I have this burger menu icon to the right (three lines), and when these are clicked I want by items to slide down and be viewed like in this image
In my example you can see how I created the first part of it, but I don't know how to make this part, since position: absolute; and so on makes it look wired, and it starts to float in the right corner. I know I still need to round the corners and make some shadows, but that not the hard part. I've seen people using <nav> tags with <divs> inside instead of the way I do it with div outside and <ul> lists inside, but is that better or can this still be done, and how?
Example
function menuToggle() {
var list = document.getElementById("list");
var listElements = list.childElementCount;
var height = 1.5 * listElements;
var x = document.getElementById("burgerMenu");
if (x.style.height === "0rem") {
x.style.height = height + "rem";
} else {
x.style.height = "0rem";
}
}
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* Dark Theme */
--clr-bg-dark: #2F2F35;
--clr-card-bg-dark: #3A3B41;
--clr-card-body-text-dark: #8D90A1;
--clr-card-title-text-dark: #D3D3D9;
--clr-nav-activ-color-dark: #D3D3D9;
--clr-nav-hover-color-dark: #D3D3D9;
--dark-moon: url("../images/svg/dark_moon.svg") center no-repeat;
--dark-hover-moon: url("../images/svg/dark_moon_hover.svg") center no-repeat;
/* (Default) Light Theme */
--clr-bg-light: #E1E1E1;
--clr-card-bg-light: #F3F3F3;
--clr-nav-activ-color-light: #3A3B41;
--clr-nav-hover-color-light: #3A3B41;
--light-sun: url("../images/svg/light_sun.svg") center no-repeat;
--light-hover-sun: url("../images/svg/light_sun_hover.svg") center no-repeat;
/* (Default) Set Colors */
--foreground: var(--clr-bg-dark);
--background: var(--clr-bg-light);
--activ-mode-icon: var(--light-sun);
--activ-hover-mode-icon: var(--light-hover-sun);
--selected-nav-page: var(--clr-nav-activ-color-light);
--hover-nav: var(--clr-nav-hover-color-light);
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--speed: .3s;
}
.darkmodescss {
/* Used as classList.add('darkmodescss') by js/toggletheme.js
Replaces the (Default) Light Theme parameters with Dark Theme */
--foreground: var(--clr-bg-light);
--background: var(--clr-bg-dark);
--activ-mode-icon: var(--dark-moon);
--activ-hover-mode-icon: var(--dark-hover-moon);
--selected-nav-page: var(--clr-nav-activ-color-dark);
--hover-nav: var(--clr-nav-hover-color-dark);
--clr-icon-width: var(--clr-icon-width);
--clr-icon-height: var(--clr-icon-height);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: var(--clr-nav-color);
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.topnav a:hover {
color: var(--hover-nav);
}
.topnav a.active {
color: var(--selected-nav-page);
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
}
.nav-icon {
/* Navigation Icon Sizing - SVG Only */
width: 2em;
height: 2em;
padding: 0.09rem 0.15rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.disp_mode {
/* (Default) Dark / Light Mode - Icon Handling */
background: var(--activ-mode-icon) no-repeat;
}
.disp_mode:hover {
/* (Hover) Dark / Light Mode - Icon Handling */
background: var(--activ-hover-mode-icon) no-repeat;
}
.topnav-menu {
/* Burger Menu Content*/
width: 100%;
overflow: hidden;
transition: 1000ms;
background-color: none;
padding: 0;
}
.topnav-menu ul {
/* Burger Menu Content*/
float: right;
margin: 0;
list-style-type: none;
}
.topnav-menu a {
color: var(--clr-nav-color);
text-align: center;
padding: 0.313rem 0.313rem;
text-decoration: none;
font-size: 1.063rem;
}
.topnav-menu a:hover {
color: var(--hover-nav);
}
.topnav-menu a.active {
color: var(--selected-nav-page);
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: var(--hover-nav);
}
<?php
declare(strict_types=1);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
<!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
<div class="topnav-menu" id="burgerMenu" style="height:0rem;">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>item2</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I found another example where they made it in css, and it could probably also be done like that even though I can't make it work?
Link to a CSS only dropdown

TL:DR that's a lot of code for something so simple. Don't rely on javascript to do the animations, just to put a "open" class on the css element. About the positioning, you need to tell the element which parent to use it's positioning, in this case, the hamburguer.
Also, you want the menu inside the DOM component it is parent of, in this case, the hamburguer menu it would be better inside the place where it should appear.
Let me try to solve it:
function menuToggle() {
var menu = document.querySelector('.right-nav');
menu.classList.toggle('open-hamburguer');
}
:root {
/* Static Colors*/
--clr-heading-footer: #4C5BA0;
--clr-button: #4C5BA0;
--clr-nav-color: #8D90A1;
/* Dark Theme */
--clr-bg-dark: #2F2F35;
--clr-card-bg-dark: #3A3B41;
--clr-card-body-text-dark: #8D90A1;
--clr-card-title-text-dark: #D3D3D9;
--clr-nav-activ-color-dark: #D3D3D9;
--clr-nav-hover-color-dark: #D3D3D9;
--dark-moon: url("../images/svg/dark_moon.svg") center no-repeat;
--dark-hover-moon: url("../images/svg/dark_moon_hover.svg") center no-repeat;
/* (Default) Light Theme */
--clr-bg-light: #E1E1E1;
--clr-card-bg-light: #F3F3F3;
--clr-nav-activ-color-light: #3A3B41;
--clr-nav-hover-color-light: #3A3B41;
--light-sun: url("../images/svg/light_sun.svg") center no-repeat;
--light-hover-sun: url("../images/svg/light_sun_hover.svg") center no-repeat;
/* (Default) Set Colors */
--foreground: var(--clr-bg-dark);
--background: var(--clr-bg-light);
--activ-mode-icon: var(--light-sun);
--activ-hover-mode-icon: var(--light-hover-sun);
--selected-nav-page: var(--clr-nav-activ-color-light);
--hover-nav: var(--clr-nav-hover-color-light);
/* (Default) Page Settings */
height: 100%;
font-family: 'Montserrat';
padding: 2% 12%;
--speed: .3s;
}
.darkmodescss {
/* Used as classList.add('darkmodescss') by js/toggletheme.js
Replaces the (Default) Light Theme parameters with Dark Theme */
--foreground: var(--clr-bg-light);
--background: var(--clr-bg-dark);
--activ-mode-icon: var(--dark-moon);
--activ-hover-mode-icon: var(--dark-hover-moon);
--selected-nav-page: var(--clr-nav-activ-color-dark);
--hover-nav: var(--clr-nav-hover-color-dark);
--clr-icon-width: var(--clr-icon-width);
--clr-icon-height: var(--clr-icon-height);
}
body {
background: var(--background);
color: var(--foreground);
}
.logo-style {
/* Logo Style */
font-style: normal;
font-weight: bold;
font-size: 2rem;
line-height: 2.438rem;
letter-spacing: 0.05em;
color: #4C5BA0;
margin: 0;
}
/*
Navigation
*/
.topnav {
/*overflow: hidden; *//* if this is set the hamburguer don't show inside. it is best to the hamburguer to be inside to know the positioning of the other elements he wants to be near */
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: var(--clr-nav-color);
text-align: center;
padding: 0.09rem 0.30rem;
text-decoration: none;
font-size: 1.063rem;
}
.topnav a:hover {
color: var(--hover-nav);
}
.topnav a.active {
color: var(--selected-nav-page);
}
.right-nav {
display: flex;
flex-direction: row;
gap: 0.625rem;
align-items: center;
position:relative; /* all other positioned elements should use this as the indicator */
}
.nav-icon {
/* Navigation Icon Sizing - SVG Only */
width: 2em;
height: 2em;
padding: 0.09rem 0.15rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.disp_mode {
/* (Default) Dark / Light Mode - Icon Handling */
background: var(--activ-mode-icon) no-repeat;
}
.disp_mode:hover {
/* (Hover) Dark / Light Mode - Icon Handling */
background: var(--activ-hover-mode-icon) no-repeat;
}
.topnav-menu {
/* Burger Menu Content*/
width: 300px; /* can't assume the parents width */
overflow: hidden; /* this hides the shadow from inside, but we add some padding to fix this v */
padding: 5px;
transition: all .5s ease; /* !! */
background-color: none;
max-height:0; /* !! */
position:absolute; /* !! */
top:100%; /* distance itself 100% of the height of parent element */
right:0; /* aligned on the right of container */
opacity:0; /* just to hide it */
}
/* here the magic happens */
.open-hamburguer .topnav-menu{
opacity:1;
max-height:300px; /* here is the only thing you could add find out through js because you can't animate the height */
}
.topnav-menu ul {
/* Burger Menu Content*/
/* float: right;*/ /* no need */
margin: 0;
padding:0; /* yes need */
list-style: none; /* shorthand */
box-shadow: 0 2px 2px gray; /* shorthand */
border-radius:10px; /* have to set here too otherwise the shadow would be weird */
}
.topnav-menu ul li:last-child {
border-top:1px solid gray; /* last item border */
}
.topnav-menu ul li:last-child a {
border-radius:0 0 10px 10px; /* round borders on end */
}
.topnav-menu ul li:first-child a {
border-radius:10px 10px 0 0; /* round borders on start */
}
.topnav-menu a {
background-color:white; /* best to have background for each link instead of container */
display:block; /* inline elements are a bother */
text-align:left; /* !! */
color: var(--clr-nav-color);
text-align: left;
padding: 0.313rem 0.313rem;
padding: 0.8rem 1rem; /* rem is not a good measure for this, if for some reason you want to increase the base font for text this all goes south */
text-decoration: none;
font-size: 1.063rem;
transition:all .5s ease; /* pretty */
}
.topnav-menu a:hover {
color: var(--hover-nav);
background-color:orange; /* cmon some color :P */
}
.topnav-menu a.active {
color: var(--selected-nav-page);
}
/*
Navigation Burger Menu
*/
.line-one {
width: 1.875rem;
}
.line-two {
width: 1.875rem;
}
.line-three {
width: 1.875rem;
}
.burger-menu div {
width: 1.875rem;
height: 0.25rem;
background-color: var(--clr-nav-color);
margin: 0.313rem 0;
border-radius: 1.563rem;
}
.burger-menu {
width: 1.875rem;
}
.burger-menu:hover div {
width: 1.875rem;
background-color: var(--hover-nav);
}
<?php
declare(strict_types=1);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Metrics</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#burger-menu" class="burger-menu" onclick="menuToggle()">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
<!-- Burger Menu Hidden By Default Untill menuToggle() is activated -->
<div class="topnav-menu" id="burgerMenu">
<div>
<ul id="list">
<li>Overall sprint progress </li>
<li>item2</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
You get the point. Next time please try to share the code only for the subject at hand, it was hard running through this code that wasn't related.
Fun tho'
Edit
Actually added the overflow:hidden from the menu so you can't see the contents when the height is 0, to avoid hiding the box-shadow I added a little padding.

my if-statement is not doing what it want it to

i really need help with a memory-style game that i have to create for a school project. The issue right now is that my if statements wont really work properly. i want to compare cards and then if they match they should stay open and the score should go up, and if they don't match they should close again. but right now it says the first card click is right and anything clicked on after that is wrong
//Function for the dropdown content
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
var score = 0;
var firstClick = null;
var secondoClick = null;
const cards = document.getElementsByClassName("card");
window.addEventListener("click", (event) => {
for (let i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", function() {
cards[i].classList.add("open");
})};
let clicked = event.target.dataset.type;
if(firstClick == null){
firstClick = clicked
} else {
secondoClick = clicked
}
if(secondoClick == firstClick){
console.log('same click')
score++;
firstClick = null;
secondoClick = null;
} else if(secondoClick != null && firstClick != secondoClick) {
console.log('metti null')
firstClick = null;
secondoClick = null;
}});
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 60px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 17%;
left: 39%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#00005e;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 20px;
}
/*The game section*/
section {
max-width: 1300px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 185px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* .welcome {
display: flex;
justify-content: center;
text-align: center;
color: #3c3b6e;
margin-top: 100px;
font-size: 50px;
clear: both;
position: absolute;
}
.startbutton {
display: flex;
justify-content: center;
align-self: center;
margin-top: 100px;
position: absolute;
background-color: #00005e;
color: #e8ebf1;
padding: 10px;
font-size: 30px;
border-radius: 4px;
z-index: 0;
border-color: transparent;
}
.startbutton:hover{
cursor: pointer;
background-color: #3c3b6e;
}
*/
/*The game*/
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 30px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1200px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>The Password Game</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score"><h2></h2></div>
<section>
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
<script src="javascript/javascript.js" ></script>
</body>
</html>
https://codepen.io/anna100d/pen/wvgQLdW

Problems with code can be much easier to understand and solve if they can be simplified first. Here is a stripped-down version of your game that makes it easy to focus on the logic of the click event listener. (Opening a card in this version merely changes its color.)
In the listener, when the first card is clicked, we want to open it and remember it for later.
When the second card is clicked, we open it and compare it to the first card, then we must forget the first card. (If they match, the score changes; if not, we close both cards.)
Edit:
If the two cards don't match, both cards get closed. To let the user see the selected cards while they're both open, you can put the code that closes the cards into a function and pass that function to JavaScript's built-in setTimeout function.
I updated the snippet to include this behavior (using a couple of additional tricks while I was at it: the "rest" syntax, a "fat arrow" function, and a "closure" -- Search for the respective pages on MDN if you want to learn more about these features.)
// Declares global variables
let score = 0, cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event){
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if(!card || card.classList.contains("open")){
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if(!cardToMatch){
cardToMatch = card;
}
// If it's the 2nd card, compare types
else{
// If they match...
if(card.dataset.type == cardToMatch.dataset.type){
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
}
// If they don't...
else{
// ...Flip both cards back over
resetCardsAfterDelay(cardToMatch, card);
}
// Either way, next click will be the 1st of 2
cardToMatch = null;
}
}
function updateScoreDisplay(newScore){
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
function resetCardsAfterDelay(...listOfCards){
//Takes any number of cards via "rest parameter syntax"
// Uses `setTimeout` to call inner `resetAll` func after delay
// Passes our `resetAll` func to `setTimeout` with a delay in milliseconds
const DELAY = 1200;
setTimeout(resetAll, DELAY);
// Inner func (a "closure") knows about `listOfCards`
function resetAll(){
// In a loop, applies a "fat arrow" func to each card
listOfCards.forEach(
(card) => card.classList.remove("open")
)
}
};
*{ margin: 0; padding: 0; }
.header{ margin: 0.3rem; font-size: 1.1rem; }
.score{ margin: 0.3em; font-weight: bold; }
.card{
width: 14em; margin: 0.3em; padding: 0.1em 0.3em;
border-radius: 0.5em; border: 1px solid grey;
}
.open{ background-color: lightskyblue; }
<h1 class="header">The Password Game</h1>
<div class="score">Score: <span>0</span> </div>
<hr/>
<div class="card" data-type="1"> Never use..? (1) </div>
<div class="card" data-type="1"> Name and Birthday (1) </div>
<div class="card" data-type="2"> Tell password to..? (2) </div>
<div class="card" data-type="2"> No one (2) </div>
<div class="card" data-type="3"> Always change PW..? (3) </div>
<div class="card" data-type="3"> After a data breach (3) </div>

CSS Typing Effect not spanning multiple lines

I have had a look around this site and can't seem to find a fix for this issue.
I have this typing effect that scrolls through various sentences in an array, I need it to wrap onto a second line whenever it reaches a certain width but if I remove the white-space: wrap you can see all of the text just on multiple lines and it expands the width slowly, I need it to only wrap after a certain width is reached.
I tried adding white-space: wrap at a certain point in the animation, however, this doesn't seem to have the desired effect.
Code here:
.type-container {
min-height: 100vh;
background: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: relative;
}
.content {
color: var(--white);
margin: 0 auto;
width: 28%;
}
ul li {
display: inline-block;
overflow: hidden;
height: 100px;
font-size: 29px;
position: absolute;
left: 36%;
box-sizing: border-box;
animation: typing 5s steps(100, end) infinite;
white-space: nowrap;
}
#cursor {
display: inline-block;
vertical-align: middle;
width: 3px;
height: 34px;
background: var(--white);
animation: blink 1s steps(100, end) infinite;
margin-left: 3px;
}
#keyframes typing {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}
#keyframes blink {
0% {
background: transparent;
}
50% {
background: var(--white);
}
}
<div className="type-container">
<div className="content">
<h1 className="heading-1">
Our Management Team has over 50 years of experience:
</h1>
<div className="typed-section">
<ul className="heading-2">
<li id="typed-word">
{sentence}
<div id="cursor" />
</li>
</ul>
</div>
</div>
</div>

Why is the vertical scroll getting stuck in mobile view?

The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In #media screen and (max-width: 952px) {} I have overflow-x: hidden;, width: 100%;, and position: absolute; set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add overflow-y: scroll; and overflow-y: auto; to the code and even added !important and I am still experience vertical scroll issues.
You can view a live version of the webpage at jacpel5.dreamhosters.com
HTML for the 'Photography' page:
<!DOCTYPE html>
<html>
<head>
<title>Jacki Leigh - Photography</title>
<!-- title appears in browser tab -->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
<!-- linking to myStyleSheet.css file for styling -->
<link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
<!-- font family "Operetta 8" -->
<link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
<!-- font family "Relation Two" -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
<meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<header>
<div class="container">
<a href="index.html">
<img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
</a>
<nav>
<ul class="nav-links">
<!-- <li>Home</li> -->
<li>Photography</li>
<li>Graphic Design</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<br />
<div class="section">
<ul class="grid">
<li>
<div class="box p-cov1">
<a href="concert-photography.html">
<div class="info">
<h3>Concert Photography</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov2">
<a href="light-painting.html">
<div class="info">
<h3>Light Painting</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov3">
<a href="portraits-people.html">
<div class="info">
<h3>Portraits & People</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov4">
<a href="nature.html">
<div class="info">
<h3>Nature</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov5">
<a href="animals.html">
<div class="info">
<h3>Animals</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov6">
<a href="special-events.html">
<div class="info">
<h3>Special Events</h3>
</div></a>
</div>
</li>
</ul>
</div>
<br />
<br />
<footer>
<a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
<img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
</a>
<a href="https://www.instagram.com/jacki_leigh/" target="_blank">
<img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
</a>
<br />
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
</style>
</footer>
<script src="javascript/app.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #FCFCFC;
font-family: "operetta 8", serif;
font-weight: 300;
font-style: normal;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
}
.container { /* logo and text/links in navigation bar */
width: 90%;
margin: 0 auto;
}
.headerLogo { /* logo in navigation bar */
/* floating logo to the left */
/* full canvas photo is 2057px wide & 643px in height */
float: left;
padding: 10px 0; /* gives a little space on top and bottom of the logo */
width: 164.56px; /* 8% of the full size (2057px) */
height: 51.44px; /* 8% of the full size (643px) */
}
header {
background: #E9E9E9;
opacity: 1;
}
header::after {
/* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
content: '';
display: table;
clear: both;
}
nav {
/* floating list (menu) items to the right */
float: right;
}
nav ul {
margin: 0; /* takes space off top and bottom header background */
padding: 0; /* takes space off the sides */
list-style: none; /* removes bullet point styling */
}
nav li {
display: inline-block; /* places list horizontal, not vertical */
margin-left: 30px; /* specifies the spacd between the list items */
padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
}
nav ul li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
nav ul li a:hover {
color: #3f003c;
}
nav ul li a::before {
content: '';
display: block;
height: 2px;
width: 100%;
background-color: #3f003c;
position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
top: 0;
width: 0%;
transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
}
nav ul li a:hover::before {
width: 100%;
}
a {
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
display: static;
z-index: 200;
}
.burger div {
width: 25px;
height: 3px;
background-color: #3f003c;
margin: 5px;
transition: all 0.5s ease; /* adds transition to Burger turning into an X */
}
.mainLogo {
/* class for logo/image on index page */
width: 75%;
height: 60%;
opacity: 0.9;
}
.mainLogoDiv {
/* class for the div containing the logo/image on index page */
text-align: center;
}
.section {
max-width: 1920px;
margin: 0 auto;
padding: 1% 2%;
}
.grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.grid:after {
clear: both;
}
.grid:after, .grid:before {
content: '';
display: table;
}
.grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 20px;
}
.box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 5px;
-webkit-transition: 0.3s ease-in-out,
-webkit-transform 0.3 ease-in-out;
-moz-transition: 0.3s ease-in-out,
-moz-transform 0.3 ease-in-out;
transition: 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.05);
}
.p-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/mj-cover.jpg);
}
.p-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/lp-cover.jpg);
}
.p-cov3 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/pp-cover.jpg);
}
.p-cov4 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/la-cover.jpg);
}
.p-cov5 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/an-cover.jpg);
}
.p-cov6 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/se-cover.jpg);
}
.g-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/dc-cover.jpg);
}
.g-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/ww-cover.jpg);
}
.info {
position: absolute;
width: 100%;
height: 100%;
}
.info h3 {
font-family: "Operetta 8", serif;
font-weight: 400;
color: #e0e0e0;
text-shadow: 1px 1px black;
font-size: 20px;
margin: 0 auto;
padding: 85px 0px 0 0px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.photoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
grid-gap: 5px 5px;
width: 90%;
margin: auto;
}
.photoColumn {
display: block;
}
.contact {
margin: 0 auto;
}
.contact-me {
text-align: center;
}
.contact-me img {
width: 60%;
max-width: 450px;
padding: 10px 0 20px 0;
}
form {
text-align: left;
font-size: 13.5px;
padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
margin: 0 auto;
line-height: 30px;
height: 80%;
width: 70%;
max-width: 500px;
overflow: auto;
text-transform: uppercase;
color: #3f003c;
}
input[type=submit] {
background-color: #3f003c;
color: #E9E9E9;
border-radius: 5px;
height: 35px;
width: 100px;
font-size: 15px;
text-transform: uppercase;
}
/* the below syntax removes the blue border in the input boxes when selected */
input:focus, textarea:focus, select:focus {
outline-offset: 0px !important;
outline: none !important;
}
/* the two syntaxes below change the color of highlighted text */
::selection {
background: #E9E9E9; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #E9E9E9; /* Gecko Browsers */
}
/* the below set of syntaxes removes the background color when autofill is used */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#name {
height: 30px;
width: 100%;
}
#email {
height: 30px;
width: 100%;
}
#message {
height: 60px;
width: 100%;
}
footer {
color: #7F7887;
text-align: center;
text-decoration: none;
}
.fbIcon {
/* class for the facebook icon in the footer */
padding: 0 2px 8px 0;
width: 25px;
height: 25px;
opacity: .7;
}
.instaIcon {
/* class for the instagram icon in the footer */
padding: 0 0 8px 0;
width: 25px;
height: 25px;
opacity: 0.7;
}
#media screen and (max-width: 952px) {
.nav-links {
position: absolute;
right: 0px;
height: 100%;
top: 70px;
background-color: #E9E9E9;
opacity: .95;
display: flex;
flex-direction: column;
align-items: center;
width: 35%;
transform: translateX(100vw);
transition: transform 0.5s ease-in;
z-index: 100;
}
.nav-links li {
margin-left: 0px;
opacity: 0;
padding: 45px 0px 0px 0px;
}
.nav-links li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav-links li a:hover {
color: #3f003c;
}
nav ul li a::before {
display: none;
}
.burger {
display: block;
padding: 20px;
z-index: 150;
position: static;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
/* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
/* this takes the middle hamburger line and turns it to 0 opacity */
.toggle .line2 {
opacity: 0;
}
/* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();

I think your problem is that you're targeting both the html and body elements with your scroll settings #media screen and (max-width: 952px) - this causes a scroll within a scroll effect, which can be buggy in mobile views.
I was able to fix this in the inspector by removing html moving the body styles outside of the media query and changing the transform line in the .nav-links styles from 100% to 100vw. They should work the same in this scenario but vw (viewport width) seems to work better.
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
#media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}

Replace one large word with an entire menu (css/js?)

For this personal sight I'm building I want it to be fairly simple. I have a big title in the middle of the screen, just one word, and when you hover over it I want it to be replaced with a menu -- basically a white box the size of the title with links on it.
The problem with other solutions I've seen is mostly people want to replace one word with just one word, I could do that. But I want to change the contents drastically, and I can't quite figure it out. I'm having trouble getting it to be positioned correctly, as well as there is a LOT of flickering happening.
Confused about how I'd add a whole list of links into the css "content" or js "data" fields.
Here is a jsfiddle of what i'm working with so far as well as my code.
<div class = "container">
<div class = "main">
<span class = "maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class = "menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
and my CSS:
body{
background-color: #ED0349;
font-family:Arial;
color:#DBFA05;
}
h1{
text-align: center;
font-size:200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
#titre{
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.container{
}
.main{
display: inline-block;
padding-left: 50%;
}
.container .menu { display: none; }
.container:hover .maintit {display:none;}
.container:hover .menu {display: inline-block;}

Put the "word" and the menu inside a parent, centered (displayed one on top of the other.
When the parent is not hovered, display the word and hide the menu.
When the parent is hovered, display the menu and hide the word.
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: white;
}
.main > * {
display: block;
width: 100%;
height: auto;
overflow: visible;
text-align: center;
transition: opacity .3s cubic-bezier(.5,0,.3,1);
position: relative;
}
.main:hover .maintit,.main .menu {
opacity: 0;
}
.main:hover .menu {
opacity: 1;
}
body {background-color: gray;}
.main > .menu {
position: absolute;
max-width: 100%;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>

The main trouble while hovering is the sizing of .container, which is monitored, changes.
Solution: Give .container a height and width and the flickering stops.
body {
background-color: #ED0349;
font-family: Arial;
color: #DBFA05;
}
h1 {
text-align: center;
font-size: 200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
.container {
width: 100%;
height: 100vh;
}
#titre {
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.main {
display: inline-block;
padding-left: 50%;
}
.container .menu {
display: none;
}
.container:hover .maintit {
display: none;
}
.container:hover .menu {
display: inline-block;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

JavaScript auto type writer function - javascript

Related

Make a card burger menu dropdown

my if-statement is not doing what it want it to

CSS Typing Effect not spanning multiple lines

Why is the vertical scroll getting stuck in mobile view?

Replace one large word with an entire menu (css/js?)

Categories

Resources