BJzxmX

bjzxmx.markdown

Elon Must Tribute BJzxmX

A Pen by Lauren Ferreira on CodePen.

License.

index.html

<link href='https://fonts.googleapis.com/css?family=Average Sans' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet'>

<div class="container-fluid">

<h1 id="titulo" class="text-center">Elon Musk</h1>
  <h3 class="text-center"><i>Como o Homem de Ferro da vida real chegou ao espaço</i></h3>
<figure id="moto"> <img width=800 src="https://i.ytimg.com/vi/g92rP1Mi_oQ/maxresdefault.jpg" alt="Elon Musk"> <figcaption class="text-center"><h6>Empreendedor dos mais ambiciosos, Elon Musk quer povoar a Terra com carros elétricos e mandar gente para o espaço.</h6></figcaption> </figure>
<div id="topicos">
  <h5>Os principais acontecimentos de sua vida foram:</h5>
  <ul>
    <li><b>28 de junho de 1971 </b>- Nasceu de pai engenheiro e mãe modelo</li>
    <li><b>8 anos </b>- leu todos os livros da biblioteca, inclusive a Enciclopédia Britânica</li>
    <li><b>14 anos </b>- teve crise existencial e leu todos os Guias do Mochileiro das Galáxias para ficar melhor</li>
      <li><b>18 anos </b>- começa a faculdade em Ontario</li>
        <li><b>1994 </b>- funda o PayPal</li>
        <li><b>2002 </b>- cria a SpaceX para criar seus próprios foguetes (com seu próprio dinheiro)</li>
        <li><b>2008 </b>- após três falhas, seu foguete é lançado com sucesso</li>
  </ul>
  </div>
  
  <div class="quote">
<h4>Acho que é muito importante sempre se dar feedback, onde você está constantemente pensando sobre o que fez e como poderia ter feito melhor. Acho que essa é a melhor parte do conselho: pensar sobre como poderia estar fazendo as coisas da melhor forma e se questionar sempre.</h4>
    <h6 id="elon"><i>Elon Musk</i><h6>
  </div>
  
      <p class="text-center"><a href="https://blog.adioma.com/how-elon-musk-started-infographic/">Clique aqui</a> para saber mais sobre a vida do maior visionário da atualidade.</p>
</div>

script.js

document.getElementsByTagName("h1")[0].style.fontSize = "80px";

style.scss

$h1color: #C12222;
$bg: #E6E6E6;

body {
  background-color: $bg;
  font-family:Average Sans;
}

h4 {
  text-align: justify;
}
h1 {
  color: $h1color;
}

#moto {
  text-align: center;
}

#topicos {
  line-height: 30px;
}

#titulo {
  font-family: Audiowide, Arial;
}
.quote {
    background-color: #993333;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #fff;
    margin: 0;
    padding: 20px;
}

#elon {
  text-align: left;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />