search

briancodex / html-css-website-v1

Created a simple website using HTML, CSS & Javascript
108 stars 182 forks source link

HTML CSS and Javascript Website #1

Open azozhamed opened 3 years ago

azozhamed commented 3 years ago

hey , I'm on the middle of the Tutorial on that link and yah i having a problem which is when i click on navbar its does not work ... i dont know where the missing .....

this is the html

<!DOCTYPE html>

Next website

this is the css

*{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'kumbh Sans', sans-serif;

}

.navbar {

background-color: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size:1.2rem;
position:sticky;
top: 0;
z-index: 999 ;

}

.navbar__container {

display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 50px;

}

navbar__logo {

background-color: #ff8177; background-image: linear-gradient(to top,#ff0844 0%, #ffb199 100%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color:transparent; -moz-text-fill-color:transparent; display:flex; align-items:center; cursor:pointer; text-decoration:none; font-size:2rem;

}

.fa-gam {

margin-right: 0.5rem;

}

.navbar___menu{ display: flex; align-items: center; list-style: none; text-align: center; }

.navbar___item {

 height: 80px;

}

.navbar__links {

color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;

}

.navbar___btn {

display: flex; justify-content: center; align-items: center; padding: 0 1rem; width: 100%;

}

.button {

display: flex; justify-content: center; align-items: center; text-decoration: none; padding: 10px 20px; height: 100%; width: 100%; border: none; outline: none; border-radius: 4px; background-color: #f77062; color:#fff;

}

.button:hover {

background: #4837ff;
transition: all 0.3s ease;

}

.navbar__links:hover {

color:#f77062; transition: all 0.3s ease;

}

@media screen and (max-width: 960px) {

.navbar__container {

display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;

}

.navbar___menu {

display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0; 
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;

}

.navbar___menu.active {

background: #131313; top:100%; opacity: 1; transition: all 0.5s ease; z-index: 99; height: 50vh; font-size: 1.6rem;

}

navbar__logo {

padding-left: 25px;

}

.navbar__toggle .bar {

width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;

}

.navbar___item {

width: 100%;

}

.navbar___links { text-align: center; padding:2rem; width: 100%; display: table;

}

mobile-menu {

position: absolute; top:20%; right: 5%; transform: translate(5%, 20%);

}

.navbar___btn {

padding-bottom: 2rem;

}

.button { display: flex; justify-content: center; align-items: center; width: 80%; height: 80%; margin: 0;

}

.navbar__toggle .bar { display: block; cursor: pointer; }

mobile-menu.is-active .bar:nth-child(2){

opacity: 0;

}

mobile-menu.is-active .bar:nth-child(1){

transform: translateY(8px) rotate(45deg);

}

mobile-menu.is-active .bar:nth-child(3){

transform: translateY(-8px) rotate(-45deg);

}

}

this is ... js

const menu = document.querySelectorAll('#mobile-menu'); const menuLinks = document.querySelectorAll ('.navbar___menu');

menu.addEventListener('click', function() { menu.classList.toggle('is-active'); menuLinks.classList.toggle('active');

});

Jtzuya commented 3 years ago

Hi there, if you don't mind sharing your html file for this . I might be able to help you fix your mobile menu :) cheers!

azozhamed commented 3 years ago

hey , i actually quite doing this project and start doing a new project.

azozhamed commented 3 years ago

Hi there, if you don't mind sharing your html file for this . I might be able to help you fix your mobile menu :) cheers!

i having a problem with different page in css , can u tell me how to fix it ?

Jtzuya commented 3 years ago

Hi there, if you don't mind sharing your html file for this . I might be able to help you fix your mobile menu :) cheers!

i having a problem with different page in css , can u tell me how to fix it ?

Hi there, sorry for late response. First of all if you create a new page, you need to separate it with another html file. Second, you need to restructure things out again in that particular page. Third, if in your different page are having the same contents on your main page like for example the navbar and footer. you dont need to recreate things out but rather link that style folder into your different page. All in all other pages needs to recreate in other html file and style :)

azozhamed commented 3 years ago

Hi there, if you don't mind sharing your html file for this . I might be able to help you fix your mobile menu :) cheers!

i having a problem with different page in css , can u tell me how to fix it ?

Hi there, sorry for late response. First of all if you create a new page, you need to separate it with another html file. Second, you need to restructure things out again in that particular page. Third, if in your different page are having the same contents on your main page like for example the navbar and footer. you dont need to recreate things out but rather link that style folder into your different page. All in all other pages needs to recreate in other html file and style :)

ok sure thank u , a lot and i wan know something that when i try minimize the browser the img or paragraph and other contents it combine each other , it does not fit the browser .

Jtzuya commented 3 years ago

you need to set a different font size and img width on a particular viewport by using media queries, or now the better way is to use clamp. Try researching about css clamping

azozhamed commented 3 years ago

you need to set a different font size and img width on a particular viewport by using media queries, or now the better way is to use clamp. Try researching about css clamping

alright and thank u again

khaledxaji commented 3 years ago

brother you do too much between beats when you typing Navbar__menu. Hope it helped and thanks for your help the one you shared came to help.