Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>
  <title>Portfolio Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- Navigation Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
			<!-- AdR logo -->
      <a class="navbar-brand" href="#"><img src="http://alemdoroteiro.com/wp-content/uploads/2018/08/AdR-branca.png" width="90" alt="Logo"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#biografia">BIOGRAFIA</a></li>
        <li><a href="#roteiros">ROTEIROS</a></li>
				<li><a href="#youtube">YOUTUBE</a></li>
        <li><a href="#adr">ARTIGOS</a></li>
        <li><a href="#contato">CONTATO</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotronFake text-center">
  <h1>Yann Lima Rodrigues</h1> 
  <p>Roteirista, apaixonado por narrativas. Editor do Além do Roteiro, <a class="link-v" href="https://alemdoroteiro.com">portal</a> e <a class="link-v" href="https://www.youtube.com/channel/UCJP8N3aoo3sm1UoPvGrLa3A">Youtube</a>.</p> 
	
</div>
<!-- Container (Writing Section) -->
<div id="biografia" class="container-fluid">
	<div class="row">
    <div class="col-xs-12 col-sm-5 col-sm-offset-1">
			<h2>Mundo Comum</h2>
			<h4>1991 - 2018</h4> 
			<p>Até os 27 anos, vivi o Mundo Comum da minha Jornada nada heróica como um garoto retraído, tudo a ver com o mundo da TI. Ingressei na Ipiranga Produtos de Petróleo, onde trabalhei como gerente de projetos de informática, lidando com desafios de planejamento, liderança de equipes, cronogramas apertados e orçamentos mais ainda.</p>
		</div>
		<!-- Mundo Comum logo -->
		<div class="col-xs-12 col-sm-4">
			<span class="glyphicon glyphicon-globe logo float-right slideanim"></span> 
    </div>
	</div>
</div>
<div class="container-fluid bg-alice-blue ">
	<div class="row">
		<!-- AdR logo -->
		<div class="col-xs-12 col-sm-4">
			<span class="glyphicon glyphicon-pencil logo float-right slideanim"></span>
    </div>
		<div class="col-xs-12 col-sm-5  col-sm-offset-1 float-right">
			<h2 class="text-right">Além do Roteiro</h2>
			<h4 class="text-right">2014-presente</h4> 
			<p class="text-right">Em 2014, com ajuda de muitas pessoas Mentoras ou sobrenaturais, finalmente entendi minha paixão pela escrita e comecei o Além do Roteiro. Não sem Recusas para atender ao Chamado à Aventura. Mantenho o site como um grande diário de estudos sobre histórias.</p>
			<a href="https://alemdoroteiro.com"><button class="btn btn-default btn-lg float-right">Visite</button></a>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row">
    <div class="col-xs-12 col-sm-5 col-sm-offset-1">
			<h2>A Travessia do Primeiro Limiar</h2>
			<h4>Julho de 2018 - ao infinito e além</h4> 
			<p>Saindo do Rio de Janeiro para São Paulo, comecei uma nova fase na Jornada, agora para viver como roteirista, atendendo ao Chamado. Quer ver meu currículo? Só clicar no ícone >></p>
		</div>
		<!-- Futuro logo -->
		<div class="col-xs-12 col-sm-4">
			<a href="https://alemdoroteiro.com/wp-content/uploads/2019/07/Currículo_Yann-Lima-Rodrigues.pdf"><span class="glyphicon glyphicon-film logo float-right slideanim"></span></a>
    </div>
	</div>
</div>
<!-- Container (Seção Roteiros) -->
<div id="roteiros" class="container-fluid text-center bg-alice-blue">
  <h2>Roteiros</h2>
  <h4>Alguns dos meus projetos até o momento</h4>
  <br>
  <div class="row slideanim">
    <div class="col-sm-6">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/FoqAF-8_d0E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h4>Apoie o Mamilos</h4>
      <p>O Mamilos Podcast precisava de um vídeo para alavancar a campanha de financiamento recorrente no Catarse. Com produção da <a href="https://atrasdamoitafilmes.com/">Atrás da Moita Filmes</a>, você confere o resultado aqui.</p>
    </div>
		  <div class="col-sm-6">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/T555b4R23eo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h4>Não Bebo Café</h4>
      <p>Curta-Metragem coproduzido com <a href="https://www.youtube.com/channel/UCBxPeHEtSP11EnLLLZKbozQ">Projeto Ator</a>, <a href="https://www.instagram.com/cafugofilmes/">Cafugo Filmes</a> e <a href="https://www.youtube.com/channel/UC0fhMdTIxYLQjRnHlHJZmyQ">Conacine</a>. Dois irmãos. Um deles bebe café. O outro não. Você confere o resultado aqui.</p>
    </div>
   </div>
	  <div class="row slideanim">
    <div class="col-sm-12">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/zwwnOX-aXog" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h4>Seja como For</h4>
      <p>Videoclipe oficial da banda Williams, onde assino roteiro, assistência de direção e produção.</p>
    </div>
   </div>
</div>
<!-- Container (Seção YouTube) -->
<div id="youtube" class="container-fluid text-center">
  <h2>Além do Roteiro no YouTube</h2>
  <h4>Vídeos ensaio sobre roteiros</h4>
  <div class="row text-center slideanim">
    <div class="col-sm-4">
			<iframe width="420" height="236" src="https://www.youtube.com/embed/6P9ixQPAFso" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			<p><strong>A Chegada - Explorando a estrutura de uma história</strong></p>
    </div>
    <div class="col-sm-4">
			<iframe width="420" height="236" src="https://www.youtube.com/embed/nOaEJ_oFJiE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			<p><strong>Corra! - Os três níveis de Conflito na cena do Sunken Place</strong></p>
    </div>
    <div class="col-sm-4">
			<iframe width="420" height="236" src="https://www.youtube.com/embed/CK6Voq7aGS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			<p><strong>Mindhunter - Mudanças de Valor em uma Cena</strong></p>
    </div>
	</div>
<!-- Container (Seção Análises) -->
<div id="adr" class="container-fluid text-center bg-alice-blue">
  <h2>Artigos do Além do Roteiro</h2>
  <h4>Algumas análises feitas para o portal</h4>
  <div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail img-thumbnail" style="height: 310px">
        <div style="height: 230px; overflow: hidden">
				<a href="http://alemdoroteiro.com/2018/05/14/conceitos-8-jornada-do-heroi-pantera-negra/"><img src="http://alemdoroteiro.com/wp-content/uploads/2018/05/Pantera-Negra-capa.jpg" alt="Jornada do Herói"></a>
				</div>
				<p style="height:12px"></p>
				<p><strong>A Jornada do Herói e Pantera Negra</strong></p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail img-thumbnail" style="height: 310px">
				<div style="height: 230px; overflow: hidden">
        <a href="http://alemdoroteiro.com/2018/04/14/the-handmaids-tale-estudo-june/"><img src="http://alemdoroteiro.com/wp-content/uploads/2018/04/ev9DSACqSIwMiQPHHYotATDZQvl.jpg" alt="The Handmaid's Tale"></a>
				</div>	
        <p><strong>The Handmaid's Tale - Um estudo sobre June Osborne</strong></p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail img-thumbnail" style="height: 310px">
        <div style="height: 230px; overflow: hidden">
				<a href="http://alemdoroteiro.com/2016/09/26/analise-de-filmes-bastardos-inglorios/"><img src="http://alemdoroteiro.com/wp-content/uploads/2016/09/capa1.png" alt="Bastardos Inglórios"></a>
				</div>
        <p><strong>Análise de filmes - A estrutura própria de Bastardos Inglórios</strong></p>
      </div>
    </div>
	</div>
<!-- Container (Contact Section) -->
<div id="contato" class="container-fluid">
  <h2 class="text-center">CONTATO</h2>
	<p>Vamos conversar! Pode entrar em contato por e-mail ou mandar mensagem na rede social de sua preferência.</p>
  <div class="row">
		<div class="col-sm-3"></div>
    <div class="col-sm-2">
      <p><span class="glyphicon glyphicon-envelope"></span> alemdoroteiro@gmail.com</p>
		</div>
    <div class="col-sm-2">
			<p><span class="fab fa-twitter"></span> <a href="https://twitter.com/alemdoroteiro">@alemdoroteiro</a></p>
		</div>
		<div class="col-sm-2">
			<p><span class="fab fa-instagram"></span> <a href="https://instagram.com/alemdoroteiro">@alemdoroteiro</a></p>
    </div>
		<div class="col-sm-3"></div>
	</div>
</div>
<footer class="container-fluid text-center">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
  <p>Tema Bootstrap feito por <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p> 
</footer>
</body>
            
          
!
            
              body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}

.link-v {
	color: #000000;
}

.link-v:hover {
	color: #000000;
}

h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
}

h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}

.jumbotronFake {
	margin-bottom: 0;
	background-color: #42A2A7; /* Dark Slate Grey */
	color: #ffffff;
	padding: 100px 25px;
	font-size: 21px;
 	font-weight: 200;
	font-family: Montserrat, sans-serif;
}
.bg-alice-blue {
  background-color: #F0F8FF;
}
.container-fluid {
  padding: 60px 50px;
}
/* Add an Dark Slate Grey to all Writing icons and set the font-size */
.logo {
  font-size: 200px;
	color: #42A2A7;
}
.float-right {
  float: right;
}
/* Add an Dark Slate Grey color to all Service icons and set the font-size */
.logo-small {
  color: #42A2A7;
  font-size: 50px;
}
.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

.carousel-control.right, .carousel-control.left {
  background-image: none !important;
  color: #000 !important;
}
.carousel-indicators li {
  border-color: #000 !important;
}

.carousel-indicators li.active {
  background-color: #000;
}

.item h4 {
	font-size: 19px;
	line-height: 1.375em;
	font-weight: 400;
	font-style: italic;
	margin: 70px 0;	
}

.item span {
  font-style: normal;
}
.panel {
	border: 1px solid #42A2A7 !important; 
	transition: box-shadow 0.5s;
}

.panel:hover {
	box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}

.panel-footer .btn:hover {
	border: 1px solid #2F4F4F;
	background-color: #fff !important;
	color: #DC143C;
}

.panel-heading {
	color: #fff !important;
	background-color: #42A2A7 !important;
	padding: 25px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.panel-footer {
	background-color: #fff !important;
}

.panel-footer h3 {
	font-size: 32px;
}

.panel-footer h4 {
	color: #aaa;
	font-size: 14px;
}

.panel-footer .btn {
	margin: 15px 0;
	background-color: #42A2A7;
	color: #fff;
}

/* styles navbar */
.navbar {
	margin-bottom: 0;
	background-color: #42A2A7 !important;
	z-index: 9999;
	border: 0 !important;
	font-size: 13px !important;
	line-height: 1.42857143;
	letter-spacing: 3px;
	border-radius: 0;
	font-family: Montserrat, sans-serif;
}

.navbar .navbar-brand {
  color: #fff !important;
	font-size: 22px !important;
}

.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
  color: #DC143C !important;
  background-color: #fff !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent !important;
  color: #fff !important;
}

 .navbar-default .navbar-toggle .icon-bar {
  color: #fff !important;
  border:1px solid #fff;
 }

@media screen and (max-width: 768px) {
	.col-sm-4 {
		text-align: center;
		margin: 25px 0;
	}
}

/* Using .slideanim to create animation of some icons and sections */
.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
            
          
!
            
              $(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

   // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 900, function(){

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
      });
    } // End if
  });
})
// function that determines slideanim ocurring through scroll
$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console