Skip to content

Instantly share code, notes, and snippets.

@jfairbank
Created February 6, 2017 21:21
Show Gist options
  • Save jfairbank/a85408d003472ea1aa554f10fcba31d7 to your computer and use it in GitHub Desktop.
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.
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