Tribute Page Help Please!

Tribute Page Help Please!
0

#1

Hello All,

I need help with my tribute page. I am currently trying to put text, image, and video side by side, but can;t figure out a way to do so. I appreciate the help. Please email me at [email protected] for my code or look below. To note, I do not use codepen or know how to use github. I use visual studio code instead of those.

Well here’s the code:

<h1 style="color: violet">Novak Djokovic</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>
<p class="red-text"><a href="https://en.wikipedia.org/wiki/Novak_Djokovic">Novak Djokovic Biography</a>
</p>

<h2>Who Is He?:</h2>
<img src="http://www.vidatennis.com.au/wp-content/forum/uploads/novak-djokovic.jpg" alt="Novak Djokovic Face" class="thick-green-border">
<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 style="text-align: center">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/W0nXUxhEexQ" frameborder="0" allowfullscreen=""></iframe>
</div>

<h3>Summary:</h3>
<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">
<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>

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

    <h4 class="green-text">Early Life:</h4>
    <img src="https://images.successstory.com/adminimg/image_uploads/content_images/novak-djokovic-img16097_668_1446667415.jpg" alt="Novak Djokovic Face" class="thin-red-border">
    <p>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 style="text-align: center">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/Oeid5ioDF2Y">\
frameborder="0" allowfullscreen&gt;</iframe>
    </div>

    <h5>Career Highlights/Achievements:</h5>
    <img src="http://img.skysports.com/14/07/768x432/R2ZDRxbjp9VxnvRznHWhi4DcNnKaGNWU.jpg?20160323143409" alt="Novak Djokovic Face" class="thin-red-border">
    <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>

    <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>

    <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>

    <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>

    <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>
    <img src="https://i.pinimg.com/originals/8a/d5/7a/8ad57abeef18a5a157701f90b0f877c7.jpg" alt="Novak Djokovic and His Wife" class="smaller-image thin-red-border">
    <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 style="text-align: center">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/F2O0uTlFyp4" frameborder="0" allowfullscreen=""></iframe>
    </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>
        <cite>-Novak Djokovic</cite>
    </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>

Thanks,
Sam Lee


#2

Hey, I can try and help.

You can use bootstrap, if you are planning to make a responsive design. You can try something along the lines:

Text
Image
Video

Here’s the bootstrap grid documentation, if you want to understand it in more detail: https://getbootstrap.com/docs/4.0/layout/grid/

Another possible solution would be to use style, [display: inline]


#3

Hello,

Thanks for the input. Can you show me an example written in code?
Also, what do I write in the class? An example would help me.

Thanks,
Sam Lee


#4

Hey, I did write a code, but it didn’t show up! Let me try again:

<div class = "row">
<div class = "col-xs-4"> <p> Text </p> </div>
<div class = "col-xs-4"> <img src ""> Image </div>
<div class = "col-xs-4"> <iframe src ""> Video </iframe> </div>
</div>