Scribd
Upload
1 views61 pages

Sample Project Report

this is a sample project report for any college ging student that could be used as an inspo

Uploaded by

anushka1694a
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views61 pages

Sample Project Report

this is a sample project report for any college ging student that could be used as an inspo

Uploaded by

anushka1694a
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

CHAPTER – 1

INTRODUCTION

In the rhythm of daily life, waste generation is inevitable. Yet, how we manage and handle this waste
defines our commitment to the environment, our community, and future generations. At our Domestic
Waste Management website, we recognize the importance of responsible waste disposal and aim to
guide, educate, and inspire every household to adopt sustainable practices.

Every household plays a pivotal role in the waste ecosystem. By understanding the nuances of domestic
waste—from recyclables to organic compost—we empower you to make informed decisions that reduce
landfill contributions and enhance recycling rates.

Creative thinking is a powerful tool that can revolutionize the way we approach and reduce domestic
waste. By tapping into our imagination, innovation, and resourcefulness, we can devise unique solutions
that not only minimize waste but also add value to our daily [Link] harnessing the power of creative
thinking, we can unlock innovative solutions to reduce domestic waste, foster community engagement,
and pave the way for a more sustainable future. In our website user can upload their creative ideas about
how to manage waste and can also get ideas if they want to do something creative with the waste.

The question comes in mind is people can search on google then what is the need?

So, Many ideas are available on google but still the generation of domestic waste is huge, people are not
aware about it .In this we will also add the functionality of earning points on uploading ideas or images
which can we further used to redeem prizes. The greed for prizes can push peoples to manage their waste
by own.

1
CHAPTER-2
SOFTWARE & HARDWARE REQUIREMENTS

2.1. INTRODUCTION

Every idea, no matter how small, has the potential to make a significant impact when fueled by creativity
and passion. Together, let's embrace creative thinking as a catalyst for change and embark on a journey
towards a waste-free [Link] the intricate tapestry of modern living, the choices we make about waste
echo far beyond our immediate surroundings. They resonate with global implications, touching
ecosystems, communities, and the very essence of our planet. At our Eco-Friend Nature website, we're
not just talking trash—we're championing a holistic approach to responsible [Link] a world
where every household seamlessly integrates sustainable waste practices, fostering harmony between
consumption and conservation.

2.2. SOFTWARE REQUIREMENTS


● Operating System : Windows, LINUX, Android etc…

● Web-Browser : Chrome, Brave, Mozilla FireFox etc…

● Front-End : HTML5, CSS3, JAVASCRIPT, jQuery,


Tailwind CSS

● IDE : VS Code

2.3. HARDWARE REQUIREMENTS


● Processor : Pentium 4

● RAM : 128 mb(MIN.).

● Hard Disk Space : 100mb (MIN.


2
CHAPTER- 3

CODING

[Link]

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECOFRIEND NATURE</title>
<link rel="stylesheet" href="css/[Link]">
<link href="[Link] rel="stylesheet">
<style>
#vid1 h1{
background-image: url(images/[Link]);
background-size: cover;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div id="main">
<div id="nav">
<a href="[Link]"><img src="images/[Link]" alt=""></a>

3
<div id="ele">
<a href="[Link]">Home</a>
<a href="[Link]">About Us</a>
<a href="[Link]">Motive</a>
<a href="[Link]">Ideas</a>
<a href="[Link]">Contact Us</a>
</div>
<div id="call">
<i class="ri-user-line"></i>
<a href="[Link]" style="color: green;"><p>Sign Up</p></a><p>/</p><a href="[Link]"
style="color: green;">Login</a>
</div>
</div>
<div id="vid1">
<video src="images/istockphoto-1435371687-640_adpp_is ([Link]).mp4" autoplay
muted loop></video>
<h1>Save Environment</h1>
</div>
<h5>Creativity can also be used to manage domestic waste.</h5>
<div class="info">
<h4>Have an idea upload here and help others =></h4>
</div>
<div class="input">
<h2><label for="image_input">Upload-Image</label> </h2>
<input type="file" name="UploadFile" id="image_input">
</div>
<div id="image">
<img src="images/[Link]" width="250px" height="250px" style="border-radius: 50px; margin-
left: 100px;">
</div>
<div id="display"></div>

<div id="img2">
<div id="left">

4
<h1>What It Means to Be Environmentally Friendly</h1>
<p>Being eco friendly means living in a way that is not harmful to the environment. This way of life
is becoming increasingly important, as we need to protect our planet from man-made damage. There are various
ways that an individual can make sustainable changes in order to lessen the negative effect that our daily lives
usually contribute to.</p>
<img
src="[Link]
g:ce/aHR0cHM6Ly93d3cu/cG5nYWxsLmNvbS93/cC1jb250ZW50L3Vw/bG9hZHMvMTAvRWNv/
LUZyaWVuZGx5LVBO/Ry1Eb3dubG9hZC1J/bWFnZS5wbmc" alt="">
</div>
<div id="right">
<h2>Renewable Energy for Electricity</h2>
<div class="line"></div>
<h2> Smart Thermostats </h2>
<div class="line"></div>
<h2> Energy Efficient Lighting </h2>
<div class="line"></div>
<h2> Use Eco-Cleaning Products </h2>
<div class="line"></div>
<h2>Biodegradable Household Products</h2>
<div class="line"></div>
<h2>Cavity Wall Insulation</h2>
<div class="line"></div>
<h2>Loft Insulation</h2>
<div class="line"></div>
<h2>Radiator Foil</h2>
<div class="line"></div>
</div>
</div>

<div id="img3">
<h2>Domestic Waste Management</h2>
<p>Creative thinking is a powerful tool that can revolutionize the way we approach and reduce domestic
waste. By tapping into our imagination, innovation, and resourcefulness, we can devise unique solutions that
not only minimize waste but also add value to our daily lives. Here are some creative ways in which we can

5
integrate creative thinking to reduce domestic waste:
</p>
<div id="child">
<div class="child" >
<p>01</p>
<h4>Upcycling Projects</h4>
<p>Transform discarded items into new, <br> useful products. For example, old t- <br> shirts can
be turned into reusable cloth <br> bags, or glass jars can become stylish <br>storage containers.
</p>
</div>
<div class="child" >
<p>02</p>
<h4>Meal Planning & Leftover Recipes</h4>
<p>Use creative culinary techniques to <br> repurpose leftovers into new dishes. <br> This
reduces food waste and <br> encourages mindful consumption.
</p>
</div>
<div class="child" >
<p>03</p>
<h4>DIY Cleaning Products</h4>
<p>Create homemade cleaning solutions <br> using natural ingredients like vinegar, <br> baking
soda, and lemon. This minimizes <br> the need for single-use plastic bottles <br> and harmful chemicals.
</p>
</div>
<div class="child" >
<p>04</p>
<h4>Clothing Swaps & Repair Workshops</h4>
<p> Organize community events where <br> people can exchange clothing items or <br> learn
basic repair skills to extend the life <br> of their garments.
</p>
</div>
<div class="child" >
<p>05</p>
<h4>Composting Innovations</h4>
<p> Design compact composting solutions for <br> urban households, utilizing kitchen scraps

6
<br> to create nutrient-rich soil for gardens.
</p>
</div>
<div class="child" >
<p>06</p>
<h4>Packaging Alternatives</h4>
<p> Explore innovative packaging solutions, <br>such as using biodegradable materials,
<br>edible packaging, or reusable containers,to<br> reduce the reliance on single-use plastics.
</p>
</div>
<div class="child" >
<p>07</p>
<h4>Educational Games & Apps</h4>
<p>Develop interactive games or apps that <br> educate users about waste reduction, <br>
recycling, and sustainable living practices in <br> a fun and engaging manner.
</p>
</div>
<div class="child" >
<p>08</p>
<h4>Art & Awareness Campaigns</h4>
<p>Collaborate with local artists to create <br> impactful artwork using recycled materials, <br>
raising awareness about the importance of <br> waste reduction and environmental <br> stewardship.
</p>
</div>
<div class="child" >
<p>09</p>
<h4>Community Sharing Platforms</h4>
<p> Establish platforms where community <br> members can share or borrow rarely used<br>
items, promoting a culture of sharing and <br> minimizing unnecessary purchases.
</p>
</div>
<div class="child" >
<p>10</p>
<h4>Green Innovation Challenges</h4>
<p>Organize innovation challenges or hacka- <br>thons focused on solving specific waste

7
<br>management challenges, fostering creativity <br>and collaboration among participants.
</p>
</div>
</div>
</div>
<div id="links">
<img src="images/[Link]" alt=""></a>
<div id="box"> </div>
<div id="bottom">
<h3>IMPORTANT LINKS</h3>
<a href="[Link]">About Us</a>
<a href="[Link]" style="width: 30%;">Motive</a>
<a href="[Link]" style="width: 25%;">Ideas</a>
<a href="[Link]" style="width: 43%;">Contact Us</a>
<a href="[Link]" style="width: 77%;">Terms & Conditions </a>
</div>
</div>
</div>
<script src="JS/[Link]">
$(document).ready(function(){
$('#image_input').click(function(){
$('#display').show(800)
})})
</script>
</body>
</html>
[Link]
const image_input= [Link]("#image_input");
var uploaded_image="";
image_input.addEventListener("change",function(){
const reader = new FileReader();
[Link]("load", ()=>{
uploaded_image=[Link];
[Link]("#display").[Link] = `url(${uploaded_image})`;
});

8
[Link]([Link][0]);})

9
[Link]
:root{
--primary:darkblue;
--secondary:darkgreen;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
height:100%;
width:100%;
/*font-family: Gilroy;*/}
#main{
height: 100%;
width: 100%;
/* padding: 50px 80px; */
padding: 10px 0px;
}
#nav img{
height: 130px;
/* width: 30px; */
}
#nav #ele{
display: flex;
/* flex-direction: column;*/
gap: 60px;
background-color: rgb(231, 217, 217);
opacity: 0.9;

10
padding: 5px 100px;
border-radius: 25px;
white-space: nowrap;
}
#nav #ele a{
text-decoration: none;
color: black;
font-size: large;
font-weight:100;
padding: 10px;
border-radius: 20px;
}
#nav #ele a:hover{
background: white;
color: var(--primary);
}
#nav #call{
display: flex;
gap: 7px;
background-color: rgb(231, 217, 217);
padding: 14px 17px;
opacity: 0.7;
color: var(--secondary);
border-radius: 25px;
font-weight: 600;
font-size: large;
white-space: nowrap;
}
#nav #call i{
font-size: x-large;

11
/* color: var(--secondary); */
border: none;
background-color: rgb(231, 217, 217);
}
#nav{
display: flex;
align-items: center;
gap: 50px;
position:fixed;
margin: 0px 70px;
z-index: 1;
margin-top: -30px;
font-family: Gilroy;
}
#vid1{
/* margin-bottom:-50px; */
height: 500px;
position: relative;
max-width: 100%;
overflow: hidden;
border-radius: 50px;
/* margin-top: 80px; */
margin: 80px 70px;
}
#vid1 video{
height: 700px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

12
z-index: -2;
}
#vid1 h1{
/* background-image: url([Link]); */
color: white;
padding: 10px;
text-align: center;
margin-top: 8%;
}
#main h5{
margin-top: 50px;
font-size: x-large;
color: var(--primary);
/* align-items: center; */
font-weight: 200;
margin: 0px 70px;
animation: glitch 1s infinite;
}
@keyframes glitch {
11%, 14% {
clip-path: polygon(100% 0, 0 18%, 99% 46%, 0 78%, 100% 100%, 100% 57%, 0 100%, 100% 76%, 0 59%,
100% 35%, 0 37%, 100% 21%);
}
12%, 16% {
clip-path: polygon(0 51%, 0 29%, 100% 0, 0 14%, 99% 57%, 100% 23%, 0 100%, 100% 72%, 0 0, 100%
100%);
}
13%, 17% {
clip-path: polygon(0% 0%, 99% 0%, 99% 8%, 0% 7%, 0% 14%, 99% 15%, 100% 22%, 0% 22%, 0% 30%,
99% 30%, 99% 39%, 0% 37%, 0% 43%, 100% 45%, 100% 50%, 0% 49%, 0% 56%, 99% 57%, 99% 63%, 0%
63%, 0% 68%, 99% 68%, 99% 75%, 0% 76%, 0% 81%, 100% 83%, 100% 89%, 0% 88%, 0% 94%, 100%

13
95%, 100% 100%, 0% 99%);
}}
.info{
font-size: larger;
border: 2px solid black;
margin-right: 50%;
margin-top: 2%;
float: right;
}
input{
margin-left: 55%;
display: none;
}
#display{
width: 500px;
height: 300px;
background-position: center;
background-size: cover;
margin-left: 50%;
margin-top: -260px;
}
label{
display: inline;
background-color: #e3362c;
color: #fff;
width: 150px;
height: 80px;
border-radius: 5px;
cursor: pointer;
margin-left: 55%;

14
}
#image{
width: 400px;
height: 300px;
}
#img2{
margin-top: 3px;
display: flex;
justify-content: space-between;
background-color: var(--secondary);
color: white;
padding: 70px;
margin-top: 10px;
}
#img2 #right{
width: 48%;
display: flex;
flex-direction: column;
gap: 23px;
}
#img2 #right h2{
font-size: 30px;
position: relative;
}
#img2 #right .line{
width: 100%;
height: 3px;
background-color: gray;
}
#img2 #right h2::after{

15
margin-left: 7px;
content: "";
width: 98%;
height: 4px;
background-color: #8bef91;
position: absolute;
left: 0%;
/* top: 60px; */
bottom: -24px;
transform: scaleX(0);
transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1) ;
}
#img2 #right h2:hover::after{
transform: scaleX(1);
transform-origin: center;
}
#img2 #left{
width: 48%;
}
#img2 #left h1{
font-size: 50px;
margin-bottom: 30px;
}
#img2 #left p{
font-size: 20px;
font-weight: 100;
}
#img2 #left img{
height: 400px;
margin-top: 30px;

16
}
#img3{
text-align: center;
margin: 80px 70px;
}
#img3 p{
margin: 40px 5px;
font-size: large;
}
#img3 h2{
font-size: 50px;
margin-bottom: 40px;
}
#img3 #child{
display: flex;
gap: 17px;
text-align: center;
white-space: nowrap;
overflow-x: auto;
}
#img3 #child::-webkit-scrollbar{
display: none;
}
#img3 #child h4{
margin-bottom: 15px;
}
#img3 #child .child{
width: 500px;
background-color: rgb(234, 228, 228);
padding: 30px;

17
border-radius: 30px;
}
#child .child{
border: 1px solid green;
}
#child .child h4{
background-color: #DAF7A6;
background-size: cover;
}
#links{
background-color: rgb(1, 1, 24);
}
#box{
width: 900px;
background: linear-gradient(to bottom right,green, #5812ef,#c6b4ec,green);
height: 300px;
float: right;
margin-right: 15%;
margin-top: -30%;
padding-top: 2%;
border-radius: 120px;
}
#bottom{
display: flex;
flex-direction: column;
gap: 10px;
float: right;
margin-top: -16%;
margin-right: 16%;
color: #fff;

18
}
#bottom a{
text-decoration: none;
color: white;
position: relative;
overflow: hidden;
padding: 5px;
width: 38%;
white-space: nowrap;
}
#bottom a::after{
content: "";
width: 50%;
height: 2px;
background-color: white;
position: absolute;
left: -100%;
top: 25px;
transform: scaleX(0);
transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1) ;
}
#bottom a:hover::after{
transform: scaleX(4);
left: 0%;
}
#bottom h3{
color: black;
}

19
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="css/[Link]">
<link href="[Link] rel="stylesheet">
</head>
<body>
<div id="nav">
<a href="[Link]"> <img src="images/[Link]" alt=""></a>
<div id="ele">
<a href="[Link]">Home</a>
<a href="[Link]">About Us</a>
<a href="[Link]">Motive</a>
<a href="[Link]">Ideas</a>
<a href="[Link]">Contact Us</a>
</div>
<div id="call">
<i class="ri-user-line"></i>
<a href="[Link]" style="color: green;"><p>Sign Up</p></a>
<p>/</p><a href="[Link]" style="color: green;">Login</a>
</div>
</div><br><br><br><br>
<div id="page1">
<h1>About Us</h1>
<h2>Alone we can do little, together we can do more.....</h2>
<div class="cards">
<div class="card">
<h3>Our Vission</h3>
<img src="[Link]
rs:fit:500:0:0/g:ce/aHR0cHM6Ly9wbHVz/cG5nLmNvbS9pbWct/cG5nL3Zpc2lvbi1m/cmVlLWRvd25sb2Fk/
LXBuZy1wbmctaW1h/Z2UtMTEyMS5wbmc" alt="">

20
<p>To redefine the landscape of waste management, forging a path towards a circular economy where
waste is minimized, resources are maximized, and communities thrive in harmony with nature.</p>
</div>
<div class="card">
<h3>Commitment</h3>
<img src="[Link]
rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4t/aWNvbnMtcG5nLmZs/YXRpY29uLmNvbS8x/
MjgvNzE3OC83MTc4/OTMxLnBuZw" alt="">
<p>Sustainable Practices: We employ cutting-edge technologies and best practices to ensure the
responsible processing, and disposal of waste, minimizing environmental impact by own.</p>
</div>
<div class="card">
<h3>Our Mission</h3>
<img src="[Link]
rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG4z/Lmljb25maW5kZXIu/Y29tL2RhdGEvaWNv/
bnMvZWR1Y2F0aW9u/LWFuZC1zY2hvb2wt/OC80OC9XaW5uZXJf/MS02NC5wbmc" alt="">
<p>Promoting Sustainability: Championing practices that prioritize the reduction, reuse, and recycling
of waste, thereby conserving resources and minimizing environmental impact.</p>
</div>
</div>
</div>
<div id="end">
<div id="one">
<img src="./[Link]" alt="">
<p>Our Eco friend Nature website is committed to revolutionizing the world to look waste material not
waste but something which can
we used to do something creative. Our waste managing way is a platform for managing waste , but we
believe in continuous improvement and innovation. </p>
<div id="privacy">
<a href="[Link]">Terms & Conditions</a>
</div>
<!-- <h6>© 2023 Ecofriend Nature. All Rights Reserved</h6> -->
</div>
<div id="three">
<h3>LINKS</h3>

21
<a href="[Link]">Home</a>
<a href="[Link]">About Us</a>
<a href="[Link]">Motive</a>
<a href="[Link]">Ideas</a>
<a href="[Link]">Contact Us</a>
<a href="[Link]">Login</a>
</div>
</div>
<img src="images/[Link]" style="height: 30%; width: 15%; margin-left: 40%;
margin-top: -11%;"></img>
</body>
</html>

[Link]
:root{
--primary:darkblue;
--secondary:darkgreen;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
height:100%;
width:100%;
font-family: gilroy;
padding: 20px;
padding-top: 10px;
}
#nav img{
height: 130px;
/* width: 30px; */
}
#nav #ele{

22
display: flex;
/* flex-direction: column;*/
gap: 60px;
background-color: rgb(231, 217, 217);
opacity: 0.9;
padding: 5px 100px;
border-radius: 25px;
white-space: nowrap;
}
#nav #ele a{
text-decoration: none;
color: black;
font-size: large;
font-weight:100;
padding: 10px;
border-radius: 20px;
}
#nav #ele a:hover{
background: white;
color: var(--primary);
}
#nav #call{
display: flex;
align-items: center;
gap: 7px;
background-color: rgb(231, 217, 217);
padding: 14px 17px;
opacity: 0.7;
color: var(--secondary);
border-radius: 25px;
font-weight: 600;
font-size: large;
white-space: nowrap;
/* margin-right: 50px; */
}

23
#nav #call i{
font-size: x-large;
/* color: var(--secondary); */
border: none;
background-color: rgb(231, 217, 217);
}
#nav{
display: flex;
align-items: center;
gap: 50px;
position:fixed;
/* margin: 0px 70px; */
z-index: 1;
margin-top: -30px;
/* margin-right: 50px; */
}
#page1 h1{
text-align: center;
font-size: 60px;
margin-bottom: 20px;
}
#page1 h2{
text-align: center;
font-size: xx-large;
margin-bottom: 30px;
}
.cards{
display: flex ;
justify-content: center;
gap: 20px;
width: 100%;
align-items: center;
}
.card{
text-align: center;

24
padding: 25px 10px;
/* width: 500px; */
border: 2px solid black;
border-radius: 25px;
}
.card h3{
font-size: xx-large;
margin-bottom: 20px;
}
.card p{
font-size: larger;
}
.card img{
height: 100px;
}
#end{
padding: 0px 70px;
display: flex;
justify-content: space-between;
margin-top: 70px;
margin-right: 100px;
margin-bottom: 100px;
}
#end a{
text-decoration: none;
color: darkgreen;
position: relative;
overflow: hidden;
padding: 5px;
}
#end a::after{
content: "";
width: 50%;
height: 2px;
background-color: darkgreen;

25
position: absolute;
left: -100%;
top: 25px;
/* transform: scaleX(0); */
transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#end #privacy a::after{
width: 90%;
}
#end a:hover::after{
/* transform: scaleX(1); */
left: 3%;
}
#end #one{
width: 500px;
}
#end #one p{
font-size: 18px;
}
#end #one h6{
font-weight: 100;
margin-top: 20px;
font-size: 16px;
}
#end #one #privacy{
display: flex;
gap: 50px;
margin-top: 30px;
}

#end #one img{

26
height: 150px;
}
#end #two{
display: flex;
flex-direction: column;
gap: 10px;
}
#end #three{
display: flex;
flex-direction: column;
gap: 10px;
}

[Link]

27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Motive</title>
<link href="[Link] rel="stylesheet">
<style>
:root{
--primary:darkblue;
--secondary:darkgreen;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
height:100%;
width:100%;
font-family: Gilroy;
padding: 10px 50px;
background-image: url([Link]
w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2
h8MXx8d2FzdGUlMjBtYW5hZ2VtZW50fGVufDB8fDB8fHww);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#nav img{
height: 130px;
/* width: 30px; */
margin-left: -105px;
margin-top: -10px;

28
}
#nav #ele{
display: flex;
/* flex-direction: column;*/
gap: 60px;
background-color: rgb(231, 217, 217);
opacity: 0.9;
padding: 5px 100px;
border-radius: 25px;
white-space: nowrap;
margin-top: -29px;
margin-left: -15px ;
}
#nav #ele a{
text-decoration: none;
color: black;
font-size: large;
font-weight:100;
padding: 10px;
border-radius: 20px;
}
#nav #ele a:hover{
background: white;
color: var(--primary);
}
#nav #call{
display: flex;
gap: 7px;
background-color: rgb(231, 217, 217);
padding: 14px 15px;
opacity: 0.7;
color: var(--secondary);
border-radius: 25px;
font-weight: 600;
font-size: large;

29
white-space: nowrap;
margin-top: -25px;
}
#nav #call i{
font-size: x-large;
/* color: var(--secondary); */
border: none;
background-color: rgb(231, 217, 217);
}
#nav{
display: flex;
align-items: center;
gap: 50px;
position:fixed;
margin: 0px 70px;
z-index: 1;
margin-top: -30px;
}
#main{
background-color: rgba(255, 255, 255, 0.325);
}
h1{
margin-top: 100px;
letter-spacing: 2px;
color:darkgreen;
text-align: center;
}
p{
text-align: center;
line-height: 30px;
margin-top: 20px;
color: black;
}
#foot{
color: black;

30
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
font-weight: 600;
margin-left: 20%;
padding-top: 20px;
background-color: aliceblue;
margin-right: 28%;
}</style>
</head>
<body>
<div id="nav">
<a href="[Link]"> <img src="images/[Link]" alt=""></a>
<div id="ele">
<a href="[Link]">Home</a>
<a href="[Link]">About Us</a>
<a href="[Link]">Motive</a>
<a href="[Link]">Ideas</a>
<a href="[Link]">Contact Us</a>
</div>
<div id="call">
<i class="ri-user-line"></i>
<a href="[Link]" style="color: green;"><p style="margin-top: -5px; color: green;">Sign
Up</p></a><p style="margin-top: -5px;">/</p><a href="[Link]" style="color: green;">Login</a>
</div>
</div>
<div id="main">
<h1>Our Motive</h1>
<p>Waste management is driven by several critical motives that converge to protect the environment, human
health, and natural resources while promoting sustainability and a circular [Link], environmental
preservation stands as a paramount motive. Effective waste management aims to reduce pollution, minimize the
release of greenhouse gases from landfills, and prevent toxins from contaminating soil and water sources. By
properly handling waste through recycling, composting, and responsible disposal, it mitigates the adverse
impact on ecosystems, preserving biodiversity and [Link], human health and safety are fundamental
concerns. Improper waste disposal can pose significant health risks, leading to the spread of diseases,
contamination of air and water, and hazardous exposure to toxins. Implementing sound waste management

31
practices minimizes these risks, safeguarding public health and [Link], resource conservation is a
driving force. Waste management promotes the efficient use of resources by reducing, reusing, and recycling
materials. This approach conserves energy, minimizes raw material extraction, and decreases the strain on finite
resources, contributing to a more sustainable and resource-efficient [Link], economic benefits are
inherent in efficient waste management. Recycling and reusing materials generate economic opportunities,
create jobs in recycling industries, reduce disposal costs, and decrease the need for raw materials, leading to
potential cost savings for both businesses and [Link], the motive behind waste management is
multifaceted, encompassing environmental protection, public health, resource conservation, and economic
viability. By addressing these motives collectively, effective waste management becomes a crucial tool in
building a more sustainable and resilient future for generations to come.</p>
</div>
<div id="foot">
<pre>Why not use creative thinking to reduce Domestic Waste?</pre>
</div>
</body>
</html>

[Link]

32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domestic Waste</title>
<script src="JS/[Link].com_jquery-[Link]"></script>
<link rel="stylesheet" href="css/[Link]">
<link href="[Link] rel="stylesheet">
</head>
<body>
<script>
$(document).ready(function(){
$('#show').click(function(){
$('#deco').toggle(800)
})
$('#display').click(function(){
$('#gard').toggle(800)
})
$('#print').click(function(){
$('#in').toggle(800)
})
})
</script>
<div id="main">
<div id="nav">
<a href="[Link]"><img src="images/[Link]" alt=""></a>
<div id="ele">
<a href="[Link]">Home</a>
<a href="[Link]">About Us</a>
<a href="[Link]">Motive</a>
<a href="[Link]">Ideas</a>
<a href="[Link]">Contact Us</a>
</div>
<div id="call">

33
<i class="ri-user-line"></i>
<a href="[Link]" style="color: green;"><p>Sign Up</p></a><p>/</p><a href="[Link]"
style="color: green;">Login</a>
</div>
</div>
<div id="thought">
<pre>If not have idea look over others ideas
and do something creative with the waste....</pre>
</div>
<br><br><br>
<div class="gallery">
<img src="images/Pinterest_files/[Link]" height="300px"
style="margin-left: 35px;">
<img src="images/Pinterest_files/[Link]">
<img src="images/Pinterest_files/[Link]" height="250px">
<img src="images/Pinterest_files/[Link]">
<img src="images/Pinterest_files/[Link]" style="margin-left: 48px;">
<img src="images/Pinterest_files/[Link]">
<img src="images/Pinterest_files/[Link]">
<img src="images/Pinterest_files/[Link]">
<img src="images/Pinterest_files/[Link]" height="230px">
<img src="images/Pinterest_files/[Link]">
<img src="images/Pinterest_files/4491120f102f78e01ff8c59c191a12e7 (1).jpg" height="250px">
<img src="images/Pinterest_files/[Link]" height="300px">
<img src="images/Pinterest_files/[Link]" alt="loading"
height="250px">
<img src="images/Pinterest_files/[Link]">
</div>
<br><br><br><br>
<div class="wall">
<h1>For Wall Decoration<button id="show"> ↓</button></h1>
<div id="deco" hidden>
<img src="images/Pinterest_files/[Link]" style="margin-left:
40px;"></img>
<img src="images/Pinterest_files/[Link]"></img>

34
<img src="images/Pinterest_files/[Link]"></img>
<img src="images/Pinterest_files/[Link]"></img>
<img src="images/Pinterest_files/[Link]"></img>
<img src="images/Pinterest_files/8bda7838c6d4910c775d798bdb1c7634(1).jpg"></img>
<img src="images/Pinterest_files/[Link]"></img>
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]" height="280px"></img>
<img src="images\Pinterest_files\[Link]" height="250px"
width="250px"></img>
<hr>
</div>
</div>
<br><br><br>
<div class="garden">
<h1>For Outer-Area Decoration<button id="display"> ↓</button></h1>
<div id="gard" hidden>
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]"></img>
<hr>
</div>
</div>
<br><br>
<div class="inneer">
<h1>For Inner Decoration<button id="print"> ↓</button></h1>
<div id="in">
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]"></img>
<img src="images\Pinterest_files\[Link]" height="200px"></img>
<img src="images\Pinterest_files\[Link]" height="200px"></img>
<img src="images\Pinterest_files\[Link]"></img>
</div>

35
</div>
<div id="quote">
<pre>"Creativity is seeing what others see and thinking
what no one else ever thought." – Albert Einstein. ...</pre><br><br>
</div>
</div>
</body>
</html>

[Link]
:root{
--primary:darkblue;
--secondary:darkgreen;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
height:100%;
width:100%;
font-family: 'Gilroy';
scroll-behavior: smooth;
}
#main{
height: 100%;
width: 100%;
/* padding: 50px 80px; */
padding: 10px 0px;
}
#nav img{
height: 130px;
/* width: 30px; */
}

36
#nav #ele{
display: flex;
/* flex-direction: column;*/
gap: 60px;
background-color: rgb(231, 217, 217);
opacity: 0.9;
padding: 5px 100px;
border-radius: 25px;
white-space: nowrap;
}
#nav #ele a{
text-decoration: none;
color: black;
font-size: large;
font-weight:100;
padding: 10px;
border-radius: 20px;
}
#nav #ele a:hover{
background: white;
color: var(--primary);
}
#nav #call{
display: flex;
gap: 7px;
background-color: rgb(231, 217, 217);
padding: 14px 17px;
opacity: 0.7;
color: var(--secondary);
border-radius: 25px;
font-weight: 600;
font-size: large;
white-space: nowrap;
}
#nav #call i{

37
font-size: x-large;
/* color: var(--secondary); */
border: none;
background-color: rgb(231, 217, 217);
}
#nav{
display: flex;
align-items: center;
gap: 50px;
position:fixed;
margin: 0px 70px;
z-index: 1;
margin-top: -30px;
}
#thought pre{
margin-top: 150px;
font-size: larger;
font-weight: 900;
padding-left: 50px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.gallery{
display: flexbox;
margin-left: 20px;
}
/*.gallery img{
border-radius: 50px;
}*/
.gallery img:hover{
transition: all ease 1s;
transform: scale(1.3);
/* transition-delay: 0.5s; */
}
button{
color: red;

38
width: 20px;
font-size: large;
font-weight: 900;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.garden img{
margin-left: 20px;

}
hr{
height: 5px;
background: black;
border: none;
}
#in{
margin-left: 20px;
}
#quote pre{
margin-top: 30px;
font-size: larger;
font-weight: 900;
padding-left: 50px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

[Link]

39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="[Link]
[Link]">
<link href="[Link] rel="stylesheet">
<style type="text/css">
:root{
--primary:darkblue;
--secondary:darkgreen;
}
#image{
border-radius: 50%;
margin-left: 10px;;
margin-right: 50%;
width:250px ;
height: 250px;
margin-top: -25%;
}
#image:hover{
width: 400px;
height: 400px;
}
.deco{
margin-top: -37px;
}
.tt{
margin-top: -10px;
font-size: 35px;
margin-left: 40%;
text-decoration: underline;
}

40
p{
background-color: rgba(165, 228, 233, 0.6);
text-decoration: underline;
}
.tab{
width: 800px;
height: 300px;
margin-right: 50%;
margin-top: 10px;
background-color: #ccc;
}
input[type='checkbox']{
accent-color: black;
}
.tooltip{
width: 20px;
background-color: burlywood;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px 0px;
position: absolute;
}
button:hover{
color:white;
background-color: red;
}

41
#nav img{
height: 130px;
/* width: 30px; */
}
#nav #ele{
display: flex;
/* flex-direction: column;*/
gap: 60px;
background-color: rgb(231, 217, 217);
opacity: 0.9;
padding: 5px 100px;
border-radius: 25px;
white-space: nowrap;
}
#nav #ele a{
text-decoration: none;
color: black;
font-size: large;
font-weight:100;
padding: 10px;
border-radius: 20px;
}
#nav #ele a:hover{
background: white;
color: var(--primary);
}
#nav #call{
display: flex;
gap: 7px;
background-color: rgb(231, 217, 217);
padding: 10px 10px;
opacity: 0.7;
color: var(--secondary);
border-radius: 25px;
font-weight: 600;

42
font-size: large;
white-space: nowrap;
}
#nav #call i{
font-size: x-large;
color: var(--secondary);
border: none;
background-color: rgb(231, 217, 217);
}
#nav{
display: flex;
align-items: center;
gap: 50px;
position:fixed;
margin: 0px 70px;
z-index: 1;
margin-top: -30px;
font-family: Gilroy;
}
#tab{
border: 2px solid green;
text-align: center;
border-radius: 5px;
margin-left: 5%;
}
</style>
</head>
<body>
<div id="nav">
<a href="[Link]"><img src="images/[Link]" alt=""></a>
<div id="ele">
<a href="[Link]">Home</a>
<a href="[Link]">About Us</a>
<a href="[Link]">Motive</a>
<a href="[Link]">Ideas</a>

43
<a href="[Link]">Contact Us</a>
</div>
<div id="call">
<i class="ri-user-line"></i>
<a href="[Link]" style="color: green;">Sign Up</a>/<a href="[Link]" style="color:
green;">Login</a>
</div>
</div>
<br><br><br><br>
<table class="tt">
<tr>
<td>We'd Love to Hear From You</td>
</tr>
</table>
<p align="center">We would be happy to answer your questions.</p>
<div class="tab">
<table id="tab">
<tr>
<td>NAME</td>
<td><input type="text" name="userName" placeholder="NAME" autocomplete="off"></td>
<!-- <td rowspan="3"><img src="images/[Link]" width="200px" height="150px"></td> -->
</tr>
<tr>
<td>EMAIL</td>
<td ><input type="email" name="userName" placeholder="EMAIL" autocomplete="off"></td>
</tr>
<tr>
<td>MESSAGE</td>
<td><textarea type="text" name="info" cols="30" rows="5"
autocomplete="off">Message</textarea></td>
</tr>
<tr>
<td></td>
<td>
<div class="tooltip" style="border: 2px solid black;"> <input type="checkbox">

44
<span class="tooltiptext">send me a copied email</span>
</div>
</td>
</tr>
<br><br>
<tr>
<td>
<button style="background-color: dimgray;">Submit</button>
</td>
</tr>
</table>
</div>
<div class="deco">
<img src="images/[Link]" id="I" width="100%" height="200px">
</div>
</body>
</html>

45
[Link]

<!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>Sign Up</title>
<link rel="stylesheet" href="[Link]
[Link]">
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin-top: 5%;
background-image: url(images/[Link]);
background-size: cover;
}
button {
border-radius: 10px;
width: 40%;
}
page {
justify-content: center;
padding-left: 40%;
}
tr, td {
padding: 6px;
text-align: left;
box-shadow: 0px 0px 2px brown;
justify-content: center;

46
align-items: center;
left: 50%;
}
hr {
margin-left: 42%;
margin-right: 42%;
border-bottom: 1px solid rgb(159, 162, 165);
}
input[type=checkbox] {
accent-color: black;
}
.a {
background-color: rgb(184, 196, 202);
}
.b {
background-color: darkgrey;
}
.DIV {
background-color: rgba(111, 111, 119, 0.9);
border: 2px solid black;
margin-left: 300px;
margin-right: 300px;
margin-top: 10px;
border-radius: 80px;
box-shadow: 5px 5px 5px brown;
}
#sub {
color: red;
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
width: 200%;
height: 200%;
padding-left: 10px;

47
}
.btn:hover {
background-color: green;
color: white;
text-decoration: underline;
}
.shift {
margin-top: -50px;
background-color: black;
}
.btn {
color: white;
border-radius: none;
}
::placeholder {
box-shadow: 5px 4px 5px black;
gap: 10px;
}
input[type='text'],
input[type='password'],
input[type='email'] {
background-color: rgba(111, 111, 119, 0.5);
}
#login {
padding-left: 60px;
}
</style>
</head>
<body>
<div class="DIV" style="height: 420px;">
<form action="[Link]" method="post" autocomplete="off">
<center>
<font style="color: black" size="6">Sign Up</font><br>
<font size="1">It's free and takes less than 30 seconds.</font>

48
<table align="center" class="page">
<tr class="a">
<td>
<i class="fa fa-user icon"></i><input class="input-field" type="text" id="f_username"
placeholder="Your First Name" required>
</td>
</tr>
<tr class="b">
<td>
<i class="*fa fa-user icon"><input type="text" id="l_username" placeholder="Your Last Name"
required>
</td>
</tr>
<tr class="a">
<td><i class="fa fa-envelope icon"></i> <input type="email" id="email" placeholder="Your
Email" required></td>
</tr>
<tr class="b">
<td> <i class="fa fa-key icon"></i> <input type="password" id="password"
placeholder="Password"required></td>
</tr>
<tr class="a">
<td><i class="fa fa-lock icon"></i> <input type="password" id="pass" placeholder="Confirm
Password"required></td>
</tr>
<tr class="b">
<td><i class="fa fa-phone icon"></i> <input type="text" id="num" placeholder="Contact +91"
maxlength="10"></td>
</tr>
<tr>
<td><input type="checkbox" required>
<font size="2"> I agree to the <a href="[Link]" class="btn">Terms of use</a> </font>
</td>
</tr>

49
<td> <button onclick="validateForm()">Submit</button></td>
</tr>
</table>
</form>
<h5 style="margin-left: 15%;">Already have an account?</h5><a href="[Link]" id="login">
<p style="float: right; margin-right: 60%;">LOGIN..</p>
</a>
</div>
<script>
function validateForm() {
var username = [Link]('f_username').value;
var user = [Link]('l_username').value;
var password = [Link]('password').value;
var pass = [Link]('pass').value;
var num = [Link]('num').value;
if ([Link] < 3) {
alert('Please enter valid firstname'); return false;
}
if ([Link] < 3) {
alert('Please enter valid Lastname'); return false;
}
if (password !== pass) {
alert('Please check password'); return false;
}
if ([Link] !== 10) {
alert('Please enter valid number'); return false;
}
return true;
}
</script>
</body>
</html>

50
[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="css/[Link]">
<link href="[Link] rel="stylesheet">
</head>
<body>
<div class="login">
<div class="login_form" onsubmit="return validateForm()">
<h2>Login</h2>
<div class="input_group">
<i class="ri-user-fill"></i>
<input type="text" id="username" placeholder="Username" class="input_text" autocomplete="off">
</div>
<div class="input_group">
<i class="ri-lock-unlock-fill"></i>
<input type="text" id="password" placeholder="Password" class="input_text" autocomplete="off">
</div>
<div class="button_group" id="login_button">
<a href="#" onclick="validateForm()">Submit</a>
</div>
<div class="fotter">
<a href="#">Forgot Password ?</a>
<a href="[Link]">SignUp</a>
</div>
</div>
</div>

51
<script>
function validateForm() {
var username = [Link]('username').value;
var password = [Link]('password').value;
if (username === '' && password === '') {
alert('Please enter both username and password');
return false;
}
if ([Link] < 3) {
alert('Please enter valid username');
return false;
}
if ([Link] !== 8) {
alert('Please enter valid password');
return false;
}
return true;
}
</script>
</body>
</html>

52
CHAPTER-4

OUTPUT SCREENS
Home Screen :-
53

About Us Screen:-

Motive Screen:-

55

54
Ideas Screen:-

Contact Us Screen:-

55
Login Screen:-

SignUp Screen:-

56
CHAPTER-5
CONCLUSION & FUTURE WORK

5.1. CONCLUSION

The journey towards sustainability is continuous, but with dedicated resources, tools, and a vibrant
community, our website stands poised to guide, inspire, and transform. Together, as we navigate the
complexities of waste and consumption, let this platform be a testament to our shared commitment to a
cleaner, greener, and more sustainable world for generations to come.

5.2. Future work

Expansion into Additional Services:

Enhanced Personalization Features:

Use of Backend Technology to make website productive:

57
REFERENCES

1. W3School:
[Link]

2. [Link]:
[Link]

3. Youtube:
[Link]

[Link]:
[Link]

58
Project summary
About
Project
Title of the project Eco-Friend Nature

Semester 3rd
Members 2
Team Leader Aavi Agrawal

Aavi Agrawal : - Designing,Front-End


Describe role of every member in
Anuj Raghuwanshi : - Testing,Planning ,Designing
the project

Project Type
(Desktop Application, Web Application, Web Application
Mobile App, Web)

Tools &Technologies

IDE used(With version) VS Code (Version 1.85.1 )

Operating system Windows(10)


Front End Technologies
(With version, wherever HTML5, CSS3, JAVASCRIPT, jQuery ,
Applicable)
Tailwind-CSS

Back End Technologies (With version,


wherever applicable)

Database used
(With version)

Submitted to:- Amit Kumar Rathore Sir Signature:-


59
Write project narrative covering above mentioned points

Our Eco friend Nature website is committed to revolutionizing the world to look waste material
not waste but something which can we used to do something creative. Our waste managing
way is a platform for managing waste , but we believe in continuous improvement and
innovation. This project narrative outlines our vision t o redefine the landscape of waste
management, forging a path towards a circular economy where waste is minimized, We employ
cutting-edge technologies and best practices to ensure minimizing environmental impact by
own…

Aavi Agrawal 0187CS221003

Anuj Raghuwanshi 0187CS221050

60

You might also like