From cec25b3d712aacdc2a7eef336fff770e2715c320 Mon Sep 17 00:00:00 2001 From: thith thin Date: Tue, 10 Mar 2020 16:02:11 +0700 Subject: [PATCH 1/9] update --- package-lock.json | 18 +- package.json | 2 +- src/App.css | 868 +++++++++++++++++---------------- src/components/Home.js | 61 ++- src/components/Navbar.js | 128 +++-- src/components/data/index.json | 6 - 6 files changed, 542 insertions(+), 541 deletions(-) diff --git a/package-lock.json b/package-lock.json index 233448d..8c2a1de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1280,9 +1280,9 @@ "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" }, "@restart/hooks": { - "version": "0.3.20", - "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.20.tgz", - "integrity": "sha512-Q1eeEqcxHQ4oqty7C5Me8/hzWwdCRR643nR/6EHxv8BVxLVYHe4IoWAHg8MIGkE4VtSm3/JnNhkoLJhCkLx5aw==" + "version": "0.3.21", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.21.tgz", + "integrity": "sha512-Wcu3CFJV+iiqPEIoPVx3/CYnZBRgPeRABo6bLJByRH9ptJXyObn7WYPG7Rv0cg3+55bqcBbG0xEfovzwE2PNXg==" }, "@sheerun/mutationobserver-shim": { "version": "0.3.2", @@ -7661,11 +7661,6 @@ "object.assign": "^4.1.0" } }, - "keycode": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", - "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" - }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -10348,9 +10343,9 @@ } }, "react-bootstrap": { - "version": "1.0.0-beta.16", - "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.16.tgz", - "integrity": "sha512-wjb+3CwviDWAaz4O3gQpd2XMDNqbOiqOOzpLm5aLPcp1wTsQsVRhyM+rTPmO3hYU8auA2eNpTYLz08/fAcMqDA==", + "version": "1.0.0-beta.17", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.17.tgz", + "integrity": "sha512-7VP9doezV4rX0EcajzMvyD6ywtrLfulF3ZAev+uTx8syWQybUkccOpecUO5kPomng/bJMgK/h+44PkZ15Dv44g==", "requires": { "@babel/runtime": "^7.4.2", "@restart/context": "^2.1.4", @@ -10359,7 +10354,6 @@ "classnames": "^2.2.6", "dom-helpers": "^5.1.2", "invariant": "^2.2.4", - "keycode": "^2.2.0", "popper.js": "^1.16.0", "prop-types": "^15.7.2", "prop-types-extra": "^1.1.0", diff --git a/package.json b/package.json index 61fdf31..f21d7a1 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "@testing-library/user-event": "^7.2.1", "bootstrap": "^4.4.1", "react": "^16.12.0", - "react-bootstrap": "^1.0.0-beta.16", + "react-bootstrap": "^1.0.0-beta.17", "react-dom": "^16.12.0", "react-markdown": "^4.3.1", "react-router-dom": "^5.1.2", diff --git a/src/App.css b/src/App.css index bdfa784..ce2356d 100644 --- a/src/App.css +++ b/src/App.css @@ -5,29 +5,24 @@ } /* navbar */ -.navbar-light{ +.navbar-light { background-color: #153b44; } #v-logo { font-size: 30px; - color: black; -} -#sticky-nav { - position: sticky; - top: 0; + font-weight: bold; } .navbar-nav a { cursor: pointer; margin-right: 10px; - font-size: 18px; + font-size: 19px; } - /* Banner */ .text-center { - margin-top: 4%; + margin-top: 6%; } #banner { @@ -37,64 +32,64 @@ #banner-background { background-image: linear-gradient(to top, #0fd850 0%, #daeeac 100%); - /* background-image: linear-gradient(to top, #0fd850 0%, #f6d51a 100%); */ height: 35rem; } #header-banner { - font-family: "Fjalla One"; font-size: 95px; + font-weight: bold; } #banner-text { font-size: 30px; } -/* Image right*/ +/* Contents */ -.certain { - display: flex; - flex-direction: row; +/* Image right*/ +.container{ + display: grid; } - -.cover-description { - margin: 0; - margin-top: 18%; +.cover-description-right { + margin-top: 40%; padding: 0; - display: block; - width: 35rem; } .img-right { - margin-left: 10%; - margin-top: 25%; - width: 80%; + margin-left: 15%; + margin-top: 40%; } .cover1 { height: 45rem; - /* background-color: #f0f0f0; */ } .header { font-size: 55px; + font-weight: bold; + color: #153b44; } .description { - font-size: 20px; + font-size: 25px; } .readmore { - width: 10rem; + width: 8rem; } /* Image left */ .img-left { - margin-right: 10%; - margin-top: 25%; - width: 80%; + margin-top: 40%; } +.cover-description-left{ + margin-left: 25%; + margin-top: 40%; + width: 100%; + padding: 0; +} + .cover2 { height: 45rem; @@ -106,19 +101,17 @@ /* background-color: #3a3d44; */ background-color: #153b44; height: 20rem; + margin-top: 10%; } .logo { font-size: 65px; - margin-top: 10%; -} - -.col-md-4 { - margin-top: 2%; + margin-top: 15%; } .sw-logo { width: 22rem; + margin-top: 5%; } .copy-right { @@ -128,543 +121,566 @@ text-align: end; } - /* responsive */ -/* Extra small devices (phones, 600px and down) */ -@media only screen and (max-width:600px) { + + + +/* Small devices (portrait and landscape phones, 300px and up) */ + +/* ======iPhone5======= */ + +/* Portrait */ +@media only screen + and (min-device-width: 320px) + and (max-device-width: 568px) + and (-webkit-min-device-pixel-ratio: 2) + and (orientation: portrait) { + /* navbar */ + .navbar { - padding: 0; - height: 40px; + padding: 0; + height: 40px; } + #v-logo { - display: none; - padding: 0; - margin: 0; + display: none; } + .navbar-nav a { - cursor: pointer; - margin-right: 10px; - font-size: 9px; - padding: 0; - overflow: hidden; + cursor: pointer; + font-size: 9px; + padding: 0; + overflow: hidden; } + .div.container { - text-align: center; - justify-content: center; + text-align: center; + justify-content: center; + } + + .navbar-expand .navbar-nav .nav-link { + padding: 0; } /* banner */ - #header-banner { - font-size: 40px; + margin-top: 15%; + font-size: 40px; + font-weight: bolder; } #banner-text { - font-size: 18px; + font-size: 20px; } + #banner-background { - height: 22rem; + height: 22rem; } + #banner { - height: 20rem; + height: 20rem; } - /* contents-right pic */ - .header { - font-size: 30px; + .container{ + display: grid; } - .subtitle { - font-size: 20px; - } - .description { - font-size: 18px; + + .header { + font-size: 34px; + font-weight: bold; } - .img-right { - display: none; + + .description{ + justify-content: center; + font-size: 20px; + width: 100%; + overflow: hidden; } - .rounded.float-right { - padding: 0; - margin: 0; + + .cover-description-right { + margin: 0; + margin-top: 15%; + padding:5%; } + .cover1 { - padding: 0; - margin: 0%; - height: 23rem; - } + padding: 0; + margin: 0%; + height: 50rem; + } + .readmore { - max-width: 35%; - height: 30px; - font-size: 12px; - margin-left: 30%; + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 25%; } - /* contents-left contents */ - .img-left { - display: none; + .img-right{ + width: 80%; + margin-left: 10%; + margin-top: 10%; } + + + /* contents-left contents */ .cover2 { - padding: 0; + padding: 0; + margin: 0; + height: 50rem; + } + + .img-left{ + width: 80%; + margin-left: 10%; + margin-top: 10%; + } + .cover-description-left { margin: 0; - height: 23rem; + margin-top: 15%; + padding:5%; + } + + #column-reverse{ + display: flex; + flex-direction: column-reverse; } - /* footer */ - .sw-logo { - width: 50%; - margin-left: 25%; - margin-top: 30px; + width: 60%; + margin-left: 20%; + margin-top: 60px; } + .logo { - display: none; + display: none; + font-size: 40px; + margin-top: 50px; } + + #cover-logo { + margin-top: 0; + padding: 0; + } + + #cover-copyright { + padding: 0; + margin: 0; + } + .copy-right { - font-size: 15px; - text-align: center; - justify-self: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 45px; + margin-top: 50px; } } -/* Small devices (portrait tablets and large phones, 600px and up) */ -@media only screen and (min-width: 600px) { - /* navbar */ - .navbar { - padding: 0; - height: 40px; - } - #v-logo.nav-link { - font-size: 20px; - margin-left: 15px; - padding: 0; - margin-right: 20px; - } - .navbar-nav a { - cursor: pointer; - margin-right: 12px; - font-size: 12px; - padding: 0; - overflow: hidden; - } - .div.container { - text-align: center; - justify-content: center; - } - .navbar-expand .navbar-nav .nav-link { - padding: 0; - } +/* Landscape */ +@media only screen +and (min-device-width: 320px) +and (max-device-width: 568px) +and (-webkit-min-device-pixel-ratio: 2) +and (orientation: landscape) { - /* banner */ + /* navbar */ - #header-banner { - font-size: 50px; - } - #banner-text { - font-size: 25px; - } - #banner-background { - height: 22rem; + .navbar-nav a { + padding: 0 !important; + overflow: hidden; } - #banner { - height: 20rem; + #v-logo { + font-size: 12px !important; } /* contents-right pic */ - .header { - font-size: 35px; - } - .subtitle { - font-size: 25px; - } - .description { - font-size: 20px; - } - .img-right { - margin-top: 90%; - margin-left: 20%; - padding: 0; - } - .rounded.float-right { - padding: 0; - margin: 0; + + .cover-description-right { + margin-top: 8% !important; + padding:5% !important; } .cover1 { - padding: 0; - margin: 0%; - height: 33rem; - } + height: 40rem !important; + } .readmore { - max-width: 40%; - height: 30px; - font-size: 12px; - margin-left: 30%; + margin-left: 35% !important; } - /* contents-left contents */ - .img-left { - margin-top: 90%; - } - .cover2 { - padding: 0; - margin: 0; - height: 33rem; + .img-right{ + width: 50% !important; + margin-left: 25% !important; + margin-top: 5% !important; } - /* footer */ - - .sw-logo { - width: 40%; - margin-left: 30%; - margin-top: 60px; - } - .logo { - display: none; - font-size: 40px; - margin-top: 50px; - } - #cover-logo { - margin-top: 0; - padding: 0; + /* contents-left contents */ + .cover2 { + height: 40rem !important; } - #cover-copyright { - padding: 0; - margin: 0; + .img-left{ + width: 50% !important; + margin-left: 25% !important; + margin-top: 5% !important; } - .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + .cover-description-left { + margin-top: 8% !important; + padding:5% !important; } - .footer { - margin-top: 120px; + #column-reverse{ + display: flex; + flex-direction: column-reverse; } + } -/* Medium devices (landscape tablets, 768px and up) */ -@media only screen and (min-width: 768px) { + + + +/* ======iPhone6 to 8======= */ + + +/* portrait */ +@media only screen + and (min-device-width: 375px) + and (max-device-width: 667px) + and (-webkit-min-device-pixel-ratio: 2) + and (orientation: portrait) { + /* navbar */ - .navbar { - padding: 0; - height: 60px; - } - #v-logo.nav-link { - font-size: 25px; - padding: 0; - margin-right: 45px; - } - .navbar-nav a { - cursor: pointer; - margin-right: 12px; - font-size: 12px; - padding: 0; - overflow: hidden; - } - .div.container { - text-align: center; - justify-content: center; - } - .navbar-expand .navbar-nav .nav-link { - padding: 0; - } + .navbar-nav a { + cursor: pointer; + font-size: 11px !important; + padding: 0; + overflow: hidden; + } /* banner */ #header-banner { - font-size: 55px; - } - #banner-text { - font-size: 25px; - } - #banner-background { - height: 28rem; - } - #banner { - height: 24rem; - } + margin-top: 5%; + font-size: 40px; + font-weight: bolder; + } + + .readmore { + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 30%; + } + +} + + +/* Landscape */ +@media only screen + and (min-device-width: 375px) + and (max-device-width: 667px) + and (-webkit-min-device-pixel-ratio: 2) + and (orientation: landscape) { + + /* navbar */ + .navbar-nav a { + cursor: pointer; + font-size: 14px !important; + padding: 0; + overflow: hidden; + } + + #v-logo { + font-size: 19px; + margin-right: 3%; + } + /* banner */ + #header-banner { + margin-top: 5%; + font-size: 40px; + font-weight: bolder; + } + #banner-text { + font-size: 24px; + } + #banner-background { + height: 25rem; + } + #banner { + height: 22rem; + } /* contents-right pic */ + .header { - font-size: 40px; - } - .subtitle { - font-size: 27px; + font-size: 34px; + font-weight: bold; } - .description { - font-size: 21px; - } - .img-right { - margin-top: 60%; - margin-left: 30%; - padding: 0; + + .description{ + justify-content: center; + font-size: 20px; + width: 100%; + overflow: hidden; } - .rounded.float-right { - padding: 0; - margin: 0; + + .cover-description-right { + margin: 0; + margin-top: 20%; + padding:5%; } + .cover1 { - padding: 0; - margin: 0%; - height: 33rem; - } + padding: 0; + margin: 0%; + height: 30rem; + } + .readmore { - max-width: 30%; - height: 30px; - font-size: 12px; - margin-left: 30%; + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 25%; } - /* contents-left contents */ - .img-left { - margin-top: 60%; - } - .cover2 { - padding: 0; - margin: 0; - height: 33rem; + .img-right{ + width:120%; + margin-left: 10%; + margin-top: 100%; } - /* footer */ - - .sw-logo { - width: 90%; - margin-left: 20px; - margin-top: 50px; +/* contents-left contents */ +.cover2 { + padding: 0; + margin: 0; + height: 30rem; +} + + .img-left{ + width: 120%; + margin-left:20%; + margin-top: 100%; +} +.cover-description-left { + margin: 0; + margin-top:20%; + padding:5%; + width: 100%; +} + /* footer */ +.sw-logo { + width: 60%; + margin-left: 20%; + margin-top: 60px; } - .logo{ - display: inline; - } - #cover-copyright { - margin-left: 20%; + + .logo { + display: none; + font-size: 40px; + margin-top: 50px; } + #cover-logo { - font-size: 60px; - margin-left: 30px; - margin-top: 55px; + margin-top: 0; + padding: 0; + } + + #cover-copyright { + padding: 0; + margin: 0; } + .copy-right { - font-size: 15px; - margin-right: 15px; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 15%; + margin-top: 50px; } } -/* Large devices (laptops/desktops, 992px and up) */ -@media only screen and (min-width: 992px) { + +/* ----------- iPhone 6+, 7+ and 8+ ----------- */ + +/* Portrait */ +@media only screen + and (min-device-width: 414px) + and (max-device-width: 736px) + and (-webkit-min-device-pixel-ratio: 3) + and (orientation: portrait) { + /* navbar */ - .navbar { - padding: 0; - height: 60px; - } - #v-logo.nav-link { - font-size: 30px; - padding: 0; - margin-right: 20px; - } .navbar-nav a { - cursor: pointer; - margin-right: 12px; - font-size: 19px; - padding: 0; + font-size: 12px !important; overflow: hidden; } - .div.container { - text-align: center; - justify-content: center; - } - .navbar-expand .navbar-nav .nav-link { - padding: 0; - } +} - /* banner */ +/* Landscape */ +@media only screen + and (min-device-width: 414px) + and (max-device-width: 812px) + and (-webkit-min-device-pixel-ratio: 3) + and (orientation: landscape) { + /* navbar */ + .navbar-nav a { + font-size: 15px !important; + overflow: hidden; + } + + #v-logo { + font-size: 25px; + margin-right: 7%; + margin-left: -8%; + } + /* banner */ #header-banner { - font-size: 65px; + margin-top: 7%; + font-size: 50px; } #banner-text { - font-size: 27px; + font-size: 25px; } #banner-background { - height: 28rem; + height: 25rem; } #banner { - height: 24rem; + height: 22rem; } - /* contents-right pic */ +/* contents-right pic */ + .header { - font-size: 50px; - } - .subtitle { - font-size: 30px; + font-size: 34px; } - .description { - font-size: 25px; + + .description{ + font-size: 20px; + width: 100%; } - .img-right { - margin-top: 45%; - margin-left: 15%; - padding: 0; - } - .rounded.float-right { - padding: 0; - margin: 0; + + .cover-description-right { + margin-top: 20%; + padding:5%; } + .cover1 { - padding: 0; - margin: 0%; - height: 33rem; - } + height: 30rem; + } + .readmore { - max-width: 30%; - height: 37px; - font-size: 16px; - margin-left: 30%; + font-size: 12px; + margin-left: 25%; } - /* contents-left contents */ - .img-left { - margin-top: 45%; - } + .img-right{ + width:120%; + margin-left: 10%; + margin-top: 100%; + } +/* contents-left contents */ .cover2 { - padding: 0; - margin: 0; - height: 33rem; + height: 30rem; } - /* footer */ + .img-left{ + width: 120%; + margin-left:20%; + margin-top: 100%; + } + .cover-description-left { + margin-top:20%; + padding:5%; + width: 100%; + } - .sw-logo { - width: 95%; - margin-left: 20px; - margin-top: 50px; + /* footer */ +.sw-logo { + width: 60%; + margin-left: 20%; + margin-top: 60px; } - #cover-copyright { - margin-left: 20%; + + .logo { + display: none; + font-size: 40px; + margin-top: 50px; } + #cover-logo { - margin-left: 70px; + margin-top: 0; + padding: 0; } - .logo { - margin-left: 40px; - font-size: 65px; + + #cover-copyright { + padding: 0; + margin: 0; } + .copy-right { - font-size: 19px; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 15%; + margin-top: 50px; } } -/* Extra large devices (large laptops and desktops, 1200px and up) */ -@media only screen and (min-width: 1200px) { - /* navbar */ - .navbar { - padding: 0; - height: 70px; - } - #v-logo.nav-link { - font-size: 40px; - padding: 0; - margin-right: 20px; - } - .navbar-nav a { - cursor: pointer; - margin-right: 12px; - font-size: 22px; - padding: 0; - overflow: hidden; - } - .div.container { - text-align: center; - justify-content: center; - } - .navbar-expand .navbar-nav .nav-link { - padding: 0; - } - /* banner */ +/* ----------- iPhone X ----------- */ +/* Landscape */ +@media only screen + and (max-device-width: 812px) + and (-webkit-min-device-pixel-ratio: 3) + and (orientation: landscape) { + /* banner */ #header-banner { - font-size: 75px; + margin-top: 7%; + font-size: 50px; } #banner-text { - font-size: 33px; + font-size: 25px; } #banner-background { - height: 28rem; + height: 25rem; } #banner { - height: 24rem; + height: 22rem; } - /* contents-right pic */ - .header { - font-size: 60px; - } - .subtitle { - font-size: 35px; - } - .description { - font-size: 28px; +/* contents-right pic */ + +.header { + font-size: 34px; } - .img-right { - margin-top: 45%; - margin-left: 15%; - padding: 0; + + .description{ + font-size: 20px; + width: 100%; } - .rounded.float-right { - padding: 0; - margin: 0; + + .cover-description-right { + margin-top: 20%; + padding:5%; } + .cover1 { - padding: 0; - margin: 0%; - height: 40rem; - } + height: 30rem; + } + .readmore { - max-width: 30%; - height: 37px; - font-size: 16px; - margin-left: 30%; + font-size: 12px; + margin-left: 25%; } - /* contents-left contents */ - .img-left { - margin-top: 45%; - } - .cover2 { - padding: 0; - margin: 0; - height: 40rem; - } - - /* footer */ + .img-right{ + width:130%; + margin-left: 10%; + margin-top: 100%; + } - .sw-logo { - width: 95%; - margin-left: 20px; - margin-top: 50px; - } - #cover-copyright { - margin-left: 20%; - } - #cover-logo { - margin-left: 70px; - } - .logo { - margin-left: 40px; - font-size: 65px; - } - .copy-right { - font-size: 19px; - } - .footer { - margin-top: 15%; - } } + diff --git a/src/components/Home.js b/src/components/Home.js index 1aa92c0..20f619b 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -5,21 +5,22 @@ import Footer from "./Footer"; import data from "./data/index.json"; import Button from "react-bootstrap/Button"; import { Link } from "react-router-dom"; +import Row from "react-bootstrap/Row"; +import Col from "react-bootstrap/Col"; export default function home() { const DisplayData = () => { return data.map((res, index) => { console.log(res); - + if (index % 2 === 0) { return ( -
-
-
-
-
+
+
+ + +

{res.title}

-

{res.subTitle}

{res.desc.substring(0, 325)}...

@@ -29,35 +30,33 @@ export default function home() {
-
- {res.title} -
-
-
+ + + {res.title} + +
); } else { - return (
-
-
-
-
- {res.title} -
-
+
+ + + {res.title} + + +

{res.title}

-

{res.subTitle}

{res.desc.substring(0, 325)}...

@@ -67,8 +66,8 @@ export default function home() {
-
-
+ +
); diff --git a/src/components/Navbar.js b/src/components/Navbar.js index df4fcf6..f58b288 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -9,71 +9,69 @@ import { function NavBar () { return ( - + +
+ + +
+ ); } diff --git a/src/components/data/index.json b/src/components/data/index.json index e89223a..c84271b 100644 --- a/src/components/data/index.json +++ b/src/components/data/index.json @@ -1,7 +1,6 @@ [ { "title": "Reforestation", - "subTitle": "Rebuild the planet", "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you. ", "logo": "/img/tree.png", "link": "/test1", @@ -9,7 +8,6 @@ }, { "title": "Natural Farming", - "subTitle": "Green Framing", "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.", "logo": "/img/farm.png", "link": "/test2", @@ -17,7 +15,6 @@ }, { "title": "Ecotourism", - "subTitle": "Travel", "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.", "logo": "/img/cyclist.png", "link": "/test3", @@ -25,7 +22,6 @@ }, { "title": "Seeds Bomb", - "subTitle": "Throw out the seeds", "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.", "logo": "/img/seeds.png", "link": "/test4", @@ -33,7 +29,6 @@ }, { "title": "Air Water", - "subTitle": "Air from the water", "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.", "logo": "/img/humidity.png", "link": "/test5", @@ -41,7 +36,6 @@ }, { "title": "About", - "subTitle": "Our missions", "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.", "logo": "/img/natural.png", "link": "/test6", From eac610d7c61d1bbec6d249c41c171af56c460ea5 Mon Sep 17 00:00:00 2001 From: thith thin Date: Wed, 11 Mar 2020 15:55:49 +0700 Subject: [PATCH 2/9] update --- src/App.css | 158 +++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 126 insertions(+), 32 deletions(-) diff --git a/src/App.css b/src/App.css index ce2356d..3a8ea84 100644 --- a/src/App.css +++ b/src/App.css @@ -31,7 +31,7 @@ } #banner-background { - background-image: linear-gradient(to top, #0fd850 0%, #daeeac 100%); + background-image: linear-gradient(to top, #0fd850 0%, #01380a 100%); height: 35rem; } @@ -124,8 +124,6 @@ /* responsive */ - - /* Small devices (portrait and landscape phones, 300px and up) */ /* ======iPhone5======= */ @@ -149,7 +147,6 @@ } .navbar-nav a { - cursor: pointer; font-size: 9px; padding: 0; overflow: hidden; @@ -255,8 +252,6 @@ .logo { display: none; - font-size: 40px; - margin-top: 50px; } #cover-logo { @@ -293,7 +288,7 @@ and (orientation: landscape) { overflow: hidden; } #v-logo { - font-size: 12px !important; + font-size: 11px !important; } /* contents-right pic */ @@ -335,10 +330,7 @@ and (orientation: landscape) { } - - - -/* ======iPhone6 to 8======= */ +/* ======iPhone6 to 8 and Galaxy s ======= */ /* portrait */ @@ -350,7 +342,6 @@ and (orientation: landscape) { /* navbar */ .navbar-nav a { - cursor: pointer; font-size: 11px !important; padding: 0; overflow: hidden; @@ -383,15 +374,15 @@ and (orientation: landscape) { /* navbar */ .navbar-nav a { - cursor: pointer; - font-size: 14px !important; + font-size: 13px !important; padding: 0; overflow: hidden; } #v-logo { - font-size: 19px; + font-size: 15px !important; margin-right: 3%; + /* display: none; */ } /* banner */ #header-banner { @@ -457,7 +448,7 @@ and (orientation: landscape) { .img-left{ width: 120%; - margin-left:20%; + margin-left:-10%; margin-top: 100%; } .cover-description-left { @@ -468,15 +459,13 @@ and (orientation: landscape) { } /* footer */ .sw-logo { - width: 60%; - margin-left: 20%; + width: 50% !important; + margin-left: 25% !important; margin-top: 60px; } .logo { display: none; - font-size: 40px; - margin-top: 50px; } #cover-logo { @@ -519,7 +508,7 @@ and (orientation: landscape) { /* Landscape */ @media only screen and (min-device-width: 414px) - and (max-device-width: 812px) + and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { @@ -530,9 +519,9 @@ and (orientation: landscape) { } #v-logo { - font-size: 25px; + font-size: 23px; margin-right: 7%; - margin-left: -8%; + margin-left: -8% !important; } /* banner */ #header-banner { @@ -575,9 +564,9 @@ and (orientation: landscape) { } .img-right{ - width:120%; + width:120% !important; margin-left: 10%; - margin-top: 100%; + margin-top: 100% !important; } /* contents-left contents */ .cover2 { @@ -585,9 +574,9 @@ and (orientation: landscape) { } .img-left{ - width: 120%; + width: 120% !important; margin-left:20%; - margin-top: 100%; + margin-top: 100% !important; } .cover-description-left { margin-top:20%; @@ -604,8 +593,6 @@ and (orientation: landscape) { .logo { display: none; - font-size: 40px; - margin-top: 50px; } #cover-logo { @@ -632,10 +619,24 @@ and (orientation: landscape) { /* ----------- iPhone X ----------- */ /* Landscape */ @media only screen + and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { + + /* navbar */ + .navbar-nav a { + font-size: 15px !important; + overflow: hidden; + } + + #v-logo { + font-size: 23px; + margin-right: 7%; + margin-left: -2%; + } + /* banner */ #header-banner { margin-top: 7%; @@ -677,10 +678,103 @@ and (orientation: landscape) { } .img-right{ - width:130%; - margin-left: 10%; - margin-top: 100%; + width:110%; + margin-left: 1%; + margin-top: 70%; } + +/* contents-left contents */ +.cover2 { + height: 30rem; +} + +.img-left{ + width: 110%; + margin-left:10%; + margin-top: 70%; +} +.cover-description-left { + margin-top:20%; + margin-left: 13%; + padding:5%; + width: 100%; +} + + /* footer */ + .sw-logo { + width: 80%; + margin-left: 10%; + margin-top: 60px; + } + + .logo { + display: none; + } + + #cover-logo { + margin-top: 0; + padding: 0; + } + + #cover-copyright { + padding: 0; + margin: 0; + } + + .copy-right { + font-size: 15px; + text-align: center; + justify-content: center; + } + .footer { + margin-top: 50px; + } + + } +/* ----------- Google Pixel XL ----------- */ + +/* Landscape */ +@media screen + and (device-width: 411px) + and (device-height: 731px) + and (-webkit-device-pixel-ratio: ៣) + and (orientation: landscape) { + + /* navbar */ + .navbar-nav a { + font-size: 15px !important; + overflow: hidden; + } + /* banner */ + #header-banner { + margin-top: 7%; + font-size: 50px; + } + #banner-text { + font-size: 25px; + } + #banner-background { + height: 25rem; + } + #banner { + height: 22rem; + } + #v-logo { + font-size: 23px !important; + margin-right: 7% !important; + margin-left: -2% !important; + } + + /* banner */ + #header-banner { + margin-top: 7%; + font-size: 50px; + } + #banner-text { + font-size: 25px !important; + } + +} \ No newline at end of file From 1535552e9da4623d732d43c98059ab491e705ef1 Mon Sep 17 00:00:00 2001 From: thith thin Date: Wed, 11 Mar 2020 16:06:40 +0700 Subject: [PATCH 3/9] update --- src/App.css | 685 ++++++++++++++++++++++++---------------------------- 1 file changed, 322 insertions(+), 363 deletions(-) diff --git a/src/App.css b/src/App.css index 3a8ea84..da76942 100644 --- a/src/App.css +++ b/src/App.css @@ -22,7 +22,7 @@ /* Banner */ .text-center { - margin-top: 6%; + margin-top: 2%; } #banner { @@ -47,7 +47,7 @@ /* Contents */ /* Image right*/ -.container{ +.container { display: grid; } .cover-description-right { @@ -83,14 +83,13 @@ .img-left { margin-top: 40%; } -.cover-description-left{ +.cover-description-left { margin-left: 25%; margin-top: 40%; width: 100%; padding: 0; } - .cover2 { height: 45rem; } @@ -123,229 +122,210 @@ /* responsive */ - /* Small devices (portrait and landscape phones, 300px and up) */ /* ======iPhone5======= */ /* Portrait */ -@media only screen - and (min-device-width: 320px) - and (max-device-width: 568px) - and (-webkit-min-device-pixel-ratio: 2) - and (orientation: portrait) { - +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { /* navbar */ - + .navbar { - padding: 0; - height: 40px; + padding: 0; + height: 40px; } - + #v-logo { - display: none; + display: none; } - + .navbar-nav a { - font-size: 9px; - padding: 0; - overflow: hidden; + font-size: 9px; + padding: 0; + overflow: hidden; } - + .div.container { - text-align: center; - justify-content: center; + text-align: center; + justify-content: center; } - + .navbar-expand .navbar-nav .nav-link { - padding: 0; + padding: 0; } /* banner */ #header-banner { - margin-top: 15%; - font-size: 40px; - font-weight: bolder; + margin-top: 15%; + font-size: 40px; + font-weight: bolder; } #banner-text { - font-size: 20px; + font-size: 20px; } - + #banner-background { - height: 22rem; + height: 22rem; } - + #banner { - height: 20rem; + height: 20rem; } /* contents-right pic */ - .container{ + .container { display: grid; } .header { - font-size: 34px; - font-weight: bold; + font-size: 34px; + font-weight: bold; } - - .description{ - justify-content: center; - font-size: 20px; - width: 100%; - overflow: hidden; + + .description { + justify-content: center; + font-size: 20px; + width: 100%; + overflow: hidden; } - + .cover-description-right { - margin: 0; - margin-top: 15%; - padding:5%; + margin: 0; + margin-top: 15%; + padding: 5%; } - + .cover1 { - padding: 0; - margin: 0%; - height: 50rem; - } - - .readmore { - max-width: 50%; - height: 30px; - font-size: 12px; - margin-left: 25%; + padding: 0; + margin: 0%; + height: 50rem; } - .img-right{ - width: 80%; - margin-left: 10%; - margin-top: 10%; + .readmore { + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 25%; } + .img-right { + width: 80%; + margin-left: 10%; + margin-top: 10%; + } /* contents-left contents */ .cover2 { - padding: 0; - margin: 0; - height: 50rem; + padding: 0; + margin: 0; + height: 50rem; } - - .img-left{ - width: 80%; - margin-left: 10%; - margin-top: 10%; + + .img-left { + width: 80%; + margin-left: 10%; + margin-top: 10%; } .cover-description-left { margin: 0; margin-top: 15%; - padding:5%; - } - - #column-reverse{ + padding: 5%; + } + + #column-reverse { display: flex; flex-direction: column-reverse; } /* footer */ .sw-logo { - width: 60%; - margin-left: 20%; - margin-top: 60px; + width: 60%; + margin-left: 20%; + margin-top: 60px; } - + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } } /* Landscape */ -@media only screen -and (min-device-width: 320px) -and (max-device-width: 568px) -and (-webkit-min-device-pixel-ratio: 2) -and (orientation: landscape) { - +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { /* navbar */ .navbar-nav a { - padding: 0 !important; - overflow: hidden; + padding: 0 !important; + overflow: hidden; } #v-logo { - font-size: 11px !important; + font-size: 11px !important; } /* contents-right pic */ .cover-description-right { - margin-top: 8% !important; - padding:5% !important; + margin-top: 8% !important; + padding: 5% !important; } .cover1 { - height: 40rem !important; - } + height: 40rem !important; + } .readmore { - margin-left: 35% !important; + margin-left: 35% !important; } - .img-right{ - width: 50% !important; - margin-left: 25% !important; - margin-top: 5% !important; + .img-right { + width: 50% !important; + margin-left: 25% !important; + margin-top: 5% !important; } /* contents-left contents */ .cover2 { - height: 40rem !important; + height: 40rem !important; } - .img-left{ - width: 50% !important; - margin-left: 25% !important; - margin-top: 5% !important; + .img-left { + width: 50% !important; + margin-left: 25% !important; + margin-top: 5% !important; } .cover-description-left { - margin-top: 8% !important; - padding:5% !important; + margin-top: 8% !important; + padding: 5% !important; } - #column-reverse{ - display: flex; - flex-direction: column-reverse; + #column-reverse { + display: flex; + flex-direction: column-reverse; } - } /* ======iPhone6 to 8 and Galaxy s ======= */ - /* portrait */ -@media only screen - and (min-device-width: 375px) - and (max-device-width: 667px) - and (-webkit-min-device-pixel-ratio: 2) - and (orientation: portrait) { - +@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { /* navbar */ - .navbar-nav a { - font-size: 11px !important; - padding: 0; - overflow: hidden; - } + .navbar-nav a { + font-size: 11px !important; + padding: 0; + overflow: hidden; + } /* banner */ @@ -353,151 +333,138 @@ and (orientation: landscape) { margin-top: 5%; font-size: 40px; font-weight: bolder; - } + } - .readmore { - max-width: 50%; - height: 30px; - font-size: 12px; - margin-left: 30%; - } - + .readmore { + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 30%; + } } - /* Landscape */ -@media only screen - and (min-device-width: 375px) - and (max-device-width: 667px) - and (-webkit-min-device-pixel-ratio: 2) - and (orientation: landscape) { - - /* navbar */ - .navbar-nav a { - font-size: 13px !important; - padding: 0; - overflow: hidden; - } - - #v-logo { - font-size: 15px !important; - margin-right: 3%; - /* display: none; */ - } - /* banner */ +@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { + /* navbar */ + .navbar-nav a { + font-size: 13px !important; + padding: 0; + overflow: hidden; + } + + #v-logo { + font-size: 15px !important; + margin-right: 3%; + /* display: none; */ + } + /* banner */ #header-banner { margin-top: 5%; font-size: 40px; font-weight: bolder; - } - #banner-text { + } + #banner-text { font-size: 24px; - } - #banner-background { + } + #banner-background { height: 25rem; - } - #banner { + } + #banner { height: 22rem; - } + } /* contents-right pic */ .header { - font-size: 34px; - font-weight: bold; + font-size: 34px; + font-weight: bold; } - - .description{ - justify-content: center; - font-size: 20px; - width: 100%; - overflow: hidden; + + .description { + justify-content: center; + font-size: 20px; + width: 100%; + overflow: hidden; } - + .cover-description-right { - margin: 0; - margin-top: 20%; - padding:5%; + margin: 0; + margin-top: 20%; + padding: 5%; } - + .cover1 { - padding: 0; - margin: 0%; - height: 30rem; - } - + padding: 0; + margin: 0%; + height: 30rem; + } + .readmore { - max-width: 50%; - height: 30px; - font-size: 12px; - margin-left: 25%; + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 25%; } - .img-right{ - width:120%; - margin-left: 10%; - margin-top: 100%; + .img-right { + width: 120%; + margin-left: 10%; + margin-top: 100%; } -/* contents-left contents */ -.cover2 { - padding: 0; - margin: 0; - height: 30rem; -} - - .img-left{ - width: 120%; - margin-left:-10%; - margin-top: 100%; -} -.cover-description-left { - margin: 0; - margin-top:20%; - padding:5%; - width: 100%; -} - /* footer */ -.sw-logo { - width: 50% !important; - margin-left: 25% !important; - margin-top: 60px; + /* contents-left contents */ + .cover2 { + padding: 0; + margin: 0; + height: 30rem; + } + + .img-left { + width: 120%; + margin-left: -10%; + margin-top: 100%; + } + .cover-description-left { + margin: 0; + margin-top: 20%; + padding: 5%; + width: 100%; } - + /* footer */ + .sw-logo { + width: 50% !important; + margin-left: 25% !important; + margin-top: 60px; + } + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } } - /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait */ -@media only screen - and (min-device-width: 414px) - and (max-device-width: 736px) - and (-webkit-min-device-pixel-ratio: 3) - and (orientation: portrait) { - +@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { /* navbar */ .navbar-nav a { font-size: 12px !important; @@ -506,24 +473,19 @@ and (orientation: landscape) { } /* Landscape */ -@media only screen - and (min-device-width: 414px) - and (max-device-width: 736px) - and (-webkit-min-device-pixel-ratio: 3) - and (orientation: landscape) { - +@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { /* navbar */ .navbar-nav a { font-size: 15px !important; overflow: hidden; } - + #v-logo { font-size: 23px; margin-right: 7%; margin-left: -8% !important; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -538,106 +500,99 @@ and (orientation: landscape) { height: 22rem; } -/* contents-right pic */ + /* contents-right pic */ .header { - font-size: 34px; + font-size: 34px; } - - .description{ - font-size: 20px; - width: 100%; + + .description { + font-size: 20px; + width: 100%; } - + .cover-description-right { - margin-top: 20%; - padding:5%; + margin-top: 20%; + padding: 5%; } - + .cover1 { - height: 30rem; - } - + height: 30rem; + } + .readmore { - font-size: 12px; - margin-left: 25%; + font-size: 12px; + margin-left: 25%; } - .img-right{ - width:120% !important; - margin-left: 10%; - margin-top: 100% !important; - } -/* contents-left contents */ + .img-right { + width: 120% !important; + margin-left: 10%; + margin-top: 100% !important; + } + /* contents-left contents */ .cover2 { height: 30rem; } - .img-left{ + .img-left { width: 120% !important; - margin-left:20%; + margin-left: 20%; margin-top: 100% !important; } .cover-description-left { - margin-top:20%; - padding:5%; + margin-top: 20%; + padding: 5%; width: 100%; } - /* footer */ -.sw-logo { - width: 60%; - margin-left: 20%; - margin-top: 60px; + /* footer */ + .sw-logo { + width: 60%; + margin-left: 20%; + margin-top: 60px; } - + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } } - /* ----------- iPhone X ----------- */ /* Landscape */ -@media only screen - and (min-device-width: 375px) - and (max-device-width: 812px) - and (-webkit-min-device-pixel-ratio: 3) - and (orientation: landscape) { - - +@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { /* navbar */ .navbar-nav a { font-size: 15px !important; overflow: hidden; } - + #v-logo { font-size: 23px; margin-right: 7%; margin-left: -2%; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -652,103 +607,95 @@ and (orientation: landscape) { height: 22rem; } -/* contents-right pic */ + /* contents-right pic */ -.header { - font-size: 34px; + .header { + font-size: 34px; } - - .description{ - font-size: 20px; - width: 100%; + + .description { + font-size: 20px; + width: 100%; } - + .cover-description-right { - margin-top: 20%; - padding:5%; + margin-top: 20%; + padding: 5%; } - + .cover1 { - height: 30rem; - } - - .readmore { - font-size: 12px; - margin-left: 25%; + height: 30rem; } - .img-right{ - width:110%; - margin-left: 1%; - margin-top: 70%; - } + .readmore { + font-size: 12px; + margin-left: 25%; + } + .img-right { + width: 110%; + margin-left: 1%; + margin-top: 70%; + } -/* contents-left contents */ -.cover2 { - height: 30rem; -} + /* contents-left contents */ + .cover2 { + height: 30rem; + } -.img-left{ - width: 110%; - margin-left:10%; - margin-top: 70%; -} -.cover-description-left { - margin-top:20%; - margin-left: 13%; - padding:5%; - width: 100%; -} + .img-left { + width: 110%; + margin-left: 10%; + margin-top: 70%; + } + .cover-description-left { + margin-top: 20%; + margin-left: 13%; + padding: 5%; + width: 100%; + } - /* footer */ - .sw-logo { - width: 80%; - margin-left: 10%; - margin-top: 60px; + /* footer */ + .sw-logo { + width: 80%; + margin-left: 10%; + margin-top: 60px; } - + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } - - } /* ----------- Google Pixel XL ----------- */ /* Landscape */ -@media screen - and (device-width: 411px) - and (device-height: 731px) - and (-webkit-device-pixel-ratio: ៣) - and (orientation: landscape) { - - /* navbar */ +@media screen and (device-width: 411px) and (device-height: 731px) and (-webkit-device-pixel-ratio: ៣) and (orientation: landscape) { + /* navbar */ .navbar-nav a { font-size: 15px !important; overflow: hidden; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -768,7 +715,7 @@ and (orientation: landscape) { margin-left: -2% !important; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -776,5 +723,17 @@ and (orientation: landscape) { #banner-text { font-size: 25px !important; } - -} \ No newline at end of file +} /* banner */ +#header-banner { + margin-top: 7%; + font-size: 50px; +} +#banner-text { + font-size: 25px; +} +#banner-background { + height: 25rem; +} +#banner { + height: 22rem; +} From bb1df52cff02ed1967e169a2f4fbd16e6efd7a35 Mon Sep 17 00:00:00 2001 From: thith thin Date: Wed, 11 Mar 2020 16:30:09 +0700 Subject: [PATCH 4/9] apdate --- src/App.css | 684 +++++++++++++++++++++++++++------------------------- 1 file changed, 362 insertions(+), 322 deletions(-) diff --git a/src/App.css b/src/App.css index da76942..745f8e9 100644 --- a/src/App.css +++ b/src/App.css @@ -22,7 +22,7 @@ /* Banner */ .text-center { - margin-top: 2%; + margin-top: 6%; } #banner { @@ -47,7 +47,7 @@ /* Contents */ /* Image right*/ -.container { +.container{ display: grid; } .cover-description-right { @@ -83,13 +83,14 @@ .img-left { margin-top: 40%; } -.cover-description-left { +.cover-description-left{ margin-left: 25%; margin-top: 40%; width: 100%; padding: 0; } + .cover2 { height: 45rem; } @@ -122,210 +123,229 @@ /* responsive */ + /* Small devices (portrait and landscape phones, 300px and up) */ /* ======iPhone5======= */ /* Portrait */ -@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { - /* navbar */ +@media only screen + and (min-device-width: 320px) + and (max-device-width: 568px) + and (-webkit-min-device-pixel-ratio: 2) + and (orientation: portrait) { + /* navbar */ + .navbar { - padding: 0; - height: 40px; + padding: 0; + height: 40px; } - + #v-logo { - display: none; + display: none; } - + .navbar-nav a { - font-size: 9px; - padding: 0; - overflow: hidden; + font-size: 9px; + padding: 0; + overflow: hidden; } - + .div.container { - text-align: center; - justify-content: center; + text-align: center; + justify-content: center; } - + .navbar-expand .navbar-nav .nav-link { - padding: 0; + padding: 0; } /* banner */ #header-banner { - margin-top: 15%; - font-size: 40px; - font-weight: bolder; + margin-top: 15%; + font-size: 40px; + font-weight: bolder; } #banner-text { - font-size: 20px; + font-size: 20px; } - + #banner-background { - height: 22rem; + height: 22rem; } - + #banner { - height: 20rem; + height: 20rem; } /* contents-right pic */ - .container { + .container{ display: grid; } .header { - font-size: 34px; - font-weight: bold; + font-size: 34px; + font-weight: bold; } - - .description { - justify-content: center; - font-size: 20px; - width: 100%; - overflow: hidden; + + .description{ + justify-content: center; + font-size: 20px; + width: 100%; + overflow: hidden; } - + .cover-description-right { - margin: 0; - margin-top: 15%; - padding: 5%; + margin: 0; + margin-top: 15%; + padding:5%; } - + .cover1 { - padding: 0; - margin: 0%; - height: 50rem; - } - + padding: 0; + margin: 0%; + height: 50rem; + } + .readmore { - max-width: 50%; - height: 30px; - font-size: 12px; - margin-left: 25%; + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 25%; } - .img-right { - width: 80%; - margin-left: 10%; - margin-top: 10%; + .img-right{ + width: 80%; + margin-left: 10%; + margin-top: 10%; } + /* contents-left contents */ .cover2 { - padding: 0; - margin: 0; - height: 50rem; + padding: 0; + margin: 0; + height: 50rem; } - - .img-left { - width: 80%; - margin-left: 10%; - margin-top: 10%; + + .img-left{ + width: 80%; + margin-left: 10%; + margin-top: 10%; } .cover-description-left { margin: 0; margin-top: 15%; - padding: 5%; - } - - #column-reverse { + padding:5%; + } + + #column-reverse{ display: flex; flex-direction: column-reverse; } /* footer */ .sw-logo { - width: 60%; - margin-left: 20%; - margin-top: 60px; + width: 60%; + margin-left: 20%; + margin-top: 60px; } - + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } } /* Landscape */ -@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { +@media only screen +and (min-device-width: 320px) +and (max-device-width: 568px) +and (-webkit-min-device-pixel-ratio: 2) +and (orientation: landscape) { + /* navbar */ .navbar-nav a { - padding: 0 !important; - overflow: hidden; + padding: 0 !important; + overflow: hidden; } #v-logo { - font-size: 11px !important; + font-size: 11px !important; } /* contents-right pic */ .cover-description-right { - margin-top: 8% !important; - padding: 5% !important; + margin-top: 8% !important; + padding:5% !important; } .cover1 { - height: 40rem !important; - } + height: 40rem !important; + } .readmore { - margin-left: 35% !important; + margin-left: 35% !important; } - .img-right { - width: 50% !important; - margin-left: 25% !important; - margin-top: 5% !important; + .img-right{ + width: 50% !important; + margin-left: 25% !important; + margin-top: 5% !important; } /* contents-left contents */ .cover2 { - height: 40rem !important; + height: 40rem !important; } - .img-left { - width: 50% !important; - margin-left: 25% !important; - margin-top: 5% !important; + .img-left{ + width: 50% !important; + margin-left: 25% !important; + margin-top: 5% !important; } .cover-description-left { - margin-top: 8% !important; - padding: 5% !important; + margin-top: 8% !important; + padding:5% !important; } - #column-reverse { - display: flex; - flex-direction: column-reverse; + #column-reverse{ + display: flex; + flex-direction: column-reverse; } + } /* ======iPhone6 to 8 and Galaxy s ======= */ + /* portrait */ -@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { +@media only screen + and (min-device-width: 375px) + and (max-device-width: 667px) + and (-webkit-min-device-pixel-ratio: 2) + and (orientation: portrait) { + /* navbar */ - .navbar-nav a { - font-size: 11px !important; - padding: 0; - overflow: hidden; - } + .navbar-nav a { + font-size: 11px !important; + padding: 0; + overflow: hidden; + } /* banner */ @@ -333,138 +353,151 @@ margin-top: 5%; font-size: 40px; font-weight: bolder; - } + } - .readmore { - max-width: 50%; - height: 30px; - font-size: 12px; - margin-left: 30%; - } + .readmore { + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 30%; + } + } -/* Landscape */ -@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { - /* navbar */ - .navbar-nav a { - font-size: 13px !important; - padding: 0; - overflow: hidden; - } - #v-logo { - font-size: 15px !important; - margin-right: 3%; - /* display: none; */ - } - /* banner */ +/* Landscape */ +@media only screen + and (min-device-width: 375px) + and (max-device-width: 667px) + and (-webkit-min-device-pixel-ratio: 2) + and (orientation: landscape) { + + /* navbar */ + .navbar-nav a { + font-size: 13px !important; + padding: 0; + overflow: hidden; + } + + #v-logo { + font-size: 15px !important; + margin-right: 3%; + /* display: none; */ + } + /* banner */ #header-banner { margin-top: 5%; font-size: 40px; font-weight: bolder; - } - #banner-text { + } + #banner-text { font-size: 24px; - } - #banner-background { + } + #banner-background { height: 25rem; - } - #banner { + } + #banner { height: 22rem; - } + } /* contents-right pic */ .header { - font-size: 34px; - font-weight: bold; + font-size: 34px; + font-weight: bold; } - - .description { - justify-content: center; - font-size: 20px; - width: 100%; - overflow: hidden; + + .description{ + justify-content: center; + font-size: 20px; + width: 100%; + overflow: hidden; } - + .cover-description-right { - margin: 0; - margin-top: 20%; - padding: 5%; + margin: 0; + margin-top: 20%; + padding:5%; } - + .cover1 { - padding: 0; - margin: 0%; - height: 30rem; - } - + padding: 0; + margin: 0%; + height: 30rem; + } + .readmore { - max-width: 50%; - height: 30px; - font-size: 12px; - margin-left: 25%; + max-width: 50%; + height: 30px; + font-size: 12px; + margin-left: 25%; } - .img-right { - width: 120%; - margin-left: 10%; - margin-top: 100%; + .img-right{ + width:120%; + margin-left: 10%; + margin-top: 100%; } - /* contents-left contents */ - .cover2 { - padding: 0; - margin: 0; - height: 30rem; - } - - .img-left { - width: 120%; - margin-left: -10%; - margin-top: 100%; - } - .cover-description-left { - margin: 0; - margin-top: 20%; - padding: 5%; - width: 100%; - } - /* footer */ - .sw-logo { - width: 50% !important; - margin-left: 25% !important; - margin-top: 60px; +/* contents-left contents */ +.cover2 { + padding: 0; + margin: 0; + height: 30rem; +} + + .img-left{ + width: 120%; + margin-left:-10%; + margin-top: 100%; +} +.cover-description-left { + margin: 0; + margin-top:20%; + padding:5%; + width: 100%; +} + /* footer */ +.sw-logo { + width: 50% !important; + margin-left: 25% !important; + margin-top: 60px; } - + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } } + /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait */ -@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { +@media only screen + and (min-device-width: 414px) + and (max-device-width: 736px) + and (-webkit-min-device-pixel-ratio: 3) + and (orientation: portrait) { + /* navbar */ .navbar-nav a { font-size: 12px !important; @@ -473,19 +506,24 @@ } /* Landscape */ -@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { +@media only screen + and (min-device-width: 414px) + and (max-device-width: 736px) + and (-webkit-min-device-pixel-ratio: 3) + and (orientation: landscape) { + /* navbar */ .navbar-nav a { font-size: 15px !important; overflow: hidden; } - + #v-logo { font-size: 23px; margin-right: 7%; margin-left: -8% !important; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -500,99 +538,106 @@ height: 22rem; } - /* contents-right pic */ +/* contents-right pic */ .header { - font-size: 34px; + font-size: 34px; } - - .description { - font-size: 20px; - width: 100%; + + .description{ + font-size: 20px; + width: 100%; } - + .cover-description-right { - margin-top: 20%; - padding: 5%; + margin-top: 20%; + padding:5%; } - + .cover1 { - height: 30rem; - } - + height: 30rem; + } + .readmore { - font-size: 12px; - margin-left: 25%; + font-size: 12px; + margin-left: 25%; } - .img-right { - width: 120% !important; - margin-left: 10%; - margin-top: 100% !important; - } - /* contents-left contents */ + .img-right{ + width:120% !important; + margin-left: 10%; + margin-top: 100% !important; + } +/* contents-left contents */ .cover2 { height: 30rem; } - .img-left { + .img-left{ width: 120% !important; - margin-left: 20%; + margin-left:20%; margin-top: 100% !important; } .cover-description-left { - margin-top: 20%; - padding: 5%; + margin-top:20%; + padding:5%; width: 100%; } - /* footer */ - .sw-logo { - width: 60%; - margin-left: 20%; - margin-top: 60px; + /* footer */ +.sw-logo { + width: 60%; + margin-left: 20%; + margin-top: 60px; } - + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } } + /* ----------- iPhone X ----------- */ /* Landscape */ -@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { +@media only screen + and (min-device-width: 375px) + and (max-device-width: 812px) + and (-webkit-min-device-pixel-ratio: 3) + and (orientation: landscape) { + + /* navbar */ .navbar-nav a { font-size: 15px !important; overflow: hidden; } - + #v-logo { font-size: 23px; margin-right: 7%; margin-left: -2%; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -607,95 +652,102 @@ height: 22rem; } - /* contents-right pic */ +/* contents-right pic */ - .header { - font-size: 34px; +.header { + font-size: 34px; } - - .description { - font-size: 20px; - width: 100%; + + .description{ + font-size: 20px; + width: 100%; } - + .cover-description-right { - margin-top: 20%; - padding: 5%; + margin-top: 20%; + padding:5%; } - + .cover1 { - height: 30rem; - } - + height: 30rem; + } + .readmore { - font-size: 12px; - margin-left: 25%; + font-size: 12px; + margin-left: 25%; } - .img-right { - width: 110%; - margin-left: 1%; - margin-top: 70%; - } + .img-right{ + width:110%; + margin-left: 1%; + margin-top: 70%; + } - /* contents-left contents */ - .cover2 { - height: 30rem; - } - .img-left { - width: 110%; - margin-left: 10%; - margin-top: 70%; - } - .cover-description-left { - margin-top: 20%; - margin-left: 13%; - padding: 5%; - width: 100%; - } +/* contents-left contents */ +.cover2 { + height: 30rem; +} - /* footer */ - .sw-logo { - width: 80%; - margin-left: 10%; - margin-top: 60px; - } +.img-left{ + width: 110%; + margin-left:10%; + margin-top: 70%; +} +.cover-description-left { + margin-top:20%; + margin-left: 13%; + padding:5%; + width: 100%; +} + /* footer */ + .sw-logo { + width: 80%; + margin-left: 10%; + margin-top: 60px; + } + .logo { - display: none; + display: none; } - + #cover-logo { - margin-top: 0; - padding: 0; + margin-top: 0; + padding: 0; } - + #cover-copyright { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } - + .copy-right { - font-size: 15px; - text-align: center; - justify-content: center; + font-size: 15px; + text-align: center; + justify-content: center; } .footer { - margin-top: 50px; + margin-top: 50px; } + + } /* ----------- Google Pixel XL ----------- */ /* Landscape */ -@media screen and (device-width: 411px) and (device-height: 731px) and (-webkit-device-pixel-ratio: ៣) and (orientation: landscape) { - /* navbar */ +@media screen + and (device-width: 411px) + and (device-height: 731px) + and (-webkit-device-pixel-ratio: ៣) + and (orientation: landscape) { + /* navbar */ .navbar-nav a { font-size: 15px !important; overflow: hidden; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -715,7 +767,7 @@ margin-left: -2% !important; } - /* banner */ + /* banner */ #header-banner { margin-top: 7%; font-size: 50px; @@ -723,17 +775,5 @@ #banner-text { font-size: 25px !important; } -} /* banner */ -#header-banner { - margin-top: 7%; - font-size: 50px; -} -#banner-text { - font-size: 25px; -} -#banner-background { - height: 25rem; -} -#banner { - height: 22rem; -} + +} \ No newline at end of file From 84dc51a6acf7090ab9791958b4a8fa3655beed0e Mon Sep 17 00:00:00 2001 From: thith thin Date: Thu, 12 Mar 2020 13:55:10 +0700 Subject: [PATCH 5/9] update --- src/App.css | 288 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 260 insertions(+), 28 deletions(-) diff --git a/src/App.css b/src/App.css index 745f8e9..29e6477 100644 --- a/src/App.css +++ b/src/App.css @@ -22,7 +22,7 @@ /* Banner */ .text-center { - margin-top: 6%; + margin-top: 8%; } #banner { @@ -57,7 +57,8 @@ .img-right { margin-left: 15%; - margin-top: 40%; + margin-top: 80%; + width:95% ; } .cover1 { @@ -81,10 +82,11 @@ /* Image left */ .img-left { - margin-top: 40%; + margin-top: 80%; + width: 95%; } .cover-description-left{ - margin-left: 25%; + margin-left: 10%; margin-top: 40%; width: 100%; padding: 0; @@ -680,7 +682,7 @@ and (orientation: landscape) { .img-right{ width:110%; margin-left: 1%; - margin-top: 70%; + margin-top: 70% !important; } @@ -692,7 +694,7 @@ and (orientation: landscape) { .img-left{ width: 110%; margin-left:10%; - margin-top: 70%; + margin-top: 70% !important; } .cover-description-left { margin-top:20%; @@ -709,7 +711,8 @@ and (orientation: landscape) { } .logo { - display: none; + margin-top: 35%; + font-size: 40px !important; } #cover-logo { @@ -724,8 +727,6 @@ and (orientation: landscape) { .copy-right { font-size: 15px; - text-align: center; - justify-content: center; } .footer { margin-top: 50px; @@ -734,22 +735,129 @@ and (orientation: landscape) { } -/* ----------- Google Pixel XL ----------- */ -/* Landscape */ -@media screen - and (device-width: 411px) - and (device-height: 731px) - and (-webkit-device-pixel-ratio: ៣) - and (orientation: landscape) { - /* navbar */ +/* =================Tablet portrait======================= */ + +@media (min-width: 481px) and (max-width: 767px) { + + + /* navbar */ .navbar-nav a { font-size: 15px !important; overflow: hidden; } - /* banner */ - #header-banner { - margin-top: 7%; + + #v-logo { + font-size: 23px; + margin-right: 7%; + margin-left: -10% !important; + } + + /* banner */ + #header-banner { + margin-top: 6%; + font-size: 50px; +} +#banner-text { + font-size: 25px; +} +#banner-background { + height: 25rem; +} +#banner { + height: 22rem; +} + +/* contents-right pic */ + +.header { + font-size: 34px; + } + + .description{ + font-size: 20px; + width: 100%; + } + + .cover-description-right { + margin-top: 20%; + padding:5%; + } + + .cover1 { + height: 30rem; + } + + .readmore { + font-size: 12px; + margin-left: 25%; + } + + .img-right{ + width:120% !important; + margin-left: 10%; + margin-top: 100% !important; + } +/* contents-left contents */ + .cover2 { + height: 30rem; + } + + .img-left{ + width: 120% !important; + margin-left:20%; + margin-top: 100% !important; + } + .cover-description-left { + margin-top:20%; + padding:5%; + width: 100%; + } + + /* footer */ + .sw-logo { + width: 60% !important; + margin-left: 20%; + margin-top: 60px; + } + + .logo { + display: none; + } + + #cover-logo { + margin-top: 0; + padding: 0; + } + + #cover-copyright { + padding: 0; + margin: 0; + } + + .copy-right { + font-size: 15px; + text-align: center; + justify-content: center; + } + .footer { + margin-top: 50px; + } + +} + +@media (min-width: 768px) and (max-width: 1024px) { + /* navbar */ + + #v-logo { + font-size: 22px; + margin-right: 4%; + margin-left: -2%; + } + + /* banner */ + #header-banner { + margin-top: 6%; font-size: 50px; } #banner-text { @@ -761,19 +869,143 @@ and (orientation: landscape) { #banner { height: 22rem; } + + /* contents-right pic */ + + .header { + font-size: 34px; + } + + .description{ + font-size: 20px; + width: 100%; + } + + .cover-description-right { + margin-top: 20%; + padding:5%; + } + + .cover1 { + height: 30rem; + } + + .readmore { + font-size: 12px; + margin-left: 25%; + } + + .img-right{ + width:90%; + margin-left: 1%; + margin-top: 80% !important; + } + + + /* contents-left contents */ + .cover2 { + height: 30rem; + } + + .img-left{ + width: 90%; + margin-left:20%; + margin-top: 80% !important; + } + .cover-description-left { + margin-top:20%; + margin-left: 5%; + padding:5%; + width: 100%; + } + + /* footer */ + .sw-logo { + width: 60%; + margin-left: 40%; + } + + .logo { + font-size: 40px; + } + + #cover-logo { + margin-top: 30px; + padding: 0; + margin-left: 10%; + } + + #cover-copyright { + padding: 0; + margin-left: 10%; + margin-top: 30px; + } + + .copy-right { + font-size: 15px; + text-align: end; + justify-content: center; + } + .footer { + margin-top: 50px; + } + +} + +@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { + + /* navbar */ #v-logo { - font-size: 23px !important; - margin-right: 7% !important; - margin-left: -2% !important; + font-size: 25px; } /* banner */ - #header-banner { - margin-top: 7%; + #header-banner { + margin-top: 4%; font-size: 50px; } - #banner-text { - font-size: 25px !important; + + +/* contents-right pic */ + + .img-right{ + width:90%; + margin-left: 1%; + margin-top: 50%; + } + + + /* contents-left contents */ + + .img-left{ + width: 90%; + margin-left:20%; + margin-top: 50%; } -} \ No newline at end of file + +} + +@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) { + + + /* contents-right pic */ + + .img-right{ + width:90%; + margin-left: 1%; + margin-top: 40% !important; + } + + + /* contents-left contents */ + + .img-left{ + width: 90%; + margin-left:20%; + margin-top: 40% !important; + } + + +} + From a27205a99ff307f149eb1023a946e304a7802715 Mon Sep 17 00:00:00 2001 From: thith thin Date: Thu, 12 Mar 2020 15:46:58 +0700 Subject: [PATCH 6/9] update --- src/components/Banner.js | 10 ++++------ src/components/data/banner.json | 6 ++++++ 2 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 src/components/data/banner.json diff --git a/src/components/Banner.js b/src/components/Banner.js index 5e5fd68..5987b32 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.js @@ -1,4 +1,5 @@ import React from "react"; +import BannerData from "./data/banner.json"; import Jumbotron from "react-bootstrap/Jumbotron"; import Container from "react-bootstrap/Container"; @@ -10,12 +11,9 @@ function Banner() {

VitaminAir

 diff --git a/src/components/data/banner.json b/src/components/data/banner.json new file mode 100644 index 0000000..c073390 --- /dev/null +++ b/src/components/data/banner.json @@ -0,0 +1,6 @@ +[ + { + "p1": "This is the project that rebuild the forest & keep it for the next generation.", + "p2": "Longer life of the nature is the way we do for the next generation of humans beings." + } +] \ No newline at end of file From 88298856060b5162d2c2c472de0717f6f2e146be Mon Sep 17 00:00:00 2001 From: thith thin Date: Fri, 13 Mar 2020 15:37:31 +0700 Subject: [PATCH 7/9] update --- src/App.css | 2 +- src/components/Home.js | 2 +- src/components/Navbar.js | 7 ++----- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 29e6477..7ac599e 100644 --- a/src/App.css +++ b/src/App.css @@ -9,7 +9,7 @@ background-color: #153b44; } #v-logo { - font-size: 30px; + font-size: 40px; font-weight: bold; } diff --git a/src/components/Home.js b/src/components/Home.js index 20f619b..2462759 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -1,5 +1,5 @@ import React from "react"; -import Navbar from "./Navbar"; +import Navbar from "./Navbar"; import Banner from "./Banner"; import Footer from "./Footer"; import data from "./data/index.json"; diff --git a/src/components/Navbar.js b/src/components/Navbar.js index f58b288..f77e844 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,10 +1,7 @@ import React from "react"; import Navbar from "react-bootstrap/Navbar"; import Nav from "react-bootstrap/Nav"; - -import { - Link, -} from "react-scroll"; +import {Link} from "react-scroll"; function NavBar () { return ( @@ -12,7 +9,7 @@ function NavBar () {