Home > Mobile >  How do I get this css to work with my html?
How do I get this css to work with my html?

Time：01-16

I’m following a tutorial that uses html, css and JavaScript to create a portfolio however none of the css rules are working. When I inspect the page it shows all the css crossed out with warning signs next to them. What can I do?

/*==================== GOOGLE FONTS =======================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
  
/*==================== VARIABLES CSS =======================*/
    :root {
    --header-height: 3 rem;

  /*=========== Colors ============*/
  /* change fovorite color */
  --hue-color: 142; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

  /* HSL color made */
  --first-color: hsl(var(--hue-color), 69%, 61%);
  --first-color-second: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;



  /*============= Font and typography ===============*/
  --body-font: 'Poppins', sans-serif;

  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
   --big-font-size: 2rem;
   --h1-font-size: 1.5rem;
   --h2-font-size: 1.25rem;
   --h3-font-size: 1.125rem;
   --normal-font-size: .938rem;
   --small-font-size: .813rem;
   --smaller-font-size: .75rem;

   /*============ Font Weight ==============*/ 
   --font-medium: 500;
   --font-semi-bold: 600; 


   /*======== Margenes Bottom =============*/
   /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem; 

    /*============ Z index =============*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-model: 1000;


    /* font size for large devices */ 
    @media screen and {min-width: 968px {
        :root {
            --big-font-size: 3rem;
            --h1-font-size: 2.25rem;
            --h2-font-size: 1.5rem;
            --h3-font-size: 1.25rem;
            --normal-font-size: 1rem;
            --small-font-size: .875rem;
            --smaller-font-size: .813rem;
        }
    }


/*============== Variables Dark theme ================*/


/*=============== Button Dark/Light ===================*/



/*========================= BASE ========================*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    scroll-behavior: smooth;
}

body{
    margin: 0 0 var(--header-height) 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

h1,h2,h3,h4{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

/*================ REUSABLE CSS CLASSES ================*/
.section{
    padding: 2rem 0 4rem;
}

.section__title{
    font-size: var(--h1-font-size);
}

.section__subtitle{
    display: block;
    font-size:var(--small-font-size);
    margin-bottom: var(--mb-3);
}

.section__title,
.section__subtitle{
    text-align: center;
}

/*========================= LAYOUT =======================*/
.container{
    max-width: 768px;
    margin-left: var(--mb-1-5)
    margin-right: var(--mb-1-5)
}

.grid{
    display: grid;
    gap: 1.5rem;
}

.header{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
}


/*========================== NAV =========================*/
.nav{
    max-width: 968;
    height: var(--header-height);
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.nav__logo, 
.nav__toggle{
    color: var(--title-color);
    font-weight: var(--font-medium);
}

.nav__logo:hover{
    color: var(--first-color);
}

.nav__toggle{
    font-size: 1.1rem;
    cursor: pointer;
}

.nav__toggle:hover;
    color: var(--first-color);

@media screen and (max-width: 767px){
    .nav__menu{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: (--body-color);
        padding: 2rem 1.5rem 4rem;
        box-shadow: 0 -1px 4px rgba(0,0,0,.15);
    }
}




    /* show menu */


/* Active Link */
    














    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!/--============= UNICONS =================-->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">

    <!/--============= SWIPER CSS ==============-->
    <link rel="stylesheet" href="" />

    <!/--================= CSS ======================-->
    <link rel="stylesheet" href="myportfolio.css">
    <title>Responsive Portfolio Website</title>
  </head>
  <body>
    <!/--================== HEADER ======================-->
    <header  id="header">
        <nav >
          <a href="#" >Randy</a>

          <div  id="nav-menu"></div>
              <ul >
                  <li >
                    <a href="#Home" >
                      <i ></i> Home
                    </a>
                  </li>
                  <li >
                    <a href="#About" >
                      <i ></i> About
                    </a>
                  </li>
                  <li >
                    <a href="#Skills" >
                      <i ></i> Skills
                    </a>
                  </li>
                  <li >
                    <a href="#Services" >
                      <i ></i> Services
                    </a>
                  </li>
                  <li >
                    <a href="#Portfolio" >
                      <i ></i> Portfolio
                    </a>
                  </li>
                  <li >
                    <a href="#Contact" >
                      <i ></i> Contact Me
                    </a>
                  </li>
              </ul>
              <i  id="nav-close"></i>
            </div>

            <div.nav="nav__btns">
              <div  id="nav-toggle"></div>
              <i ></i>
          </nav>
    </header>
    <!/--=================== MAIN ========================-->
    <main >...</main>

    <!/--=================== FOOTER ======================-->

    <!/--=================== SCROLL TOP ====================-->

    <!/--==================== SWIPER JS ====================-->
    <script src=""></script>

    <!/--==================== MAIN JS ======================-->
    <script src=""></script>
  </body>
</html>

Here is the tutorial: https://youtu.be/27JtRAI3QO8

inspected page

enter image description here

enter image description here

CodePudding user response：

your css file had some issues

/*==================== GOOGLE FONTS =======================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
  
/*==================== VARIABLES CSS =======================*/
    :root {
    --header-height: 3 rem;

  /*=========== Colors ============*/
  /* change fovorite color */
  --hue-color: 142; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

  /* HSL color made */
  --first-color: hsl(var(--hue-color), 69%, 61%);
  --first-color-second: hsl(var(--hue-color), 69%, 61%);
  --first-color-alt: hsl(var(--hue-color), 57%, 53%);
  --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;



  /*============= Font and typography ===============*/
  --body-font: 'Poppins', sans-serif;

  /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
   --big-font-size: 2rem;
   --h1-font-size: 1.5rem;
   --h2-font-size: 1.25rem;
   --h3-font-size: 1.125rem;
   --normal-font-size: .938rem;
   --small-font-size: .813rem;
   --smaller-font-size: .75rem;

   /*============ Font Weight ==============*/ 
   --font-medium: 500;
   --font-semi-bold: 600; 


   /*======== Margenes Bottom =============*/
   /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem; 

    /*============ Z index =============*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-model: 1000;

}
    /* font size for large devices */ 
    @media screen and (min-width: 968px) {
        :root {
            --big-font-size: 3rem;
            --h1-font-size: 2.25rem;
            --h2-font-size: 1.5rem;
            --h3-font-size: 1.25rem;
            --normal-font-size: 1rem;
            --small-font-size: .875rem;
            --smaller-font-size: .813rem;
        }
    }
    

/*============== Variables Dark theme ================*/


/*=============== Button Dark/Light ===================*/



/*========================= BASE ========================*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    scroll-behavior: smooth;
}

body{
    margin: 0 0 var(--header-height) 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

h1,h2,h3,h4{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

/*================ REUSABLE CSS CLASSES ================*/
.section{
    padding: 2rem 0 4rem;
}

.section__title{
    font-size: var(--h1-font-size);
}

.section__subtitle{
    display: block;
    font-size:var(--small-font-size);
    margin-bottom: var(--mb-3);
}

.section__title,
.section__subtitle{
    text-align: center;
}

/*========================= LAYOUT =======================*/
.container{
    max-width: 768px;
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}

.grid{
    display: grid;
    gap: 1.5rem;
}

.header{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
}


/*========================== NAV =========================*/
.nav{
    max-width: 968;
    height: var(--header-height);
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.nav__logo, 
.nav__toggle{
    color: var(--title-color);
    font-weight: var(--font-medium);
}

.nav__logo:hover{
    color: var(--first-color);
}

.nav__toggle{
    font-size: 1.1rem;
    cursor: pointer;
}

.nav__toggle:hover;
    color: var(--first-color);

@media screen and (max-width: 767px){
    .nav__menu{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: (--body-color);
        padding: 2rem 1.5rem 4rem;
        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
    }
}




    /* show menu */


/* Active Link */
    
 <header  id="header">
        <nav >
          <a href="#" >Randy</a>

          <div  id="nav-menu"></div>
              <ul >
                  <li >
                    <a href="#Home" >
                      <i ></i> Home
                    </a>
                  </li>
                  <li >
                    <a href="#About" >
                      <i ></i> About
                    </a>
                  </li>
                  <li >
                    <a href="#Skills" >
                      <i ></i> Skills
                    </a>
                  </li>
                  <li >
                    <a href="#Services" >
                      <i ></i> Services
                    </a>
                  </li>
                  <li >
                    <a href="#Portfolio" >
                      <i ></i> Portfolio
                    </a>
                  </li>
                  <li >
                    <a href="#Contact" >
                      <i ></i> Contact Me
                    </a>
                  </li>
              </ul>
              <i  id="nav-close"></i>
            </div>

            <div.nav="nav__btns">
              <div  id="nav-toggle"></div>
              <i ></i>
          </nav>
    </header>

CodePudding user response：

Class names can not start with two hyphens. So, remove one hyphen from them.

There are a couple of predefined rules that should be followed while choosing the class name or selectors.

  1. All CSS syntax is case-insensitive with in the range of [a-z] and [A-Z].
  2. CSS classes, element name and IDs can contain only the characters [a-zA-Z0-9] , hyphen (-) and the underscore (_).
  3. selectors cannot start with a digit, two hyphens, or a hyphen followed by a digit.
  4. selectors can have # and . along with \

From tutorial schools

Page link：https//www.codepudding.com/Mobile/673176.html

Prev:How to force child-div to "stretch" parent-flexbox (like img element does)?
Next:How to animate text gradient color to always move in one direction
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding