Skip to content

L
landingPage-Nexpie
Commit 7aec3190 by Chaiwith Santaweesuk
Options

update

parent b0f44ed9
Showing with 184 additions and 80 deletions
public/index.html
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<!-- <script src="jquery.min.js"></script> --> <!-- <script src="jquery.min.js"></script> -->
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> --> <!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer> </footer>
<script> <!-- <script>
$(document).ready(function(){ $(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened $(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 100) { // check if user scrolled more than 50 from top of the browser window if ($(document).scrollTop() > 100) { // check if user scrolled more than 50 from top of the browser window
...@@ -57,5 +57,5 @@ ...@@ -57,5 +57,5 @@
console.log($(document).scrollTop()) console.log($(document).scrollTop())
}); });
}); });
</script> </script> -->
</html> </html>
src/components/Home/Footer.js
...@@ -23,12 +23,11 @@ const Footer = ({ isMobileSized }) => { ...@@ -23,12 +23,11 @@ const Footer = ({ isMobileSized }) => {
className="footer container" className="footer container"
style={{ style={{
// backgroundColor: '#0384ce', // backgroundColor: '#0384ce',
backgroundImage: 'linear-gradient(276deg, #42b3e5, #3473bf)', backgroundImage: 'linear-gradient(to left, #007ee5, #04bdf8 76%, #05d5ff)', flexDirection: 'column',
flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
padding: '45px', padding: '45px',
borderRadius: '0px 0px 6px 6px', // borderRadius: '0px 0px 6px 6px',
}}> }}>
{isMobileSized ? <Columns> {isMobileSized ? <Columns>
<div className="column is-2"> <div className="column is-2">
...@@ -130,7 +129,8 @@ const Footer = ({ isMobileSized }) => { ...@@ -130,7 +129,8 @@ const Footer = ({ isMobileSized }) => {
</div> </div>
<Columns <Columns
style={{ style={{
padding: '20px 0px', // padding: '20px 0px',
padding: '20px 2.5rem 20px 2.5rem'
}}> }}>
{isMobileSized ? <div className="column">Privacy Policy | Terms of Use</div> : null} {isMobileSized ? <div className="column">Privacy Policy | Terms of Use</div> : null}
<div className="column">Copyright © 2018-2019 Created by NEXPIE Co., Ltd.</div> <div className="column">Copyright © 2018-2019 Created by NEXPIE Co., Ltd.</div>
......
src/scss/style.scss
...@@ -253,6 +253,34 @@ body { ...@@ -253,6 +253,34 @@ body {
border-bottom: 1px solid #05366c; border-bottom: 1px solid #05366c;
} }
} }
.package-card:hover {
border-radius: 6px;
box-shadow: 0 10px 25px 0 rgba(3, 132, 206, 0.28), 0 2px 24px 0 rgba(0, 0, 0, 0.02);
&:nth-child(2) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
color: #fff;
background-color: #42b3e5;
}
}
&:nth-child(3) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
color: #fff;
background-color: #0384ce;
}
}
&:nth-child(4) {
.text-wrapper {
border-top-left-radius:6px;
border-top-right-radius:6px;
color: #fff;
background-color: #3156a3;
}
}
}
.package-card { .package-card {
z-index: 20; z-index: 20;
width: 250px; width: 250px;
...@@ -261,17 +289,47 @@ body { ...@@ -261,17 +289,47 @@ body {
box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09); box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 1px #f0f0f0; border: solid 1px #f0f0f0;
background-image: $white; background-image: $white;
background-color: #fff;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
margin: 30px 20px; margin: 30px 20px;
// &:nth-child(2) {
// .img-wrapper{
// img{border-style: solid;
// border-width: 7px;
// border-color: #D7F4FE;}
// }
// }
// &:nth-child(3) {
// .img-wrapper{
// img{border-style: solid;
// border-width: 7px;
// border-color: #9ED6F1;}
// }
// }
// &:nth-child(4) {
// .img-wrapper{
// img{border-style: solid;
// border-width: 7px;
// border-color: #AAC9E5;}
// }
// }
.img-wrapper {
padding: 15px 15px 0 15px;
display: block;
margin-left: auto;
margin-right: auto;
height: 135px;
width: 150px;
}
.text-wrapper { .text-wrapper {
color: #757575; color: #757575;
padding: 20px; padding: 10px 15px;
.plan-title { .plan-title {
font-size: 22px; font-size: 20px;
font-weight: 500; font-weight: 800;
text-align: center; text-align: center;
} }
.plan-descrip { .plan-descrip {
...@@ -280,10 +338,24 @@ body { ...@@ -280,10 +338,24 @@ body {
font-weight: normal; font-weight: normal;
} }
} }
&:nth-child(2) {
.price-wrapper {
color: #42b3e5;
}
}
&:nth-child(3) {
.price-wrapper {
color: #0384ce;
}
}
&:nth-child(4) {
.price-wrapper {
color: #3156a3;
}
}
.price-wrapper { .price-wrapper {
width: 100%; width: 100%;
height: 110px; height: 90px;
// background-image: linear-gradient(306deg, #3473bf, #0891df); // background-image: linear-gradient(306deg, #3473bf, #0891df);
// border-radius: 6px; // border-radius: 6px;
@extend .center; @extend .center;
...@@ -292,22 +364,31 @@ body { ...@@ -292,22 +364,31 @@ body {
align-self: center; align-self: center;
.price { .price {
@extend .row; @extend .row;
font-weight: normal; // font-weight: bolder;
font-size: 3em; font-size: 3em;
align-items: baseline; align-items: baseline;
// h1 { h1 {
// font-size: 45px; font-weight: 800;
// } line-height: 50px;
}
}
p {
line-height: 15px;
span {
font-size: 12px;
line-height: 15px;
}
} }
} }
.package-details { .package-details {
padding: 20px; padding: 0px 0px 10px 0px;
font-size: 14px; font-size: 14px;
color: #757575; color: #757575;
.package-detail { .package-detail {
//display: flex; //display: flex;
//justify-content: space-between; //justify-content: space-between;
padding: 10px;
text-align: center; text-align: center;
.column { .column {
span { span {
...@@ -315,6 +396,9 @@ body { ...@@ -315,6 +396,9 @@ body {
} }
} }
} }
.tb-background{
background-color: rgba(0, 126, 229, 0.12);
}
} }
.btn-wrapper { .btn-wrapper {
...@@ -502,7 +586,7 @@ body { ...@@ -502,7 +586,7 @@ body {
} }
.FooterStyle { .FooterStyle {
padding: 0rem 2.5rem 0rem 2.5rem; // padding: 0rem 2.5rem 0rem 2.5rem;
font-size: 14px; font-size: 14px;
color: $white; color: $white;
font-weight: normal; font-weight: normal;
...@@ -552,6 +636,7 @@ hr.new { ...@@ -552,6 +636,7 @@ hr.new {
text-transform: uppercase; text-transform: uppercase;
} }
html.has-navbar-fixed-top, body.has-navbar-fixed-top{ html.has-navbar-fixed-top,
padding-top : 0px; body.has-navbar-fixed-top {
} padding-top: 0px;
\ No newline at end of file }
src/translations/en.json
...@@ -38,13 +38,13 @@ ...@@ -38,13 +38,13 @@
"Hook.Descrip": "Get automation works according to condition setting of Trigger", "Hook.Descrip": "Get automation works according to condition setting of Trigger",
"Storage.Title": "Datastorage", "Storage.Title": "Datastorage",
"Storage.Descrip": "Collecting data from your device and sensor to data storage.", "Storage.Descrip": "Collecting data from your device and sensor to data storage.",
"Packages.Title": "Packages", "Packages.Title": "PACKAGES",
"Standard.Title":"Standard", "Startup.Title":"STARTUP",
"Standard.Descrip":"This is standard hosting plan",
"Startup.Title":"Startup",
"Startup.Descrip":"This is standard hosting plan", "Startup.Descrip":"This is standard hosting plan",
"Business.Title":"Business", "Growth.Title":"GROWTH",
"Business.Descrip":"This is standard hosting plan", "Growth.Descrip":"This is standard hosting plan",
"Scale.Title":"SCALE",
"Scale.Descrip":"This is standard hosting plan",
"Price.Money":"Baht/Month", "Price.Money":"Baht/Month",
"Price.Device.Start":"Connecting limit up to", "Price.Device.Start":"Connecting limit up to",
"Price.Device.End":"Devices", "Price.Device.End":"Devices",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment