-1

The hover effect is not working, list style type is still bullet, and the flexbox isn't working how I want. For some reason I have to specify the font family in both BODY and A or else it wont appear. Is anything wrong with the way I imported the google font? Is something wrong with my code or is it something to do with jsfiddle?

HTML:

<body>

<ul class="container">
  <li class="item"><a href="">Home</a></li>
  <li class="item"><a href="">About</a></li>
  <li class="item"><a href="">Services</a></li>
  <li class="item"><a href="">Contact</a></li>
</ul>

</body>

CSS:

@import url('https://fonts.googleapis.com/css?family=Kumar+One');

//GENERAL

body{
  font-family: 'Kumar One', cursive;
}

a{
  text-decoration: none;
  font-family: 'Kumar One', cursive;
}

//CLASSES AND ID'S

.container{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.item{
  width: 8em;
  text-align: center;
  background-color: #10999e;
}

//INTERACTION

.item:hover{
  background-color: #0b6c70;
}
Daniel Evans
  • 13
  • 3

2 Answers2

1

Seems like the problem is with the comments you've added in a wrong syntax for CSS.

Here is a fixed code working on jsfiddle

@import url('https://fonts.googleapis.com/css?family=Kumar+One');

a{
  text-decoration: none;
  font-family: 'Kumar One', cursive;
}

.container{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.item{
  width: 8em;
  text-align: center;
  background-color: #10999e;
}


.item:hover{
  background-color: #0b6c70;
}
LowMatic
  • 223
  • 2
  • 13
0

Your problem has to do with your comments in the code. In CSS comments are written like /* comment here */

The way you in which you have written the comments, // comment is a comment syntax that works in the preprocessor SASS (and lots of other languages).

So remove the font-family declaration on the body (if you want to) and switch out the comment syntax.

kevinmartinez
  • 21
  • 1
  • 8