<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
madina profile · HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Babalmadina</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--asphalt: #16181C;
--asphalt-2: #202329;
--line-amber: #F2B705;
--line-white: #E9E9E4;
--muted: #9AA0A6;
--radius: 14px;
}
*{ box-sizing: border-box; }
body{
margin:0;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:
repeating-linear-gradient(
90deg,
transparent 0px,
transparent 34px,
rgba(233,233,228,0.06) 34px,
rgba(233,233,228,0.06) 60px
),
var(--asphalt);
font-family: 'Work Sans', sans-serif;
padding: 32px 16px;
}
.card{
width: 100%;
max-width: 420px;
background: var(--asphalt-2);
border-radius: var(--radius);
padding: 36px 30px 30px;
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.45);
border: 1px solid rgba(233,233,228,0.08);
overflow: hidden;
}
.route-line{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: repeating-linear-gradient(
90deg,
var(--line-amber) 0px,
var(--line-amber) 22px,
transparent 22px,
transparent 40px
);
}
.brand{
display:flex;
align-items:baseline;
gap: 10px;
margin-bottom: 4px;
}
.brand h1{
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
letter-spacing: 1.5px;
color: var(--line-white);
margin: 0;
}
.brand .dot{
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--line-amber);
margin-bottom: 6px;
}
.tagline{
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--line-amber);
margin: 0 0 22px;
font-weight: 600;
}
.bio{
font-size: 15px;
line-height: 1.65;
color: var(--muted);
margin: 0 0 26px;
}
.bio strong{
color: var(--line-white);
font-weight: 600;
}
.divider{
display:flex;
align-items:center;
gap: 10px;
margin-bottom: 22px;
}
.divider span{
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.divider::before,
.divider::after{
content: "";
flex: 1;
height: 1px;
background: rgba(233,233,228,0.12);
}
.plate-link{
display:flex;
align-items:center;
justify-content:center;
gap: 10px;
width: 100%;
padding: 15px 20px;
background: var(--line-white);
color: var(--asphalt);
text-decoration: none;
font-weight: 600;
font-size: 14.5px;
border-radius: 8px;
border: 2px solid var(--asphalt);
box-shadow: 0 4px 0 var(--line-amber);
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
.plate-link:hover{
transform: translateY(-2px);
box-shadow: 0 6px 0 var(--line-amber);
}
.plate-link:active{
transform: translateY(1px);
box-shadow: 0 2px 0 var(--line-amber);
}
.plate-link svg{
width: 16px;
height: 16px;
flex-shrink: 0;
}
.services{
display:flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.services span{
font-size: 11px;
letter-spacing: 0.4px;
color: var(--muted);
border: 1px solid rgba(233,233,228,0.16);
padding: 5px 10px;
border-radius: 999px;
}
@media (prefers-reduced-motion: reduce){
.plate-link{ transition: none; }
}
</style>
</head>
<body>
<div class="card">
<div class="route-line"></div>
<div class="brand">
<h1>Babalmadina</h1>
<span class="dot"></span>
</div>
<p class="tagline">Vehicle Rental Company</p>
<p class="bio">
<strong>Babalmadina</strong> is a reliable choice for auto rental near me offering well maintained vehicles for daily weekly and monthly hire. We provide clean cars fast booking and friendly local support for families business travelers and tourists. Whether you need a short trip or a long journey Babalmadina ensures affordable pricing quick pickup and dropoff and dependable service you can count on every time.
</p>
<div class="divider"><span>Visit Us</span></div>
<a href="https://babalmadinabus.com/" target="_blank" rel="noopener" class="plate-link" id="siteLink">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
<span>babalmadinabus.com</span>
</a>
<div class="services">
<span>Car Rental</span>
<span>Bus Rental</span>
<span>Party Bus</span>
<span>School Transport</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function(){
$('#siteLink').on('click', function(){
$(this).css('opacity', '0.85');
setTimeout(() => { $('#siteLink').css('opacity', '1'); }, 150);
});
$('.card').css('opacity', '0').animate({ opacity: 1 }, 400);
});
</script>
</body>
</html>
