CS 430 Internet Multimedia Program
This individual project is open-topic. Games, Animations, Commercial business site, Blogs, anything is acceptable! Use the knowledge we have learned, your creativity and imagination!
A web page for medicine booking...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./style/main.css">
<script
src="https://kit.fontawesome.com/a076d05399.js"></script>
<title>MedHub Medicine</title>
</head>
<body>
<header>
<div class="wrapper">
<div class="heading">
<nav>
<ul class="menu">
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">features</a>
</li>
<li>
<a href="booking.html">book</a>
</li>
<li>
<a href="#">Instant Help</a>
</li>
<li>
<a href="#">contacts</a>
</li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
<div class="header-content">
<p>book order now</p>
<h1>+91 9670421947</h1>
</div>
<div class="header-img">
</div>
</div>
</header>
<section class="section-booking">
<div class="container">
<div class="booking">
<div class="left-side">
<div class="booking-title">
<h3>best in city</h3>
<h2>trusted Medcine services in India</h2>
<p>A MedHub, also known as a Med or a Maxi, is a type of
booking for hire with a medicine, used by a single patient or small
group of patient,
often for a non-shared order. A MedHub conveys order between
locations of their choice
</p>
<a href="#" class="booking-btn">read more</a>
</div>
</div>
<div class="right-side">
<div class="booking-form">
<div class="form-header">
<h3>book a <span
class="yellow">MedHub</span></h3>
</div>
<div class="form-body">
<input type="text" placeholder="Name" class="name">
<input type="text" placeholder="Phone" class="phone">
<input type="text" placeholder="When" class="when">
<input type="text" placeholder="Time" class="time">
<input type="text" placeholder="Start" class="start">
<input type="text" placeholder="End" class="end">
<input type="text" placeholder="Choose Medicine"
class="vehicle">
<input type="submit" placeholder="submit"
class="submit">
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</section>
<section class="section-tariff">
<div class="container">
<div class="tariff">
<div class="tariff-content">
<h2><span class="yellow">our</span> <br>
tariffs</h2>
</div>
<div class="tariff-box">
<div class="tariff-box-img">
</div>
<h3>economy class</h3>
<p> Small order screen with a limited selection of content.
Local are basic and not very interesting.</p>
<h4>Rs.60/MI</h4>
<a href="#" class="tariff-btn">read more</a>
</div>
<div class="tariff-box">
<div class="tariff-box-img">
</div>
<h3>standard class</h3>
<p> Enhancement to regular economy at a not ridiculous price
premium..</p>
<h4>Rs.90/MI</h4>
<a href="#" class="tariff-btn">read more</a>
</div>
<div class="tariff-box">
<div class="tariff-box-img">
</div>
<h3>business class</h3>
<p>Significantly more expensive, business class offers a
vastly improved delivery experience. Seats fold down flat for
Maximum medicine</p>
<h4>Rs.120/MI</h4>
<a href="#" class="tariff-btn">read more</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</section>
<section class="section-service">
<div class="container">
<div class="service-title">
<h2><span class="yellow">we do
best</span><br> than you wish</h2>
</div>
<div class="service">
<div class="service-box-up">
<div class="service-box">
<img src="./img/service-img1.png"
class="service-box-img">
<h3>home Delivery</h3>
<p>Save your time using our Schedule delivery services.
</p>
</div>
<div class="service-box">
<img src="./img/service-img2.png"
class="service-box-img">
<h3>fast booking</h3>
<p>
Booking industry to increase direct bookings
and brand visibility.
</p>
</div>
</div>
<div class="clearfix"></div>
<div class="service-box-down">
<div class="service-box">
<img src="./img/service-img3.png"
class="service-box-img">
<h3>bonuses for delivery</h3>
<p> More equitable way to give out bonuses for
delivery.
</p>
</div>
<div class="service-box">
<img src="./img/service-img4.png"
class="service-box-img">
<h3>gps searching</h3>
<p>Maps shows your exact location,but when you try to
navigate to a destination.
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<a href="#" class="service-btn">read more</a>
</section>
<section class="section-download">
<div class="container">
<div class="download-title">
<h2><span
class="yellow">download</span><br>best MedHub
servies</h2>
</div>
<div class="download-content">
<h3>Downlaod the MedHub voucher app free! <br>
Get Exciting New Offers
</h3>
<p>Download the app for exclusive deals and ease of
booking
</p>
<a href="#" class="play-store-btn"><img
src="./img/download-btn-1.png" ></a>
<a href="#" class="app-store-btn"><img
src="./img/download-btn-2.png" ></a>
</div>
<div class="download-hero-img">
<img src="./img/download-hero-img.png"
id="download-hero-img">
</div>
</div>
<div class="clearfix"></div>
</section>
<section class="section-testimonials">
<div class="container">
<div class="testimonials-title">
<h2><span class="yellow">happy clients</span>
<br> testimonials</h2>
</div>
<div class="testimonials">
<div class="testimonials-box">
<p>Was I always going to be here? No I was not. I was going
to be homeless at one time, a delivery driver, truck driver, or any
kind of job that would get me a crust of bread. You never know
what's going to happen.
</p>
<img src="./img/testimonials-hero.png"
class="testimonials-hero">
<h3><span class="yellow">John
Doe</span></h3>
<h4>Businessman</h4>
</div>
<div class="testimonials-box">
<p>I was going to be homeless at one time, a delivery driver,
truck driver, or any kind of job that would get me a crust of
bread. You never know what's going to happen.
</p>
<img src="./img/testimonials-hero.png"
class="testimonials-hero">
<h3><span class="yellow">Stuart
little</span></h3>
<h4>Manager</h4>
</div>
</div>
</div>
<div class="clearfix"></div>
</section>
<section class="section-phone">
<div class="container">
<h2>We are Ready to Take Your Call 24 Hours, 7
Days!</h2>
<h1>+911234567890</h1>
</div>
</section>
<footer>
<div class="container">
<div class="footer">
<div class="footer-box">
<h3>About cab Hub</h3>
<p>Medicine service network is robust and covers some popular
and well-traversed routes.
</p>
<div id="social-icons">
<ul class="social-icons">
<li>
<a href="#"><i class="fab
fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab
fa-google-plus-g"></i></a>
</li>
<li>
<a href="#"><i class="fab
fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab
fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
<div class="footer-box">
<h3>Download</h3>
<p> Download provides free downloads for Windows, Mac, iOS
and Android devices across all categories of software and
apps</p>
<div class="android">
<p><span class="yellow">Android
Users</span></p>
<a href="#"><i class="fab
fa-android"></i></a>
</div>
<div class="ios">
<p><span class="yellow">IOS
Users</span></p>
<a href="#"><i class="fab
fa-apple"></i></a>
</div>
</div>
<div class="footer-box">
<h3>Contact</h3>
<div class="contact">
<div class="div">
<a href="#"><i class="fas
fa-map-marker-alt"></i></a>
<p>913, Main Street, Your City, <br>
XYZ, INDIA 285001</p>
</div>
<div>
<a href="#"><i class="fas
fa-mobile-alt"></i></a>
<p>+911234567890</p>
</div>
<div>
<a href="#"><i class="fas
fa-envelope"></i></a>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</footer>
<div class="footer-bottom">
<p>Copyright © 2020</p>
</div>
</body>
</html>
Summary:- It is a very attractive web page.
Get Answers For Free
Most questions answered within 1 hours.