<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jansons Carpets - Carpet Area Guide</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Poppins',sans-serif;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:
radial-gradient(circle at top,#f6e8cf 0%,#ead6b0 35%,#c49a6c 100%);
padding:30px;
}
/* Decorative Carpet Pattern */
body::before{
content:"";
position:fixed;
inset:0;
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,.05) 0 10px,
rgba(0,0,0,.04) 10px 20px
);
opacity:.35;
pointer-events:none;
}
.card{
width:100%;
max-width:760px;
background:#fffdf9;
border-radius:22px;
overflow:hidden;
box-shadow:0 25px 60px rgba(73,42,13,.25);
border:8px solid #b37a42;
position:relative;
text-align:center;
}
/* Carpet Border */
.card::before{
content:"";
position:absolute;
inset:12px;
border:2px dashed #d6b37d;
border-radius:14px;
pointer-events:none;
}
.header{
background:linear-gradient(135deg,#7b3f00,#b46a2c,#d39b55);
padding:38px 30px;
color:#fff;
}
.icon{
font-size:58px;
margin-bottom:12px;
}
.header h1{
font-size:2rem;
line-height:1.35;
font-weight:700;
}
.content{
padding:40px 38px 45px;
}
.content p{
font-size:1.08rem;
color:#555;
line-height:1.9;
margin-bottom:35px;
}
.btn{
display:inline-block;
text-decoration:none;
background:#d72626;
color:#fff;
padding:16px 38px;
border-radius:50px;
font-weight:600;
font-size:1rem;
letter-spacing:.4px;
transition:.35s ease;
box-shadow:0 10px 25px rgba(215,38,38,.35);
}
.btn:hover{
transform:translateY(-4px);
background:#b90f0f;
box-shadow:0 16px 35px rgba(215,38,38,.45);
}
.pattern{
height:18px;
background:
repeating-linear-gradient(
90deg,
#8c4b17 0 20px,
#d7a25d 20px 40px,
#7b3f00 40px 60px,
#e6c08d 60px 80px
);
}
@media(max-width:600px){
.header h1{
font-size:1.5rem;
}
.content{
padding:28px;
}
.content p{
font-size:1rem;
}
.btn{
width:100%;
}
}
</style>
</head>
<body>
<div class="card">
<div class="pattern"></div>
<div class="header">
<div class="icon">
