0

I am confused why the background color is not showing up on this code. There is padding on the "1" class but there is no color even though the color is specified. Look in the container class for the problem.

Please help.

body {
  margin: 0px;
  background-color: #fff;
}


/*
font-family: 'Lato', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Gloria Hallelujah', cursive;
*/

.welcome {
  font-family: 'Gloria Hallelujah', sans-serif;
  font-size: 45;
  text-align: center;
  color: #000;
}

.sub1 {
  font-family: 'Lato', sans-serif;
  font-size: 30;
  color: #000;
  text-indent: 20;
}

.sub2 {
  font-family: 'Lato', sans-serif;
  font-size: 25;
  color: #000;
  text-indent: 20;
}

.container {
  position: relative;
  width: 100%;
  height: 600px;
}


/*.container img {
    position: absolute;
    width: 1800px;
    background-size: cover;*/


}
@-webkit-keyframes xfade {
  0% {
    opacity: 1;
  }
  
  33% {
    opacity: 1;
  }
  
  44% {
    opacity: 0;
  }
  
  89% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}
@keyframes xfade {
  0% {
    opacity: 1;
  }
  
  33% {
    opacity: 1;
  }
  
  44% {
    opacity: 0;
  }
  
  89% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}
.container p:nth-child(3) {
  -webkit-animation: xfade 45s 0s infinite;
  animation: xfade 45s 0s infinite;
}
.container p:nth-child(2) {
  -webkit-animation: xfade 45s 15s infinite;
  animation: xfade 45s 15s infinite;
}
.container p:nth-child(1) {
  -webkit-animation: xfade 25s 30s infinite;
  animation: xfade 25s 30s infinite;
}
.container {
  position: relative;
}
.container img {
  position: absolute;
}
.1 {
  width: 100%;
  height: 100%;
  padding: 100px;
  /*background-image: url(Pictures/cupcakes.jpg)*/
  
  background-color: #00FFFF;
  overflow: auto;
  background-size: cover;
}
<html>

<head>
  <title>JAM Bakery</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>

<body>
  <br>
  <div class="content">
    <h1 class="welcome">Welcome to JAM Bakery!</h1>
    <div class="slogan">
      <h2 class="sub1">Creamy, Sweet, Toasted</h2>
      <h2 class="sub2">Your Choice.</h2>

      <div class="container">
        <p class="1">1</p>
        <p class="2"></p>
        <p class="3"></p>
      </div>

    </div>
  </div>
</body>

</html>

Please check for any other problems you might see. Thank you.

Matan Berkovsky
  • 68
  • 7

2 Answers2

7

"1" is not a valid CSS class. CSS classes must start with a letter, hyphen, or underscore.

For more information, see this answer, or the W3C spec document.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
3

CSS class names should not be numeric, and it should start with an alphabet or -(hyphen) or _(underscore)

body {
  margin: 0px;
  background-color: #fff;
}


/*
font-family: 'Lato', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Gloria Hallelujah', cursive;
*/

.welcome {
  font-family: 'Gloria Hallelujah', sans-serif;
  font-size: 45;
  text-align: center;
  color: #000;
}

.sub1 {
  font-family: 'Lato', sans-serif;
  font-size: 30;
  color: #000;
  text-indent: 20;
}

.sub2 {
  font-family: 'Lato', sans-serif;
  font-size: 25;
  color: #000;
  text-indent: 20;
}

.container {
  position: relative;
  width: 100%;
  height: 600px;
}


/*.container img {
    position: absolute;
    width: 1800px;
    background-size: cover;*/


}
@-webkit-keyframes xfade {
  0% {
    opacity: 1;
  }
  
  33% {
    opacity: 1;
  }
  
  44% {
    opacity: 0;
  }
  
  89% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}
@keyframes xfade {
  0% {
    opacity: 1;
  }
  
  33% {
    opacity: 1;
  }
  
  44% {
    opacity: 0;
  }
  
  89% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}
.container p:nth-child(3) {
  -webkit-animation: xfade 45s 0s infinite;
  animation: xfade 45s 0s infinite;
}
.container p:nth-child(2) {
  -webkit-animation: xfade 45s 15s infinite;
  animation: xfade 45s 15s infinite;
}
.container p:nth-child(1) {
  -webkit-animation: xfade 25s 30s infinite;
  animation: xfade 25s 30s infinite;
}
.container {
  position: relative;
}
.container img {
  position: absolute;
}
.t1 {
  width: 100%;
  height: 100%;
  padding: 100px;
  /*background-image: url(Pictures/cupcakes.jpg)*/
  
  background-color: #00FFFF;
  overflow: auto;
  background-size: cover;
}
<html>

<head>
  <title>JAM Bakery</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>

<body>
  <br>
  <div class="content">
    <h1 class="welcome">Welcome to JAM Bakery!</h1>
    <div class="slogan">
      <h2 class="sub1">Creamy, Sweet, Toasted</h2>
      <h2 class="sub2">Your Choice.</h2>

      <div class="container">
        <p class="t1">1</p>
        <p class="t2"></p>
        <p class="t3"></p>
      </div>

    </div>
  </div>
</body>

</html>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55