Thank you for using Divi Cloud
ADD THE FOLLOWING CODE TO COMPLETE IT ↓
Give me the css
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
.left {
text-align: left !important;
}
}
.scrollme: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*/
}
.scrollme {
min-height: 460px;
display: block;
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
-webkit-transition: background-position 1.5s ease-out 0.5s;
-moz-transition: background-position 1.5s ease-out 0.5s;
transition: background-position 1.5s ease-out 0.5s;
/*The ease-out 0.5s is the delay before the scroll return to the original position*/
}
DELETE THIS SECTION AFTER THAT’S DONE ↓
How to add it
<style type=text/css><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*** Responsive Styles Tablet And Below ***/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media all and (max-width: 980px) {<!-- [et_pb_line_break_holder] --> .left {<!-- [et_pb_line_break_holder] --> text-align: left !important;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.scrollme:hover {<!-- [et_pb_line_break_holder] --> -webkit-transition: background-position 4s linear 0s;<!-- [et_pb_line_break_holder] --> -moz-transition: background-position 4s linear 0s;<!-- [et_pb_line_break_holder] --> transition: background-position 4s linear 0s;<!-- [et_pb_line_break_holder] --> background-position: center bottom;<!-- [et_pb_line_break_holder] --> /*The 4s is the time it takes for the image to scroll from start to finish, which is why the longer screenshots scroll faster*/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.scrollme {<!-- [et_pb_line_break_holder] --> min-height: 460px;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> background-position: center top;<!-- [et_pb_line_break_holder] --> background-repeat: no-repeat;<!-- [et_pb_line_break_holder] --> background-size: 100% auto;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> -webkit-transition: background-position 1.5s ease-out 0.5s;<!-- [et_pb_line_break_holder] --> -moz-transition: background-position 1.5s ease-out 0.5s;<!-- [et_pb_line_break_holder] --> transition: background-position 1.5s ease-out 0.5s;<!-- [et_pb_line_break_holder] --> /*The ease-out 0.5s is the delay before the scroll return to the original position*/<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></style>
A BREATHTAKING PORTFOLIO
<div id="wrapper" ><!-- [et_pb_line_break_holder] --> <div class="phone view_1" id="phone_1"><!-- [et_pb_line_break_holder] --> <iframe src="https://pixabay.com" id="frame_1"></iframe><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --></div> <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <input type="text" id="iframeURL" value="https://diviunited.com" style="display: none;" /><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div style="display: none;"><!-- [et_pb_line_break_holder] --> <label for="iframeWidth">Width:</label><!-- [et_pb_line_break_holder] --> <input type="number" id="iframeWidth" placeholder="400" value="400" /><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <div style="display: none;"><!-- [et_pb_line_break_holder] --> <label for="iframeHeight">Height:</label><!-- [et_pb_line_break_holder] --> <input type="number" id="iframeHeight" placeholder="650" value="650" /><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <div style="display: none;"><!-- [et_pb_line_break_holder] --> <label for="iframePerspective">Add perspective:</label><!-- [et_pb_line_break_holder] --> <input type="checkbox" id="iframePerspective" checked="true" /><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->
<style><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone {<!-- [et_pb_line_break_holder] -->z-index: 4 !important;<!-- [et_pb_line_break_holder] --> border: 40px solid #ddd;<!-- [et_pb_line_break_holder] --> border-width: 55px 7px;<!-- [et_pb_line_break_holder] --> border-radius: 40px;<!-- [et_pb_line_break_holder] --> margin: 50px auto;<!-- [et_pb_line_break_holder] --> overflow: hidden;<!-- [et_pb_line_break_holder] -->background-color: #ffffff !important;<!-- [et_pb_line_break_holder] --> transition: all 0.5s ease;<!-- [et_pb_line_break_holder] -->position: relative !important;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone iframe {<!-- [et_pb_line_break_holder] --> border: 0;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> /*Different Perspectives*/<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone.view_1 {<!-- [et_pb_line_break_holder] --> transform: rotateX(50deg) rotateY(0deg) rotateZ(-50deg);<!-- [et_pb_line_break_holder] --> box-shadow: -3px 3px 0 #BBB, -6px 6px 0 #BBB, -9px 9px 0 #BBB, -12px 12px 0 #BBB, -14px 10px 20px #666;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone.view_2 {<!-- [et_pb_line_break_holder] --> transform: rotateX(0deg) rotateY(-60deg) rotateZ(0deg);<!-- [et_pb_line_break_holder] --> box-shadow: 5px 1px 0 #BBB, 9px 2px 0 #BBB, 12px 3px 0 #BBB, 15px 4px 0 #BBB, 0 7px 20px #999;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> .phone.view_3 {<!-- [et_pb_line_break_holder] --> transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);<!-- [et_pb_line_break_holder] --> box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 0px 10px 20px #666;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> @media (max-width:900px) {<!-- [et_pb_line_break_holder] --> #wrapper {<!-- [et_pb_line_break_holder] --> transform: scale(0.8, 0.8);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> @media (max-width:700px) {<!-- [et_pb_line_break_holder] --> #wrapper {<!-- [et_pb_line_break_holder] --> transform: scale(0.6, 0.6);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> @media (max-width:500px) {<!-- [et_pb_line_break_holder] --> #wrapper {<!-- [et_pb_line_break_holder] --> transform: scale(0.4, 0.4);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --></style>
<script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var phone = document.getElementById("phone_1"),<!-- [et_pb_line_break_holder] --> iframe = document.getElementById("frame_1");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*View*/<!-- [et_pb_line_break_holder] -->function updateView(view) {<!-- [et_pb_line_break_holder] --> if (view) {<!-- [et_pb_line_break_holder] --> phone.className = "phone view_" + view;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Controls*/<!-- [et_pb_line_break_holder] -->function updateIframe() {<!-- [et_pb_line_break_holder] --> iframe.src = document.getElementById("iframeURL").value;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> phone.style.width = document.getElementById("iframeWidth").value + "px";<!-- [et_pb_line_break_holder] --> phone.style.height = document.getElementById("iframeHeight").value + "px";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /*Idea by /u/aerosole*/<!-- [et_pb_line_break_holder] --> document.getElementById("wrapper").style.perspective = (<!-- [et_pb_line_break_holder] --> document.getElementById("iframePerspective").checked ? "1000px" : "none"<!-- [et_pb_line_break_holder] --> );<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->updateIframe();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/*Events*/<!-- [et_pb_line_break_holder] -->document.getElementById("controls").addEventListener("change", function() {<!-- [et_pb_line_break_holder] --> updateIframe();<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->document.getElementById("views").addEventListener("click", function(evt) {<!-- [et_pb_line_break_holder] --> updateView(evt.target.value);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></script>
Hi there!
We build amazing websites.
Yes, I’m a dummy text. Anyway I look nice and useful in some ways. Thanks. I know also latin. Lorem ipsum sit amet is my favourite concept.
Fully Responsive
Create interesting layouts that better showcase your content.
Custom Images
Create custom background colors, images and even fullwidth videos.
Your Styling
Now you can take full advantage of your theme’s content area.
Pro Images
Everything is customizable when build with the Divi Builder.
AB Tested
Let our content breath, and create a sense of rhythm and hierarchy.
Conversion
Everything build with the Divi Builder is fluid and responsive.
We love to Design
Have a look at our portfolio.
Yes, I’m a dummy text. Anyway I look nice and useful in some ways. Thanks. I know also latin. Lorem ipsum sit amet is my favourite concept.
We are open for new projects
Like what you see?
Yes, I’m a dummy text. Anyway I look nice and useful in some ways. Thanks. I know also latin. Lorem ipsum sit amet is my favourite concept.
<style><!-- [et_pb_line_break_holder] -->.quote-form{<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.quote-form .et_contact_bottom_container {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] -->padding-left: 8px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.quote-form .et_pb_contact_field_radio_wrapper {<!-- [et_pb_line_break_holder] --> border: 1px solid #999999;<!-- [et_pb_line_break_holder] -->background-color: #CB9AE7;<!-- [et_pb_line_break_holder] --> padding: 14px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.quote-form span.et_pb_contact_field_radio_title {<!-- [et_pb_line_break_holder] -->float: none;<!-- [et_pb_line_break_holder] -->font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif;<!-- [et_pb_line_break_holder] --> font-size: 16px;<!-- [et_pb_line_break_holder] --> color: #ffffff !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.quote-form .et_pb_contact p input,.quote-form .et_pb_contact p textarea{<!-- [et_pb_line_break_holder] -->background-color: #CB9AE7;<!-- [et_pb_line_break_holder] -->color:#fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.quote-form .et_pb_contact_form_0 .input[type="radio"]:checked + label i:before {<!-- [et_pb_line_break_holder] --> background-color: #CB9AE7 !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.quote-form .et_pb_contact p input[type="checkbox"] + label i, .quote-form .et_pb_contact p input[type="radio"] + label i {<!-- [et_pb_line_break_holder] --> display: inline-block;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> width: 18px;<!-- [et_pb_line_break_holder] --> height: 18px;<!-- [et_pb_line_break_holder] --> margin-right: 6px;<!-- [et_pb_line_break_holder] --> background-color: #CB9AE7;<!-- [et_pb_line_break_holder] --> font-style: normal;<!-- [et_pb_line_break_holder] --> vertical-align: middle;<!-- [et_pb_line_break_holder] --> content: "";<!-- [et_pb_line_break_holder] --> color: #CB9AE7;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.quote-form button.et_pb_contact_submit.et_pb_button {<!-- [et_pb_line_break_holder] --> width: 98%;<!-- [et_pb_line_break_holder] --> border: none;<!-- [et_pb_line_break_holder] --> background: #CB9AE7;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> border: 1px solid #999;<!-- [et_pb_line_break_holder] --> border-radius: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.quote-form i {<!-- [et_pb_line_break_holder] --> border: 1px solid #fff !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.et-pb-contact-message {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>
Get a FREE QUOTE!
Within 24 hours your quote matched to your business needs.
Follow Us