I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens.
I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul elements.
I can't find the mistake myself. Is there even a simpler way?
const bar = document.getElementById('bar');
const nav = document.getElementById('navbar');
const close = document.getElementById('close');
if (bar){
bar.addEventListener("click", () => {
nav.classList.toggle("active");
})
}
if (close) {
close.addEventListener("click", () => {
nav.classList.remove("active")
})
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#100;200;300;400;500;600; 700; 800; 900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
h2{
font-size: 46px;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20px;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px;
}
p {
font-size: 16px;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-m1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*Header Start*/
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #E3E6F3;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 20%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
align-items: center;
}
/*Home Page*/
#hero{
background-image: url("Web images/img/hero4.png");
height: 99vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 80px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button {
background-image: url("Web images/img/button.png");
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#hero button:hover {
color: #46bff7;
}
#Feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#Feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#Feature .fe-box:hover {
box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}
#Feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#Feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#Feature .fe-box:nth-child(2) h6 {
background-color: #cdebbc;
}
#Feature .fe-box:nth-child(3) h6{
background-color: #d1e8f2;
}
#Feature .fe-box:nth-child(4) h6 {
background-color: #cdd4f8;
}
#Feature .fe-box:nth-child(5) h6 {
background-color: #f6dbf6;
}
#Feature .fe-box:nth-child(6) h6{
background-color: #fff2e5;
}
#product1 {
text-align: center;
}
#product1 .pro-container{
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
transition: 0.2s ease;
position: relative;
}
#product1 .pro:hover {
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro .des {
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span {
color: #606063;
font-size: 12px;
}
#product1 .pro .des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 13.7px;
}
#product1 .pro .des i {
font-size: 12px;
color: rgb(241, 186, 7);
}
#product1 .pro .des h4 {
padding-top: 7px;
font-size: 15px;
font-weight: 700;
color: #088178;
}
#product1 .pro .cart {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #cce7d0;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("Web images/img/banner/b2.jpg") ;
height: 40vh;
width: 100%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
}
#banner h4 {
color: white;
font-size: 18px;
font-weight: 600;
}
#banner h2 {
color: white;
padding: 10px 0;
}
#banner h2 span{
color: red;
}
#banner button {
border: none;
font-size: 15px;
font-weight: 400;
background-color: white;
padding: 15px 20px ;
border-radius: 10px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#banner button:hover {
background: #088178;
color: #fff;
}
#sm-banner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sm-banner .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b17.jpg");
border-radius: 2px;
height: 50vh;
width: 48%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 30px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}
#sm-banner .BB2 {
background-image: url("Web images/img/banner/b10.jpg");
}
#sm-banner .banner-box h4 {
color: #fff;
}
#sm-banner .banner-box h2 {
color: #fff;
font-size: 33px;
}
#sm-banner .banner-box span {
color: #fff;
font-size: 15px;
}
#sm-banner .banner-box .cont {
color: #fff;
font-size: 15px;
padding-bottom: 10px;
}
#sm-banner .banner-box button {
border: 1px solid;
font-size: 15px;
font-weight: 400;
background-color: transparent;
color: #fff;
padding: 10px 26px ;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#sm-banner .banner-box:hover button {
color: #fff;
border: 1px solid #088178;
background-color: #088178;
}
#banner-lil {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 80px;
}
#banner-lil .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b18.jpg");
border-radius: 2px;
min-height: 30%;
height: 30vh;
width: 30%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 20px;
margin-bottom: 20px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.09);
cursor: pointer;
}
#banner-lil .BB3 {
background-image: url("Web images/img/banner/b4.jpg");
}
#banner-lil .BB4 {
background-image: url("Web images/img/banner/b7.jpg");
}
#banner-lil .BB4 h4 {
font-size: 18px;
text-align: left;
}
#banner-lil h4 {
color: #fff;
font-weight: 900;
font-size: 20px;
text-align: left;
}
#banner-lil h3 {
color: #d41515;
font-weight: 800;
font-size: 14px;
}
#newsletter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-image: url("Web images/img/banner/b14.png") ;
background-repeat: no-repeat;
background-position: center;
background-color: #041e42;
background-position: 20% 30%;
justify-content: center;
align-items: center;
justify-content: space-between;
}
#newsletter h4 {
font-size: 22px;
font-weight: 700;
color: #fff;
}
#newsletter p {
font-size: 15px;
font-weight: 600;
color: #818ea0;
}
#newsletter span {
color: #f38c05;
}
#newsletter .form {
display: flex;
flex-direction: row;
width: 40%;
}
#newsletter input {
height: 3.125em;
padding: 0 1.25em;
font-size: 14px;
width: 100%;
border: 1px solid transparent;
border-radius: 4px;
outline: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#newsletter button {
border: none;
font-size: 15px;
font-weight: 600;
background-color:#088178;
white-space: nowrap;
color: #fff;
padding: 12px 20px ;
border-radius: 3px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .col {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
footer .logo {
margin-bottom: 30px;
}
footer h4 {
font-size: 14px;
padding-bottom: 20px;
}
footer p {
font-size: 13px;
margin: 0 0 8px 0;
}
footer a {
font-size: 13px;
text-decoration: none;
color: #222;
margin-bottom: 10px;
}
footer .follow {
margin-top: 20px;
}
footer .follow i {
color: #3b5998;
padding-right: 4px;
cursor: pointer;
}
footer .follow i:nth-child(2) {
color: #00acee;
}
footer .follow i:nth-child(3) {
color: #8a3ab9;
#E60023
}
footer .follow i:nth-child(4) {
color: #E60023;
}
footer .install .row img {
border: 1px solid #088178;
border-radius: 6px;
cursor: pointer;
}
footer .install img {
margin: 10px 0 15px 0;
}
footer a:hover{
color: #088178;
}
footer .copyright {
width: 100%;
text-align: center;
}
/*Shop Page*/
/*Single Product*/
/*Blog Page*/
/*About Page*/
/*Cart Page*/
/*Start Media Query*/
#media (max-width:799px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
right: -300px;
height: 100vh;
width: 300px;
background-color: #E3E6F3;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 80px 0 0 10px;
transition: 0.3s;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px
}
#mobile {
display: flex;
align-items: center;
}
#mobile i {
color: #1a1a1a;
font-size: 24px;
padding: 20px;
}
#close {
position: absolute;
top: 30px;
left: 30px;
color: #222;
font-size: 24px;
}
}
<script src="https://kit.fontawesome.com/8848882185.js"></script>
<section id="header">
<img src="C:\Website Projects\Second Project=E-Commerce\Web images\logotxt.png" class="logo" alt="E-commerce logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-cart-shopping"></i></li>
<li>Log In</li>
<i class="fa-solid fa-xmark"></i>
</ul>
</div>
<div id="mobile">
<i class="fa-solid fa-cart-shopping"></i>
<i id="bar "class="fa-solid fa-bars active"></i></a>
</div>
</section>
you have so little mistake that you unable to see it. be careful next time.your a tag in doesn't have an opener and also has space in your id
<i id="bar "class="fa-solid fa-bars active"></i></a>
thus your
const bar = document.getElementById("bar");
is null
change it to
<a><i id="bar"class="fa-solid fa-bars active"></i></a>
everything else looks fine.
const bar = document.getElementById("bar");
const nav = document.getElementById("navbar");
const close = document.getElementById("close");
if (bar) {
bar.addEventListener("click", () => {
console.log("bar click event");
nav.classList.toggle("active");
});
}
if (close) {
close.addEventListener("click", () => {
nav.classList.remove("active");
});
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#100;200;300;400;500;600; 700; 800; 900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
h2{
font-size: 46px;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20px;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px;
}
p {
font-size: 16px;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-m1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*Header Start*/
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #E3E6F3;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 20%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
align-items: center;
}
/*Home Page*/
#hero{
background-image: url("Web images/img/hero4.png");
height: 99vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 80px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button {
background-image: url("Web images/img/button.png");
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#hero button:hover {
color: #46bff7;
}
#Feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#Feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#Feature .fe-box:hover {
box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}
#Feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#Feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#Feature .fe-box:nth-child(2) h6 {
background-color: #cdebbc;
}
#Feature .fe-box:nth-child(3) h6{
background-color: #d1e8f2;
}
#Feature .fe-box:nth-child(4) h6 {
background-color: #cdd4f8;
}
#Feature .fe-box:nth-child(5) h6 {
background-color: #f6dbf6;
}
#Feature .fe-box:nth-child(6) h6{
background-color: #fff2e5;
}
#product1 {
text-align: center;
}
#product1 .pro-container{
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
transition: 0.2s ease;
position: relative;
}
#product1 .pro:hover {
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro .des {
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span {
color: #606063;
font-size: 12px;
}
#product1 .pro .des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 13.7px;
}
#product1 .pro .des i {
font-size: 12px;
color: rgb(241, 186, 7);
}
#product1 .pro .des h4 {
padding-top: 7px;
font-size: 15px;
font-weight: 700;
color: #088178;
}
#product1 .pro .cart {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #cce7d0;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("Web images/img/banner/b2.jpg") ;
height: 40vh;
width: 100%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
}
#banner h4 {
color: white;
font-size: 18px;
font-weight: 600;
}
#banner h2 {
color: white;
padding: 10px 0;
}
#banner h2 span{
color: red;
}
#banner button {
border: none;
font-size: 15px;
font-weight: 400;
background-color: white;
padding: 15px 20px ;
border-radius: 10px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#banner button:hover {
background: #088178;
color: #fff;
}
#sm-banner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sm-banner .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b17.jpg");
border-radius: 2px;
height: 50vh;
width: 48%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 30px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}
#sm-banner .BB2 {
background-image: url("Web images/img/banner/b10.jpg");
}
#sm-banner .banner-box h4 {
color: #fff;
}
#sm-banner .banner-box h2 {
color: #fff;
font-size: 33px;
}
#sm-banner .banner-box span {
color: #fff;
font-size: 15px;
}
#sm-banner .banner-box .cont {
color: #fff;
font-size: 15px;
padding-bottom: 10px;
}
#sm-banner .banner-box button {
border: 1px solid;
font-size: 15px;
font-weight: 400;
background-color: transparent;
color: #fff;
padding: 10px 26px ;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#sm-banner .banner-box:hover button {
color: #fff;
border: 1px solid #088178;
background-color: #088178;
}
#banner-lil {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 80px;
}
#banner-lil .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b18.jpg");
border-radius: 2px;
min-height: 30%;
height: 30vh;
width: 30%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 20px;
margin-bottom: 20px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.09);
cursor: pointer;
}
#banner-lil .BB3 {
background-image: url("Web images/img/banner/b4.jpg");
}
#banner-lil .BB4 {
background-image: url("Web images/img/banner/b7.jpg");
}
#banner-lil .BB4 h4 {
font-size: 18px;
text-align: left;
}
#banner-lil h4 {
color: #fff;
font-weight: 900;
font-size: 20px;
text-align: left;
}
#banner-lil h3 {
color: #d41515;
font-weight: 800;
font-size: 14px;
}
#newsletter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-image: url("Web images/img/banner/b14.png") ;
background-repeat: no-repeat;
background-position: center;
background-color: #041e42;
background-position: 20% 30%;
justify-content: center;
align-items: center;
justify-content: space-between;
}
#newsletter h4 {
font-size: 22px;
font-weight: 700;
color: #fff;
}
#newsletter p {
font-size: 15px;
font-weight: 600;
color: #818ea0;
}
#newsletter span {
color: #f38c05;
}
#newsletter .form {
display: flex;
flex-direction: row;
width: 40%;
}
#newsletter input {
height: 3.125em;
padding: 0 1.25em;
font-size: 14px;
width: 100%;
border: 1px solid transparent;
border-radius: 4px;
outline: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#newsletter button {
border: none;
font-size: 15px;
font-weight: 600;
background-color:#088178;
white-space: nowrap;
color: #fff;
padding: 12px 20px ;
border-radius: 3px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .col {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
footer .logo {
margin-bottom: 30px;
}
footer h4 {
font-size: 14px;
padding-bottom: 20px;
}
footer p {
font-size: 13px;
margin: 0 0 8px 0;
}
footer a {
font-size: 13px;
text-decoration: none;
color: #222;
margin-bottom: 10px;
}
footer .follow {
margin-top: 20px;
}
footer .follow i {
color: #3b5998;
padding-right: 4px;
cursor: pointer;
}
footer .follow i:nth-child(2) {
color: #00acee;
}
footer .follow i:nth-child(3) {
color: #8a3ab9;
}
footer .follow i:nth-child(4) {
color: #E60023;
}
footer .install .row img {
border: 1px solid #088178;
border-radius: 6px;
cursor: pointer;
}
footer .install img {
margin: 10px 0 15px 0;
}
footer a:hover{
color: #088178;
}
footer .copyright {
width: 100%;
text-align: center;
}
/*Shop Page*/
/*Single Product*/
/*Blog Page*/
/*About Page*/
/*Cart Page*/
/*Start Media Query*/
#media (max-width:799px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
right: -300px;
height: 100vh;
width: 300px;
background-color: #E3E6F3;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 80px 0 0 10px;
transition: 0.3s;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px
}
#mobile {
display: flex;
align-items: center;
}
#mobile i {
color: #1a1a1a;
font-size: 24px;
padding: 20px;
}
#close {
position: absolute;
top: 30px;
left: 30px;
color: #222;
font-size: 24px;
}
}
<script src="https://kit.fontawesome.com/8848882185.js"></script>
<section id="header">
<a href="#"
><img
src="C:\Website Projects\Second Project=E-Commerce\Web images\logotxt.png"
class="logo"
alt="E-commerce logo"
/></a>
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<i class="fa-solid fa-cart-shopping"></i>
</li>
<li>Log In</li>
<i class="fa-solid fa-xmark"></i>
</ul>
</div>
<div id="mobile">
<i class="fa-solid fa-cart-shopping"></i>
<i id="bar" class="fa-solid fa-bars active"></i>
</div>
</section>
Related
I hosted a react project on github through vercel 2 weeks ago and yesterday I tried updating the files but it kept saying failed deployment and it keeps giving me this error failed deployment on vercel
I tried adding some space between the display and flex but nothing worked and when I tried updating another file I still got the same error
Try this css, you had the character U+00a0 multiple times which caused the parsing errors
.blogs-page{
display: flex;
flex-direction: column;
}
.blogs-page h1{
color: black;
text-align:center;
}
.form-blog-container input,
.form-blog-container textarea,
.form-blog-container label,
.form-blog-container select,
.form-blog-container button,
.form-blog-container header,
.form-blog-container p,
.form-blog-container option{
color:black;
}
.form-blog-container option{
background: black;
color: white;
}
.pop-up_box {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(38, 185, 190, 0.664);
z-index: 2;
}
.pop-up_box p,
.pop-up_box header {
color: black;
}
.pop-up_box .pop-up{
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
max-width: 400px;
width: 100%;
transform: translate(-50%, -40%);
}
.pop-up .content{
border-radius: 5px;
background: white;
padding:10px;
}
.content header,
.settings ul li{
display: flex;
align-items: center;
justify-content: space-between;
}
.pop-up .content header{
padding: 15px 25px;
border-bottom: 1px solid #ccc;
}
.content header p{
font-size: 20px;
font-weight: 500;
z-index: 5;
}
.content header i{
/* Temporary border */
padding: 20px;
color: red;
cursor: pointer;
font-size: 23px;
}
.content .form-blog-container {
margin: 15px 25px 35px;
}
.content .form-blog-container input{
margin-bottom: 10px;
height: 30px;
}
.content .form-blog-container textarea{
height: 150px;
resize: none;
padding: 8px 6px;
}
.form-blog-container label{
font-size: 18px;
margin-bottom:6px ;
}
.form-blog-container select{
border-radius: 5px;
outline: none;
margin-bottom: 6px;
}
.content .form-blog-container :where(input, textarea){
width:100%;
outline: none;
font-size: 17px;
padding: 0 5px;
border-radius: 4px;
border: 1px solid grey;
}
.content .form-blog-container .add_blog{
width: 100%;
height: 50px;
background: black;
color: white;
margin-top: 4px;
cursor: pointer;
font-size: 17px;
outline: none;
box-shadow: 5px 5px red;
margin-bottom: 20px;
border-radius: 5px;
z-index: 100;
transition: all .5s ease-in-out ;
}
.content .form-blog-container .add_blog:hover{
margin-top: 7px;
margin-left: 7px;
box-shadow: none;
transition: all .5s ease-in-out ;
}
.pop-up_box,
.pop-up_box .pop-up{
opacity: 0;
pointer-events: none;
transition: all .25s ease;
}
.pop-up_box.show,
.pop-up_box.show .pop-up{
opacity: 1;
pointer-events:auto;
}
.add{
color:#222;
cursor:pointer;
background:transparent;
border:1px solid black;
padding:15px;
transition:.3s ease-in-out;
display: flex;
align-self: center;
text-align: center;
margin: 1rem auto;
}
.add:hover{
background:#222;
color:white;
}
.categories{
display: flex;
justify-content: space-between;
background: transparent;
flex-wrap: wrap;
}
.cat{
text-align: center;
padding: 5px;
border: 1px solid black;
width: 70px;
height: 40px;
cursor: pointer;
margin-top: 1rem;
}
.cat:hover {
background: black;
border-color: white;
color: white;
transition: .3s ease-in-out;
}
.cat h6:hover{
color: white;
transition: .3s ease-in-out;
}
.cat h6{
margin-top: 12px;
}
.categories h6{
color: black;
}
.blogs-container{
display: flex;
flex-wrap: wrap;
width: 100rem;
}
.blog-post{
border: 1px solid black;
border-radius: 20px;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 1rem;
background-image:linear-gradient(rgba(0, 0, 0, 0.432), rgba(0, 5, 5, 0.7)), url('../../../public/images/church5.jpg');
background-position:unset ;
background-size:cover ;
background-repeat: no-repeat;
}
.blog h1,
.blog h6{
color: white;
}
.blog h1{
text-align: center;
}
.blog h6{
align-self: flex-start;
margin-left: 15px;
}
.blog p{
text-align: center;
color: white;
width: 250px;
}
.blog h6{
padding-right: 30px;
}
.bottom{
display:flex;
/* justify-content: space-evenly; */
/* position: relative; */
/* top: 5rem; */
}
.blog .btn-blog{
color: white;
cursor: pointer;
outline: none;
border: 1px solid black;
text-align: center;
margin: 1rem auto;
padding: 10px;
border-radius: 5px;
background: linear-gradient(to bottom left, rgba(255, 0, 0, 0.432),rgba(255, 255, 255, 0.7));
display: flex;
justify-self: right;
}
.btn-blog:hover{
background: white;
color: black;
transition: .3s ease-in-out;
}
.blog-post i{
font-size:15px;
cursor: pointer;
padding:5px;
color:rgb(0, 0, 0);
z-index:50;
padding-right: 8px;
}
.blog-post-actions{
display:flex;
padding-top: 5px;
}
.blog-post-actions button{
margin-left: 10px;
list-style: none;
}
#media (max-width: 500px) {
.blogs{
/* justify-content: center;
align-items: center; */
width: 20rem;
}
}
#media (max-width: 600px) {
.blogs{
width: 30rem;
}
}
I'm new to HTML/CSS3, so in order to strengthen the skills I've learned during an online course I'm trying to clone homepages of famous websites.
Now, I've almost completed the homepage of flickr.com but I've made a stupid mistake: I tested it only on Firefox (where it works smoothly on smartphone, tablet and desktop 1920*1080p view). Then I tried it on Chrome and...it was a disaster. My footer section was not working:
in tablet and desktop view, there's a gap between the footer and the bottom of the page I can't fix;
but although I can't fix the problem on my own, I managed to identify the problem: it's the little arrow near the word 'English' inside the footer (I need it cause when I click on it the language menu will pop up as in the original website). And I'm almost sure that this has to do with the 'position:absolute' propriety I assigned to that arrow in my style.css file (but I can't remove that property, otherwise it'll look ugly) ;
I tried working on padding and margin in any way I could think about, but I can't solve the problem and I can't tell if it's just bad styling or if the problem is connected to bad framing in my index.html file.
I don't know if someone is willing to give a look to my work. Any help will be really appreciated.
Thank you.
index.html:
<div class="header-container">
<header>
<a class="logo" href="#">
<img class="flickr" src="images/flickr-logo-2435.svg" alt="#">
<p>flickr</p>
</a>
<nav>
<div class="search-box">
<input class="search-txt" type="text" name="search" id="searchbar"
placeholder="Photos, people or groups">
<a class="search-icon" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
<div class="nav-button-A">
Log In
</div>
<div class="nav-button-B">
Sign Up
</div>
</nav>
</header>
</div>
<main>
<div class="wrapper">
<h1>Find your inspiration.</h1>
<h2>Join the Flickr community, home to tens of billions of photos and 2 million groups.</h2>
<div class="start-button">
Start for free
</div>
</div>
</main>
<footer>
<div class="footer-nav1">
<div class="footer-button">About</div>
<div class="footer-button">Jobs</div>
<div class="footer-button">Blog</div>
<div class="footer-button">Developers</div>
<div class="footer-button">Guidelines</div>
<div class="footer-button">Help</div>
<div class="footer-button">Help forum</div>
<div class="footer-button">English
<img class="arrow" src="/images/pngegg.png" alt="line down">
<div class="language-nav" style="display: none;">
<a class="language" href="#">Italiano</a>
<a class="language" href="#">French</a>
<a class="language" href="#">Espanol</a>
<a class="language" href="#">Deutsch</a>
<a class="language" href="#">日本語</a>
<a class="language" href="#">Portugues</a>
<a class="language" href="#">한국어</a>
</div>
</div>
</div>
<div class="footer-nav2">
<div class="footer-button">Privacy</div>
<div class="footer-button">Terms</div>
<div class="footer-button">Cookies</div>
<div class="footer-button">
<p>SmugMug+Flickr.</p>
<p>Connecting people through photography.</p>
</div>
<div class="social-nav">
<a class="social-button">
<i class="fa-brands fa-square-facebook"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-twitter"></i>
</a>
<a class="social-button">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
</div>
</footer>
</body>
</html>
style.css:
html {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 20s ease-in-out infinite;
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
}
#keyframes animate {
0%,
100% {
background-image: url(images/0.jpg);
}
25% {
background-image: url(images/1.jpg);
}
50% {
background-image: url(images/4.jpg);
}
75% {
background-image: url(images/3.jpg);
}
}
/* GLOBAL MOBILE */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.header-container {
position: fixed;
width: 100%;
}
header {
background-color: rgba(53, 57, 57, 0.376);
height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 20px 0 15px;
}
.logo {
display: flex;
text-decoration: none;
}
.flickr {
width: 25px;
height: 25px;
align-items: center;
padding-bottom: 5px;
box-sizing: border-box;
}
.logo p {
font-size: 1.6rem;
font-weight: 700;
margin-left: 5px;
color: white;
}
.search-box {
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f364000;
height: 34px;
border-radius: 3px;
padding: 0px 0px;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding: 0;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 0px;
}
.search-icon {
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
width: 34px;
height: 34px;
border-radius: 0px 3px 3px 0px;
background: #2f364000;
display: flex;
justify-content: center;
align-items: center;
transition: 0.1s;
text-decoration: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 130px;
padding: 0 0 0 3px;
}
.search-box:hover>.search-icon {
font-size: 1rem;
color: #4e5052;
background: #ffffffbd;
}
nav {
display: flex;
}
a {
color: white;
text-decoration: none;
}
.nav-button-A,
.nav-button-B {
font-size: 1rem;
font-weight: 500;
}
.nav-button-A {
border: 2px solid white;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B {
/*show only in TABLET and DESKTOP mode*/
display: none;
margin-right: 15px;
border: 1.5px solid white;
background-color: white;
border-radius: 3px;
margin-left: 10px;
padding: 7px 10px;
}
.nav-button-B a {
color: #000000;
}
.nav-button-B a:hover {
color: #8b8c8d;
}
main {
height: 100vh;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: block;
text-align: center;
color: white;
padding: 0 30px;
}
.wrapper h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 18px;
box-sizing: border-box;
}
/*to reactivate in TABLET and DESKTOP mode*/
.wrapper h2 {
display: none;
font-size: 1.56rem;
font-weight: 500;
margin: 30px 40px 50px 40px;
line-height: 1.9rem;
box-sizing: border-box;
}
.wrapper a {
font-size: 1.45rem !important;
color: black;
font-weight: 700;
background-color: white;
padding: 17px 23px;
border-radius: 3px;
box-sizing: border-box;
}
.start-button {
margin-top: 40px;
}
.start-button a:hover {
color: #8b8c8d;
}
footer {
background-color: #000000;
color: white;
font-weight: 300;
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: block;
padding: 0px 10px 0px 10px;
}
.footer-nav2 {
display: block;
padding: 0px 10px 15px 10px;
}
.footer-button {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.734);
text-align: left;
padding: 20px 20px;
font-weight: 300;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-button p {
padding: 3px 0px;
text-align: center;
}
.footer-button:hover {
color: white;
font-weight: 700;
}
.language-nav {
position: absolute;
margin-top: -240px;
margin-left: -5px;
margin-bottom: 100px;
}
.language {
display: block;
margin-left: 10px;
padding: 10px 20px;
color: #000000;
background-color: white;
}
.language:first-child {
border-radius: 4px 4px 0 0;
}
.language:last-child {
border-radius: 0 0 4px 4px;
}
.language:hover {
background-color: #e6eaec;
}
.arrow {
position: absolute;
width: 15px;
padding-left: 5px;
color: white;
display: inline-block;
}
.arrow:hover>.language-nav {
display: block;
}
.social-nav {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box
}
.social-button:hover {
color: white;
font-weight: 700;
}
/* TABLET */
#media (min-width: 444px) {
.logo {
font-size: 2rem;
}
.search-box:hover>.search-txt {
width: 420px;
padding-left: 10px;
}
.nav-button-B {
display: inline-block;
padding: 7px 20px;
}
.nav-button-A {
border: none;
padding: 7px 15px 7px 5px;
}
main {
height: calc(100vh - 110px);
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
padding: 0 40px;
box-sizing: border-box;
}
.wrapper h2 {
display: block;
}
.start-button {
margin-top: 70px;
}
.wrapper a {
font-size: 1.35rem;
font-weight: 700;
background-color: white;
padding: 18px 30px;
border-radius: 3px;
}
.footer {
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.257);
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0px 10px 0px 10px;
}
.footer-button {
font-size: 0.85rem;
border-bottom: none;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 15px;
}
.footer-button p {
display: inline;
}
.language-nav {
position: absolute;
display: inline;
margin-top: -265px;
margin-left: -45px;
margin-bottom: 100px;
}
}
/* DESKTOP 1920x1080p */
#media (min-width: 1080px) {
nav {
width: 95%;
}
.search-box {
justify-content: center;
width: 85%;
margin-right: auto;
margin-left: auto;
}
.search-txt {
border-radius: 3px 0px 0px 3px;
border: none;
padding-left: 15px;
background: #ffffffbd;
outline: none;
color: #4e5052;
font-size: 12px;
transition: 0.1s;
line-height: 34px;
width: 1400px;
}
.search-icon {
display: none;
}
.search-box:hover>.search-txt {
display: inline-block;
width: 1400px;
padding-left: 15px;
}
main {
/* background-color: beige; */
height: calc(100vh - 60px);
width: 100%;
margin: 0 auto;
}
.wrapper {
padding: 0 600px;
box-sizing: border-box;
}
.wrapper h2 {
line-height: 2.1rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
margin: 0 auto;
padding: 0 auto;
}
.footer-nav1 {
display: flex;
justify-content: space-between;
flex-grow: 2;
border-bottom: none;
}
.footer-nav2 {
display: flex;
justify-content: space-between;
flex-grow: 1;
align-items: center;
padding: 0 auto;
margin-left: 25px;
box-sizing: border-box;
}
.footer-nav2>.footer-button p:last-of-type {
display: none;
}
.footer-button {
padding: 5px 10px;
box-sizing: border-box;
}
.social-nav {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.social-button {
font-size: 1.5rem;
color: #808080;
padding: 0 auto;
box-sizing: border-box;
}
.footer-nav2>.footer-button {
border-bottom: none;
padding: 20px 37px;
box-sizing: border-box;
}
.social-nav {
text-align: center;
max-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.social-button {
color: #808080;
display: inline-block;
padding: 10px 20px;
box-sizing: border-box;
}
}
jquery-nav.js:
$(document).ready(function(){
$('.arrow').on('click', function(){
$('.language-nav').toggle();
})
});
You were exactly right! It was that English word causing problems... well not really the English word, it was the div surrounding it.
You have to close that div, from this:
<div class="footer-button">English
To this:
<div class="footer-button">English</div>
Hello I would like to ask how to link the selection menu to the button, which will next generate random text from the selected category
let cernyhumor = ['hodne', 'malo', 'dobre']
let skola = ['pero', 'tuzka', 'guma']
let zeny = ['hezka', 'mala', 'hodna']
let zajda = ['dezo', 'chytry', 'vzorny']
body{
margin: 0;
padding: 0;
background:#222;
display: flex;
justify-content: center;
align-items: center;
min-height: 10vh;
font-family: 'Roboto', sans-serif;
}
select {
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
outline:0;
box-shadow:none;
border:0 ;
background: #5c6664;
background-image: none;
flex: 1;
padding: 0 .5em;
color:#fff;
cursor:pointer;
font-size: 1em;
font-family: 'Open Sans', sans-serif;
}
select::-ms-expand {
display: none;
}
.select {
position: relative;
display: flex;
width: 20em;
height: 3em;
line-height: 3;
background: #5c6664;
overflow: hidden;
border-radius: .25em;
}
.select::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
padding: 0 1em;
background: #2b2e2e;
cursor:pointer;
pointer-events:none;
transition:.25s all ease;
}
.select:hover::after {
color: #23b499;
}
.gen{
width: 70%;
height: 80%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.btn {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 0.6em;
color: #e74c3c;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: auto;
margin-top: 100px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn:hover, .btn:focus {
color: #fff;
outline: 0;
}
.third {
border-color: #3C2B87;
color: #fff;
box-shadow: 0 0 40px 40px #3C2B87 inset, 0 0 0 0 #3C2B87;
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.third:hover {
box-shadow: 0 0 10px 0 #3C2B87 inset, 0 0 10px 4px #3C2B87;
}
.joke{
width: 80%;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
background:#222;
text-align: center;
font-size: 25px;
color: white;
}
<div class="select">
<select name="format" id="format">
<option value="1" id="cernyhumor">Černý humor</option>
<option value="2" id="skola">Škola</option>
<option value="3" id="zeny">Ženy</option>
<option value="4" id="zajda">zajda</option>
</select>
</div>
<div class="gen">
<span>
<button class="btn third" id="button">Generovat</button>
<div id="text" class="joke"></div>
</span>
</div>
Code Pen Example
Please check if it is what you want
let cernyhumor = ['hodne', 'malo', 'dobre']
let skola = ['pero', 'tuzka', 'guma']
let zeny = ['hezka', 'mala', 'hodna']
let zajda = ['dezo', 'chytry', 'vzorny']
const optionList = [cernyhumor, skola, zeny, zajda ]
const select = document.getElementById('format')
const button = document.getElementById('button')
const randomText = document.getElementById('text')
const generateOption = () => {
const optionPickedIndex = select.value - 1
const ranIndex = Math.floor(Math.random() * optionList[optionPickedIndex].length)
const randomOptions = optionList[optionPickedIndex][ranIndex]
randomText.innerHTML = randomOptions
}
button.addEventListener('click',generateOption, false)
body{
margin: 0;
padding: 0;
background:#222;
display: flex;
justify-content: center;
align-items: center;
min-height: 10vh;
font-family: 'Roboto', sans-serif;
}
select {
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
outline:0;
box-shadow:none;
border:0 ;
background: #5c6664;
background-image: none;
flex: 1;
padding: 0 .5em;
color:#fff;
cursor:pointer;
font-size: 1em;
font-family: 'Open Sans', sans-serif;
}
select::-ms-expand {
display: none;
}
.select {
position: relative;
display: flex;
width: 20em;
height: 3em;
line-height: 3;
background: #5c6664;
overflow: hidden;
border-radius: .25em;
}
.select::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
padding: 0 1em;
background: #2b2e2e;
cursor:pointer;
pointer-events:none;
transition:.25s all ease;
}
.select:hover::after {
color: #23b499;
}
.gen{
width: 70%;
height: 80%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.btn {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 0.6em;
color: #e74c3c;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: auto;
margin-top: 100px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn:hover, .btn:focus {
color: #fff;
outline: 0;
}
.third {
border-color: #3C2B87;
color: #fff;
box-shadow: 0 0 40px 40px #3C2B87 inset, 0 0 0 0 #3C2B87;
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.third:hover {
box-shadow: 0 0 10px 0 #3C2B87 inset, 0 0 10px 4px #3C2B87;
}
.joke{
width: 80%;
margin: 0 auto;
margin-top: 50px;
padding: 20px;
background:#222;
text-align: center;
font-size: 25px;
color: white;
}
<div class="select">
<select name="format" id="format">
<option value="1" id="cernyhumor">Černý humor</option>
<option value="2" id="skola">Škola</option>
<option value="3" id="zeny">Ženy</option>
<option value="4" id="zajda">zajda</option>
</select>
</div>
<div class="gen">
<span>
<button class="btn third" id="button">Generovat</button>
<div id="text" class="joke"></div>
</span>
</div>
I am working on 2 separate html file for the same project, eventually those files will go into the home page. My problem is the css files, as they have many in common element, which however they look different and will clash.
My question is, what is the best way to merge this css file so not to have any issue?
################## THIS IS CSS FILE 1 ##################
#import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif
}
html {
height: 100%
}
body {
height: 100%;
display: flex;
flex-direction: column;
visibility: visible
}
a {
text-decoration: none;
font-size: 12px;
}
li {
padding: 10px;
cursor: pointer;
background-color: transparent;
color: #ffffff;
}
li:hover {
background-color: #87cefa;
color: #003580;
}
h4 {
text-align: center;
font-size: 33px;
font-weight: 333;
color: #003580;
padding: 12px
}
/* ---------------------------------------
-------------- COMPONENTS ----------------
----------------------------------------*/
label {
padding: 6px;
font-size: 15px;
font-weight: 700;
text-align: center;
width: 120px;
color: #000
}
ul {
list-style-type: none;
padding-left: 21px;
}
ul.horizontal,
ul.horizontal a {
display: flex;
list-style-type: none;
color: white;
}
button {
background-color: #ffffff;
border: 1px solid #003580;
color: #003580;
align-items: center;
border-radius: 6px;
padding: 0 25px;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap;
resize: none;
outline: 0;
width: 180px;
height: 45px
}
button:hover {
background-color: #87cefa;
color: #003580;
}
i {
margin: 0 12px 0 12px;
}
img {
max-width: 150px;
max-height: 150px
}
input {
width: 150px;
align-self: center;
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
resize: none;
outline: 0;
background-color: transparent;
border: transparent;
text-align: center
}
::placeholder {
color: #FFFFFF;
opacity: 1;
}
select,
select.white {
font-size: 15px;
background-color: transparent;
border: transparent;
font-weight: 700;
padding: 6px;
cursor: pointer;
}
select.white {
color: #FFFFFF;
}
select.white:focus {
color: #003580;
}
/* ---------------------------------------
--------------- LAYOUT -----------------
----------------------------------------*/
header {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 9px;
background-color: #003580;
height: 45px;
}
.content_container {
display: flex;
flex-wrap: nowrap
}
.side_navbar {
height: 90vh;
flex: 1;
background-color: #003580;
border-bottom: 6px solid #003580
}
.right_content {
display: block;
flex: 4
}
.all_sections_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.all_sections_container section {
margin-bottom: 18%;
display: none;
width: 90%;
height: 90%;
}
.profile_wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.properties_wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap
}
.properties_wrapper div {
font-size: 12px;
font-weight: 333;
text-align: center
}
.utilities_wrapper,
.favorites_wrapper,
.settings_wrapper,
.offers_wrapper,
.messages_wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
}
.settings_wrapper button,
.utilities_wrapper button {
margin-top: 21px;
}
################## THIS IS CSS FILE 2 ##################
#import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif
}
html {
height: 100%
}
body {
height: 100%;
display: flex;
flex-direction: column;
visibility: visible
}
h4 {
margin: 9px;
padding-left: 9px;
padding-top: 6px;
border-top: 1px solid #eef0f1
}
h5 {
color: #fff;
font-size: 12px
}
h5.h5_dropdown {
margin: 5px 0 -5px 0
}
label {
padding-left: 12px;
cursor: pointer
}
button {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 8px;
height: 45px;
text-align-last: center;
margin-right: 10px;
resize: none;
outline: 0;
cursor: pointer;
min-width: 100px
}
button.red {
cursor: pointer;
background-color: #e00000;
color: #fff;
border: thin solid #e00000
}
button.red:hover {
background-color: #f23d3d
}
input[type=checkbox] {
cursor: pointer
}
input[type=number],
input[type=text] {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 8px;
height: 45px;
text-align-last: center;
margin-right: 10px;
resize: none;
outline: 0;
min-width: 300px;
text-align: center;
cursor: auto
}
select {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 9px;
height: 45px;
text-align-last: center;
resize: none;
outline: 0;
cursor: pointer;
padding: 3px;
margin: 6px
}
.select_city {
margin-right: -15px
}
.search_box_category_selector_flex_container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
max-width: 51%;
margin-left: 21%
}
.search_box_category_selector_flex_container div {
border: 1px solid gray;
flex: 1;
font-size: 12px;
font-weight: 333;
border-radius: 6px;
padding: 12px;
cursor: pointer;
margin-bottom: -6px;
margin-right: 3px
}
.search_box_flex_main_container {
display: flex;
justify-content: center;
flex-wrap: nowrap;
height: 99px;
background-color: #2b2d2e;
align-items: center
}
.city_select_dropdown_container {
z-index: 2
}
.buildings_select_container {
z-index: 1
}
.bedroom_range_form_container,
.more_form_container,
.price_range_form_container {
position: absolute
}
.price_range_frame {
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
border: thin solid #000;
border-radius: 6px;
padding: 6px 0 6px 7px
}
.bedroom_range_frame {
border: thin solid #000;
background-color: #fff;
padding: 6px 0 6px 8px;
border-radius: 6px
}
.more_form {
color: #000;
background-color: #fff;
display: flex;
flex-direction: column
}
.more_form_container {
margin: 4px 4px;
padding: 4px;
height: 350px;
overflow-x: hidden;
overflow-y: auto;
text-align: justify;
border-bottom: 1px solid #000;
border-left: 1px solid #000
}
.more_form_container div {
padding-left: 12px
}
.more_form_bottom_buttons_container {
display: flex;
justify-content: center;
padding: 15px
}
est way to merge this css file so not to have any issue?
I would recommend trying this tool
CSS Compressor & Minifier
It has lots of options, you can compress and/or minify CSS.
Copy both CSS files into a CSS input
Turn on Sort selectors and properties
Obtain output
Manually remove duplicates
Re-enter input
Compress or minify your output
When I decrease my screen size the buttons start to overlap, i was hoping to decrease the breakpoints so that when i decrease the screen size the buttons will collapse. All of my buttons eventually fall into place however i was just wanting them to change as the screen moves. Any help on this would be appreciated, thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS grid example</title>
<link rel="stylesheet" href="style/styles.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="grid">
<header>Manchester United F.C.</header>
<figure> <img src="images/untlogo.png" style="width:60px;height:60px" >
</figure>
<nav id="menu-nav">
<div class="menu">Menu</div>
<ul>
<li>Home</li>
<br>
<li>FAQ</li>
<br>
<li>Form</li>
<br>
<li>Links</li>
</nav>
<main class="main-home">
<div class="wrapper-home">
<div class="wrapper-button">
<section class="home-left">
<a href="https://www.manutd.com/en/news/first-team">
<article class="ole">
<img src="images/ole.jfif" alt="Ole">
<div class="text-wrap">
<h4>Team News</h4>
<p>"Ole Gunnar Solskjaer has freshened up his United side to face
Reading in the Emirates FA Cup".
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/marcus-rashford-learning-
from-solskjaer-and-ronaldo">
<article class="rash">
<img src="images/rash.jfif" alt="Rash">
<div class="text-wrap">
<h4>Rashfords Breakthrough</h4>
<p>" Why Rashford had shades of Solskjaer and Ronaldo in his game at
Newcastle"
</p>
</div>
</article>
</a>
</section>
<section class="home-right">
<a href="https://www.manutd.com/en/news/detail/vote-for-man-united-goal-
of-
the-month-for-december-2018">
<article class="goals">
<img src="images/goals.jfif" alt="goals">
<div class="text-wrap">
<h4>Goals from the month</h4>
<p>"Watch the eight United goals on our shortlist for December and
cast your vote."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/first-team">
<article class="players">
<img src="images/team.jpg" alt="Players">
<div class="text-wrap">
<h4>Player Profiles</h4>
<p>" Click here to look at the offical 2018/19 Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/paul-pogba-wins-man-utd-
player-of-the-month-award-for-december-2018">
<article class="potm">
<img src="images/potm.jpg" alt="POTM">
<div class="text-wrap">
<h4>Player of the Month</h4>
<p>"Fans have picked Paul Pogba as United's top performer of the past
month."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/ole-gunnar-solskjaer-on-
the-
new-year-and-facing-newcastle-united">
<article class="newyear">
<img src="images/newyear.jfif" alt="NewYear">
<div class="text-wrap">
<h4>Ole's 2019 Plan</h4>
<p>" Ole tells MUTV why he thinks this new year will be enjoyable for
fans"
</p>
</div>
</article>
</a>
</section>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/women">
<article class="women">
<img src="images/women.jfif" alt="Women">
<div class="text-wrap">
<h4>Womens Team</h4>
<p>"Click here to look at the offical 2018/19 womens Manchester United
squad!"</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/reserves">
<article class="newyear">
<img src="images/u23s.jpg" alt="u23s">
<div class="text-wrap">
<h4>u23s Team</h4>
<p>"Click here to look at the offical 2018/19 u23s Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/legends">
<article class="legends">
<img src="images/legends.jpg" alt="Legends">
<div class="text-wrap">
<h4>Manchester United Legends</h4>
<p>"Click here to look at all of the past Manchester United legend
players"
</p>
</div>
</article>
</a>
</div>
</main>
<nav id="menu-nav2">
</nav>
<script src=".js/script.js"></script>
</body>
</html>
**Style sheet**
* {
padding: 0;
margin: 0;
border: 0;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
}
body {
margin: 0;
font-family: Avenir, Helveltica, Arial, san-serif;
font-weight: bold;
font-size: 1.5rem;
color: black;
background-image: url("../images/stad.jpg");
background-size: cover;
}
/* use of * wildcard selector known to be slow so only for demo! */
body > * {
padding: 1em;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns:repeat (5, 1fr);
grid-template-rows: repeat(5, 1fr);
/*grid-gap: 6px; */
grid-template-areas:
"header header"
"menu menu";
}
header {
grid-area: header;
background: darkred;
box-shadow: 0px 4px 5px 0px darkred;
color: white;
}
.menu {
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
#menu-nav2 {
grid-area: side;
background-image: url("../images/pogba3.png");
background-size: cover;
box-shadow: -5px -30px 5px 0px darkred;
}
nav {
grid-area: menu;
margin: 0;
padding: 0;
background: darkred;
box-shadow: 4px 0px 5px 0px darkred;
}
nav a {
text-decoration: none;
color: white;
}
nav ul {
list-style: none;
text-align: center;
width: 100%;
}
nav li {
height: 20px;
width: 100%;
text-align: center;
transition: box-shadow 1s;
}
nav ul li a {
padding: 0;
margin: 0;
}
nav li:hover {
box-shadow: inset 0 -100px 0 0 black;
color: black;
}
nav li:hover a {
color: darkred;
}
figure {
grid-area: figure;
background: darkred;
margin: 0;
padding-top: 10px;
text-align: center;
}
figure img {
height: 50px;
width: 50px;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
/*height: 25vh;*/
}
/* Start of form */
.main-form {
width: 100%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #333;
}
form {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #C2C2C2;
width: 25%;
height: 600px;
padding: 1%;
box-shadow: 0 5px 20px black;
}
.form {
width: 400px;
}
.form_name {
width: 90%;
}
.email {
width: 90%;
}
.enquiry {
width: 90%;
height: 20%;
margin: 3%;
}
.button_form {
width: 20%;
height: 6%;
cursor: pointer;
}
#media screen and (min-width: 300px) {
.grid {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10vh 50vh 50vh ;
grid-template-areas:
"figure header header"
"menu menu menu "
"content content content"
"content content content"
"side side side";
}
}
#media screen and (min-width: 600px) {
.grid {
grid-template-columns: 1fr 9fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-rows: 10vh 100vh 1vh;
grid-template-areas:
"figure header header"
"menu content side"
"menu content side";
}
}
nav {
justify-content: flex-start;
}
nav a {
padding: 1em;
}
input {
margin: 3%;
}
/* Home page content */
#searchForm {
height: auto;
width: 50%;
}
.wrapper-home {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* start of home */
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.main-home {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.wrapper-button {
height: 80%;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-home article {
height: 10vmin;
width: 100%;
background-color: rgba(166, 14, 22, 0.5);
border-bottom: 1vmin solid rgba(166, 14, 22, 1);;
border-radius: 15px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 100px;
}
.text-wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.text-wrap p {
font-size: 1.5vmin;
}
.text-wrap h4 {
font-size: 2.1vmin;
}
.main-home section {
width: 40vmin;
margin: .5%;
}
.ole img {
height: 100%;
width: auto;
}
.ole h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.ole p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash img {
height: 100%;
width: auto;
}
.rash h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals img {
height: 100% ;
width: auto;
}
.goals h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players img {
height: 100%;
width: auto;
}
.players h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm img {
height: 100%;
width: auto;
}
.potm h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear img {
height: 100%;
width: auto;
}
.newyear h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem img {
height: 100%;
width: auto;
}
.prem h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women img {
height: 100%;
width: auto;
}
.women h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s img {
height: 100%;
width: auto;
}
.u23s h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends img {
height: 100%;
width: auto;
}
.legends h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.main-home article:hover {
transform: scale(1.1);
}
.video-wrapper {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.video-wrapper iframe {
padding: 10px;
}
.wiki-header {
color: #DBE3DF;
}
#demo {
background-color: white;
text-decoration: none;
}
.txt {
font-size: 2.1vmin;
}
/* End of home page content */
.faq-main {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* start of faq */
.faq-main h2{
color:darkred;
}
.faq-main p{
color:darkred;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
adding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: grey;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/*end of FAQ*/
/* start of links.html */
.wrapper-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-contact {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.main-contact article {
height: 12vmin;
width: 50vmin;
background-color: rgba(51, 51, 51, 0.5);
border: 1vmin solid black;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 5%;
}
.main-contact section {
margin: 2.5%;
}
.facebook img {
height: 100%;
width: auto;
}
.facebook h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.gmail img {
height: 50%;
width: auto;
margin-left: 5%;
}
.gmail h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 2.5vmin;
margin: 10%;
}
.twitter img {
height: 100%;
width: auto;
}
.twitter h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.number img {
height: 70%;
width: auto;
margin-left: 5%;
}
.number h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.button-area {
display: flex;
justify-content: center;
align-items: center;
}
.contact_me img {
height: 70%;
width: auto;
margin-left: 5%;
}
.contact_me h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.main-contact article:hover {
transform: scale(1.1);
}
/* end of links.html */
/* footer */
footer {
grid-area: footer;
width: 100%;
height: 5%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
order: 3;
}
footer a {
color: #9fff80;
margin-left: 1vmin;
margin-right: 1vmin;
font-size: 2vmin;
}
.icons {
display: flex;
align-items: center;
height: 100%;
}
i {
color: white;
cursor: pointer;
font-size: 2vmin;
}
i p {
display: none;
font-size: 2vmin;
transition: all 2s;
margin-left: 1vmin;
}
i:hover {
color: #9fff80;
}
i:hover p {
color: #9fff80;
display: inline-block;
}
.cr {
display: flex;
align-items: center;
margin-right: 10vmin;
width: 25%;
height: 100%;
}
How do i adjust the breakpoint of my buttons so that they will collapse into a column?
short answer is:
display: flex;
flex-direction: column;
justify-content: center;