Portfolio Categories

Select a category below to view their respective portfolio.

Graphic Design

Graphic Design

We strive to deliver a creative that converts.

View Now

Video Production

Video Production

Full production capabilities and the ability to shoot TV ready commercials on-site.

View Now

Photography

Photography

When you need a pro to catch the perfect angle, we have you covered.

View Now

Web Design

Web Design

E-commerce, online booking, analytics, SEO, custom coding and so much more.

View Now

The above section was coded from scratch in HTML, CSS, and Javascript. Want to see the code?

View Code
View
Copy Code
Copy
<!-- COPY BELOW -->
<!-- PLEASE NOTE: ICONS USED ARE FROM FONT AWESOME PRO 5. Visit https://fontawesome.com/ to install a kit. -->
<div class="pm-container">
<div class="pm-box box-1">
<div>
<i class="fa-solid fa-pen-paintbrush pm-big-icon"></i>
<h2>Graphic Design</h2>
</div>
<div class="pm-box-inside">
<h4><i class="fa-solid fa-pen-paintbrush"></i> Graphic Design</h4>
<p>We strive to deliver a creative that converts.</p>
<a href="https://www.txpromomedia.com/digital-advertising-and-graphic-design/" class="pm-white-to-purple-btn">View Now</a>
</div>
</div>

<div class="pm-box box-2">
<div>
<i class="fa-solid fa-camcorder pm-big-icon"></i>
<h2>Video Production</h2>
</div>
<div class="pm-box-inside">
<h4><i class="fa-solid fa-camera-retro"></i> Video Production</h4>
<p>Full production capabilities and the ability to shoot TV ready commercials on-site.</p>
<a href="https://www.txpromomedia.com/professional-video-production/" class="pm-white-to-purple-btn">View Now</a>
</div>
</div>

<div class="pm-box box-3">
<div>
<i class="fa-solid fa-camera-retro pm-big-icon"></i>
<h2>Photography</h2>
</div>
<div class="pm-box-inside">
<h4><i class="fa-solid fa-camera-retro"></i> Photography</h4>
<p>When you need a pro to catch the perfect angle, we have you covered.</p>
<a href="https://www.txpromomedia.com/photography/" class="pm-white-to-purple-btn">View Now</a>
</div>
</div>

<div class="pm-box box-4">
<div>
<i class="fa-solid fa-display-code pm-big-icon"></i>
<h2>Web Design</h2>
</div>
<div class="pm-box-inside">
<h4><i class="fa-solid fa-display-code"></i> Web Design</h4>
<p>E-commerce, online booking, analytics, SEO, custom coding and so much more.</p>
<a href="https://www.txpromomedia.com/responsive-web-design-development/" class="pm-white-to-purple-btn">View Now</a>
</div>
</div>

<div class="pm-promo-banner">
<p>The above section was coded from scratch in HTML, CSS, and Javascript. Want to see the code?</p>
<div class="pm-promo-banner-inside">

<div class="pm-basic-btn-prpl" id="pmViewCodeBtn">View Code<div class="btn-prpl-inside">View</div>
</div>
<div class="pm-basic-btn-red" id="copyCodeBtn">Copy Code<div class="btn-red-inside">Copy</div>
</div>
</div>
</div>

<div class="pm-popup-1 " id="pmCodeContainer">
<i class="fa-solid fa-xmark-large close-code-icon"></i>
<code id="codeData" class="pm-scroll-bar">
<!-- THIS IS WHERE THE CODE FOR THE POPUP IS DISPLAYED -->

</code>
</div>

</div>

<style>
.close-code-icon { position: absolute; top: -20px; right: -20px; color: #ee4036; z-index: 99; font-size: 20px; background: white; padding: 10px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } .close-code-icon:hover { color: white; background: #ee4036; } @media only screen and (max-width: 640px) { .close-code-icon { right: 0; } #pmCodeContainer { width: 90% !important; height: 90% !important; } } #pmCodeContainer { text-align: left; background: white; padding: 20px; width: 60%; height: 60%; max-height: 800px; max-width: 800px; position: fixed; left: 50%; top: 150%; transform: translate(-50%, -50%); display: block; border-radius: 10px; transition: all 1s ease; z-index: 9999999 !important; color: black; } .pm-act-pop {} #codeData { overflow-y: scroll; display: block; width: 100%; height: 100%; font-size: 14px !important; } .pm-basic-btn-prpl, .pm-basic-btn-red { margin: 10px; padding: 10px; border-radius: 3px; cursor: pointer; background: white; display: inline-block; position: relative; overflow: hidden; } .pm-basic-btn-prpl { color: #280056; } .pm-basic-btn-prpl:hover .btn-prpl-inside, .pm-basic-btn-red:hover .btn-red-inside { top: 0; } .btn-prpl-inside, .btn-red-inside { position: absolute; top: 90%; left: 0; width: 100%; height: 100%; color: white; transition: all 0.25s; } .btn-prpl-inside { background: #280056; } .btn-red-inside { background: #ee4036; } .pm-basic-btn-red { color: #ee4036; } .pm-promo-banner { color: white; margin-top: 30px; padding: 20px; overflow: hidden; position: relative; border-radius: 10px; text-align: center; } .pm-promo-banner-inside { background: white; position: absolute; top: 95%; left: 0; width: 100%; height: 100%; color: #280056; transition: all 0.3s ease; } .pm-promo-banner:hover .pm-promo-banner-inside { top: 0; } .pm-box .pm-big-icon { width: 100%; font-size: 50px; margin: 0px !important; height: auto; } .pm-container, .pm-big-box-inside, .pm-box-inside, .pm-big-box, .pm-box, .btn-prpl-inside, .btn-red-inside, .pm-promo-banner, .pm-promo-banner-inside { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; text-align: center; } .pm-white-to-purple-btn { background: white; color: #280056; border: 2px solid #280056; padding: 10px 30px; text-decoration: none; border-radius: 50px; font-size: 1.3rem; text-transform: uppercase; font-style: italic; font-weight: 900; transition: all 0.3s ease; } .pm-white-to-purple-btn:hover { background: #280056; color: white; padding: 10px 50px 10px 25px; } .pm-white-to-purple-btn:hover:after { content: '\f101'; font-family: 'Font Awesome 5 Pro'; position: absolute; margin-left: 10px; } .pm-container a { margin: 20px; font-size: 1.2rem; } .pm-container h2 { font-size: 1.8rem; font-weight: 800; color: white; } .pm-container h4 { font-size: 1.4rem; font-weight: 800; color: #280056; line-height: 1em !important; } .pm-container p { font-size: 1.1rem; font-weight: 400; line-height: 1.1em !important; } .pm-container h4, .pm-container p { width: 100%; text-align: center; margin: 10px; } .pm-big-box, .pm-box { position: relative; background: linear-gradient(135deg, #7B27DB 0%, #ee4036 100%); color: white; min-height: 300px; border-radius: 10px; overflow: hidden; margin: 10px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; } .pm-box { width: calc(25% - 20px); } .pm-big-box { width: calc(100% - 20px); } .pm-box-inside, .pm-big-box-inside { position: absolute; bottom: -100%; left: 0; background: white; color: #280056; padding: 20px; border-radius: 10px; transition: all 400ms ease; width: 100%; box-shadow: rgba(0, 0, 0, 0.45) 0px -25px 20px -20px; } .pm-box:hover .pm-box-inside, .pm-big-box:hover .pm-big-box-inside { bottom: 0 !important; } @media only screen and (max-width: 640px) { .pm-box, .pm-big-box { width: calc(100% - 20px) !important; } } @media only screen and (min-width: 641px) and (max-width: 1200px) { .pm-box { width: calc(50% - 20px) !important; } .pm-big-box { calc(100% - 20px) !important; } }
</style>

<script>
window.onload = function() { const codeData = document.getElementById('codeData'); const copyCodeBtn = document.getElementById('copyCodeBtn'); const copyCodeBtnInner = copyCodeBtn.querySelector('div'); const codeCloseIcon = document.querySelector('.close-code-icon'); const pmCodeContainer = document.getElementById('pmCodeContainer'); const pmViewCodeBtn = document.getElementById('pmViewCodeBtn'); copyCodeBtn.onclick = function() { /* Copy the text inside the text field */ navigator.clipboard.writeText(codeData.innerText); copyCodeBtnInner.innerText = "Copied!"; setTimeout(function() { copyCodeBtnInner.innerText = "Copy"; }, 3000); } codeCloseIcon.onclick = function() { pmCodeContainer.classList.remove('pm-act-pop'); pmCodeContainer.style.top = "150%"; } pmViewCodeBtn.onclick = function() { pmCodeContainer.classList.add('pm-act-pop'); pmCodeContainer.style.top = "50%"; } }
</script>