diff --git a/README.md b/README.md index 005c385..ff52566 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ We would like you to create a new graphically pleasing intuitive page. ## Submission -- Create a pull request on you forked repository and send a link by email to indicate that the task is completed. (Or email as zip in case you did not use git) +- Create a pull request on your forked repository and send a link by email to indicate that the task is completed. (Or email as zip in case you did not use git) ## Running the server diff --git a/src/App.js b/src/App.js index 4720871..3f8ba20 100644 --- a/src/App.js +++ b/src/App.js @@ -1,62 +1,22 @@ import React, {Component} from 'react' import {shirt} from './resources/items' +import Header from './Header/Header' +import Category from './Category/Category' +import ItemDetail from './ItemDetail/ItemDetail' +import Recommand from './Recommand/Recommand' -const columnStyle = { - flexBasis: '40%', - minWidth: '300px' -} -const ImageContainer = ({images}) => { - const imageStyle = { - width: '100%' - } - return
- Product -
-} - -const ItemInfo = ({item}) => { - const style = { - ...columnStyle, - display: 'flex', - flexDirection: 'column' - } - return
-

{item.metadata.brand}

-

{item.metadata.type}

-

{item.currentValue}

-
-} - -const ItemDetailPage = ({item}) => { - const style = { - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'space-around' - } - return
- - -
-} class App extends Component { render () { - return + return ( +
+
+ + + +
+ ) } } diff --git a/src/Category/Category.css b/src/Category/Category.css new file mode 100644 index 0000000..8dc9954 --- /dev/null +++ b/src/Category/Category.css @@ -0,0 +1,37 @@ +.categoryContainer{ + width: 100%; + height: 48px; + background: #FAFAFA; + display: flex; + font-size: 14px; + font-family: "Open Sans", sans-serif; + font-weight: 500; + top: 56px; + position: fixed; + _position:absolute; + z-index: 99; +} +.allContainer a{ + text-decoration:none; +} +.allCategory{ + display: flex; + margin: auto; +} +.category{ + height: 48px; + display: flex; + align-items: center; + padding-right: 24px; + padding-left: 24px; + color: #008BE5; +} +.allCategory a:hover{ + background-color: white; +} + +@media (max-width: 768px){ + .categoryContainer{ + display: none; + } +} diff --git a/src/Category/Category.js b/src/Category/Category.js new file mode 100644 index 0000000..c09116b --- /dev/null +++ b/src/Category/Category.js @@ -0,0 +1,37 @@ +import React, {Component} from 'react' +import './Category.css' + + +class Category extends Component{ + render(){ + return( +
+
+ + Kläder & Accessoarer + + + Barn + + + Hem & Design + + + Hobby + + + Hemelektronik + + + Sport & Fritid + + + Media + +
+
+ ) + } +} + +export default Category; \ No newline at end of file diff --git a/src/Header/Header.css b/src/Header/Header.css new file mode 100644 index 0000000..1b68bef --- /dev/null +++ b/src/Header/Header.css @@ -0,0 +1,148 @@ +.header { + height: 56px; + width: 100%; + background: #008BE5; + display: flex; + font-family: "Open Sans", sans-serif; + position: fixed; + _position:absolute; + top: 0px; + z-index: 100; +} +a { + text-decoration-line: none; +} +.headerLogoCon{ + height: 100%; + width: 56px; + /*margin-left: 16px;*/ +} +.headerLogo{ + height: 40px; + margin-top: 8px; + margin-left: 8px; +} +.searchBar{ + height: 40px; + width: 35%; + background: white; + margin-top: 8px; + margin-left: 40px; + border-radius: 7px; +} +.searchIcon{ + width: 40px; + height: 40px; + float: right; + padding-top: 10px; +} + +.buyOrSell{ + display: flex; + margin-left: 40px; +} +.buyOrSell a:hover{ + background: rgba(255,255,255,0.36); +} +.tabSelected{ + background: rgba(255,255,255,0.36); +} +.tabTitle{ + display: flex; + justify-content: center; + margin: 18px; + font-family: "Open Sans", sans-serif; + font-size: 15px; + font-weight: bold; + color: white; +} +.tabTitleMobile{ + display: none; + +} +.tabUnelected{ + +} + +.account{ + margin-left: 60px; + display: flex; + justify-content: flex-end; +} +.myAccount{ + margin-left: 24px; +} +.accountIcon{ + margin-top: 10px; + text-align: center; +} +.accountTitle{ + margin: 0 auto; + font-size: 10px; + color: white; + text-align: center; +} +.cart{ + width: 56px; +} + +@media (min-width: 1025px){ + .account{ + margin-left: 150px; + } +} + +@media (max-width: 768px){ + .searchBar{ + display: none; + } + .tabTitle{ + display: none; + } + .tabTitleMobile{ + display: flex; + justify-content: center; + margin-left: 8px; + margin-right: 8px; + margin-top: 18px; + font-family: "Open Sans", sans-serif; + font-size: 15px; + font-weight: bold; + color: white; + } + .buyOrSell{ + margin-left: 16px; + } + .account{ + margin-left: 300px; + } + .accountTitle{ + display: none; + } + .accountIcon{ + margin-top:16px; + } + .accountIcon img{ + height: 24px; + margin-right: 8px; + } + +} + +@media (max-width: 675px){ + .account{ + margin-left: 100px; + } +} + +@media (max-width: 425px){ + .account{ + margin-left: 20px; + } +} + + + + + + diff --git a/src/Header/Header.js b/src/Header/Header.js new file mode 100644 index 0000000..5b11dcb --- /dev/null +++ b/src/Header/Header.js @@ -0,0 +1,50 @@ +import React, {Component} from 'react' +import './Header.css'; + +import sLogo from '../img/sLogo.svg' +import searchIcon from '../img/searchIcon.svg' +import myAccount from '../img/home.svg' +import cart from '../img/cart.svg' + +class Header extends Component { + render(){ + return( +
+ + + +
+
+ +
+
+
+ +

HANDLA HOS SELLPY

+

HANDLA

+ + +

SÄLJ MED SELLPY

+

SÄLJ

+ +
+
+ +
+ +
+

My account

+ + +
+ +
+

Cart

+ +
+
+ ) + } +} + +export default Header; \ No newline at end of file diff --git a/src/ItemDetail/ItemDetail.css b/src/ItemDetail/ItemDetail.css new file mode 100644 index 0000000..f106a21 --- /dev/null +++ b/src/ItemDetail/ItemDetail.css @@ -0,0 +1,161 @@ + +/*--Breadcrumbs--*/ +.breadcrumbs{ + margin-top: 128px; + padding-left: 56px; + display: flex; + font-size: 13px; + color: #B3B3B3; +} +.breadcrumbs span{ + margin-right: 4px; + margin-left: 4px; +} +.breadcrumbs a{ + color: #B3B3B3; +} +.currentCrumbs{ + color: #383838; +} + + +.itemDetail{ + width: 100%; + margin-top: 16px; + margin-bottom: 80px; + display: flex; + justify-content: center; +} + + +.itemImg{ + width: 35%; + +} +.mainImg img{ + width: 80%; +} +.imgListContainer{ + margin-top: 8px; + display: flex; +} +.imgList:hover{ + box-shadow:inset 0px 0px 0px 2px #399DDE; +} +.imgList{ + width: 64px; + height: 64px; + margin-right: 16px; +} +.imgList img{ + width: 60px; + padding-left: 2px; + padding-top: 2px; +} +.currentImg{ + box-shadow:inset 0px 0px 0px 2px #399DDE; +} + + +.itemInfo{ + width: 35%; + font-family: "Open Sans", sans-serif; + +} +.itemTitleContainer{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} +.itemBrand{ + font-size: 29px; + color: #383838; +} +.itemValue{ + font-size: 35px; + font-weight: 600; + color: #008BE5; +} + +.productInfo{ + background-color: #FAFAFA; + margin-bottom: 16px; + display: column; + padding-left: 16px; + padding-top: 8px; + padding-bottom: 8px; + font-size: 14px; +} +.infoHead{ + font-weight: 600; +} +.productInfo div{ + margin-bottom: 8px; +} + +.btns{ + display: flex; + margin-top: 32px; +} +.addToCart{ + height: 48px; + width: 280px; + background-color: #008BE5; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + font-size: 20px; + color: white; + border: none; + cursor: pointer; +} +.favorite{ + width: 48px; + height: 48px; + background: white; + border-radius: 8px; + border: 2px solid #008BE5; + display: flex; + justify-content: center; + align-items: center; + margin-left: 24px; + cursor: pointer; +} + + +@media (max-width: 768px){ + .breadcrumbs{ + margin-top: 80px; + padding-left: 16px; + } + .itemDetail{ + flex-direction: column; + } + .itemImg{ + width: 90%; + margin-left: 5%; + } + .imgListContainer{ + display: none; + } + .itemInfo{ + width: 90%; + margin-top: 24px; + margin-left: 5%; + } +} + +@media (max-width: 425px){ + .itemBrand{ + font-size: 15px; + } + .itemValue{ + font-size: 20px; + } +} + + + diff --git a/src/ItemDetail/ItemDetail.js b/src/ItemDetail/ItemDetail.js new file mode 100644 index 0000000..4393075 --- /dev/null +++ b/src/ItemDetail/ItemDetail.js @@ -0,0 +1,99 @@ +import React, {Component} from 'react' +import {shirt} from '../resources/items' +import './ItemDetail.css' +import like from '../img/like.svg' + + +const Breadcrumbs = () => { + return ( +
+ Hem + > + Kläder + > + Herrkläder + > + Skjortor +
+ ) +} + +const Item = ({item}) => { + return ( +
+
+
+ +
+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ +
+
+
{item.metadata.brand}
+
{item.currentValue} kr
+
+
+
Produktinformation
+
Typ: {item.metadata.type}
+
Strl: {item.metadata.size}
+
Färg: {item.metadata.color}
+
Conditon: {item.metadata.condition}
+
+
+
Frakt & Retur
+
Frakt: 30 kr
+
Retur: 14 dagar - returfrakt 49 kr
+
Fri frakt på ordrar över 999kr från Sellpy market
+
+
+ + +
+
+
+ ) +} + +class ItemDetail extends Component{ + render(){ + return( +
+ + +
+ ) + } +} + +export default ItemDetail; \ No newline at end of file diff --git a/src/Recommand/Recommand.css b/src/Recommand/Recommand.css new file mode 100644 index 0000000..5dec710 --- /dev/null +++ b/src/Recommand/Recommand.css @@ -0,0 +1,47 @@ +.recommandContainer{ + height: 324px; + background: #F7F7F7; + font-family: "Open Sans", sans-serif; +} +.recommandSameSeller{ + background: white; +} + +.recommandTitle{ + font-size: 20px; + color: #383838; + padding-top: 16px; + margin-left: 4%; + margin-bottom: 16px; +} +.recommandCards{ + margin-left: 56px; + height: 240px; + display: flex; + overflow: scroll; + /*overflow-y: hidden;*/ +} +.cardContainer{ + height: 240px; + width: 168px; + background: white; + margin-right: 24px; +} +.cardText{ + display: column; + text-align: center; + font-size: 11px; + color: #383838; +} +.cardBrand{ + font-weight: 600; + font-size: 14px; +} +.cardValue{ + font-weight: 600; + font-size: 17px; +} +.cardImg img{ + width: 100%; + margin-bottom: 4px; +} \ No newline at end of file diff --git a/src/Recommand/Recommand.js b/src/Recommand/Recommand.js new file mode 100644 index 0000000..02491de --- /dev/null +++ b/src/Recommand/Recommand.js @@ -0,0 +1,48 @@ +import React, {Component} from 'react' +import {shirt} from '../resources/items' +import {shoes} from '../resources/items' +import {iphone} from '../resources/items' +import './Recommand.css' + + +const RecommandCard = ({item}) => { + return( +
+ +
+ +
+
+
{item.metadata.brand}
+
{item.metadata.type}, {item.metadata.size}
+
{item.currentValue} kr
+
+ +
+ ) +} + + +class Recommand extends Component{ + render(){ + return( +
+
+
Du kanske också gillar
+
+ + +
+
+
+
Mer från samma säljare
+
+ +
+
+
+ ) + } +} + +export default Recommand; \ No newline at end of file diff --git a/src/img/cart.svg b/src/img/cart.svg new file mode 100644 index 0000000..bc8445e --- /dev/null +++ b/src/img/cart.svg @@ -0,0 +1,21 @@ + + + + cart copy + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/home.svg b/src/img/home.svg new file mode 100644 index 0000000..e35ce64 --- /dev/null +++ b/src/img/home.svg @@ -0,0 +1,22 @@ + + + + home + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/like.svg b/src/img/like.svg new file mode 100644 index 0000000..1bae4ae --- /dev/null +++ b/src/img/like.svg @@ -0,0 +1,18 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/sLogo.svg b/src/img/sLogo.svg new file mode 100644 index 0000000..f294199 --- /dev/null +++ b/src/img/sLogo.svg @@ -0,0 +1,49 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/searchIcon.svg b/src/img/searchIcon.svg new file mode 100644 index 0000000..1892b5a --- /dev/null +++ b/src/img/searchIcon.svg @@ -0,0 +1,17 @@ + + + + search icon + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file