I am creating a small quiz app but I have applied css but the css is not working. I don't know why. Instead of showing elements in the middle of page it is showing elements in left bottom. Please tell me what should be the changes in css or in HTML. Or if the css is right please let me know how to middle all the elements in the page.
:root {
background-color: #ecf5ff;
font-size: 62.5%;
}
*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
h1,h2,h3,h4{
margin-bottom: 1rem;
}
h1{
font-size: 5.4rem;
color: #56a5eb;
margin-bottom: 5rem;
}
h1 > span{
font-size: 2.4rem;
font-weight: 500;
}
h2{
font-size: 4.2rem;
font-weight: 700;
margin-bottom: 4rem;
}
h3{
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80 rem;
margin: 0 auto;
}
.container > *{
width: 100%;
}
.flex-column{
display: flex;
flex-direction: column;
}
.flex-center{
justify-content: center;
align-items: center;
}
.justify-center{
justify-content: center;
}
.text-center{
text-align: center;
}
.hidden{
display: none;
}
/* BUTTONS */
.btn{
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #56a5eb;
margin-bottom: 1rem;
text-decoration: none;
color: #56a5eb;
background-color: white;
}
.btn:hover{
cursor: pointer;
box-shadow:100 100 0.4rem 0 rgba(86, 185, 235, 0.5);
transform: translate(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover{
cursor: not-allowed;
box-shadow: none;
transform: none;
}
<!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="app.css" />
<title>Quick Quiz</title>
</head>
<body>
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
<h1>Quick Quiz!</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High Scored</a>
</body>
</html>
This is the output kindly click here to see the output.
You have an issue with the HTML
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Quick Quiz!</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High Scored</a>
</div>
</div>
All you have to do is put your elements inside <div id="home" class="flex-center flex-column"></div> this div.
Related
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: relative;
width: 100%;
height: 80px;
background-color: rgb(153, 153, 153);
display: flex;
justify-content: space-between;
align-items: center;
}
header a img{
width: 100px;
padding-top: 20px;
}
header #menu-bar {
list-style-type: none;
}
header ul li{
display: flex;
list-style: none;
}
header ul li a{
text-decoration: none;
padding: 0 10px;
color: white;
font-size: 18px;
text-transform: uppercase;
letter-spacing:1.4px;
}
.nav-bar{
border: 2px solid white;
text-align: center;
margin-right: 10px;
display:none;
}
.fa-bars{
color: white;
font-size: 18px;
padding: 5px;
}
.active{
display: block;
background:red
}
#media only screen and (max-width:600px){
header ul {
display:none;
margin-top: 200px;
width: 100vw;
text-align: center;
background:skyblue;
}
.nav-bar{
display:block;
}
header ul li{
flex-direction: column;
}
header ul li a{
color: black;
padding-top: 10px;
}
.navbar {
display: none;
}
}
</head>
<body>
<!-- Adding Navbar -->
<header>
<a href="#logo" class="logo">
<img src="./img/Logo.png" alt="logo">
</a>
<ul id="menu-bar">
<li>
Home
About
Services
Contact
</li>
</ul>
<i class=" fas fa fa-bars"></i>
</header>
<script>
let mainNav = document.getElementById('menu-bar');
let navBarToggle = document.getElementById('navBtn');
<!--I am facing a problem in this line-->
navBarToggle.addEventListener('click', function (){
mainNav.classList.add('active');
});
</body>
</html>
Please view the snippet. Everything seems to be running as it should be. Your navbar turns into hamburger-menu just as instructed to do so in your media-queries set at a max-width: 600px
For snippet viewing purposes I changed your media max-width to 1000px
let mainNav = document.getElementById('menu-bar');
let navBarToggle = document.getElementById('navBtn');
// I am facing a problem in this line
navBarToggle.addEventListener('click', function (){
mainNav.classList.add('active');
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: relative;
width: 100%;
height: 80px;
background-color: rgb(153, 153, 153);
display: flex;
justify-content: space-between;
align-items: center;
}
header a img{
width: 100px;
padding-top: 20px;
}
header #menu-bar {
list-style-type: none;
}
header ul li{
display: flex;
list-style: none;
}
header ul li a{
text-decoration: none;
padding: 0 10px;
color: white;
font-size: 18px;
text-transform: uppercase;
letter-spacing:1.4px;
}
.nav-bar{
border: 2px solid white;
text-align: center;
margin-right: 10px;
display:none;
}
.fa-bars{
color: white;
font-size: 18px;
padding: 5px;
}
.active{
display: block;
background:red
}
#media only screen and (max-width:1000px){
header ul {
display:none;
margin-top: 200px;
width: 100vw;
text-align: center;
background:skyblue;
}
.nav-bar{
display:block;
}
header ul li{
flex-direction: column;
}
header ul li a{
color: black;
padding-top: 10px;
}
.navbar {
display: none;
}
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Adding Navbar -->
<header>
<a href="#logo" class="logo">
<img src="./img/Logo.png" alt="logo">
</a>
<ul id="menu-bar">
<li>
Home
About
Services
Contact
</li>
</ul>
<i class=" fas fa fa-bars"></i>
</header>
</body>
</html>
I'm new here and I hope someone can help me.
I started learning programming 1 week ago and I started practicing by creating a website.
All good until mobile responsive part comes along.
I can't get the mobile menu to work with JS.
I've tried many different things. I also tried jQuery too but nothing worked.
I'm feeling very dumb and I hope I can get help.
Thank you very much!
(sorry if my English is bad; I'm still learning)
const btn_mobile = document.getElementsByClassName('.hamburger');
const menu = document.getElementsByClassName('.menu');
btn_mobile.addEventListener('click', function () {
menu.classList.toggle('.active');
})
/*Base Style*/
body{font-family: 'Inter', sans-serif; font-size: 16px;}
a{
text-decoration: none;
}
h1, h2, h3, h4, h5, p{
color: white; padding-bottom: 30px;
}
.big-text{font-size: 70px; font-weight: 900;}
.med-text{font-size: 40px;}
.normal-text{font-size: 20px;}
.small-text{font-size: 14px;}
.intro-text{text-transform: uppercase; font-size: 20px; font-weight: bold;}
.button{
padding: 15px 17px;
background: rgb(85, 85, 226);
color: white;
display:inline-block;
border-radius: 4px;
text-align: center;
}
#media (max-width: 768px){
.big-text{font-size: 40px;}
}
/*HEADER*/
.header{
width: 100%;
position: absolute;
top: 0;
padding: 15px;
display: flex;
max-width: 1350px;
left: 50%;
transform: translateX(-50%);
}
.logo{
}
.hamburger{display: none; }
.menu{
width: 100%;
}
/*align-items aggiusta verticale
jusify-content aggiusta orizontale
*/
.menu li{
display: inline-block;
}
.menu li a{
padding: 10px 20px;
color: white;
display: block;
}
.cta{
display: flex;
align-items: center;
}
#media screen and (max-width: 768px){
.cta{display: none;}
.header{
background: black;
}
.hamburger{
display: block;
height: 30px;
width: 30px;
position: absolute;
top: 40px;
right: 30px;
cursor: pointer;
}
.hamburger span{
background: white;
height: 3px;
width: 100%;
display: block;
margin-bottom: 5px;
}
.menu{ display: flex;
padding-top: 30px;
top: 0;
right: 100%;
position: absolute;
background: black;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
.menu li {
display: flex;
background-color: red;
height: 40px;
width: 140px;
margin: 20px;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.menu.active{
right: 0%;
}
.logo{
width: 100px;
height: 100px;
}
.logo img{
width: 100%;
height: auto;
}
}
/*! Hero section */
.hero{
background: url(bg-test.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
display: flex; width: 100%; align-items: center;
}
.hero__content{
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
#media (max-width: 768px){
}
*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!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>Praise Amogus</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300;400;700;900&display=swap" rel="stylesheet">
<body>
<div class="header">
<div class="logo">
<img src="logo3.png" alt="">
</div>
<ul class="menu">
<li>Home</li>
<li>Contact</li>
<li>About us</li>
</ul>
<div class= "cta">
Button
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!--hero e contenuti-->
<div class="hero">
<div class="hero__content">
<p class="intro-text">Testo Introduttivo</p>
<h1 class="big-text">Titolo</h1>
Button 2
</div>
</div>
<script>src = script.js </script>
</body>
</html>
getElementsByClassName function returns an array. You should add [0] to get the element.
Also you have mistake with adding script to your page. Here is the right variant:
<script type="text/javascript" src="path-to-javascript-file.js"></script>
I am practicing JavaScript and CSS by following a YouTube tutorial.
Here is a link to the GitHub repo, where the script is found.
I typed the entire code by hand, so that I could get more familiar with it. And when opening index.html in my browser, the content is displayed at the very bottom and very right, rather than being centered as it should. I thought maybe I had a typo, so I copied and pasted the entire code from GitHub and refreshed it, still no change. What could I be doing wrong?
Could the issue lie in index, rather than the script?
Here is my code:
:root {
background-color: #ecf5ff;
font-size: 62.5%;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1rem;
}
h1 {
font-size: 5.4rem;
color: #56a5eb;
margin-bottom: 5rem;
}
h1 > span {
font-size: 2.4rem;
font-weight: 500;
}
h2 {
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3 {
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
}
.container > * {
width: 100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
/* BUTTONS */
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #56a5eb;
margin-bottom: 1rem;
text-decoration: none;
color: #56a5eb;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</body>
</html>
Html code has 2 mistakes.
2 div elements don't have any child elements because you closed each element at the wrong position.
This code will work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</div>
</div>
</body>
</html>
You got confused with </div> closing tags. Here's your mistake:
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
...
This way, you are not wrapping internal content in parent containers - div tags.
You need to close the div in sequence.
This is how you need to do it, and your code will work:
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</div>
</div>
Run this snippet to check here:
:root {
background-color: #ecf5ff;
font-size: 62.5%;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1rem;
}
h1 {
font-size: 5.4rem;
color: #56a5eb;
margin-bottom: 5rem;
}
h1 > span {
font-size: 2.4rem;
font-weight: 500;
}
h2 {
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3 {
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
}
.container > * {
width: 100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
/* BUTTONS */
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #56a5eb;
margin-bottom: 1rem;
text-decoration: none;
color: #56a5eb;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</div>
</div>
</body>
</html>
This question already has answers here:
Text that shows an underline on hover
(6 answers)
Closed 2 years ago.
I am trying to create a navigation bar that has an effect when the user hovers over one of the sections. I have already made the navbar, but I am having trouble constructing the underline hover effect. I want it so when the user hovers, a line appears at the bottom indicating they can click it. How can I create this effect? Here is the code I am using, thanks.
*{
margin: 0;
padding: 0;
}
body{
min-height: 200vh;
background-color: blue;;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: serif;
}
header.sticky{
padding: 5px 100px;
background: #fff;
font-family: serif;
}
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: serif;
}
header ul{
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
}
header ul li{
position: relative;
list-style: none;
font-family: serif;
}
header ul li a{
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: serif;
}
header.sticky .logo, header.sticky ul li a{
color: #000;
font-family: serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
</ul>
</header>
</body>
</html>
Add this to your stylesheet:
header ul li a:hover{
text-decoration: underline;
}
By the way, there's no need to define the font for every element - declare it on the body and everything will inherit it.
*{
margin: 0;
padding: 0;
}
body{
min-height: 200vh;
background-color: blue;;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: serif;
}
header.sticky{
padding: 5px 100px;
background: #fff;
font-family: serif;
}
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: serif;
}
header ul{
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
}
header ul li{
position: relative;
list-style: none;
font-family: serif;
}
header ul li a{
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: serif;
}
/* On Hover */
header ul li a:hover {
text-decoration: underline;
}
/* On Hover END */
header.sticky .logo, header.sticky ul li a{
color: #000;
font-family: serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
</ul>
</header>
</body>
</html>
I have been trying to have bins that show up on the right side but they don't appear to have been placed very well, I'm new to CSS, I have looked through the internet and no luck (or I didn't make sense of it).
The bin seems to be not in proportion with the background, and so if I want to make it fill the tag it will just overflow off the box.
#container {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
width: 360px;
background-color: #f7f7f7;
margin: 100px auto;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #FFAFBD;
background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);
background: linear-gradient(to right, #ffc3a0, #FFAFBD);
}
li {
background-color: white;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px ;
box-sizing: border-box;
color: #2980b9;
}
input:focus{
background-color: white;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n){
background-color: #f7f7f7;
}
span {
height: 35px;
width: 40px;
display: inline-block;
margin-right: 20px;
margin: 0 auto;
text-align: center;
color: white;
background-color: #e74c3c;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#plus {
width: 20px;
height: 20px;
float: right;
margin-top: 3px;
}
.remove {
height: 20px;
width: 15px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/CSS/todo.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="">
<title>Trello</title>
</head>
<body>
<div id="container">
<h1>To-do List <img id="plus" src="assets/Plus.png" alt=""></h1>
<input type="text" placeholder="Add New Todo...">
<ul>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Go to potions class</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Buy New Robes</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Visit Hagrid</li>
</ul>
</div>
<script src="assets/JS/lib/Jquery.js"></script>
<script src="assets/JS/Custom/todos.js"></script>
</body>
</html>
Thanks for the help in advance.
Use Flexbox! Give to your <li> and to the <span> a display: flex; This way you can have control of the positioning of its children (in this case your <img>).
li {
display: flex;
}
span {
display: flex;
justify-content: center;
align-items: center;
margin: 0 2px 0 0;
}
Here's a working Codepen.
Here's a nice guide to Flexbox.
How about making you span elements the same height as the li so that the red bg fills up completely?
span {
height: 40px;
}
Just like this?