Skip to content

L
landingPage-Nexpie
Commit 7aec3190 by Chaiwith Santaweesuk
Options

update

parent b0f44ed9
Showing with 183 additions and 78 deletions
public/index.html
......@@ -44,7 +44,7 @@
<!-- <script src="jquery.min.js"></script> -->
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer>
<script>
<!-- <script>
$(document).ready(function(){
$(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
......@@ -57,5 +57,5 @@
console.log($(document).scrollTop())
});
});
</script>
</script> -->
</html>
src/components/Home/Footer.js
......@@ -23,12 +23,11 @@ const Footer = ({ isMobileSized }) => {
className="footer container"
style={{
// backgroundColor: '#0384ce',
backgroundImage: 'linear-gradient(276deg, #42b3e5, #3473bf)',
flexDirection: 'column',
backgroundImage: 'linear-gradient(to left, #007ee5, #04bdf8 76%, #05d5ff)', flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '45px',
borderRadius: '0px 0px 6px 6px',
// borderRadius: '0px 0px 6px 6px',
}}>
{isMobileSized ? <Columns>
<div className="column is-2">
......@@ -130,7 +129,8 @@ const Footer = ({ isMobileSized }) => {
</div>
<Columns
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}
<div className="column">Copyright © 2018-2019 Created by NEXPIE Co., Ltd.</div>
......
src/scss/style.scss
......@@ -253,6 +253,34 @@ body {
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 {
z-index: 20;
width: 250px;
......@@ -261,17 +289,47 @@ body {
box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 1px #f0f0f0;
background-image: $white;
background-color: #fff;
padding: 0px 0px 0px 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
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 {
color: #757575;
padding: 20px;
padding: 10px 15px;
.plan-title {
font-size: 22px;
font-weight: 500;
font-size: 20px;
font-weight: 800;
text-align: center;
}
.plan-descrip {
......@@ -280,10 +338,24 @@ body {
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 {
width: 100%;
height: 110px;
height: 90px;
// background-image: linear-gradient(306deg, #3473bf, #0891df);
// border-radius: 6px;
@extend .center;
......@@ -292,22 +364,31 @@ body {
align-self: center;
.price {
@extend .row;
font-weight: normal;
// font-weight: bolder;
font-size: 3em;
align-items: baseline;
// h1 {
// font-size: 45px;
// }
h1 {
font-weight: 800;
line-height: 50px;
}
}
p {
line-height: 15px;
span {
font-size: 12px;
line-height: 15px;
}
}
}
.package-details {
padding: 20px;
padding: 0px 0px 10px 0px;
font-size: 14px;
color: #757575;
.package-detail {
//display: flex;
//justify-content: space-between;
padding: 10px;
text-align: center;
.column {
span {
......@@ -315,6 +396,9 @@ body {
}
}
}
.tb-background{
background-color: rgba(0, 126, 229, 0.12);
}
}
.btn-wrapper {
......@@ -502,7 +586,7 @@ body {
}
.FooterStyle {
padding: 0rem 2.5rem 0rem 2.5rem;
// padding: 0rem 2.5rem 0rem 2.5rem;
font-size: 14px;
color: $white;
font-weight: normal;
......@@ -552,6 +636,7 @@ hr.new {
text-transform: uppercase;
}
html.has-navbar-fixed-top, body.has-navbar-fixed-top{
padding-top : 0px;
html.has-navbar-fixed-top,
body.has-navbar-fixed-top {
padding-top: 0px;
}
src/translations/en.json
......@@ -38,13 +38,13 @@
"Hook.Descrip": "Get automation works according to condition setting of Trigger",
"Storage.Title": "Datastorage",
"Storage.Descrip": "Collecting data from your device and sensor to data storage.",
"Packages.Title": "Packages",
"Standard.Title":"Standard",
"Standard.Descrip":"This is standard hosting plan",
"Startup.Title":"Startup",
"Packages.Title": "PACKAGES",
"Startup.Title":"STARTUP",
"Startup.Descrip":"This is standard hosting plan",
"Business.Title":"Business",
"Business.Descrip":"This is standard hosting plan",
"Growth.Title":"GROWTH",
"Growth.Descrip":"This is standard hosting plan",
"Scale.Title":"SCALE",
"Scale.Descrip":"This is standard hosting plan",
"Price.Money":"Baht/Month",
"Price.Device.Start":"Connecting limit up to",
"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