Two column layout w/ video

Responsive Announcement w/ Video

This is an easy one to implement. You can easily edit the text and replace the embed code for the video with whatever YouTube or Vimeo embed code you have. 

Screenshot

Step 1

Paste the following code into the HTML/Source of the Announcement

 <div class="row">
    <div class="col-12 col-xl-6">
        <h4 style="padding-bottom:10px;padding-top:10px;">You have successfully logged in!</h4>
            <p>We'll be using this Portal to streamline our working processes!</p><p>At Deep Focus Labs, we're committed to your privacy & security. You can use this Client Portal to communicate with us, check the progress of your Projects, upload files to us, retrieve files from us, and much more!</p><p>The buttons below are just shortcuts to some important actions, but you'll mostly be using the navigation on the left side of your desktop, or from the "3 lines" menu if you're using your mobile device.</p>
             <p><a class="btn btn-dark btn-deepfocus bg-pure-whitefont-weight-light rounded-4 text-capitalize mb-1" href="/files/home" target="_self" role="button">View your Shared Files</a><a class="btn btn-dark btn-deepfocus bg-pure-whitefont-weight-light rounded-4 text-capitalize mb-1" href="/pm/project" target="_self" role="button">View your Projects</a><a class="btn btn-dark btn-deepfocus bg-pure-whitefont-weight-light rounded-4 text-capitalize mb-1" href="/invoices/admin" target="_self" role="button">View your Invoices</a></p>
        </div>
    <div class="col-12 col-xl-6">
        <div class="embed-responsive embed-responsive-16by9 mt-3">
                <figure class="embed-responsive-item"><iframe src="https://www.youtube.com/embed/7-HBea6XcUo" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" width="1920" height="1080" frameborder="0"></iframe></figure>
        </div>
    </div>
</div>

Step 2

You will also want to add the following to your general Custom CSS area provided in "Your Branding > Your Logo & Colors"

.btn-deepfocus {
    background: #EF4A30;
    color:#fff;
    border:0px;
    margin-right:15px;
}

Related Articles