-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bp 5 build about summary component (#15)
* Added design for the homepage. * Fix contact info * Added new design for the website. * Add rough draft of summary component * Fix up spacing for component left side and refactor some of code * Change image size depending on viewport width * Styled the button and the text. Co-authored-by: Minh Lu <[email protected]>
- Loading branch information
Showing
9 changed files
with
20,649 additions
and
39 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,27 @@ | ||
| import React from 'react'; | ||
| import cn from './BeforeAndAfter.module.scss'; | ||
| import teethBefore from 'assets/before_and_after/teeth-before.png'; | ||
| import teethAfter from 'assets/before_and_after/teeth-after.png'; | ||
| import TeethBefore from 'assets/before_and_after/teeth-before.png'; | ||
| import TeethAfter from 'assets/before_and_after/teeth-after.png'; | ||
|
|
||
| const BeforeAndAfter = () => { | ||
| return ( | ||
| <> | ||
| <div className={cn.BeforeAndAfter}> | ||
| return ( | ||
| <> | ||
| <div className={cn.BeforeAndAfter}> | ||
|
|
||
| <div className={cn.Images}> | ||
| <img src={teethBefore}></img> | ||
| <img src={teethAfter}></img> | ||
| </div> | ||
| <div className={cn.Images}> | ||
| <img src={TeethBefore}></img> | ||
| <img src={TeethAfter}></img> | ||
| </div> | ||
|
|
||
| <div className={cn.Text}> | ||
| <span className={cn.Header}>Creating Smiles with a Gentle touch.</span> | ||
| <span className={cn.Captions}> | ||
| <a href="#">Click here</a> to view our full smile gallery. | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| <div className={cn.Text}> | ||
| <span className={cn.Header}>Creating Smiles with a Gentle touch.</span> | ||
| <span className={cn.Captions}> | ||
| <a href="#">Click here</a> to view our full smile gallery. | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default BeforeAndAfter; |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react'; | ||
| import cn from './Summary.module.scss'; | ||
| import DrBergin from 'assets/summary/dr_bergin.jpg'; | ||
| import { Button } from "@material-ui/core"; | ||
|
|
||
| const Summary = () => { | ||
| return ( | ||
| <> | ||
| <div className={cn.Summary}> | ||
|
|
||
| <div className={cn.Welcome_Text}> | ||
|
|
||
| <div className={cn.Left_Space}></div> | ||
| <div className={cn.Right_Box}> | ||
| <div className={cn.Title_Text}> | ||
| <span>Welcome to</span> | ||
| <span>Bergin Prosthodontics</span> | ||
| </div> | ||
| <hr className={cn.Break}></hr> | ||
| <div className={cn.Paragraph}> | ||
| <p>lots of text here about the office lots of text here about the office</p> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div className={cn.Bergin_Image}> | ||
| <img src={DrBergin}></img> | ||
| <Button variant="contained" className={cn.Button}>Meet Dr. Bergin</Button> | ||
| </div> | ||
|
|
||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Summary |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| @import 'global.scss'; | ||
|
|
||
| .Summary { | ||
| display: flex; | ||
| justify-content: center; | ||
| min-height: 620px; | ||
| background-color: $quaternary-background-color; | ||
| } | ||
|
|
||
| .Welcome_Text { | ||
| flex-basis: 60%; | ||
| display: flex; | ||
| } | ||
|
|
||
| .Left_Space { | ||
| flex-basis: 30%; | ||
| } | ||
|
|
||
| .Right_Box { | ||
| flex-basis: 70%; | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .Title_Text { | ||
| font-size: $secondary-font-size; | ||
| color: $secondary-text; | ||
| text-align: center; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| .Title_Text span:nth-child(1) { | ||
| font-family: PlayfairDisplay-Regular; | ||
| display: block; | ||
| text-align: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .Title_Text span:nth-child(2) { | ||
| display: block; | ||
| font-family: PlayfairDisplay-Bold; | ||
| } | ||
|
|
||
| .Break{ | ||
| margin-top: 2px; | ||
| margin-bottom: 10px; | ||
| color: $secondary-text; | ||
| } | ||
|
|
||
| .Paragraph { | ||
| font-size: $primary-font-size; | ||
| font-family: OpenSans-Regular; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .Bergin_Image { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-basis: 40%; | ||
| } | ||
|
|
||
| // Tablets, phones | ||
| @media only screen and (min-width: 600px) { | ||
| .Bergin_Image img { | ||
| width: 300px; | ||
| } | ||
| } | ||
|
|
||
| // Monitors, laptops | ||
| @media only screen and (min-width: 1200px) { | ||
| .Bergin_Image img { | ||
| width: 379px; | ||
| } | ||
| } | ||
|
|
||
| .Button { | ||
| margin-top: 16px !important; | ||
| background-color: $quaternary-background-color; | ||
| color: $secondary-text; | ||
| font-family: PlayfairDisplay-Bold4 !important; | ||
| font-size: 20px !important; | ||
| border: 1px solid #304774 !important; | ||
|
|
||
| } |
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