.msg{ width: 40px; height: 50px; margin: 0 auto; }
.feature{ width: 20%; height: 23%; padding-left: 15px; padding-top: 4px; } /* Basic styling for the form */ form { max-width: 400px; margin: 0 auto; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"] { background-color: #1c43e2; color: white; padding: 10px 20px; border: none; border-radius: 4px; font-size: 16px; width: 100%; } input[type="submit"]:hover { background-color: #1c43e2; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="#!">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#!">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#features">About</a></li>
<li class="nav-item"><a class="nav-link" href="#Contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#Services">Services</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero section -->
<div class="bg-dark text-secondary px-4 py-5 text-center">
<div class="py-5">
<h1 class="display-5 fw-bold text-white">Present your business <br/>in a whole new way</h1>
<div class="col-lg-6 mx-auto"></div>
<button type="button" class="btn btn-primary btn-lg me-sm-3 fw-bold mt-2">Get Started</button>
<div class="px-3"></div> <button type="button" class="btn btn-outline-light mt-2 btn-lg " >Learn more</button>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Features section-->
<section class="py-5 border-bottom" id="features">
<div class="container px-5 my-5">
<div class="row gx-5">
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-collection " style="font-size: 32px;"></i></div>
<h1 class="h4 fw-bolder">Featured Title</h1>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a class="text-decoration-none" href="#!">
Call to action
<i class="bi bi-arrow-right"></i>
</a>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-building " style="font-size: 32px;"></i></div>
<h1 class="h4 fw-bolder">Featured Title</h1>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a class="text-decoration-none" href="#!">
Call to action
<i class="bi bi-arrow-right"></i>
</a>
</div>
<div class="col-lg-4">
<div class="feature bg-primary bg-gradient text-white rounded-3 mb-3"><i class="bi bi-toggles2" style="font-size: 32px;"></i></div>
<h1 class="h4 fw-bolder">Featured Title</h1>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a class="text-decoration-none" href="#!">
Call to action
<i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- $ section-->
<section class="bg-light py-5 border-bottom" id="Services">
<div class="container px-5 my-5">
<div class="text-center mb-5">
<h2 class="fw-bolder">Pay as you grow</h2>
<p class="lead mb-0">With our no hassle pricing plans</p>
</div>
<div class="row gx-5 justify-content-center">
<div class="col-lg-6 col-xl-4">
<div class="card mb-5 mb-xl-0">
<div class="card-body p-5">
<div class="small text-uppercase fw-bold text-muted">Free</div>
<div class="mb-3">
<span class="display-4 fw-bold">$0</span>
<span class="text-muted">/ mo.</span>
</div>
<ul class="list-unstyled mb-4">
<li class="mb-2"> <i class="bi bi-check text-primary"></i>
<strong>1 users</strong>
</li>
<li class="mb-2"><i class="bi bi-check text-primary"></i>
5GB storage
</li>
<li class="mb-2"><i class="bi bi-check text-primary"></i>
Unlimited public projects
</li>
<li class="mb-2"> <i class="bi bi-check text-primary"></i>
Community access
</li>
<li class="mb-2 text-muted">
<i class="bi bi-x"></i>
Unlimited private projects
</li>
<li class="mb-2 text-muted">
<i class="bi bi-x"></i>
Dedicated support
</li>
<li class="mb-2 text-muted">
<i class="bi bi-x"></i>
Free linked domain
</li>
<li class="text-muted">
<i class="bi bi-x"></i>
Monthly status reports
</li>
</ul>
<div class="d-grid"><a class="btn btn-outline-primary rounded-3" href="#!">Choose plan</a></div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card mb-5 mb-xl-0">
<div class="card-body p-5">
<div class="small text-uppercase fw-bold">
<i class="bi bi-star-fill text-warning"></i>
Pro
</div>
<div class="mb-3">
<span class="display-4 fw-bold">$9</span>
<span class="text-muted">/ mo.</span>
</div>
<ul class="list-unstyled mb-4">
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
<strong>5 users</strong>
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
5GB storage
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Unlimited public projects
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Community access
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Unlimited private projects
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Dedicated support
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Free linked domain
</li>
<li class="text-muted">
<i class="bi bi-x"></i>
Monthly status reports
</li>
</ul>
<div class="d-grid"><a class="btn btn-primary rounded-3" href="#!">Choose plan</a></div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="card">
<div class="card-body p-5">
<div class="small text-uppercase fw-bold text-muted">Enterprise</div>
<div class="mb-3">
<span class="display-4 fw-bold">$49</span>
<span class="text-muted">/ mo.</span>
</div>
<ul class="list-unstyled mb-4">
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
<strong>Unlimited users</strong>
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
5GB storage
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Unlimited public projects
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Community access
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Unlimited private projects
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
Dedicated support
</li>
<li class="mb-2">
<i class="bi bi-check text-primary"></i>
<strong>Unlimited</strong>
linked domains
</li>
<li class="text-muted">
<i class="bi bi-check text-primary"></i>
Monthly status reports
</li>
</ul>
<div class="d-grid"><a class="btn btn-outline-primary rounded-3" href="#!">Choose plan</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CARDS section-->
<section class="py-5 border-bottom">
<div class="container px-5 my-5 px-5">
<div class="text-center mb-5">
<h2 class="fw-bolder">Customer testimonials</h2>
</div>
<div class="row gx-5 justify-content-center">
<div class="col-lg-6">
<div class="card mb-4">
<div class="card-body p-4">
<div class="d-flex">
<div class="flex-shrink-0"><i class="bi bi-chat-right-quote-fill text-primary fs-1"></i></div>
<div class="ms-4">
<p class="mb-1">lovely happy to work with you </p>
<div class="small text-muted">- Ahsan ,pakistan</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body p-4">
<div class="d-flex">
<div class="flex-shrink-0"><i class="bi bi-chat-right-quote-fill text-primary fs-1"></i></div>
<div class="ms-4">
<p class="mb-1">great team work </p>
<div class="small text-muted">- Haris, italy</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact FORM-->
<section class="bg-light py-5" id="Contact">
<div class="container px-5 my-5 px-5">
<div class="text-center mb-5">
<div class=" bg-primary bg-gradient text-white rounded-3 mb-3 msg"><i class="bi bi-envelope" style="font-size: 30px;"></i></div>
<h2 class="fw-bolder">Get in touch</h2>
<p class="lead mb-0">We'd love to hear from you</p>
</div>
<div class="row gx-5 justify-content-center">
<div class="col-lg-6">
<form action="#" method="POST">
<input type="text" id="fullname" name="fullname" placeholder="Full Name" required>
<input type="email" id="email" name="email" placeholder="Email Address" required>
<input type="tel" id="phone" name="phone"placeholder="Phone Number" required>
<textarea id="address" name="address" rows="4" placeholder="Message" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer mt-5 py-3 bg-dark">
<div class="container text-white text-center">
<span class="text-white ">Copyright © Your Website 2024</span>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</body>