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
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 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>
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>
So check this out:
//Code for button a donde quieres ir
//Start var
var nearby_search;
function nearby_choose(choice){
nearby_search = choice;
}
//Overlay code
function nearby_search_on() {
document.getElementById("nearby_search").style.display = "block";
}
function nearby_search_off() {
document.getElementById("nearby_search").style.display = "none";
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_R.ttf';
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RB.ttf';
font-weight: bold;
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RI.ttf';
font-style: italic;
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline:none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
#nearby_search {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="left-bar">
<div>
<button onClick="nearby_search_on()" class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
<div id="nearby_search">
<button onClick="nearby_search_off()" class="adondequieresir" style="background-color: #A288E3;"><p>¿a dónde quieres ir?</p></button>
</div>
</div>
</div>
</body>
</html>
I'm trying to create something like a dropdown menu, but more stylish. So I decided not to use a tag and instead use javascript variables and buttons to accomplish my goal. But the point is, when the button is clicked, I want it to turn to lighter, darken everything behind and (eventually) add other buttons with options to choose from. And the snippet above is my (faultish) approach. For example, I actually used two buttons to try and simulate the color change of virtually the same "¿a donde quieres ir" button. How can I responsively align these two buttons? What would be the cleanest way to accomplish what I want as a whole? I would kindly appreciate any help :)
I think you can use one button, separate it from the background, and then use 'z-index' to put the button up.
function nearby_search_toggle() {
var tmpDisplay = document.getElementById("tmpBg");
var tmpBtn = document.getElementById("tmpBtn");
if (tmpDisplay.style.display == 'block') {
tmpDisplay.style.display = "none";
tmpBtn.classList.remove('active');
} else {
tmpDisplay.style.display = "block";
tmpBtn.classList.add('active');
}
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline: none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
position: relative;
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
z-index: 2;
}
.adondequieresir.active {
background-color: white;
color: red;
}
#tmpBg {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
<div class="flex-container">
<div class="left-bar">
<div>
<div id="tmpBg"></div>
<button onClick="nearby_search_toggle();" class="adondequieresir" id="tmpBtn">
<p>¿a dónde quieres ir?</p>
</button>
</div>
</div>
</div>
I created a custom table to display some key-value-pairs. It works fine for simple examples with 2 Strings but there are also pairs with an array as value. The entries should get listed one below the other in the same table row. It should look something like this:
It seems that the array is not recornized as in the HTML Code
<span ng-show="Array.isArray(data[attr.id])">
Can you guys help me to display the data properly?
Here is my Code:
var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope' ,function($scope){
$scope.isArray = angular.isArray;
$scope.query = {};
$scope.query.attributes = [{'name': 'key_1', 'id': 'key_1'},
{'name': 'key_2', 'id': 'key_2'}];
$scope.data = {'key_1': 'value_1', 'key_2': ['value_2', 'value_3', 'value_4', 'value_6', 'value_7', 'value_8']};
}]);
.content-wrapper{
font-family: 'Roboto';
background: #EDEFF2;
height: calc(~"100vh - 198px");
width: calc(~"100vw - 300px");
float: left;
.content-navbar{
//background: green;
.content-navbar-content{
padding-top: 20px;
margin-left: 20px;
font-size: 25px;
}
}
.content-controlls{
padding-top: 20px;
padding-bottom: 20px;
margin-left: 20px;
//background: blue;
}
.content-contentview{
padding-top: 20px;
margin-left: 20px;
padding-right: 300px;
//background: yellow;
.table-bordered{
border: none;
//border-top: 1px solid #999999;
font-size: 13px;
.table-header-roboto{
color: #999999;
}
.table-body-roboto{
color: #4D4D4D;
#info{
font-size: 18px;
color: #4D4D4D;
padding-top: 2px;
padding-left: 10px;
}
#file{
font-size: 18px;
color: #606166;
padding-top: 2px;
}
.status{
width: 50px;
}
}
}
}
}
.header-status,
.header-info,
.header-task {
display: inline-block;
width: 50px;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
height: 24px;
display: flex;
align-items: center;
}
.header-task {
border: none;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.row-status,
.row-info {
display: inline-block;
width: 50px;
padding-left: 6px;
padding-right: 5px;
}
.header-status span {
margin-left: 0px;
}
.header-info span {
margin-left: 4px;
}
.row-task,
.header-task {
width: 1102px;
padding-left: 6px;
padding-right: 5px;
}
.custom-header-content {
border: none;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding-top: 5px;
padding-bottom: 5px;
color: #999999;
display: flex;
align-items: center;
}
.custom-header-content span {}
.custom-row-content {
border: none;
height: 48px;
border-bottom: 1px solid #CCCCCC;
color: #4D4D4D;
display: flex;
align-items: center;
}
.row-status span i {
padding-bottom: 0px;
margin-top: 3px;
margin-left: 8px;
}
.row-info span i {
padding-bottom: 0px;
margin-top: 3px;
margin-left: 8px;
}
.custom-table {
width: 1200px;
margin: 50px;
}
body {
background: #EDEFF2;
font-family: 'Roboto';
font-size: 13px;
}
.view-navigation {
padding-left: 50px;
//padding-top: 10px;
padding-bottom: 10px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
.view-navigation .counter {
font-size: 13px;
line-height:21px;
vertical-align: top;
color: #4D4D4D;
margin-left: 15px;
}
.view-navigation span {
padding-bottom: 0px;
display: inline-block;
}
.view-navigation .material-icons {
font-size: 21px;
vertical-align:top;
color: #A8A8A7;
cursor: pointer;
cursor: hand;
}
#hoverfinger{
cursor: pointer;
cursor: hand
}
.key, .value{
display: inline-block;
padding-left: 5px;
padding-right: 5px;
font-size: 13px;
height: 24px;
display: flex;
align-items: center;
}
.key{
width: 450px;
font-weight: bold;
}
.value{
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="TestApp">
<div class="custom-table" ng-controller="TestCtrl">
<div class="custom-row">
<div class="custom-row-content" ng-repeat="attr in query.attributes">
<div class="key"><span>{{attr.name}}</span></div>
<div class="value">
<span ng-show="isArray(data[attr.id])">
<span ng-repeat="objects in data[attr.id] track by $index">
{{objects}}<br>
</span>
</span>
<span ng-show="!isArray(data[attr.id])">
{{data[attr.id]}}
</span>
</div>
</div>
</div>
</div>
</div>
UPDATE
The rseults are now displayed one below the other but if the length of the array grows, the array-objects are displayed floating over the border of the row. So how to change the height of the row according to the length of the array?
Array.isArray(data[attr.id]) won't do the trick.
Instead You can put angular.isArray on the scope like below.
$scope.isArray = angular.isArray;
and use it inline as
<div ng-show="isArray(array)"></div>
Here is the Working fiddle
Hope this helps :)