diff --git a/components/Layout.js b/components/Layout.js index 91d970a..9f5d2d4 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,6 +1,6 @@ import React from 'react' // import Link from 'next/link' -import '../sass/app.scss'; +// import '../sass/app.scss'; import Head from '../components/head' const Layout = (props) => ( diff --git a/pages/single.js b/pages/single.js index 683760f..a394f9e 100644 --- a/pages/single.js +++ b/pages/single.js @@ -1,15 +1,61 @@ import Layout from '../components/Layout' +import '../static/app.css'; + class Single extends React.Component { render() { + return ( +
+
+ logo +
+ +
+ My image +
+ +
+
+

Banana

+
+ +
+

May - June

+
+
+
+
-

Single Fruit Page

+

Nutritional Value

+
+ logo +
+
+ +
+
+

Health Benefit

+
+
+ logo +
+
+ +
+

1. Bananas May Aid Weight Loss

+

2. Bananas May Support Heart Health

+

3. Bananas Contain Powerful Antioxidants

+

4. Manganese in Bananas is good for your skin

+
+ +
) } } -export default Single \ No newline at end of file +export default Single + diff --git a/sass/_cdn.scss b/sass/_cdn.scss deleted file mode 100644 index b2f97a8..0000000 --- a/sass/_cdn.scss +++ /dev/null @@ -1 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Dosis:400,700&display=swap'); \ No newline at end of file diff --git a/sass/_variables.scss b/sass/_variables.scss deleted file mode 100644 index a246fb5..0000000 --- a/sass/_variables.scss +++ /dev/null @@ -1,4 +0,0 @@ - -//App theme -$primary: #FFFFFF; -$secondary: #000000; \ No newline at end of file diff --git a/sass/app.scss b/sass/app.scss deleted file mode 100644 index dd4361e..0000000 --- a/sass/app.scss +++ /dev/null @@ -1,14 +0,0 @@ - -@import "cdn"; -@import "variables"; - -body { - font-family: 'Dosis', sans-serif !important; - background: $primary; - margin: 0 auto; -} - -h1, h2, h3, h4 { - margin: 0px; - padding: 0px; -} \ No newline at end of file diff --git a/static/app.css b/static/app.css new file mode 100644 index 0000000..30000e6 --- /dev/null +++ b/static/app.css @@ -0,0 +1,85 @@ +@import url('https://fonts.googleapis.com/css?family=Dosis:400,700&display=swap'); + + +body{ + font-family: 'Dosis', sans-serif !important; + background:#FFFFFF ; + margin: 0 auto; +} + +.single-fruit-image { + padding: 10px; +} +.App { + width: 90%; + margin: auto; +} +img{ + border-radius: 10px; + max-width: 100%; + width: 100%; + height: auto; +} + +.up{ + height: 25px; +} + +.down{ + height: 25px; +} + +.logo{ + margin-left:13px; + width: 30px; + height: 70px; +} + +h2{ + font-weight: bold; + margin-left: 12px ; + margin-top:10px; +} +.single-fruit-display{ + display: flex; +} + +.single-fruit-display > div { + width:50%; +} +.single-fruit-display > div:nth-child(2) { + padding-right:10px; + text-align: right; +} + +h3{ + margin-top:10px; + font-weight: bolder; + font-size: 25px; +} + +h1{ + font-size:25px; +} + +p{ + padding: 0; + margin: 5px; + font-size: 20px; + margin-left: 10px; +} + +.single-fruit-category { + display: flex; + padding-left: 10px; + padding-right: 10px; + margin-top: 0px; + padding-top: 0px; + +} + +.single-fruit-category > div:nth-child(2) { + margin-left: auto; + width: 10%; + padding-top: 20px; +} diff --git a/static/images/banana.jpg b/static/images/banana.jpg new file mode 100644 index 0000000..e44df4f Binary files /dev/null and b/static/images/banana.jpg differ diff --git a/static/images/down.svg b/static/images/down.svg new file mode 100644 index 0000000..5b390ec --- /dev/null +++ b/static/images/down.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/left.svg b/static/images/left.svg new file mode 100644 index 0000000..35dd857 --- /dev/null +++ b/static/images/left.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/logo.svg b/static/images/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/static/images/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/preview.png b/static/images/preview.png new file mode 100644 index 0000000..04f5029 Binary files /dev/null and b/static/images/preview.png differ diff --git a/static/images/up.svg b/static/images/up.svg new file mode 100644 index 0000000..cf8952a --- /dev/null +++ b/static/images/up.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +