<!--
Project: Stampsynk - Free Codes
Author: @Saulomg2
Description: Responsive footer for the tubesynk website, with buttons and useful links.
Website: https://stampsynk.com
License: Open source
Creation date: February 2025
-->
<section class="footer">
<div class="container">
<h2>🚀 Stampsynk - Free Codes</h2>
<p>
Discover StampSynk – A space created by @Saulomg2 Its Free.<br>
<span class="highlight">âš¡</span> Try it right now!
</p>
<div class="buttons">
<a href="https://stampsynk.com/" class="btn download">Stampsynk</a>
<a href="https://stampsynk.com" class="btn store">full layout</a>
<a href="https://www.youtube.com/@saulomgg" class="btn youtube">YouTube</a>
</div>
</div>
<div class="footer-credit">
<p>Developed by <a href="https://stampsynk.com">stampsynk</a></p>
</div>
</section>
/*
Project: Stampsynk - Free Codes
Author: @Saulomg2
Description: Responsive footer for the tubesynk website, with buttons and useful links.
Website: https://stampsynk.com
License: Open source
Creation date: February 2025
*/
/* General footer style */
.footer {
background: #000;
color: #fff;
text-align: center;
border-radius: 15px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h2 {
font-size: 36px;
font-weight: bold;
color: #f8f9fa;
}
p {
font-size: 18px;
color: #ccc;
margin-bottom: 40px;
line-height: 1.6;
}
.highlight {
font-size: 20px;
color: #ffcc00;
}
/* Botões */
.buttons {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
align-items: center;
}
.btn {
padding: 15px 30px;
font-size: 18px;
text-decoration: none;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
width: 100%;
max-width: 300px; /* Máximo de largura */
margin: 10px 0;
text-align: center;
display: inline-block;
}
.download {
background: #0073e6;
color: #fff;
}
.store {
background: #28a745;
color: #fff;
}
.youtube {
background: #ff6f00;
color: #fff;
}
/* Footer credits */
.footer-credit {
text-align: center;
font-size: 14px;
color: #ccc;
padding-top: 20px;
}
.footer-credit a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
/*
Responsiveness */
@media (max-width: 768px) {
.footer {
padding: 20px;
}
h2 {
font-size: 28px;
}
p {
font-size: 16px;
}
.container {
padding: 0 10px;
}
.buttons {
align-items: center;
}
.btn {
width:; /*
Makes buttons occupy the entire available width */
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.