Tribute Page Help!

samlee916 · August 20, 2017, 2:44am

Hello,

I can’t get background colors for my page. Need help please.

HTML:

<div class="container cyan-background">
    <h1 style="color: violet">Novak Djokovic Tribute Page</h1>
    <img src="http://www.atpworldtour.com/-/media/tennis/players/head-shot/2016/djokovic_head_16.png" alt="Novak Djokovic Face" class="smaller-image thin-red-border">
    <p class="green-text">By Sam Lee</p>
</div>
</div>


<p class="red-text"><a href="https://en.wikipedia.org/wiki/Novak_Djokovic">Novak Djokovic Biography</a>
</p>

<div class="container greenyellow-background">
    <ol>
        <li><a href="http://novakdjokovic.com/en/">His Website</a></li>
        <li><a href="http://www.atpworldtour.com/en/players/novak-djokovic/d643/overview">ATP World Tour</a></li>
    </ol>
</div>

<div class="container cyan-background">
    <div class="row">
        <div class="col">
            <h2>Who Is He?:</h2>
        </div>
        <div class="col">
            <p>Serbian professional tennis player Novak Djokovic won his first of multiple Grand Slam championships in 2008 and took over the world's No. 1 ranking in 2011.</p>
        </div>
        <div class="w-100"></div>
        <div class="col"> <img src="http://www.vidatennis.com.au/wp-content/forum/uploads/novak-djokovic.jpg" alt="Novak Djokovic Face" style="width:420px;height:315px;">
        </div>
        <div class="col"> <iframe width="420" height="315" src="https://www.youtube.com/embed/W0nXUxhEexQ" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </div>
</div>

<h3 class="yellow-text">Summary:</h3>
<div class="row">
    <div class="col">
        <ul>
            <li>Born in Serbia in 1987, Novak Djokovic began playing tennis at age 4, and was sent to train in Germany at age 13.</li>
            <li>After a steady ascent to the top levels of the sport, he won the Australian Open in 2008 and led the Serbian national team to its first Davis Cup win in 2010.</li>
            <li>In 2011, he claimed three of four Grand Slams and compiled a 43-match winning streak en route to the world's No. 1 ranking. With his first French Open win in 2016, he became the first man since Rod Laver in 1969 to hold all four major
                titles at once.
            </li>
        </ul>
    </div>
    <div class="col">
        <div style="text-align: center">
            <iframe src="https://www.youtube.com/embed/QlyPzwNZVHU" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </div>
</div>
</div>
<img src="http://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2017/03/07/Pictures/novak-djokovic_46c1548a-030a-11e7-87c7-5947ba54d240.jpg" alt="Novak Djokovic Face" class="thick-green-border">

<div class="container orange-background">
    <h4 class="green-text">Early Life:</h4>
    <div class="row">
        <div class="col-6">
            <p align="left">Novak Djokovic was born on May 22, 1987, in Belgrade, Serbia. Father Srdjan and mother Dijana owned the company Family Sports, which had three restaurants and a tennis academy. Djokovic's father, uncle and aunt were all professional skiers,
                and his father also excelled at soccer, but Djokovic was a tennis prodigy. In the summer of 1993, at 6 years old, Djokovic was spotted by Yugoslavian tennis legend Jelena Gencic at his parents' sports complex. Gencic then worked with
                Djokovic for the next six years. During this time, the war in former Yugoslavia and the bombing of Belgrade meant that, for almost three months, Djokovic and his family would spend a few hours in the middle of each night in the basement.
                Djokovic has said that the hardships of war drove him to pursue tennis with even greater determination. At 13, he was sent to the Pilic Academy in Munich, Germany, to pursue higher levels of competition. In 2001, at age 14, he began
                his international career.
            </p>
        </div>
        <div class="col" style="text-align: center">
            <iframe width="420" height="315" src="https://www.youtube.com/embed/Oeid5ioDF2Y">\
                frameborder="0" allowfullscreen=""</iframe>
        </div>
    </div>
    <div>
        <img width="390px" height="290px" src="https://images.successstory.com/adminimg/image_uploads/content_images/novak-djokovic-img16097_668_1446667415.jpg" alt="Novak Djokovic Face" class="thin-red-border">
    </div>
</div>

<h5 class="gray-text">Career Highlights/Achievements:</h5>
<img src="http://img.skysports.com/14/07/768x432/R2ZDRxbjp9VxnvRznHWhi4DcNnKaGNWU.jpg?20160323143409" alt="Novak Djokovic Face" class="thin-red-border">
<div class="container">
    <div class="row">
        <div class="col">
            <p>Australian Open Titles:</p>
            <ol>
                <li>2008 - Australian Open - Novak Djokovic Vs. Jo-Wilfried Tsonga - 4-6, 6-4, 6-3, 7-6(2)</li>
                <li>2011 - Australian Open - Novak Djokovic Vs. Andy Murray - 6-4, 6-2, 6-3</li>
                <li>2012 - Australian Open - Novak Djokovic Vs. Rafael Nadal - 5-7, 6-4, 6-2, 6-7, 7-5</li>
                <li>2013 - Australian Open - Novak Djokovic Vs. Andy Murray - 6-7, 7-6, 6-3, 6-2</li>
                <li>2015 - Australian Open - Novak Djokovic Vs. Andy Murray - 7-6(5), 6-7(4), 6-3, 6-0</li>
                <li>2016 - Australian Open - Novak Djokovic Vs. Andy Murray - 6-1, 7-5, 7-6(3)</li>
            </ol>
        </div>
        <div class="col">
            <p>French Open Title:</p>
            <ol>
                <li>2016 - French Open - Novak Djokovic Vs. Andy Murray - 3-6, 6-1, 6-2, 6-4</li>
            </ol>
        </div>
        <div class="w-100"></div>
        <div class="col">
            <p>Wimbledon Titles:</p>
            <ol>
                <li>2011 - Wimbledon - Novak Djokovic Vs. Rafael Nadal - 6-4, 6-1, 1-6, 6-3</li>
                <li>2014 - Wimbledon - Novak Djokovic Vs. Roger Federer - 6-7(7), 6-4, 7-6(4), 5-7, 6-4</li>
                <li>2015 - Wimbledon - Novak Djokovic Vs. Roger Federer - 7-6(1), 6-7(10), 6-4, 6-3</li>
            </ol>
        </div>
        <div class="col">
            <p>U.S. Open:</p>
            <ol>
                <li>2011 - US Open - Novak Djokovic Vs. Rafael Nadal - 6-2, 6-4, 6-7, 6-1</li>
                <li>2015 - US Open - Novak Djokovic Vs.Roger Federer - 6-4, 5-7, 6-4, 6-4</li>
            </ol>
        </div>
    </div>
</div>

<p>Novak Dkjokovic won a total of 12 grand slams so far.</p>

<div style="text-align: center">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/ww7yxtwKMPE" frameborder="0" allowfullscreen=""></iframe>
</div>

<h6>Personal Life:</h6>
<p>
    Djokovic speaks Serbian, Italian, German and English. His two younger brothers, Marko (born in 1991) and Djordje (born in 1995), are both in school and play tennis. Djokovic's lighthearted personality has earned him the nickname "Djoker," a combination
    of his surname and the word "joker." He is known for his humorous off-court impersonations of fellow tennis players. Djokovic is a member of the Serbian Orthodox Christian church, and in April 2011, he was awarded the Order of St. Sava, 1st class,
    the highest decoration given, "for his demonstrated love for the church and the Serbian people." He participates in the Champions for Peace club, created by Peace and Sport, a Monaco-based international organization. He created the Novak Djokovic
    Foundation to help disadvantaged children in Serbia obtain an education and provide resources to lead productive and healthy lives. Djokovic began dating Jelena Ristic in 2005. The couple became engaged in 2013 and wed on July 10, 2014, just days
    after his Wimbledon win. The couple welcomed their first child, a son named Stefan, on October 21, 2014.
</p>

<div class="container">
    <div class="row">
        <div class="col">
            <img src="https://www.thesun.co.uk/wp-content/forum/uploads/2017/02/sport-preview-novak-djokovic-and-wife.jpg?strip=all&w=1200&h=800&crop=1" alt="Novak Djokovic and His Wife" class="smaller-image thin-red-border" style="width:420px;height:315px;">
        </div>
        <div class="col">
            <iframe width="420" height="315" src="https://www.youtube.com/embed/F2O0uTlFyp4" frameborder="0" allowfullscreen=""></iframe> </div>
    </div>
</div>




<blockquote style="text-align: center">
    <q>You have to consistently be successful to be one of the top players in the world, and everything is possible in life.</q>
    <section> <cite>-Novak Djokovic</cite>
    </section>
</blockquote>


<img src="https://www.fearlessmotivation.com/wp-content/forum/uploads/2016/02/Novak-Djokovic-Quotes-Be-Successful.jpg" alt="Novak Djokovic Quote" class="thick-green-border">

<p>This page was written and coded by Sam Lee.</p>

CSS:
h1 {
text-align: center;
}

h2 {
color: blue;
text-align: center;
font-size: 30px;
font-family: Sans-serif;
}

h6 {
color: black;
text-align: center;
font-size: 30px;
}

.yellow-text {
color: yellow;
text-align: center;
font-size: 30px;
font-family: Verdana;
}

.red-text {
color: red;
text-align: center;
font-size: 30px;
font-family: Tahoma;
}

.green-text {
color: green;
font-size: 30px;
text-align: center;
font-family: Arial;
}

.gray-text {
color: gray;
text-align: center;
font-size: 30px;
font-family: Georgia;
}

.orange-text {
color: orange;
text-align: center;
font-size: 30px;
font-family: Helvetica;
}

p {
text-align: center;
}

.smaller-image {
height: 300px;
}

.thin-red-border {
border-color: red;
border-width: 10px;
border-style: solid;
}

.thick-green-border {
border-color: green;
border-width: 15px;
border-style: solid;
border-radius: 15px;
border-radius: 50%;
}

img {
display: block;
margin: auto;
width: 30%;
}

blockquote {
font-size: 20px
}

.orange-background {
background-color: orange;
}

.cyan-background {
background-color: cyan;
}

.greenyellow-background {
background-color: greenyellow;
}

gudchyld · August 20, 2017, 4:16am

Hello @samlee916 , It’s unclear what background you really mean, is it for the whole page or just for a div element. I tried running your codes on codepen.io and the div backgrounds seem to be fine. if you want background-color for the whole page, you can apply styling to the body or enclose everything in a div and style likewise.

for good practice: try removing the second closing div tag at the beginning of your html code and make sure you end inline styles with semi colon “;”

<div class="container cyan-background">

<!--end inline styles with semi colon-->
<h1 style="color: violet;">Novak Djokovic Tribute Page</h1>

<img src="http://www.atpworldtour.com/-/media/tennis/players/head-shot/2016/djokovic_head_16.png" alt="Novak Djokovic Face" class="smaller-image thin-red-border">
<p class="green-text">By Sam Lee</p>
</div>

<!--This second closing div was not openned-->
**</div>**

Take note of the my comments, then while on codepen, avoid inline styles, there is a section to the right where all styling goes… I hope this helps

The freecodecamp tutorial recommend you use bootstrap framework its quite nice

samlee916 · August 20, 2017, 5:14am

Hello @gudchyld,

Thanks, I managed to fix it. Appreciate the help. Also, when you open my voce and look at the webpage, I noticed that there’s a break between the first, second, and third div. I am wondering how do I do that for all of my div containers. I attached a picture of what I meant. And I want to add border for each on my containers/different containers. Also, here’s my code:

HTML:

<div class="container lavender-background">
    <h1 style="color: violet;">Novak Djokovic Tribute Page</h1>
    <img src="http://www.atpworldtour.com/-/media/tennis/players/head-shot/2016/djokovic_head_16.png" alt="Novak Djokovic Face" class="smaller-image thin-red-border">
    <p class="green-text">By Sam Lee</p>
</div>

<div class="container greenyellow-background">
    <p class="red-text"><a href="https://en.wikipedia.org/wiki/Novak_Djokovic">Novak Djokovic Biography</a>
    </p>
    <ol>
        <li><a href="http://novakdjokovic.com/en/">His Website</a></li>
        <li><a href="http://www.atpworldtour.com/en/players/novak-djokovic/d643/overview">ATP World Tour</a></li>
    </ol>
</div>

<div class="container cyan-background">
    <div class="row">
        <div class="col">
            <h2 class="brown-text">Who Is He?:</h2>
        </div>
        <div class="col">
            <p>Serbian professional tennis player Novak Djokovic won his first of multiple Grand Slam championships in 2008 and took over the world's No. 1 ranking in 2011.</p>
        </div>
        <div class="w-100"></div>
        <div class="col"> <img src="http://www.vidatennis.com.au/wp-content/forum/uploads/novak-djokovic.jpg" alt="Novak Djokovic Face" style="width:420px;height:315px;">
        </div>
        <div class="col"> <iframe width="420" height="315" src="https://www.youtube.com/embed/W0nXUxhEexQ" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </div>
</div>

<div class="container khaki-background">
    <h3 class="yellow-text">Summary:</h3>
    <div class="row">
        <div class="col">
            <ul>
                <li>Born in Serbia in 1987, Novak Djokovic began playing tennis at age 4, and was sent to train in Germany at age 13.</li>
                <li>After a steady ascent to the top levels of the sport, he won the Australian Open in 2008 and led the Serbian national team to its first Davis Cup win in 2010.</li>
                <li>In 2011, he claimed three of four Grand Slams and compiled a 43-match winning streak en route to the world's No. 1 ranking. With his first French Open win in 2016, he became the first man since Rod Laver in 1969 to hold all four major
                    titles at once.
                </li>
            </ul>
        </div>
        <div class="col">
            <div>
                <iframe width="420" height="315" src="https://www.youtube.com/embed/QlyPzwNZVHU" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
    <img src="http://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2017/03/07/Pictures/novak-djokovic_46c1548a-030a-11e7-87c7-5947ba54d240.jpg" alt="Novak Djokovic Face" class="thick-green-border">
</div>

<div class="container orange-background">
    <h4 class="green-text">Early Life:</h4>
    <div class="row">
        <div class="col-6">
            <p align="left">Novak Djokovic was born on May 22, 1987, in Belgrade, Serbia. Father Srdjan and mother Dijana owned the company Family Sports, which had three restaurants and a tennis academy. Djokovic's father, uncle and aunt were all professional skiers,
                and his father also excelled at soccer, but Djokovic was a tennis prodigy. In the summer of 1993, at 6 years old, Djokovic was spotted by Yugoslavian tennis legend Jelena Gencic at his parents' sports complex. Gencic then worked with
                Djokovic for the next six years. During this time, the war in former Yugoslavia and the bombing of Belgrade meant that, for almost three months, Djokovic and his family would spend a few hours in the middle of each night in the basement.
                Djokovic has said that the hardships of war drove him to pursue tennis with even greater determination. At 13, he was sent to the Pilic Academy in Munich, Germany, to pursue higher levels of competition. In 2001, at age 14, he began
                his international career.
            </p>
        </div>
        <div class="col" style="text-align: center">
            <iframe width="420" height="315" src="https://www.youtube.com/embed/Oeid5ioDF2Y">\
                frameborder="0" allowfullscreen=""</iframe>
        </div>
    </div>
    <div>
        <img width="390px" height="290px" src="https://images.successstory.com/adminimg/image_uploads/content_images/novak-djokovic-img16097_668_1446667415.jpg" alt="Novak Djokovic Face" class="thin-red-border">
    </div>
</div>

<div class="container lime-background">
    <h5 class="gray-text">Career Highlights/Achievements:</h5>
    <img src="http://img.skysports.com/14/07/768x432/R2ZDRxbjp9VxnvRznHWhi4DcNnKaGNWU.jpg?20160323143409" alt="Novak Djokovic Face" class="thin-red-border">
    <div class="row">
        <div class="col">
            <p>Australian Open Titles:</p>
            <ol>
                <li>2008 - Australian Open - Novak Djokovic Vs. Jo-Wilfried Tsonga - 4-6, 6-4, 6-3, 7-6(2)</li>
                <li>2011 - Australian Open - Novak Djokovic Vs. Andy Murray - 6-4, 6-2, 6-3</li>
                <li>2012 - Australian Open - Novak Djokovic Vs. Rafael Nadal - 5-7, 6-4, 6-2, 6-7, 7-5</li>
                <li>2013 - Australian Open - Novak Djokovic Vs. Andy Murray - 6-7, 7-6, 6-3, 6-2</li>
                <li>2015 - Australian Open - Novak Djokovic Vs. Andy Murray - 7-6(5), 6-7(4), 6-3, 6-0</li>
                <li>2016 - Australian Open - Novak Djokovic Vs. Andy Murray - 6-1, 7-5, 7-6(3)</li>
            </ol>
        </div>
        <div class="col">
            <p>French Open Title:</p>
            <ol>
                <li>2016 - French Open - Novak Djokovic Vs. Andy Murray - 3-6, 6-1, 6-2, 6-4</li>
            </ol>
        </div>
        <div class="w-100"></div>
        <div class="col">
            <p>Wimbledon Titles:</p>
            <ol>
                <li>2011 - Wimbledon - Novak Djokovic Vs. Rafael Nadal - 6-4, 6-1, 1-6, 6-3</li>
                <li>2014 - Wimbledon - Novak Djokovic Vs. Roger Federer - 6-7(7), 6-4, 7-6(4), 5-7, 6-4</li>
                <li>2015 - Wimbledon - Novak Djokovic Vs. Roger Federer - 7-6(1), 6-7(10), 6-4, 6-3</li>
            </ol>
        </div>
        <div class="col">
            <p>U.S. Open:</p>
            <ol>
                <li>2011 - US Open - Novak Djokovic Vs. Rafael Nadal - 6-2, 6-4, 6-7, 6-1</li>
                <li>2015 - US Open - Novak Djokovic Vs.Roger Federer - 6-4, 5-7, 6-4, 6-4</li>
            </ol>
        </div>
    </div>
    <p>Novak Dkjokovic won a total of 12 grand slams so far.</p>
    <div style="text-align: center">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/ww7yxtwKMPE" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

<div class="container lightgreen-background">
    <h6 class="maroon-text">Personal Life:</h6>
    <p>
        Djokovic speaks Serbian, Italian, German and English. His two younger brothers, Marko (born in 1991) and Djordje (born in 1995), are both in school and play tennis. Djokovic's lighthearted personality has earned him the nickname "Djoker," a combination
        of his surname and the word "joker." He is known for his humorous off-court impersonations of fellow tennis players. Djokovic is a member of the Serbian Orthodox Christian church, and in April 2011, he was awarded the Order of St. Sava, 1st
        class, the highest decoration given, "for his demonstrated love for the church and the Serbian people." He participates in the Champions for Peace club, created by Peace and Sport, a Monaco-based international organization. He created the
        Novak Djokovic Foundation to help disadvantaged children in Serbia obtain an education and provide resources to lead productive and healthy lives. Djokovic began dating Jelena Ristic in 2005. The couple became engaged in 2013 and wed on July
        10, 2014, just days after his Wimbledon win. The couple welcomed their first child, a son named Stefan, on October 21, 2014.
    </p>
    <div class="row">
        <div class="col">
            <img src="https://www.thesun.co.uk/wp-content/forum/uploads/2017/02/sport-preview-novak-djokovic-and-wife.jpg?strip=all&w=1200&h=800&crop=1" alt="Novak Djokovic and His Wife" class="smaller-image thin-red-border" style="width:420px;height:315px;">
        </div>
        <div class="col">
            <iframe width="420" height="315" src="https://www.youtube.com/embed/F2O0uTlFyp4" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </div>
</div>




<div class="container lightpink-background">
    <blockquote style="text-align: center">
        <q>You have to consistently be successful to be one of the top players in the world, and everything is possible in life.</q>
        <section> <cite>-Novak Djokovic</cite>
        </section>
    </blockquote>


    <img src="https://www.fearlessmotivation.com/wp-content/forum/uploads/2016/02/Novak-Djokovic-Quotes-Be-Successful.jpg" alt="Novak Djokovic Quote" class="thick-green-border">

    <p>This page was written and coded by Sam Lee.</p>
</div>

CSS:
body {
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
}

h1 {
text-align: center;
}

.brown-text {
color: brown;
text-align: center;
font-size: 30px;
font-family: Sans-serif;
}

.maroon-text {
color: maroon;
text-align: center;
font-size: 30px;
}