senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add styling and restructure of markup

Browse Source
This commit is contained in:
Moris Zen
2018-07-03 10:52:51 +02:00
parent e5287ac835
commit 602e556a1c
8 changed files with 413 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Header.css
View File

@@ -1,10 +1,10 @@
.menu_icon [class*='menu_bar-'] {
background: #000;
background: #ffffff;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.2s ease all;
transition: 0.2s ease all;
height: 0.17rem;
height: 0.18rem;
display: block;
margin-bottom: 0.3rem;
}

4
src/components/Header.js
View File

@@ -8,7 +8,7 @@ import "./Header.css"
let menuClasses = "no-underline mt-4 lg:inline-block opacity-50 lg:mt-0 text-white hover:opacity-100 uppercase mr-4"
const Header = () => (
<header className="bg-saburly-default">
<header className="bg-saburly-blue">
<nav className="container mx-auto flex justify-between lg:p-6 p-4">
<Link to="/">
<img src={LogoSaburly} alt='Saburly Logo' className="max-w-xs" />
@@ -32,7 +32,7 @@ const Header = () => (
<li className={menuClasses}>BLOG</li>
</Link>
<Button text="Contact" standard classes="rounded-full text-white" url="/contact" />
<Button text="Contact" standard classes="rounded-full text-white hover:shadow" url="/contact" />
</ul>
</div>
</nav>

22
src/images/bg-saburly-default.svg
View File

@@ -1,21 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1918px" height="902px" viewBox="0 0 1918 902" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>background</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="0%" y1="1.11022302e-14%" x2="95.8155954%" y2="80.9164388%" id="linearGradient-1">
<stop stop-color="#454CB7" offset="0%"></stop>
<stop stop-color="#9DA3FF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Moris-version" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Landing-Page" transform="translate(-2.000000, 0.000000)" fill="url(#linearGradient-1)">
<g id="Header" transform="translate(2.000000, 0.000000)">
<g id="background">
<path d="M1153.8909,770 C828.313018,774.212584 707.10415,902 378.889652,902 C156.412951,902 30.1164004,902 0,902 L0,770 L0,0 L1920,0 L1920,770 L1153.8909,770 Z" id="background_shape"></path>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4"><title>bg-saburly-white</title><path d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z" transform="translate(0 0)" style={{ fill: '#fff' }}/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 223 B

752
src/images/programming-company.svg → src/images/software-consulting.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 128 KiB

17
src/pages/index.js
View File

@@ -5,7 +5,7 @@ import InfoBox from '../components/InfoBox'
import Button from '../components/Button'
import Card from '../components/Card'
import ImgIntro from '../images/programming-company.svg'
import ImgIntro from '../images/software-consulting.svg'
import ImgDesign from '../images/ux-ui-design.svg'
import ImgFullstack from '../images/fullstack-web-development.svg'
import ImgMobile from '../images/mobile-development.svg'
@@ -16,14 +16,15 @@ import LogoCoor from '../images/logo-coor.svg'
const IndexPage = () => (
<div>
<section className="bg-saburly-default">
<div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse lg:p-4">
<div className="text-center lg:text-left lg:mt-4">
<SectionIntro intro="Welcome To Saburly" classes="lg:text-left content-center" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day." />
<Button filled text="Let's Build Together" url="/proposal" classes="rounded-full mt-4 font-light btn-saburly-green" />
<section className="bg-saburly-blue relative">
<div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse lg:p-4">
<div className="text-center lg:text-left lg:mt-4">
<SectionIntro intro="Welcome To Saburly" classes="lg:text-left content-center" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success every day." />
<Button filled text="Let's Build Together" url="/proposal" classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20" />
</div>
<img src={ImgIntro} className="lg:-mt-4 z-10" alt="Software Development Agency" />
</div>
<img src={ImgIntro} className="lg:-mt-4" alt="Software Development Agency" />
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4"><title>bg-saburly-white</title><path d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z" transform="translate(0 0)" style={{ fill: '#fff' }}/></svg>
</section>
<section className="text-center p-3">

7
src/styles/custom.css
View File

@@ -1,8 +1,13 @@
.bg-saburly-default {
.bg-saburly-blue {
background: rgb(69,76,183);
background: linear-gradient(90deg, rgba(69,76,183,1) 0%, rgba(157,163,255,1) 100%);
}
.bg-saburly-blue svg {
position: absolute;
bottom: 0;
}
.btn-saburly-green {
background: rgb(0,255,252);
background: linear-gradient(150deg, rgba(0,255,252,1) 0%, rgba(0,177,186,1) 55%);

100
src/styles/index.css
View File

@@ -3806,6 +3806,26 @@ table {
box-shadow: none;
}
.hover\:shadow:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.hover\:shadow-md:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
}
.hover\:shadow-lg:hover {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
}
.hover\:shadow-inner:hover {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
}
.hover\:shadow-none:hover {
box-shadow: none;
}
.fill-current {
fill: currentColor;
}
@@ -7926,6 +7946,26 @@ table {
box-shadow: none;
}
.sm\:hover\:shadow:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.sm\:hover\:shadow-md:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
}
.sm\:hover\:shadow-lg:hover {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
}
.sm\:hover\:shadow-inner:hover {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
}
.sm\:hover\:shadow-none:hover {
box-shadow: none;
}
.sm\:text-left {
text-align: left;
}
@@ -12039,6 +12079,26 @@ table {
box-shadow: none;
}
.md\:hover\:shadow:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.md\:hover\:shadow-md:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
}
.md\:hover\:shadow-lg:hover {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
}
.md\:hover\:shadow-inner:hover {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
}
.md\:hover\:shadow-none:hover {
box-shadow: none;
}
.md\:text-left {
text-align: left;
}
@@ -16152,6 +16212,26 @@ table {
box-shadow: none;
}
.lg\:hover\:shadow:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.lg\:hover\:shadow-md:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
}
.lg\:hover\:shadow-lg:hover {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
}
.lg\:hover\:shadow-inner:hover {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
}
.lg\:hover\:shadow-none:hover {
box-shadow: none;
}
.lg\:text-left {
text-align: left;
}
@@ -20265,6 +20345,26 @@ table {
box-shadow: none;
}
.xl\:hover\:shadow:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.xl\:hover\:shadow-md:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
}
.xl\:hover\:shadow-lg:hover {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
}
.xl\:hover\:shadow-inner:hover {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
}
.xl\:hover\:shadow-none:hover {
box-shadow: none;
}
.xl\:text-left {
text-align: left;
}

2
tailwind.config.js
View File

@@ -874,7 +874,7 @@ module.exports = {
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
shadows: ['responsive'],
shadows: ['responsive', 'hover'],
svgFill: [],
svgStroke: [],
textAlign: ['responsive'],