<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Safar Stay | Travel with Confidence. Stay with
Peace of Mind.</title>
<meta name="description"
content="Muslim-friendly travel, accommodation, halal dining, mosques and
family-friendly experiences.">
.com">
https://fonts.gstatic.com
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css
<style>
:root{
--navy:#0F172A;
--turquoise:#14B8A6;
--gold:#D4AF37;
--white:#FFFFFF;
--light:#F8FAFC;
--text:#475569;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Poppins',sans-serif;
color:var(--text);
background:white;
line-height:1.7;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
}
section{
padding:100px 0;
}
/* Navigation */
.navbar{
position:fixed;
top:0;
width:100%;
background:rgba(15,23,42,.96);
backdrop-filter:blur(10px);
z-index:999;
}
.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1200px;
margin:auto;
padding:15px 20px;
}
.logo{
font-size:1.6rem;
font-weight:700;
color:white;
}
.logo span{
color:var(--gold);
}
.nav-links{
display:flex;
list-style:none;
gap:25px;
}
.nav-links a{
text-decoration:none;
color:white;
transition:.3s;
}
.nav-links a:hover{
color:var(--gold);
}
/* Hero */
.hero{
min-height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(
rgba(15,23,42,.90),
rgba(15,23,42,.90)
),
radial-gradient(circle at 20px 20px,
rgba(212,175,55,.25) 2px,
transparent 2px),
radial-gradient(circle at 60px 60px,
rgba(20,184,166,.22) 2px,
transparent 2px);
background-size:
cover,
80px 80px,
80px 80px;
color:white;
}
.hero-content{
text-align:center;
width:100%;
}
.hero h1{
font-size:4rem;
margin-bottom:20px;
line-height:1.2;
}
.hero p{
max-width:800px;
margin:auto;
margin-bottom:35px;
font-size:1.2rem;
}
.btn{
display:inline-block;
background:var(--gold);
color:var(--navy);
text-decoration:none;
padding:14px 28px;
border-radius:50px;
font-weight:600;
margin:10px;
transition:.3s;
}
.btn:hover{
transform:translateY(-4px);
}
/* Titles */
.section-title{
text-align:center;
color:var(--navy);
font-size:2.5rem;
margin-bottom:20px;
}
.section-subtitle{
text-align:center;
max-width:800px;
margin:auto;
margin-bottom:60px;
}
/* Alhambra Section */
.pattern-bg{
background:
linear-gradient(135deg,#fafafa,#f5f8fa);
position:relative;
}
.pattern-bg::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 50px 50px,
rgba(20,184,166,.08) 2px,
transparent 2px);
background-size:100px 100px;
pointer-events:none;
}
/* Cards */
.grid{
display:grid;
gap:30px;
}
.grid-4{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.grid-3{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.card{
background:white;
border-radius:20px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
}
.card:hover{
transform:translateY(-8px);
}
.card i{
font-size:2rem;
color:var(--turquoise);
margin-bottom:15px;
}
.card h3{
color:var(--navy);
margin-bottom:10px;
}
/* Forms */
form{
max-width:700px;
margin:auto;
}
input,
textarea{
width:100%;
padding:15px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:10px;
font-family:Poppins,sans-serif;
}
button{
background:var(--turquoise);
color:white;
border:none;
padding:15px 30px;
border-radius:10px;
cursor:pointer;
font-weight:600;
}
/* Footer */
footer{
background:var(--navy);
color:white;
padding:70px 0;
}
footer h2{
text-align:center;
margin-bottom:30px;
}
.footer-note{
text-align:center;
margin-top:30px;
opacity:.85;
}
/* Responsive */
@media(max-width:768px){
.hero h1{
font-size:2.5rem;
}
.nav-container{
flex-direction:column;
gap:10px;
}
.nav-links{
flex-wrap:wrap;
justify-content:center;
}
}
</style>
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar">
<div class="nav-container">
<div class="logo">
Safar<span>Stay</span>
</div>
<ul class="nav-links">
<li>#hero</li>
<li>">About</a></li>
<li>#services</li>
<li>#destinations</li>
<li>newsletter">Newsletter</a></li>
<li>#why</li>
<li>#contactContact</a></li>
</ul>
</div>
</nav>
<!-- HERO -->
<section id="hero" class="hero">
<div class="container hero-content">
<h1>Travel with Confidence.<br>Stay with Peace of Mind.</h1>
<p>
The trusted platform helping Muslim travellers discover
faith-friendly accommodation, nearby mosques,
halal dining and family-focused travel experiences.
</p>
#destinationsbtn">Explore Destinations</a>
#newsletter">Join Waiting List</a>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="pattern-bg">
<div class="container">
<h2 class="section-title">About Safar
Stay</h2>
<p class="section-subtitle">
Replace the content below with your mission, vision and
founder story.
</p>
<div class="grid grid-4">
<div class="card">
<h3>Mission</h3>
<p>
[Insert Mission Statement]
</p>
</div>
<div class="card">
<h3>Vision</h3>
<p>
[Insert Vision Statement]
</p>
</div>
<div class="card">
<h3>Our Story</h3>
<p>
[Insert founder story and inspiration behind Safar Stay]
</p>
</div>
<div class="card">
<h3>Values</h3>
<p>
Trust • Community • Hospitality • Family • Integrity
</p>
</div>
</div>
</div>
</section>
<!-- SERVICES -->
<section id="services">
<div class="container">
<h2 class="section-title">Problems We
Solve</h2>
<p class="section-subtitle">
Helping Muslim travellers spend less time researching and
more time enjoying their journeys.
</p>
<div class="grid grid-3">
<div class="card">
<i class="fa-solid
fa-mosque"></i>
<