INTERNET AND WEB PROGRAMMING Review 1
INTERNET AND WEB PROGRAMMING Review 1
CSE3002
Team Members:
PRANAV SARAVANAN – 20BCE0974
SAURAV KOTHARI – 20BCE2504
System requirements:
Atom
Xampp
Technologies Used:
Frontend:
HTML
CSS
JS
Backend:
PHP
Node.js
React.js
MongoDB
Solution:
In spite of many advancements in the technical field, there are many
people who don’t know about these advancements, and still live in
their primitive ways. Old people feel really difficult and face a lot of
hardship when they’re sick, so buying medicines for them is a difficult
task. For those people, this online medical shopping website provides a
perfect solution where they need not go to buy medicines. Instead,
they just need to order from the website and the medicines come in
front of their doorstep.
HTML Code: (along with CSS and JS code)
<html>
<head>
<style>
body{
font-size:20px;
color: white;
background-size: cover;
}
.box ul li{
width: 120px;
float:left;
margin: 10px auto;
text-align: center;
}
.mainmenu
.mainmenu a
.mainmenu a:hover
.mainmenu img{
position: fixed;
z-index: -1;
top:0px; left:0px; width:100%; height: 100vh;
opacity: 0.9;
/*object-fit:cover;*/
transition: all ease 0.5s;
}
.wd{
width: 300px;
height: 539px;
background-color: black;
opacity: 0.8;
padding: 55px;
}
.wd h1{
text-align: center;
text-transform: uppercase;
font-weight: 300px;
}
.wd h4{
text-align: justify;
color:darkgray;
font-weight: 100px;
}
.wd h2{
text-align: center;
text-transform: uppercase;
font-weight: normal;
margin: 40px auto;
}
form, input[type="button"] {
animation: glowing 300ms infinite;
font-weight: 500%;
}
@keyframes glowing {
0% {
background-color: red;
}
50% {
background-color: orange;
}
100% {
background-color: blue;
}}
<link rel="stylesheet" href="style.css">
</style>
</head>
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
></script>
<script>
$(function(){
var image = $(".mainmenu").find('img').attr('src');
$(".mainmenu a").mouseover(function(){
var newimg = $(this).attr('data-image');
$(this).parent().find('img').attr("src", newimg);
});
});
</script>
<div class="box">
<div class="mainmenu">
<img src="C:\Users\Admin\Pictures\weston.jpg">
<a data-image = "C:\Users\Admin\Pictures\weston.jpg" href="">
Home</a>
<a data-image = "C:\Users\Admin\Pictures\weston.jpg" href="">
Menu</a>
<a href="https://thewestonpharmacy.com/"> FAQ</a>
<a href="https://www.fastandfriendlypharmacywv.com/contact">
Contact</a>
</div>
</div>
<div class="wd">
<h1> Welcome to weston pharmacy</h1>
<h4> <i>Order your medicine online, free door delivery, safety and
assured</i></h4>
<h2> Call 8056942435 for instant response </h2>
<div class="opt">
<form action="" method="post">
<input type="button" value="ORDER NOW">
</form>
</div>
</div>
</body>
</html>
Output:
Conclusion:
Therefore, this online shopping website for medicines and
pharmaceuticals play a very important role in the society and is also a
boon for those who can’t go & buy medicines physically.