Skip to content

Starter #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thechestercodes wants to merge 2 commits into
base: starter
Choose a base branch
from
Open

Starter #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b311f04
refactor
thechestercodes Sep 14, 2020
7d88d88
refactor
thechestercodes Sep 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 0 additions & 32 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 23 additions & 23 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,32 @@ import Header from "./components/header";
import "./App.scss";

function App() {
const imageDetails = {
width: 524,
height: 650,
};
const imageDetails = {
width: 524,
height: 650,
};

return (
<Router>
<Header />
<Route
render={({ location }) => (
<Switch location={location} key={location.pathname}>
return (
<Router>
<Header />
<Route
exact
path='/'
render={() => <Home imageDetails={imageDetails} />}
render={({ location }) => (
<Switch location={location} key={location.pathname}>
<Route
exact
path="/"
render={() => <Home imageDetails={imageDetails} />}
/>
<Route
exact
path="/model/:id"
render={() => <Model imageDetails={imageDetails} />}
/>
</Switch>
)}
/>
<Route
exact
path='/model/:id'
render={() => <Model imageDetails={imageDetails} />}
/>
</Switch>
)}
/>
</Router>
);
</Router>
);
}

export default App;
73 changes: 40 additions & 33 deletions src/pages/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,47 @@ import { Link } from "react-router-dom";
import ProgressiveImage from "react-progressive-image";

const Home = ({ imageDetails, image }) => (
<>
<main>
<div className='container'>
<div className='row center'>
<div className='image-container'>
<div
className='thumbnail'
ref={image}
style={{
width: imageDetails.width,
height: imageDetails.height,
}}>
<div className='frame'>
<Link to={`/model/yasmeen-tariq`}>
<ProgressiveImage
src={require("../images/yasmeen.webp")}
placeholder={require("../images/compressed-image.jpg")}>
{(src) => <img src={src} alt='Yasmeen Tariq' />}
</ProgressiveImage>
</Link>
</div>
<>
<main>
<div className="container">
<div className="row center">
<div className="image-container">
<div
className="thumbnail"
ref={image}
style={{
width: imageDetails.width,
height: imageDetails.height,
}}
>
<div className="frame">
<Link to={`/model/yasmeen-tariq`}>
<ProgressiveImage
src={require("../images/yasmeen.webp")}
placeholder={require("../images/compressed-image.jpg")}
>
{(src) => (
<img
src={src}
alt="Yasmeen Tariq"
/>
)}
</ProgressiveImage>
</Link>
</div>
</div>
<div className="information">
<div className="title">Yasmeen Tariq</div>
<div className="location">
<span>28.538336</span>
<span>-81.379234</span>
</div>
</div>
</div>
</div>
</div>
<div className='information'>
<div className='title'>Yasmeen Tariq</div>
<div className='location'>
<span>28.538336</span>
<span>-81.379234</span>
</div>
</div>
</div>
</div>
</div>
</main>
</>
</main>
</>
);

export default Home;
140 changes: 74 additions & 66 deletions src/pages/model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,84 @@ import ScrollForMore from "../components/scrollForMore";
//Ease

const Model = () => {
return (
<div className='single'>
<div className='container fluid'>
<div className='row center top-row'>
<div className='top'>
<div className='details'>
<div className='location'>
<span>28.538336</span>
<span>-81.379234</span>
</div>
<div className='mua'>MUA: @mylifeascrystall</div>
</div>
<div className='model'>
<span className='first'>
<span>Y</span>
<span>a</span>
<span>s</span>
<span>m</span>
<span>e</span>
<span>e</span>
<span>n</span>
</span>
<span className='last'>
<span>T</span>
<span>a</span>
<span>r</span>
<span>i</span>
<span>q</span>
</span>
return (
<div className="single">
<div className="container fluid">
<div className="row center top-row">
<div className="top">
<div className="details">
<div className="location">
<span>28.538336</span>
<span>-81.379234</span>
</div>
<div className="mua">MUA: @mylifeascrystall</div>
</div>
<div className="model">
<span className="first">
<span>Y</span>
<span>a</span>
<span>s</span>
<span>m</span>
<span>e</span>
<span>e</span>
<span>n</span>
</span>
<span className="last">
<span>T</span>
<span>a</span>
<span>r</span>
<span>i</span>
<span>q</span>
</span>
</div>
</div>
</div>
<div className="row bottom-row">
<div className="bottom">
<div className="image-container-single">
<div className="thumbnail-single">
<div className="frame-single">
<img
src={require("../images/yasmeen.webp")}
alt="an image"
/>
</div>
</div>
</div>
</div>
<ScrollForMore />
</div>
</div>
</div>
</div>
<div className='row bottom-row'>
<div className='bottom'>
<div className='image-container-single'>
<div className='thumbnail-single'>
<div className='frame-single'>
<img src={require("../images/yasmeen.webp")} alt='an image' />
<div className="detailed-information">
<div className="container">
<div className="row">
<h2 className="title">
The insiration behind the artwork & <br /> what it
means.
</h2>
<p>
Contrary to popular belief, Lorem Ipsum is not
simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it
over 2000 years old. Richard McClintock, a Latin
professor at Hampden-Sydney College in Virginia,
looked up one of the more obscure Latin words,
consectetur, from a Lorem Ipsum passage, and going
through the cites of the word in classical
literature, discovered the undoubtable source. Lorem
Ipsum comes from sections 1.10.32 and 1.10.33 of "de
Finibus Bonorum et Malorum" (The Extremes of Good
and Evil) by Cicero, written in 45 BC. This book is
a treatise on the theory of ethics, very popular
during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a
line in section 1.10.32.
</p>
</div>
</div>
</div>
</div>
</div>
<ScrollForMore />
</div>
</div>
<div className='detailed-information'>
<div className='container'>
<div className='row'>
<h2 className='title'>
The insiration behind the artwork & <br /> what it means.
</h2>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin
professor at Hampden-Sydney College in Virginia, looked up one of
the more obscure Latin words, consectetur, from a Lorem Ipsum
passage, and going through the cites of the word in classical
literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45
BC. This book is a treatise on the theory of ethics, very popular
during the Renaissance. The first line of Lorem Ipsum, "Lorem
ipsum dolor sit amet..", comes from a line in section 1.10.32.
</p>
</div>
</div>
</div>
</div>
);
);
};

export default Model;