Power of colors lesson, help!


#1

in the power of colors html/css lesson, my html code is gone and now my web page isnt working because of it. can anyone post the html code so i can copy and paste it? ive tried to go back and copy it from the first part of the lesson but its gone on all of the lesson pages. thanks in advance!


#2

We could start with a link to the lesson. That would be our only reference and test environment. Please post link. Thanks.


#3

https://www.codecademy.com/en/courses/learn-html-css/lessons/css-colors/exercises/power-colors

that is the link to the lesson page im on

this is what it looks like from my screen. i dont know how it disappeared so im not sure what to do
but the style.css is still there


#4

Weird. Did you try to reset the lesson?


#5

ive tried to reset it, close out the page, restart the lesson but nothing has worked. i seen someone else said they had the same problem but they were able to go back to the first page and copy it to the page they were on but mine are blank from pages 1-5 so i cant do that


#6

What if you retrace the lessons?


#7

what do you mean? how do i do that?


#8

Do everything from the start.


#9

like from the very first lesson? i did try to go back but it just saves everything ive done and then when i get to this lesson it just stays blank


#10

basically this is what it looks like when i try to start the lesson over


#11

I cannot replicate this problem Have you tried a different browser?


#12

yea i even went back to the main page and restarted my progress but it still came out the same when i reached the lesson


#13

This is the markup in the first lesson that should be present when you open on it…

<!DOCTYPE html>
<html>
<head>
    <title>The Rise of Soccer in The US</title>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto:100" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    
  <div class="content">
    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg" class="writer-img">
    <h3 class="byline">Article By: Jane Dover</h3>

    <h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>
    <h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>

    <p>When the first World Cup arrived in the US in the 90's everyone officially declared that soccer was it. Well it's taken it's time but we can definitely see the influence of soccer, especially women's soccer, across the US. This year, 3 million kids played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the MLS has surpassed the MLB and NFL in popularity.</p>

    <p>Part of this meteoric rise can be attributed to the impressively soaring ad dollars being pumped into the Women's World Cup games in 2014. The women's games generated $40 million for Fox, that's definitely not chump change. And those advertisers, like ATT, Coca Cola, Verizon, Nike, Visa, and other heavy hitters, are working to make sure they see those numbers grow year after year by investing in youth soccer facilities and promoting programs across the country.</p>

    <p>Now that big business is involved you can be assured you'll see a continued rise in popularity in soccer across the country for years to come.</p>
  </div>

  <div class="image">
    <p class="caption">The local semi- pro soccer team in Seattle, WA plays an international friendly</p>
  </div>

</body>
</html>

As for the CSS, I’m not sure if this is how it starts, or how it finishes. Do your best to work with it, either way, even it means erasing some and redoing it for the sake of practice…

body {
  /* Old browsers */
  background: #141E30;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-45deg, #35577D, #141E30);
  margin: 0;
  padding: 0;
}

h1 {
  color: #FFF;
  font-family: 'Playfair Display', sans-serif;
  font-size: 32px;
  padding-top: 100px;
  text-align: left;
  width: 60%;
}

h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 22px;
  line-height: 24px;
  padding-bottom: 30px;
  text-align: left;
  width: 70%;
}

p {
  color: AliceBlue;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  line-height: 34px;
  text-align: left;
  width: 100%;
}

.byline {
  color: rgba(255, 255, 255, 0.5);
  float: left;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 14px;
  padding-left: 10px;
  text-transform: uppercase;
}

.caption {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.65);
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
}

.content {
  padding: 40px;
}

.image {
  background-image: url("https://images.unsplash.com/photo-1434648957308-5e6a859697e8?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1125&q=80&cs=tinysrgb");
  background-size: cover;
  background-position: center;
  height: 300px;
}

.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}

That’s the best I can offer. Please be sure to submit a bug report before pasting anything in. Thanks.


#14

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