Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
    <div id="main" class="content-fluid">
        <div class="row content">
            <div class="col-sm-8 ">
                <div class=" left" id="img-div">
                    <div  id="image" class="img-responsive" >
											
                    </div>
                    <!-- .bg-img -->
									<div id="img-caption">
                    <div id="title" class="info">
                        <h1 class="display-4 text-center"><strong >Amilcar Cabral</strong></h1>
                        <legend class="text-center"><em>The Liberation Fighter</em></legend>
                        <h3 class="text-center">1924-1973</h3>
                    </div>
										</div>
                    <!-- .info -->
                </div>
                <!-- End containerleft -->
            </div>
            <!-- End col-sm-8 -->
            <div class="col-sm-4 right" id="tribute-info">
                <div class="containter">
                    <div class="jumbotron">
                        <ul class="list-unstyled">
                            <h2>Birth</h2>
                            <hr>
                            <li>Born on September 12, 1924, at Bafata in what was then the Portuguese West African colony of Guinea, he spent part of his youth in Bissau, the capital.</li>
                            <br>
                            <h2>Journey</h2>
                            <hr>
                            <li>He was able because of his family`s relatively comfortable position, to go to secondary school and then to the University of Lisbon, where he qualified as an agricultural engineer in 1951. </li>
                            <br>
                            <li>Returning to his country he served for two years in the colonial administration as an agronomist which provided him with ample opportunity to learn at first hand of the dire poverty and intense suffering of his people, especially in the countryside.</li>
                            <br>
                            <li>His experiences made him more determined than ever to find ways and means of working for the freedom of his country and delivering his people from the yoke of colonial bondage. This inevitably led him into bitter conflicts with the governor of the colony and he transferred himself to Angola.</li>
                            <br>
                            <h2>Revolution</h2>
                            <hr>
                            <li>In 1956, he helped to form what is now the most important national organisation of Angola, the MPLA (Popular Movement for the Liberation of Angola). In the same year he also became one of the founders of the African Party of Independence of Guinea-Bissau and Cape Verde Islands. Leading in the next years the national-liberation war against the Portuguese colonialists.</li>
                            <br>
                            <li>Cabral knew and understood his enemy well, and every phase of the struggle was carefully planned and action meticulously organised. The cadres of the PAIGC were given political education as well as military training and he stressed always "that we are armed militants and not militarists."</li>
                            <br>
                            <h2>Liberation</h2>
                            <hr>
                            <li>Cabral saw the task of the national liberation movements as not merely to usher in Black rule replacing white faces with black ones; it was not only to raise a different flag and sing a new anthem but to remove all forms of exploitation from the country.</li>
                            <br>
                            <li> "Bearing in mind the essential characteristics of the present world economy, as well as experience already gained in the field of anti-imperialist struggle, the principal aspect of national liberation struggle is the struggle against neo-colonialism."</li>
                            <br>
                            <li> Cabral was careful to distinguish the colour of men's skins from exploitation and repeatedly emphasised that the struggle was against Portuguese colonialism and not against the Portuguese people. </li>
                            <br>
                            <li>He was an internationalist and saw his people's struggle as merely one front of a common international struggle against imperialism which "is trying simultaneously to dominate the working class in all advanced countries and smother the national liberation movements in all the under-developed countries."</li>
                            <br>
                            <h2>Death</h2>
                            <hr>
                            <li>On Jan 20 of 1973, the assassin's bullets struck down this great African leader at the age of 48, just as preparations were going ahead for the convening of the National Assembly in the early part of this year for the adoption of the Constitution and the official declaration of the new independent sovereign State of Guinea. This foul deed was engineered by the Portuguese colonialists with the nefarious aim of sowing confusion and disruption among the ranks of the PAIGC and of causing disunity among the national liberation movements of Southern Africa. </li>
                        </ul>
                        <!-- closed story list -->
                        <hr>
                        <h3 class="text-center">To know more follow this links: </h3>
                        <ul class="list-unstyled" >
                            <li>
                                <h5><a id="tribute-link" href="https://noticias.sapo.cv/actualidade/artigos/vida-e-obra-de-amilcar-cabral" target="_blank">Sapo Article</a></h5></li>
                            <li>
                                <h5><a id="tribute-link" href="http://www.dw.com/pt-002/quarenta-anos-ap%C3%B3s-a-morte-de-am%C3%ADlcar-cabral-o-que-resta-do-seu-sonho-africano/a-16803396" target="_blank">DW Article</a></h5></li>
                            <li>
                                <h5>
                <a id="tribute-link" href="https://www.youtube.com/watch?v=KJab5uePfyk" target="_blank" alt="Cabralista">Documentary <img id="playBtn" src="https://cdn.onlinewebfonts.com/svg/img_404212.png" > </a></h5>
                            </li>
                        </ul>
                        <!-- closed link list -->
                    </div>
                    <!-- .jumbotron -->
                </div>
                <div class="footer">
                    <p class="text-center text-capitalize"><small>Copyright © 2018 <a href="https://marovski.github.io/" target="_blank"><strong class="text-danger">Cardoso</strong></a><sup>®</sup></small></p>
                </div>
                <!-- .footer -->
            </div>
            <!-- end of .col-sm-4 -->
        </div>
        <!-- end row-content -->
    </div>
    <!-- /.content-fluid -->
</body>
              
            
!

CSS

              
                /* ----- HTML ----- */
html, body {

  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Lora', serif;

  letter-spacing: 0.3px;
}


/* ----- BODY ----- */

body {
    background-color: white;
   font-family:'Lora', serif;

}

/* ----- Div container ----- */
.container-fluid {
    margin: 0;
    padding: 0;
}



/* ----- Left div inside container ----- */
.left {
    color: #efefef;
    width: 50%;
    height: 100%;
    float: left;
    text-align: center;
    overflow: hidden;

}

/* ----- Left div behavior on size screen changing ----- */

@media screen and (max-width: 1000px)  {
    .left{
         position: static;
/*           overflow: scroll; */
    }
   
}


/* ----- Left div Background Image ----- */
.left #image {
    background: url(https://raw.githubusercontent.com/marovski/tribute-Cabral/master/img/cabral.jpg) center center no-repeat;

background-size: cover;
vertical-align: bottom;
width: 100%;
height: auto;
max-width: 650px;
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;		
    
}

/* ----- Left div Background Image ----- */
.left .bg-img:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #312e2e;
background-image: linear-gradient(to left top, #3d846d , #185a9d);
    opacity: 0.85;
}

/* ----- Left div .info ----- */

.left .info {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
   width: 100%;
    margin: 0 auto;
    margin-top: 50%;
    font-family: 'Lora', serif;
}


@media screen and (max-width: 1000px) {
  .left .info {
    margin-top: 300px;
  }
}


@media screen and (max-width: 1000px) {
  .left, .right {
    display: block;
    width: 100%;
  }
  .left {
    position: static;
    height: 500px;
  }
}


/* ----- Right div ----- */

.right {
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll;
    text-align: center;
  font-size: 18px;
}

/* ----- Right div ----- */
.right {
    background-color: #e9ecef;
     float: right;
}

/* ----- Right div ----- */
.right .content {
    width: 80%;
    padding: 0;
    margin: 0 0 50px;
    font-weight: 300;
    line-height: 1.5;
}



@media screen and (max-width: 600px) {
    .right h4,
    .right .content {
        display: block;
        vertical-align: top;
        width: 100%;
    }
}





/* unvisited link */

a:link {
    color: green;
}



/* visited link */

a:visited {
    color: blue;
}



/* mouse over link */

a:hover {
    color: grey;
}



/* selected link */

a:active {
    color: red;
}

/* Play button image - class(playBtn) */

#playBtn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100px;
    max-height: 100px;
    margin-top: 3vh;
}



/**
 * Footer Styles
 */

.footer {
    font-style: oblique;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
}
              
            
!

JS

              
                
              
            
!
999px

Console