Created
February 6, 2017 21:21
-
-
Save jfairbank/a85408d003472ea1aa554f10fcba31d7 to your computer and use it in GitHub Desktop.
Copy & paste this into your flix application's `App.css` inside `src` to reap the benefits of some style.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
padding: 0; | |
font-family: sans-serif; | |
color: #212121; | |
} | |
.App-header { | |
background: #F44336; | |
} | |
.App-header a { | |
color: #fff; | |
font-size: 20px; | |
text-decoration: none; | |
padding-right: 30px; | |
} | |
.App-header h2 { | |
font-size: 32px; | |
} | |
.App-header a:hover { | |
color: #e0e0e0; | |
} | |
.App-header a:last-child { | |
padding-right: 0; | |
} | |
.container { | |
margin: 0 auto; | |
width: 980px; | |
} | |
.featured-movies { | |
display: flex; | |
justify-content: space-between; | |
} | |
.featured-movie { | |
text-align: left; | |
width: 24%; | |
} | |
.featured-movies__header { | |
margin-bottom: 15px; | |
margin-top: 60px; | |
} | |
.featured-movie__image img { | |
width: 100%; | |
max-height: 343px; | |
min-height: 343px; | |
} | |
.featured-movie p { | |
margin: 0; | |
cursor: default; | |
padding-bottom: 3px; | |
} | |
.featured-movie p:first-child { | |
padding-top: 15px; | |
} | |
hr { | |
margin-bottom: 15px; | |
background-color: #e0e0e0; | |
height: 1px; | |
border: 0; | |
} | |
.movie-title { | |
padding-top: 30px; | |
} | |
.movie-image { | |
order: 1; | |
padding-right: 20px; | |
} | |
.movie-information { | |
order: 1; | |
text-align: left; | |
width: 100%; | |
} | |
.movie-information, .movie-reviews { | |
background: #f7f7f7; | |
box-shadow: 0px 5px 10px 0px #e8e6e6; | |
padding: 20px; | |
} | |
.movie-title h2, .movie-reviews h2 { | |
font-size: 32px; | |
margin: 0; | |
} | |
.movie-title hr { | |
margin-bottom: 30px; | |
} | |
.movie-container { | |
display: flex; | |
} | |
.movie-reviews { | |
text-align: left; | |
margin-top: 20px; | |
} | |
.review-author { | |
font-size: 12px; | |
} | |
.movie-listings { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.movie-listings .movie-image { | |
padding-right: 6px; | |
} | |
.page-not-found { | |
margin-top: 30px; | |
font-size: 32px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment