Portfolio Categories
Select a category below to view their respective portfolio.
Graphic Design
Video Production
Video Production
Full production capabilities and the ability to shoot TV ready commercials on-site.
View NowPhotography
Web Design
<!-- 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>