Embedded Files
APP FOOTER TEMPLATE PREVIEW 1
APP FOOTER TEMPLATE PREVIEW 1
APP FOOTER TEMPLATE PREVIEW 2
APP FOOTER TEMPLATE PREVIEW 2
Coppy the HTML Code below to use the template above
Coppy the HTML Code below to use the template above
TEMPLATE 1
TEMPLATE 1
<!-- KTM EduTech Footer Section Template -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;800&family=Google+Sans+Flex:wght@300;400&display=swap" rel="stylesheet">
<style>
.ktm-footer {
width: 100%;
height: 280px;
background: #0D1625;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Google Sans Flex', sans-serif;
}
.ktm-footer-inner {
text-align: center;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.ktm-footer-logo {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: 6px;
}
.ktm-footer-brand {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 600;
color: #D4AF37;
letter-spacing: 0.01em;
line-height: 1;
opacity: 0.5;
}
.ktm-footer-sub {
font-size: 10px;
font-weight: 300;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1;
}
.ktm-footer-pill {
margin-top: 50px;
padding: 4px 12px;
border: 1px solid rgba(212,175,55,0.35);
border-radius: 999px;
font-size: 10px;
font-weight: 400;
color: #d4af37;
background: rgba(212,175,55,0.06);
white-space: nowrap;
}
/* Responsive */
@media (max-width: 480px) {
.ktm-footer {
height: auto;
padding: 18px 12px;
}
.ktm-footer-brand {
font-size: 14px;
}
.ktm-footer-sub {
font-size: 9px;
}
.ktm-footer-pill {
font-size: 9px;
padding: 4px 10px;
}
}
</style>
<footer class="ktm-footer">
<div class="ktm-footer-inner">
<img
src="https://ik.imagekit.io/ktmedutech/KTM%20EduTech%20Images/KTM%20Gold%20Logo.png"
alt="KTM EduTech Logo"
class="ktm-footer-logo"
>
<div class="ktm-footer-brand">
KTM EduTech Innovations
</div>
<div class="ktm-footer-sub">
ICT Click Digital Media | Kyd Tantano Masong
</div>
<div class="ktm-footer-pill">
Built for Educators & Creators
</div>
</div>
</footer>
TEMPLATE 2
TEMPLATE 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>KTM EduTech Footer</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;800&family=Google+Sans+Flex:opsz,wght@8..144,300&display=swap" rel="stylesheet">
<style>
:root{
--primary:#1E293B;
--accent:#D4AF37;
--midnight:#0D1625;
--muted:#94A3B8;
--white:#ffffff;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#f8fafc;
font-family:'Google Sans Flex', sans-serif;
}
/* Footer */
.ktm-footer{
width:100%;
min-height:140px;
background:linear-gradient(180deg,#0d1625 0%, #111c30 100%);
display:flex;
align-items:center;
justify-content:center;
padding:22px 18px;
border-top:1px solid rgba(212,175,55,.15);
}
.ktm-footer-inner{
width:100%;
max-width:900px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:10px;
}
/* Logo */
.ktm-logo{
width:64px;
height:64px;
object-fit:contain;
filter:drop-shadow(0 4px 12px rgba(212,175,55,.18));
margin-bottom:6px;
}
/* Main Title */
.ktm-title{
font-family:'Plus Jakarta Sans', sans-serif;
font-weight:600;
font-size:1rem;
color:var(--white);
letter-spacing:0.01em;
}
/* Subtitle */
.ktm-subtitle{
font-size:.72rem;
font-weight:300;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.08em;
line-height:1.5;
}
/* Pill Badge */
.ktm-pill{
margin-top:6px;
padding:8px 18px;
border-radius:999px;
font-size:.75rem;
color:var(--accent);
background:rgba(212,175,55,.08);
border:1px solid rgba(212,175,55,.22);
backdrop-filter:blur(6px);
letter-spacing:.03em;
}
/* Hover Effect */
.ktm-footer:hover .ktm-pill{
background:rgba(212,175,55,.12);
transform:translateY(-1px);
transition:all .3s ease;
}
/* Responsive */
@media (max-width:768px){
.ktm-footer{
padding:28px 16px;
}
.ktm-title{
font-size:.95rem;
}
.ktm-subtitle{
font-size:.66rem;
max-width:95%;
}
.ktm-pill{
font-size:.7rem;
padding:7px 16px;
}
}
@media (max-width:480px){
.ktm-logo{
width:56px;
height:56px;
}
.ktm-title{
font-size:.88rem;
}
.ktm-subtitle{
font-size:.62rem;
line-height:1.45;
}
}
</style>
</head>
<body>
<footer class="ktm-footer">
<div class="ktm-footer-inner">
<img
src="https://ik.imagekit.io/ktmedutech/KTM%20EduTech%20Images/KTM%20Gold%20Logo.png"
alt="KTM EduTech Logo"
class="ktm-logo"
>
<div class="ktm-title">
KTM EduTech Innovations
</div>
<div class="ktm-subtitle">
ICT CLICK DIGITAL MEDIA | KYD TANTANO MASONG
</div>
<div class="ktm-pill">
Built for Educators & Creators
</div>
</div>
</footer>
</body>
</html>
Page updated
Google Sites
Report abuse