briancodex / html-css-website-v1 Goto Github PK

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

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');

});

Hello, first off let me say that I am fairly new to Github so I might be missing something.

But I can't find where any source code files are given, just 4 image files?

I'm trying to follow along, but I have some bug and comparing with what you have means meticulously rewinding the video to find where you literally type each statement.

Thanks, Mike

Hey there , I'm on the middle of the you amazing Tutorial but i got stuck as when i click on the toggle bar it does not work its just blank, its suppose to show the contents atleast if not the transition.......i was wondering if anyone can take a peek and help sort it.....

Here is my HTML file
`

This is my CSS file.....

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

.navbar {
background: #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-gen{
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: #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: 80px;
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 my js File......

#`const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');

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

I was following along just fine but when I got to the p1, p2 and header I couldn't seem to get them to show especially in color
this is the style.css tell me if I am doing something wrong.

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

}

.navbar {
background: #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;
-webkit-text-color: transparent;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}

.fa-gem{
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:#f77062;
color:#fff;
}

.button:hover{
background:#4783ff;
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__items{
      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: 80px;
      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);

}

/* Hero Section CSS*/
.main{
background-color: #141414;
}

.main__containner{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-self: center;
margin: 0 auto;
height: 90vh;
background-color: #141414;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0 50px;
}

.main__content h1{
font-size: 4rem;
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;
}

.main__content h2{
font-size: 4rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}

.main__content p{
margin-top: 1 rem;
font-size: 2 rem;
font-weight: 700;
color:#fff;
}
.main__btn{
font-size: 1rem;
background-image:linear-gradient(to top,#f77062 0%, #fe5196 100%);
padding: 14px 32px;
Border: none;
border-radius: 4px;
color: #fff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35rem;
outline: none;
}

.main__btn a{
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}

.main__btn :after{
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover{
color:#fff;
}

.main__btn:hover::after{
width: 100%;
}

.main__img--containner{
text-align: center;

}

I followed the tutorial and even went to the source code to copy and paste the code into my code, however the logo is not showing up for me. I am getting errors with the webkit and moz properties. Any ideas why I am having this issue?

This is the code:
#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;
}