Skip to content

Instantly share code, notes, and snippets.

@marquez138

marquez138/index.html

Created November 30, 2018 19:33
Show Gist options
  • Save marquez138/51829374e238655497802d3b9e2a963a to your computer and use it in GitHub Desktop.
Save marquez138/51829374e238655497802d3b9e2a963a to your computer and use it in GitHub Desktop.
Download ZIP
Movie
Raw
index.html
<nav>
<div class="container">
<div class="grid">
<div class="column-xs-12">
<ul>
<li><a href="#synopsis">Synopsis</a></li>
<li><a href="#gallery">Gallery</a></li>
</ul>
</div>
</div>
</div>
</nav>
<header>
<div class="container">
<div id="hero" data-aos="blur">
<h3>Based on a True Story</h3>
<h1>Nightwood Forest</h1>
<a class="get-tickets" href="#tickets">Get Tickets</a>
</div>
</div>
</header>
<main>
<div class="container">
<section id="synopsis" class="grid">
<div class="column-xs-12" data-aos="fade">
<div class="text-center">
<h2>Synopsis</h2>
<p>Crud indignant permissively through burped nodded timorous onto the as wore less ouch far rewound considering so broken dachshund jeepers sanely confident. Contemplated growled apart enthusiastically punitively much much darn onto deep dear returned some cockatoo hungrily fortuitously enchantingly ouch sanely on unceremonious especially much yikes darn.</p>
<p>Gecko far one before ouch far indistinctly ouch much doubtfully the alas some classically far insincerely much honey close savage ground according enthusiastic and that then about realistic however more forlornly dear demonstrably a this.</p>
<p>Less urgently ape one some hamster much well that dolphin strode hey underneath so eagle ouch a hey turtle notwithstanding truly censoriously congratulated dear one mandrill weak much then disconsolately wholesome.</p>
</div>
</div>
</section>
</div>
<div class="container-full">
<section id="gallery" class="grid">
<div class="column-xs-12 column-md-6" data-aos="fade">
<div class="img-container">
<img src="https://source.unsplash.com/NenS6qaMVU0">
</div>
</div>
<div class="column-xs-12 column-md-6" data-aos="fade">
<div class="img-container">
<img src="https://source.unsplash.com/2QzGNSFxLuo">
</div>
</div>
<div class="column-xs-12" data-aos="fade">
<div class="img-container">
<img src="https://source.unsplash.com/i--IN3cvEjg">
</div>
</div>
</section>
</div>
<div class="container">
<section id="tickets" class="grid">
<div class="column-xs-12" data-aos="fade-up">
<div class="text-center">
<h2>What Lies Deep in Nightwood Forest?</h2>
<a class="get-tickets" href="#">Get Tickets</a>
</div>
</div>
</section>
</div>
</main>
<footer>
<div class="container">
<section class="grid">
<div class="column-xs-12">
<p class="copyright">&copy; Copyright 2018 Katherine Kato</p>
</div>
</section>
</div>
</footer>
Raw
movie.markdown

Movie

I've been wanting to try out a dark web layout and so I made one of a fictional suspense movie with Flexbox and CSS Grid. I also added some animate on scroll effects!

A Pen by Michael Marquez on CodePen.

License.

Raw
script.js
AOS.init({
duration: 800,
once: true
});
Raw
scripts
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Oswald:600|Lato:400,700,900');
$white: #fff;
$gray: #969696;
$black: #000;
$text: #8e8e8e;
$gold: #948a64;
$light-gold: lighten($gold,8%);
$nav-gradient: transparent, rgba(0,0,0,0.5);
$text-gradient: rgba(255,255,255,0.5), rgba(148,138,100,0.25);
$header-gradient: rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 50%, $black 100%;
@mixin pseudo ($content: '') {
position: absolute;
content: $content;
}
@mixin gradient($direction, $colors) {
background: linear-gradient($direction, $colors);
}
* {
box-sizing: border-box;
&::before, &::after {
box-sizing: border-box;
}
}
body {
font-family: 'Lato', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
margin: 0;
padding: 0;
color: $text;
background: $black;
text-rendering: optimizeLegibility;
}
h1, h2, h3 {
line-height: 1.1;
}
h2, h3 {
font-family: 'Lato', sans-serif;
font-weight: 900;
color: $gold;
text-transform: uppercase;
}
h1 {
@include gradient(180deg, $text-gradient);
color: transparent;
font-family: 'Oswald', sans-serif;
font-size: 3.5rem;
font-weight: 600;
margin: 0 0 2rem;
text-transform: uppercase;
background-clip: border-box;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
h2 {
font-size: 2rem;
margin: 0 0 1.5rem;
text-align: center;
}
h3 {
font-size: 1.25rem;
margin: 1rem 0 1.5rem;
}
p {
margin: 0 0 1.5rem;
text-align: left;
&.copyright {
margin: 1.5rem 0;
text-align: center;
}
}
a {
display: inline-block;
color: $gray;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
&:hover {
color: $white;
}
&.get-tickets {
color: $black;
padding: 1rem 1.5rem;
margin: 1.5rem 0;
font-size: 1rem;
letter-spacing: 0.125rem;
text-transform: uppercase;
background: $gold;
&:hover {
background: $light-gold;
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0 1.5rem 0 0;
}
}
nav {
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 5.5rem;
padding: 1rem 0;
&::before {
@include pseudo;
@include gradient(0deg, $nav-gradient);
z-index: -1;
top: 0;
width: 100%;
height: 10rem;
}
ul {
display: flex;
justify-content: center;
li {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.125rem;
text-transform: uppercase;
margin: 0 1.5rem 0 0;
&:last-child {
margin: 0;
}
}
}
}
.container {
margin: auto;
padding: 0 1rem;
max-width: 75rem;
width: 100%;
}
header {
background: linear-gradient(180deg, $header-gradient), url('https://source.unsplash.com/1L71sPT5XKc');
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
height: 100vh;
}
main {
padding: 2rem 0;
}
section {
padding: 4rem 0;
}
footer section {
padding: 2rem 0;
}
.grid {
> [class*="column-"] {
padding: 1rem;
}
&#gallery > [class*="column-"] {
padding: 0;
.img-container {
width: 100%;
height: 45rem;
}
}
}
.text-center {
margin: auto;
text-align: center;
width: 45rem;
max-width: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
[data-aos="blur"] {
filter: blur(1rem);
opacity: 0;
transition-property: filter, opacity;
&.aos-animate {
filter: blur(0);
opacity: 1;
}
}
@media (min-width: $sm) {
body {
font-size: 1.125rem;
}
nav ul li {
font-size: 0.875rem;
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 3.625rem;
}
h3 {
font-size: 1.325rem;
letter-spacing: 0.1875rem;
}
a.get-tickets {
padding: 1.5rem 2rem;
}
}
Raw
styles
<link href="https://raw.githubusercontent.com/kathykato/12columns/master/12columns.scss" rel="stylesheet" />
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment