Css 32131

/*
* This is a manifest file that'll be compiled into application.css, which will

include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/a
ssets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using
a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at
the bottom of the
* compiled file so the styles you add here take precedence over styles defined
in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better
to create a new
* file per style scope.
*
*= require bootstrap.min
*= require_self
*= require gallery.build
*= require gallery.theme
*/
$blue: #096f88;
$green: #becd48;
$textColor: #333d4e;
@font-face {
font-family: "Ballpen";
src: asset-url('Blokletters-Balpen.ttf');
}
.popover {
background: #88b7d5;
border: 1px solid #c2e1f5;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.5);
}
.popover:after, .popover:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popover:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: white;
border-width: 7px;
margin-left: -7px;
}
.popover:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: white;
border-width: 8px;
margin-left: -8px;
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
visibility: visible;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: $textColor;
background-color: #eee;
}
#home {
padding-top: 50px;
background: image-url('home/background.jpg') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
min-width: 960px;
height: 100%;
#iphone-hand {
background: image-url('home/iphone.png') no-repeat bottom left;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 100%;
}
#home-content {
min-height: calc(100%);
#home-logo { width: 379px; max-width: 100%; }
.middle-xs {
min-height: 100%;
}
h1 {
font-size: 32px;
font-weight: 700;
margin-top: 68px;
margin-bottom: 57px;
}
p {
font-size: 20px;
line-height: 1.5em;
font-weight: 300;
text-shadow: 0 0 10px white;
}
#home-text {
max-width: 500px;
padding: 1em 0em 1em 0;
p {
text-align: justify;
}
}
h3 {
font-size: 20px;
font-weight: 600;
}
}
}
#download-appstore {
display: inline-block;
width: 158px;
height: 54px;
background: transparent image-url('download-appstore.png') no-repeat center
center;
&:hover {
background: transparent image-url('download-appstore-hover.png') no-repeat
center center;
}
margin-right: 1em;
margin-top: 1em;
}
#download-play {
width: 158px;
height: 54px;
background-image: image-url('download-play.png');
&:hover {
background-image: image-url('download-play-hover.png');
}
}
#homepage-arrow {
margin-top: -41px;
text-align: center;
opacity: 0.8;
&:hover {
opacity: 0.9;
}
img {
display: inline;
position: relative;
bottom: 5px;
}
}
a:hover { color: #006795 }
@media only screen and (max-width: 30em) {
.hidden-xs {
display: none;
}
}
@media only screen and (max-width: 48em) {
.hidden-sm {
display: none;
}
}
#part2 {
background: image-url('part2/bg.jpg') no-repeat top right;
height: 680px;
p {
text-align: justify;
}
section {
margin: 20px 0;
}
.job-areas {
padding-bottom: 10px;
.popover {
opacity: 0;
position: absolute;
}
.col-xs-6 {
position: relative;
}
.col-xs-6:hover {
.popover {
left: 8px;
right: 8px;
text-align: center;
bottom: 87px;
padding: 15px 5px;
border-radius: 5px;
background-color: white;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
}
}
.job-area-button {
border: 1px solid $blue;
border-radius: 3px;
padding: 2px 5px 2px 85px;
text-align: left;
min-height: 70px;
font-weight: 400;
display: flex;
align-items: center;
position: relative;
margin-top: 10px;
&:hover {
background-color: $blue;
color: white;
}
}
.area1 {
background: transparent image-url('part2/minor_repairs_blue.png') no-rep
eat 5px center;
&:hover {
background: $blue image-url('part2/minor_repairs.png') no-repeat 5px c
enter;
}
}
.area2 {
background: transparent image-url('part2/house_and_garden_blue.png') norepeat 5px center;
&:hover {
background: $blue image-url('part2/house_and_garden.png') no-repeat 5p
x center;
}
}
.area3 {
background: transparent image-url('part2/assembly_blue.png') no-repeat 5
px center;
&:hover {
background: $blue image-url('part2/assembly.png') no-repeat 5px center
;
}
}
.area4 {
background: transparent image-url('part2/computer_blue.png') no-repeat 5
px center;
&:hover {
background: $blue image-url('part2/computer.png') no-repeat 5px center
;
}
}
.area5 {
background: transparent image-url('part2/moving_blue.png') no-repeat 5px
center;
&:hover {
background: $blue image-url('part2/moving.png') no-repeat 5px center;
}
}
.area6 {
background: transparent image-url('part2/delivery_blue.png') no-repeat 5
px center;
&:hover {
background: $blue image-url('part2/delivery.png') no-repeat 5px center
;
}
}
}
}
.gallery {
border-top: 15px solid $green;
margin-left: -7px;
margin-right: -7px;
min-width: 960px;
}
.standard-section {
border-top: 15px solid $green;
margin-left: -7px;
margin-right: -7px;
min-width: 960px;
&.no-green-border {
border-top: 0;
}
h2, h3 {
text-align: center;
color: white;
display: block;
}
h3 {
font-size: 24px;
line-height: 1.2em;
}
h2 {
margin-top: 50px;
font-weight: 600;
font-size: 40px;
font-variant: small-caps;
line-height: 40px;
margin-bottom: 4px;
}
hr.headers-separator {
border: none;
height: 1px;
width: 150px;
background-color: white !important;
margin: 0 auto;
}
p {
font-size: 20px;
line-height: 28px;
margin: 15px 0;
}
}
#part3 {
background: image-url('part3/slide1/bg.jpg') no-repeat top center;
height: 700px;
#slide1 {
width: 960px;
height: 700px;
background: transparent image-url('part3/slide1/normal.png') no-repeat cen
ter center;
position: relative;
h4, h5, p {
font-size: 16px;
}
h4 {
color: white;
text-align: center;
margin-bottom: 0;
font-family: "Ballpen";
font-size: 14px;
}
h5 {
margin-top: 0;
margin-bottom: 0;
color: white;
text-align: center;
text-decoration: underline;
font-weight: bold;
}
p {
line-height: 1.2em;
color: white;
margin-top: 0px;
text-align: center;
}
#item1 {
position: absolute;
top: 320px;
left: 10px;
width: 180px;
}
#item2 {
position: absolute;
top: 170px;
left: 170px;
width: 170px;
}
#item3 {
position: absolute;
top: 180px;
left: 680px;
width: 190px;
}
#item4 {
position: absolute;
top: 310px;
left: 760px;
width: 150px;
}
#item5 {
position: absolute;
top: 600px;
left: 550px;
width: 220px;
}
#item6 {
position: absolute;
top: 600px;
left: 210px;
width: 260px;
}
}
}
#part31 {
background: image-url('part3.1/bg.jpg') no-repeat top center;
height: 700px;
#slide2 {
width: 960px;
height: 700px;
background: transparent image-url('part3.1/iphones.png') no-repeat left -2
0px bottom 30px;
position: relative;
}
.on-side {
margin-top: 50px;
h3 {
color: $textColor;
font-weight: bold;
text-align: left;
font-size: 32px;
margin-bottom: 0;
margin-top: 10px;
}
p {
margin-top: 10px;
text-align: left;
}
p.smaller {
font-size: 16px;
margin-left: 55px;
}
ol {
display: block;
list-style-type: none;
color: white;
margin-top: 80px;
li {
color: $textColor;
text-align: left;
span {
margin: 0px 0px 0px 10px;
line-height: 3em;
}
.marker {
font-weight: normal;
text-decoration: none;
border-radius: 50%;
border: 1px solid $textColor;
padding: 2px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
}
}
}
#what, #when, #where {
position: absolute;
font-weight: 600;
width: 135px;
text-align: center;
}
#what {
left: 10px; top: 260px;
}
#when {
}
#where {
}
}
#part32 {
height: 700px;
#slide3 {
width: 960px;
height: 700px;
background: transparent image-url('part3.2/iphones.png') no-repeat bottom

center;
position: relative;
}
.on-side {
margin-top: 10px;
h3 {
color: $textColor;
font-weight: bold;
text-align: left;
font-size: 32px;
margin-bottom: 0;
margin-top: 10px;
}
p {
text-align: left;
}
}
.step1, .step2, .step3 {
color: white;
position: absolute;
text-align: left;
}
.step1 {
top: 155px;
left: 210px;
}
.step2 {
top: 220px;
left: 565px;
}
.step3 {
top: 556px;
left: 890px;
width: 200px;
}
.explanations {
font-size: 12px;
text-align: left;
div {
position: absolute;
width: 120px;
color: $blue;
font-weight: 600;
line-height: 16px;
}
.exp1, .exp2, .exp3 {
text-align: right;
}
text-align: left;
}
.exp1 {
left: 0;
top: 362px;
}
.exp2 {
left: -5px;
top: 474px;
}
.exp3 {
left: -5px;
top: 544px;
}
.exp4 {
top: 374px;
right: 40px;
padding-right: 20px;
width: 100px;
}
.exp5 {
top: 445px;
right: 40px;
}
.exp6 {
top: 500px;
right: 40px;
width: 110px;
}
}
}
#part33 {
color: white;
height: 700px;
#slide4 {
width: 960px;
height: 700px;
background: transparent image-url('part3.3/iphone.png') no-repeat bottom c
enter;
position: relative;
}
.on-side {
margin-top: 10px;
h3 {
color: white;
font-weight: bold;
text-align: left;
font-size: 32px;
margin-bottom: 0;
margin-top: 10px;
}
p {
text-align: left;
color: white;
}
}
.explanations {
font-size: 12px;
text-align: left;
div {
position: absolute;
width: 145px;
color: white;
font-weight: 600;
line-height: 16px;
}
text-align: right;
}
.exp1 {
left: 0;
top: 364px;
}
.exp2 {
left: 0px;
top: 436px;
}
.exp3 {
left: 0px;
top: 518px;
}
}
.icons {
position: absolute;
bottom: 50px;
left: 50%;
text-align: left;
color: white;
h4 {
color: white;
border-bottom: 1px solid white;
margin-bottom: 5px;
}
.icon-1, .icon-2 {
margin-right: 10px;
width: 160px;
height: 60px;
padding-top: 120px;
text-align: center;
}
.icon-1 {
background: transparent image-url('part3.3/icon-1.png') no-repeat center
center;
}
.icon-2 {
background: transparent image-url('part3.3/icon-2.png') no-repeat center
center;
}
}
}
#part34 {
color: white;
height: 700px;
#slide5 {
width: 960px;
height: 700px;
background: transparent image-url('part3.4/iphone.png') no-repeat bottom c
enter;
position: relative;
}
.on-side {
margin-top: 10px;
h3 {
color: white;
font-weight: bold;
text-align: left;
font-size: 32px;
margin-bottom: 0;
margin-top: 10px;
}
p {
text-align: left;
color: white;
}
}
.explanations {
font-size: 12px;
text-align: right;
div {
position: absolute;
width: 135px;
color: white;
font-weight: 600;
line-height: 16px;
}
.exp1 {
left: 10px;
top: 320px;
}
.exp2 {
left: 20px;
top: 474px;
}
}
.button-text {
position: absolute;
width: 210px;
height: 140px;
left: calc(50% + 23px);
top: 430px;
font-size: 20px;
line-height: 26px;
text-align: left;
}
}
#part4 {
background: transparent image-url('part4/bg.jpg') no-repeat top center;
height: 680px;
h3, h2, h4 {
color: $textColor;
}
hr {
background-color: $textColor !important;
}
.benefit {
text-align: center;
margin-top: 80px;
img {
width: 70px;
height: 70px;
margin: 0 auto;
}
h4 {
font-weight: 600;
font-size: 20px;
margin-bottom: 0;
}
hr {
border: none;
height: 1px;
width: 80px;
background-color: $textColor !important;
}
p {
margin-top: 0;
font-size: 14px;
line-height: 1.5em;
}
}
}
#part5 {
background: transparent image-url('part5/bg.jpg') no-repeat top center;
height: 680px;
h2 {
color: $blue;
}
h3 {
color: $textColor;
}
hr {
background-color: $blue !important;
}
h4 {
font-size: 20px;
font-weight: 500;
border-bottom: 1px solid $textColor;
line-height: 2em;
}
ul {
display: block;
vertical-align: top;
li {
display: block;
float: left;
border-radius: 3px;
padding: 2px;
text-align: center;
height: 80px;
font-weight: 400;
font-size: 12px;
width: 80px;
margin: 2px;
line-height: 1.2em;
&.selected-item {
background-color: $green;
}
}
}
}
#part6 {
text-align: left;
background: transparent image-url('part6/bg.jpg') no-repeat bottom left;
height: 690px;
width: 161px;
height: 56px;
background: transparent image-url('part6/appstore.png') no-repeat center c
enter;
&:hover {
background: transparent image-url('part6/appstore-hover.png') no-repeat
center center;
}
}
.part-6-header {
height: 150px;
}
.iphone {
background: image-url('part6/iphone.png') no-repeat bottom left;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
min-height: calc(690px - 150px);
}
.container {
position: relative;
width: 960px;
height: 690px;
}
ol {
display: block;
color: white;
margin-top: 80px;
li {
span {
margin: 0px 10px;
font-weight: bold;
line-height: 3em;
}
.marker {
border-radius: 50%;
border: 1px solid white;
padding: 2px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
}
}
.become-a-box {
margin-top: 40px;
width: 100%;

background: transparent image-url('part6/box-bg.png') repeat top left;
padding: 5px;
min-height: 150px;
p {
color: white;
font-size: 16px;
text-align: center;
line-height: 1.5em;
}
h4 {
color: white;
line-height: 40px;
font-size: 20px;
font-weight: 600;
img {
margin-bottom: -10px;
margin-right: 5px;
}
}
}
}
#part61 {
text-align: left;
height: 690px;
.container-wrapper {
height: 690px;
center;
}
.container {
position: relative;
width: 960px;
height: 690px;
}
.content {
position: relative;
}
ol {
display: block;
color: white;
margin-top: 80px;
position: absolute;
top: 30px;
left: 380px;
width: 550px;
li {
color: white;
text-align: left;
span {
line-height: 3em;
}
.marker {
border-radius: 50%;
padding: 2px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 10px;
}
}
}
.button-texts {
font-size: 12px;
color: white;
div {
width: 90px;
text-align: center;
line-height: 14px;
}
.b1 {
position: absolute;
top: 380px;
left: 380px;
}
.b2 {
position: absolute;
top: 380px;
left: 495px;
}
.b3 {
position: absolute;
top: 365px;
left: 604px;
height: 30px;
}
.b4 {
position: absolute;
top: 480px;
left: 380px;
}
.b5 {
position: absolute;
top: 490px;
left: 495px;
}
.b6 {
position: absolute;
top: 490px;
left: 606px;
}
}
.explanation {
color: white;
position: absolute;
font-size: 12px;
font-weight: 600;
left: 280px;
bottom: 11px;
}
}
#part62 {
text-align: left;
height: 690px;
position: relative;
.container-wrapper {
height: 690px;
center;
}
.container {
position: relative;
height: 690px;
}
.content {
position: relative;
color: white;
p {
font-size: 16px;
}
}
.content-inner {
position: absolute;
top: 100px;
left: 300px;
}
ol {
display: block;
color: white;
li {
color: white;
text-align: left;
span {
line-height: 3em;
font-weight: 600;
}
.marker {
border-radius: 50%;
padding: 2px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 10px;
}
}
}
}
#contact {
background: transparent image-url('contact/bg.jpg') no-repeat center center;
height: 680px;
h3, h2 {
color: $blue;
}
h3 {
}
hr.headers-separator {
background-color: $blue !important;
}
.col-xs-6 {
}
.left-panel, .right-panel {
background-color: rgba(255, 255, 255, 0.5);
}
.left-panel input[type='text'], .left-panel input[type='email'] {
width: 100%;
display: block;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 10px;
margin-bottom: 0.5em;
}
select {
width: 100%;
display: block;
border-radius: 3px;
padding: 5px 10px;

}
textarea {
width: 100%;
display: block;
border-radius: 3px;
padding: 5px 10px;
height: 120px;
}
#map {
margin: 10px auto 10px auto;
width: 248px;
}
.phone, .pin, .mail {
padding-left: 40px;
min-height: 29px;
width: 248px;
margin: auto;
color: #7e7e7e;
line-height: 30px;
&:hover {
}
}
.phone {
background: transparent image-url('contact/phone.png') no-repeat left top;
}
.pin {
background: transparent image-url('contact/pin.png') no-repeat left top;
}
.mail {
background: transparent image-url('contact/mail.png') no-repeat left top;
}
}
.btn {
color: white;
padding: 5px 10px;
border: 0;
&:hover {
color: white;
}
}
.btn-green {
color: white;
background-color: $green;
}
#newsletter-form, #contact-form {
h2 {
display: none;
}
ul li {
color: red;
}
ul {
}
p {
display: none;
}
p.success {
padding: 10px;
display: block;
border-radius: 3px;
color: white;
}
}
#footer {
background: #333 image-url('footer/bg.png') repeat-x top left;
margin-left: -7px;
margin-right: -7px;
min-width: 960px;
h2 {
color: white;
font-size: 20px;
line-height: 140px;
}
h3 {
font-size: 16px;
color: $green;
margin-top: 40px;
}
.col-xs-2 {
background: transparent image-url('footer/arrow.png') no-repeat center cen
ter;
}
width: 161px;
height: 56px;
background: transparent image-url('part6/appstore.png') no-repeat center c
enter;
&:hover {
background: transparent image-url('part6/appstore-hover.png') no-repeat
center center;
}
}
p {
color: white;
}
h4 {
color: white;
font-size: 20px;
font-weight: 200;
}
form {
input {
width: 60%;
margin: 3px 0;
background-color: #aaa;
border: 0;
line-height: 16px;
font-size: 16px;
height: 30px;
display: block;
padding-left: 5px;
}
::-webkit-input-placeholder {
color: white;
line-height: 20px;
font-size: 16px;
}
:-moz-placeholder { /* Firefox 18- */
color: white;
line-height: 20px;
font-size: 16px;
}
::-moz-placeholder { /* Firefox 19+ */
color: white;
line-height: 20px;
font-size: 16px;
}
:-ms-input-placeholder {
color: white;
line-height: 20px;
font-size: 16px;
}
.btn {
margin-top: 10px;
@extend .btn;
width: auto;
}
.btn-green {
@extend .btn-green;
}
}
}
.navbar {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-link {
margin-left: 10px;
margin-right: 10px;
a {
}
}
@media (max-width: 992px) {
.navbar-brand {
img {
margin-top: 10px;
height: 30px;
position: relative;
bottom: -15px;
}
}
}
@media (min-width: 993px) {
#flag {
margin-top: 5px;
}
.navbar {
min-height:35px;
height: 35px;
}
nav {
background-color: rgba(255, 255, 255, 0.9);
padding: 7px 0;
ul {
width: 100%;
li {
padding-left: 10px;
a {
font-weight: 200;
color: black;
&:hover {
color: $green;
}
&.selected {
color: darken($green, 10%);
text-shadow: 0 0 2px $green;
}
}
}
}
}
}
.navbar-brand {
img {
height: 30px;
margin-top: -20px;
}
}

Css 32131

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css 32131

Uploaded by

Copyright:

Available Formats

/*

* This is a manifest file that'll be compiled into application.css, which will

background: transparent image-url('part3.2/iphones.png') no-repeat bottom

border: 1px solid white;

padding: 5px 10px;

You might also like