From 602e556a1c49afdca3ec664824c341484d3c1e27 Mon Sep 17 00:00:00 2001 From: Moris Zen Date: Tue, 3 Jul 2018 10:52:51 +0200 Subject: [PATCH] Add styling and restructure of markup --- src/components/Header.css | 4 +- src/components/Header.js | 4 +- src/images/bg-saburly-default.svg | 22 +- ...ng-company.svg => software-consulting.svg} | 752 +++++++----------- src/pages/index.js | 17 +- src/styles/custom.css | 7 +- src/styles/index.css | 100 +++ tailwind.config.js | 2 +- 8 files changed, 413 insertions(+), 495 deletions(-) rename src/images/{programming-company.svg => software-consulting.svg} (60%) diff --git a/src/components/Header.css b/src/components/Header.css index b4028ba..75fd82a 100644 --- a/src/components/Header.css +++ b/src/components/Header.css @@ -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; } diff --git a/src/components/Header.js b/src/components/Header.js index f71216f..a06caca 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -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 = () => ( -
+
diff --git a/src/images/bg-saburly-default.svg b/src/images/bg-saburly-default.svg index 7751aba..4d89096 100644 --- a/src/images/bg-saburly-default.svg +++ b/src/images/bg-saburly-default.svg @@ -1,21 +1 @@ - - - - background - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file +bg-saburly-white \ No newline at end of file diff --git a/src/images/programming-company.svg b/src/images/software-consulting.svg similarity index 60% rename from src/images/programming-company.svg rename to src/images/software-consulting.svg index 21404f9..01a92eb 100644 --- a/src/images/programming-company.svg +++ b/src/images/software-consulting.svg @@ -1,377 +1,207 @@ - hero marketing 6-01 + Group 3 Created with Sketch. - - + + - + - + - - - + + + - - - + + + - - - - - - + + - + + + + + + + + + + + + + - - - - + + + - + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - - - - - - + - - - + + + - - - + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - - + + + - - - + + + - - - + + + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - - + + + @@ -379,62 +209,15 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - - - + + + @@ -448,8 +231,8 @@ - - + + @@ -457,35 +240,35 @@ - + - + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - + + + @@ -493,9 +276,9 @@ - - - + + + @@ -503,8 +286,8 @@ - - + + @@ -512,14 +295,14 @@ - + - + - - + + @@ -527,14 +310,14 @@ - + - + - - + + @@ -542,79 +325,78 @@ - + - + - - + + - + - - + + - - - + + + - - - + + + - - - + + - + - - + + - - - + + + - - - - - - - - + + + + + + + + - - - + + + - - - - - - - + + + + + + + - + - + @@ -628,34 +410,84 @@ - - + + - + - - + + - + - - + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/index.js b/src/pages/index.js index ded1ba3..f5409e3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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 = () => (
-
-
-
- -
+ Software Development Agency
- Software Development Agency -
+ bg-saburly-white
diff --git a/src/styles/custom.css b/src/styles/custom.css index 241026c..7af0242 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -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%); diff --git a/src/styles/index.css b/src/styles/index.css index ad67119..6f19972 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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; } diff --git a/tailwind.config.js b/tailwind.config.js index 5f736f2..8555dd6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -874,7 +874,7 @@ module.exports = { pointerEvents: ['responsive'], position: ['responsive'], resize: ['responsive'], - shadows: ['responsive'], + shadows: ['responsive', 'hover'], svgFill: [], svgStroke: [], textAlign: ['responsive'],