Thank you for using Layouts Cloud
ADD THE FOLLOWING CODE TO COMPLETE IT ↓
Give me the css
.layout {
border: 1px solid #b6c5d6;
border-radius: 5px;
margin-bottom: -20px !important;
-webkit-box-shadow: 0px 1px 55px -4px rgba(43,132,240,0.2);
-moz-box-shadow: 0px 1px 55px -4px rgba(43,132,240,0.2);
box-shadow: 0px 1px 55px -4px rgba(43,132,240,0.2);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.scrolleffect:hover {
-webkit-transition: background-position 4s linear 0s;
-moz-transition: background-position 4s linear 0s;
transition: background-position 4s linear 0s;
background-position: center bottom;
/*The 4s is the time it takes for the image to scroll from start to finish, which is why the longer screenshots scroll faster*/
}
.scrolleffect {
min-height: 320px;
display: block;
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
-webkit-transition: background-position 1.3s ease-out 0.3s;
-moz-transition: background-position 1.3s ease-out 0.3s;
transition: background-position 1.3s ease-out 0.3s;
/*The ease-out 0.5s is the delay before the scroll return to the original position*/
}
@media all and (max-width: 1405px) {
.scrolleffect {
min-height: 220px !important;
}
}
.et_pb_toggle_close {
max-height: 50px !important;
max-width: 50px !important;
border-radius: 100px !important;
}
.et_pb_toggle_open {
border-radius: 3px !important;
text-align: center !important;
padding: 40px 60px !important;
padding-top: 0px !important;
width: 75% !important;
}
.et_pb_toggle_content p {
display: none !important;
}
.et_pb_toggle_open .et_pb_toggle_content p {
display: block !important;
}
.et_pb_toggle_open {
margin-top: 120px !important;
-webkit-box-shadow: 0px 4px 65px -4px rgba(43,132,240,0.35) !important;
-moz-box-shadow: 0px 4px 65px -4px rgba(43,132,240,0.35) !important;
box-shadow: 0px 4px 65px -4px rgba(43,132,240,0.35) !important;
}
.et_pb_toggle_open h5 {
margin-top: -22px !important;
background-color: white !important;
max-width: 50px !important;
max-height: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
border-radius: 100px;
border: 1.4px solid #054d91;
line-height: 46px;
margin-left: auto !important;
margin-right: auto !important;
-webkit-box-shadow: 0px 1px 75px -4px rgba(43,132,240,0.2);
-moz-box-shadow: 0px 1px 75px -4px rgba(43,132,240,0.2);
box-shadow: 0px 1px 75px -4px rgba(43,132,240,0.2);
}
DELETE THIS SECTION AFTER THAT’S DONE ↓
How to add it
Let your clients decide where TO start
Layouts Cloud presents the
À La Carte Layout
?
Give your webdesign clients the option to choose from a menu of premade designs.
This way of working has rapidly become more popular over time since it speeds up the development, increases costumer satisfaction and in most cases provides a lower cost website for the client.
We will continue to update this layout every month so it will contain all the latest of our designs.
Delete all the designs you don’t want your clients to choose from or aren’t relevant to your costumer base. You can change names or add your own layouts to this page aswell.
* PLEASE NOTE THAT IT’S NOT ALLOWED TO SELL OUR DESIGNS AS IS. NO .JSON FILE CAN BE SOLD. OUR SERVICE IS CREATED TO BE USED AS A STARTING POINT FOR THE WEBDESIGN SERVICE OFFERED.
Digital Agency – About
Digital Agency – Services
Digital Agency – Contact