FreeCodeCamp Tribute Page

freecodecamp-tribute-page.markdown

FreeCodeCamp Tribute Page

FreeCodeCamp Tribute Page Objective.
I decided to pay a tribute to Ronaldinho, my personal favorite modern football player.
I used simple HTML, CSS and Bootsrtap 4.0.0 as instructed. No JavaScript used.

A Pen by Anastasios Mpoletis on CodePen.

License.

index.html

<!-- /Body container -->
<div class="container">
  <!-- /Jumbotron -->
  <div class="jumbotron">
    <!-- /Profile -->
    <div class="row centerize">
      <div class="col-md-12">
        <!-- /Image -->
        <div class="thumbnail text-center">
          <img id="profile-image-style" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Ronaldinho_72.jpg/220px-Ronaldinho_72.jpg" alt="Ronaldinho Image">
        </div>
        <!-- ./Image -->
        <h1 class="text-center">Ronaldo de Assis Moreira</h1>
        <hr>
      </div>
    </div>
    <!-- ./Profile -->

    <!-- /Box1 Biography -->
    <div class="container-fluid box">
      <div class="row centerize">
        <!-- /Box1 text -->
        <div class="col-md-7 pad text-left">
          <h2><i>Biography</i></h2>
          <hr>
          <p>Ronaldo de Assis Moreira (born 21 March 1980), commonly known as <em>Ronaldinho</em> is a Brazilian professional footballer and current club ambassador for Spanish club FC Barcelona.
            <p>Clubs Ronaldinho played for:
              <ol>
                <li>Grêmio <b>(1998-2001)</b></li>
                <li>Paris Saint-Germain <b>(2001-2003)</b></li>
                <li>Barcelona <b>(2003-2008)</b></li>
                <li>Milan <b>(2008-2011)</b></li>
                <li>Flamengo <b>(2011-2012)</b></li>
                <li>Atlético Mineiro <b>(2012-2014)</b></li>
                <li>Querétaro <b>(2014-2015)</b></li>
                <li>Fluminense <b>(2015)</b></li>
              </ol>
              <p>Ronaldinho also played for the Brazilian National Team (1996-2013).
        </div>
        <!-- ./Box1 text -->

        <!-- /Box1 image -->
        <div class="col-md-5 centerize pad">
          <div class="thumbnail col-image-style">
            <img class="col-image" src="http://wallpaper-gallery.net/images/ronaldinho/ronaldinho-4.jpg" alt="Ronaldinho during Barcelona years">
          </div>
        </div>
        <!-- ./Box1 image -->
      </div>
    </div>
    <!-- ./Box1 Biography -->

    <!-- /Box2 Style of play-->
    <div class="container-fluid box">
      <div class="row centerize">
        <!-- /Box2 text -->
        <div class="col-md-7 pad">
          <h2><i>Style of play</i></h2>
          <hr>
          <p>Ronaldinho is regarded as one of the greatest and most skilful players of his generation. Due to his ability to score and create goals, he is capable of playing in several offensive positions, on either wing or in a central position. Throughout
            his career, Ronaldinho has been praised in particular for his technical skills and creativity; due to his pace, acceleration, agility, balance, ball control, and dribbling ability, he is capable of beating players when undertaking individual
            runs, often using feints in one on one situations. Among his repertoire of moves, Ronaldinho is one of the best exponents of the <a href="https://www.youtube.com/watch?v=z9v_MIc3VNU" target="_blank">Elastico</a>, a move he learned by watching
            videos of one of his idols, the 1970s Brazilian star Rivelino.
        </div>
        <!-- ./Box2 text -->

        <!-- /Box2 image -->
        <div class="col-md-5 pad">
          <div class="thumbnail col-image-style text-center">
            <img class="col-image" src="http://cdn.newsapi.com.au/image/v1/95e6400c22de14311d599b077b3547c4?width=1024" alt="Ronaldinho with Brazilian national team">
          </div>
        </div>
        <!-- ./Box2 image -->
      </div>
    </div>
    <!-- ./Box2 Style of play -->

    <!-- /Box3 More -->
    <div class="container-fluid box">
      <div class="row text-left">
        <div class="col-md-12 pad">
          <h2><i>More</i></h2>
          <hr/>
          <p>You can read more about this amazing football player on <a href="https://en.wikipedia.org/wiki/Ronaldinho#Style_of_play" target="_blank">Wikipedia</a> and Ronaldinho's official <a href="https://www.ronaldinho.com/" target="_blank">website</a>.
        </div>
      </div>
    </div>
    <!-- ./Box3 More -->

    <!-- /Footer -->
    <footer class="text-center">
      <hr>
      <p>Written and coded by <a href="http://anastasiosmpoletis.webege.com" target="_blank">Anastasios Mpoletis</a>.
    </footer>
    <!-- ./Footer -->

  </div>
  <!--   ./Jumbotron -->

</div>
<!-- ./Body container -->

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

body {
  margin-top: 2em;
  background-color: #00529F;
}

#profile-image-style {
  border: 5px ridge;
}

h1,
h2 {
  font-family: Comic Sans MS, Arial;
}

.container-fluid {
  margin: 3em 0em 3em 0em;
}

.centerize {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  border-style: solid;
  border-color: #A2214B;
  border-radius: 15px;
  padding: 1em 1em 1em 1em;
  background-color: #e6e6e6;
}

.pad {
  padding: 0em 3em 0em 3em;
}

.col-image {
  width: 10em;
  border-radius: 10px;
}

.col-image-style {
  background-color: #e6e6e6;
  border: none;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />