2-Color- Foreground and Background Color


Help me guys I stuck here.. where I need to put AQUA?


Next, set the background color of the heading to Aqua.

Notice that the background-color property did not change the background color of the entire page. Instead, only the background area behind heading changed. We'll learn why this occurs in more detail later in the course.

Note: The background color of the heading is blocking the image of the coffee, so let's remove it. Remove the background color of the main heading.

body {
  padding: 0;
  margin: 0;
  background: #f7f7f7;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #f7f7f7 0%, #EAE0D5 100%);

/** Header styles **/

.header {
  color:  MidnightBlue;
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg");
  height: 400px;
  background-position: center center;

h1 {
  font-family: 'Covered By Your Grace', sans-serif;
  font-size: 100px;
  line-height: 76px;
  margin: 0;
  position: relative;
  text-align: center;
  top: 20%;

/** List style **/

h2 {
  color: #E4BB97;
  font-family: 'Raleway', sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;

ul {
  margin: 0 auto;
  padding: 0;
  width: 50%;

li {
  border-bottom: 1px solid #E4BB97;
  list-style: none;
  margin: 100px 0px;
  padding-bottom: 60px;

p {
  color: #444444;
  line-height: 32px;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 100;

a {
  color: #214E34;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;


try using it in your h1


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.