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.

How can we help you today?

What kind of art direction do you need?

What kind of website do you need?

On what device do you want the video shown?

On what platform do you want the app developed?

If you have a budget in mind, let us know.

Follow Us

WE WANT YOU TO win big

Please let me know if there is anything at all that we can help you with. Our team is always here for you if you need assistance :) We typically answer in a few hours. ~ Carol Gann
Holler Box