-
Notifications
You must be signed in to change notification settings - Fork 0
/
landing.html
123 lines (96 loc) · 5.41 KB
/
landing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="css/landing-styles.css">
<!-- font links -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="img-container">
<img class="bg-img" src="images/title-bg.jpg" alt="bg-img">
</div>
<div class="container-fluid">
<section id="title">
<h1 class="title-heading">.EduWaste</h1>
<div class="title-content">
<h1 class="big-heading">For a Clean, Green and Better Future</h1>
<p class="title-desc">Learn waste management in a fun and interactive way</p>
</div>
</section>
<section id="introduction">
<div class="intro-content">
<img class="intro-img" src="images/intro-img.png" alt="">
<h3 class="intro-heading">What is a Waste Management System?</h3>
<p class="intro-text">A waste management system is the strategy an organization uses to dispose, reduce,
reuse, and prevent waste. Possible waste disposal methods are recycling, composting, incineration,
landfills, bioremediation, waste to energy, and waste minimization.
As for waste management, it is the measures utilized to manage waste in its entire life cycle, from
waste generation to disposal or recovery.
</p>
</div>
</section>
<div class="courses row g-4">
<H1 style="text-align: center;font-family: 'Roboto Mono', monospace; font-size: 2.8rem;">Topics</H1>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2" style="font-weight: 500;">Waste Segregation</h5>
<a href="waste-segregation.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/Segregation-display-img.jpg');">
</div></a>
</div>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2" style="font-weight: 500;">Landfills</h5>
<a href="Landfills.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/Landfill_image.jpg');">
</div></a>
</div>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2" style="font-weight: 500;">Solid Waste</h5>
<a href="Disposal.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/disposal_of_waste.jpeg');">
</div></a>
</div>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2">Hazardous Waste</h5>
<a href="Hazardous.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/hazardous_waste_image.jpeg');">
</div></a>
</div>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2">Radioactive Waste</h5>
<a href="Radioactive.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/radioactive_image.png');">
</div></a>
</div>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2">E-Waste</h5>
<a href="E-Waste.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/E-waste_image.webp');">
</div></a>
</div>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2">Wastewater</h5>
<a href="Wastewater.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/waste-water-icon-drainage-pipeline-vector-32085264.jpg');">
</div></a>
</div>
<div class="col-lg-4 col-sm">
<h5 class="h2 pb-2" style="font-weight: 500;">Biomedical Waste</h5>
<a href="Biomedical.html" style="text-decoration: none; color: black;">
<div class="service-item rounded pt-2" style="background-image: url('../images/biomedical_image.jpg');">
</div></a>
</div>
</div>
</div>
</body>
</html>
<!-- colour combination
font
animations -->