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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <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>  <p>Nas horas vagas, estudo as masculinidades em narrativas no podcast <a class="link-v" href="https://open.spotify.com/show/0N1oBJlm4ndNAT43ER2Abj">Homem Também Chora</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/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 class="col-sm-6">
			<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 class="row slideanim">
 <div class="col-sm-6">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/fVDfaXfueWc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h4>Vídeo institucional CPV (Centro de Produção de Vacinas): Qual é o valor de uma vida?</h4>
      <p>Vídeo de lançamento do CPV - Centro de Produção de Vacinas, projeto do Instituto Butantan, em São Paulo. Produção da <a href="https://www.cafugo.com.br/">Cafugo 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/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>
</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/xGRl1kazqms" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			<p><strong>Os Pés de Frances Ha - Símbolos no Roteiro</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/2018/11/05/um-lugar-silencioso-e-a-imersao-no-roteiro/"><img src="http://alemdoroteiro.com/wp-content/uploads/2018/11/Um-Lugar-Silencioso-capa-1.jpg" alt="Um Lugar Silencioso"></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>
              
            
!

CSS

              
                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%);
    }
}
              
            
!

JS

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

Console