Skip to content

Commit

Permalink
added styling to RentalLibrary and Movie components
Browse files Browse the repository at this point in the history
  • Loading branch information
aribray committed Jun 27, 2019
1 parent 1be56db commit 2a85d7d
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 9 deletions.
46 changes: 46 additions & 0 deletions src/components/Movie.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.movie {
font-family: "Wire One", sans-serif;
}

.movie__header {
text-align: center;
font-size: 4rem;
font-weight: bolder;
}

.movie__title {
text-align: center;
font-weight: bolder;
font-size: 3rem;
}

.card {
margin: 5px;
width: 30rem;
}

.card-text.text {
padding-left: 10px;
text-align: center;
font-size: 1.4rem;
font-weight: bolder;
text-decoration: underline;
}


.customer__info {
list-style-type: none;
}

.select_button {
padding-top: 5px;
text-align: center;
}

.select__movie a {
color: white;
}

.select__movie a:hover {
color: goldenrod;
}
15 changes: 8 additions & 7 deletions src/components/Movie.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import "./Movie.css"


const Movie = (props) => {
Expand All @@ -8,15 +9,15 @@ const Movie = (props) => {
}

return (
<div className="movie">
<div className="movie__section">
<h3 className="movie__title">{props.title}</h3>
<img className="image" src={props.image_url} alt="this is an image"/>
<div className="movie card">
<div className="movie__section card-body">
<h3 className="movie__title card-title">{props.title}</h3>
<img className="image card-img-top" src={props.image_url} alt="this is an image"/>
<div className="middle">
<div className="text">{props.overview}</div>
<div className="text card-text">{props.overview}</div>
</div>
<div className="movie__info">
<li><a href="#" onClick={selectMovie}>Select Movie</a></li>
<div className="select_button">
<button className=" select__movie btn btn-dark"><a href="#" onClick={selectMovie}>Select Movie</a></button>
</div>
</div>
</div>
Expand Down
7 changes: 5 additions & 2 deletions src/components/RentalLibrary.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,11 @@ class RentalLibrary extends Component {

return (
<div >
<div className="rentals">
{allRentals}
<div>
<h1 className="movie movie__header">Rent Today!</h1>
<div className="row">
{allRentals}
</div>
</div>
</div>
)
Expand Down

0 comments on commit 2a85d7d

Please sign in to comment.