Peoples Education Society`s

(Mumbai)

P. E. S. COLLEGE OF ENGINEERING
Nagsenvan,Aurangabad

Affiliated to Dr. Babasaheb Ambedkar Technological

University, Lonere

B. Tech F. Y. (Computer Science & Engineering)

Semester VIII
Academic Year 2022-23
Industrial Training / Field Training / Internship
pProgress Monitoring Dairy

Name of Student Syed Zainuddin Gousuddin Kirmani

PRN No 1921341242083

Class Final year (B. Tech)

Name of Mentor Prof. Kishori Ghule Mam

About Campus
The People's Education Society, founded by Bharatratna Dr . Babasaheb
Ambedkar at Mumbai in 1945, has a network of numerous educational
institutions of higher learning. The uniform appreciation and goodwill,
earned by this august society, over a tumultuous period of fifty-seven
years, with its numerous schools and colleges at Mumbai, Pune,
Bangalore, Mahad, Nanded, Pandharpur, Aurangabad, Vashi, and
Kolhapur in the states of Maharashtra and Karnataka, as centers as
learning have opened up vistas of knowledge for the adventure of
conquering the frontiers of intellect and wisdom. Following are the list of
Schools and Colleges under the banner of People's Education Society at
various places in India.

Our Vision
● To create sound technical manpower with global
competitiveness, morality and social sense.
● To promote intellectual, moral and social democracy to ensure all
round development of students.

Our Mission
● To provide state-of-art technical infrastructure and motivate students to
realise their own potential.
● To provide an embellished academic and congenial environment to
students for a complete learning experienc
 Instruction to Student

● Industrial Training / Field Training / Internship should be a minimum 2 weeks

(15 days).

● Students should update day wise reports in their dairy with the signature of

signatory authority.

● Students should report/communicate to mentors on a regular basis regarding

progress reports of Industrial Training / Field Training / Internship.

● Industrial Training / Field Training / Internship Certificate is Mandatory.

 About The Organization

❖ Name of Organization: Codetown Edtech Private Limited's Corporate.LTD.

Bengaluru.

❖ Address: 2nd Floor, #108, 27th Main Road, Sector 2, HSR Layout, opposite
Corner House - HSR Sector 2, Bengaluru, Karnataka 560102, Bangalore, India,
Karnataka.

❖ Name of Contact Person: Ashish Modi

❖ Contact No: +91 99837 42739

❖ E-mail ID: support@devtown.in

❖ Website : https://www.devtown.in

❖ Brief Information about Organization: The We at DevTown (A research and

education-based startup ), are a team with an aim to provide students with a
platform to research and make projects in the field of AI and ML. We aim to
provide an interactive learning platform for students where they will be able to
learn and develop projects with our support. We have collaborated with Kesha
Kaneria, Microsoft Learn Student Ambassador(Beta Level) and no charge will
be taken for the events or webinars conducted and certified by them. We strive
to cultivate a change in the current learning strategy of students and incorporate
a reasonable learning methodology, to make them future-prepared
Certificate from DevTown
1.Official communication
\\ 1. Introduction

We have started our Internship with DevTown Technology

PVT. LTD Bangaluru. On the First they have given a brief Introduction about
their company. They tell us what technologies they are working on, and how
many employees are working in their company. So many things they have shared
regarding their company. Shaurya Sinha Sir is the Co-Founder of DevTown
Technologies.
The DevTown EduTech company is a fast growing Educational company, where
all the highly skilled team of employees are working together in a very
enthusiastic way and dedicated to helping out the companies of all sizes for being
forward in a race as it comes to their competitors.
DevTown aim to provide students with a platform to research and make projects
in the field of AI and ML. We aim to provide an interactive learning platform for
students where they will be able to learn and develop projects with our support.
We have collaborated with Kesha Kaneria, Microsoft Learn Student
Ambassador(Beta Level) and no charge will be taken for the events or webinars
conducted and certified by them. We strive to cultivate a change in the current
learning strategy of students and incorporate a reasonable learning methodology,
to make them future-prepared
 2. First Project(Zomato Clone)

After the introduction Rohan Kinnal .With Rohan Kinnal Sir We have done a Task that is
making Zoamato Clone . In this task We have Learn various Web Fundamentals and Html
tags and CSS and Javascript . Also allowed the User to Book any order and this App will
save user data and will place user order.

Following are the task Code given by Rohan Kinnal sir:

Code of Zomato in HTML

<!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" />

<!-- Zomato logo in the tab -->

<link

rel="icon"

type="image/x-icon"

href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Zomato_logo.png/220px-
Zomato_logo.png"

/>
 <!-- Font awesome icons -->

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"

integrity="sha512-
KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtE
KNosOWaZqXgel0g=="

crossorigin="anonymous"

referrerpolicy="no-referrer"

<!-- Poppins font by google fonts -->

<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,
300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"

rel="stylesheet"

<!-- Importing styles.css -->

<link rel="stylesheet" href="/styles.css" />

<title>Zomato Landing Page Clone </title>

</head>

<body>

<!-- This is for hero-section -->

<section class="hero__section">
 <header>

<nav class="navbar">

<a href="#">Get the App</a>

<div class="navbar__menu_container">

<a href="#" class="link">Inventor Relations</a>

<a href="#" class="link">Add Restaurants</a>

<a href="#" class="link">Login</a>

<a href="#" class="link">Sign Up</a>

<a href="#" class="user_icon">

<i class="fa-solid fa-user"></i>

</a>

</div>

</nav>

</header>

<div class="hero__section_container">

<img src="images/heroSectionLogo.png" alt="Zomato Logo" class="hero__section_logo"/>

<h1 class="hero__section_title">Discover the best food & drinks in Hampi-Hospet</h1>

<div class="hero__section_input_container">

<input class="input_container_location" type="text" placeholder="Hampi-Hospet" />

<input class="input_container_search" type="text" placeholder="Search for a restaurant,

cuisine or a dish" />

</div>
 </div>

</section>

<!-- This is for cards zomato offer -->

<section class="container we__offer">

<div class="we__offer_card">

<img src="images/item1.png" alt="card 1 img" />

<div class="we__offer_content">

<h2>Order Online</h2>

<p>Stay home and order to your doorstep</p>

</div>

</div>

<div class="we__offer_card">

<img src="images/item2.png" alt="card 2 img" />

<div class="we__offer_content">

<h2>Dining</h2>

<p>View the citys favourite dining venue</p>

</div>

</div>

<div class="we__offer_card">

<img src="images/item3.png" alt="card 3 img" />

<div class="we__offer_content">
 <h2>Nightlife and clubs</h2>

<p>Explore the citys top nightlife outlets</p>

</div>

</div>

<div class="we__offer_card">

<img src="images/item4.png" alt="card 4 img" />

<div class="we__offer_content">

<h2>Order Online</h2>

<p>Stay home and order to your doorstep</p>

</div>

</div>

</section>

<!-- Thisis for collection section -->

<section class="container collections">

<h1>Collection</h1>

<div class="sub__heading_container">

<span>Explore curated lists of top restaurants, cafes, pubs in Hospet-Hampi based on

trends</span>

<span>All collections in Hospet-Hampi</span>

</div>

<div class="collections_card_container">

<div class="card card1">

 <div class="content">

<h4>Live Cricket Screening</h4>

<span>56 Places</span>

</div>

<div class="overlay"></div>

</div>

<div class="card card2">

<div class="overlay"></div>

<div class="content">

<h4>Malnad Special</h4>

<span>12 Places</span>

</div>

</div>

<div class="card card3">

<div class="overlay"></div>

<div class="content">

<h4>Newly opened Restaurants</h4>

<span>36 Places</span>

</div>

</div>

<div class="card card4">

 <div class="content">

<h4>Trending Pubs Near Me</h4>

<span>16 Places</span>

</div>

<div class="overlay"></div>

</div>

</div>

</section>

<!-- This is for get the app section -->

<section class="container get__the_app">

<div class="semiContainer">

<div class="left">

<img src="images/mobileBanner.png" alt="Mobile Banner" />

</div>

<div class="right">

<h1>Get the Zomato App</h1>

<p>We will send you a link, open it and download in your phone</p>

<div class="radio__button_container">

<div>

<input type="radio" id="email" name="download_app"/>

<label for="email" style="font-size: 14px;">Email</label>

 </div>

<div>

<input type="radio" id="phone" name="download_app"/>

<label for="phone" style="font-size: 14px;">Phone</label>

</div>

</div>

<div class="input_container">

<input type="text" placeholder="Email"/>

<button>Share App Link</button>

</div>

<div class="download__app_container">

<h5>Download App From</h5>

<diV>

<img src="images/appleStore.png" alt="Apple Store" />

<img src="images/playStore.png" alt="Playe Store" />

</diV>

</div>

<!-- This is for the footer section -->

<footer class="container footer">

<div class="footer_section1">

<img src="images/logo.png" alt="zomato logo" />

 <div class="section1__buttonContainer">

<button>

<img src="https://flagcdn.com/w40/in.png" alt="Indian Flag" style="width: 15px"/>

India

</button>

<button><i class="fa fa-globe"></i>English</button>

</div>

</div>

<div class="navigation_container">

<div class="link__container">

<h5>ABOUT ZOMATO</h5>

<a class="footer__link" href="#">Who we are</a>

<a class="footer__link" href="#">Blogs</a>

<a class="footer__link" href="#">Work with us</a>

<a class="footer__link" href="#">Investor Relations</a>

<a class="footer__link" href="#">Report Fraud</a>

<a class="footer__link" href="#">Contact Us</a>

<div class="link__container">

<h5>ZOMAVERSE</h5>

<a class="footer__link" href="#">Zomato</a>

<a class="footer__link" href="#">Blinkit</a>

 <a class="footer__link" href="#">Feeding India</a>

<a class="footer__link" href="#">Hyperpure</a>

<a class="footer__link" href="#">Zomaland</a>

</div>

<div class="link__container">

<h5>FOR RESTAURANTS</h5>

<a class="footer__link" href="#">Partner With Us</a>

<a class="footer__link" href="#">Apps for You</a>

<br />

<h5>FOR ENTERPRISES</h5>

<a class="footer__link" href="#">Zomato For Work</a>

</div>

<div class="link__container">

<h5>LEARN MORE</h5>

<a class="footer__link" href="#">Privacy</a>

<a class="footer__link" href="#">Security</a>

<a class="footer__link" href="#">Terms</a>

<a class="footer__link" href="#">Sitemap</a>

</div>

<div class="link__container">

<h5>Social Media</h5>
 <div class="section__links_container">

<button><i class="fa-brands fa-linkedin-in"></i></button>

<button><i class="fa-brands fa-instagram"></i></button>

<button><i class="fa-brands fa-twitter"></i></button>

<button><i class="fa-brands fa-facebook"></i></button>

<button><i class="fa-brands fa-youtube"></i></button>

</div>

<br />

<img src="images/appleStore.png" alt="apple store" class="footer__section_logos" />

<img src="images/playStore.png" alt="play store" class="footer__section_logos" />

</div>

</div>

</body>

</html>

Code of CSS I for Zomata Clone

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;}

.hero__section{
 background: url(images/heroSectionBackground.png);

background-size: cover;

background-position: center;

color: white;

min-height: 60vh;

.navbar{

display: flex;

align-items: center;

justify-content: space-between;

height: 65px;

padding: 16px 48px;}

.navbar a{

color: white;

text-decoration: none;

.navbar__menu_container{

display: flex;

gap: 18px;

/* padding-right: 18px; */

.navbar__menu_container .user_icon{
 height: 25px;

width: 25px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 100%;

border: solid 1px white;

display: none;

.hero__section_container{

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 20px;

height: calc(60vh - 65px);

.hero__section_logo{

width: 200px;

height: 40px;

/* height: auto; */
}

.hero__section_title{

text-align: center;

font-size: 30px;

font-weight: 380;

.hero__section_input_container{

background-color: white;

padding: 10px;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

width: 50%;

border-radius: 10px;

.input_container_location,

.input_container_search{

padding: 5px;

border: none;

outline: none;
}

.input_container_location{

width: 35%;

border-right: 2px solid #e0e0e0;

/* Screen Size is from 0-600 i.e., smaller/mobile screen */

@media only screen and (max-width: 600px){

.navbar__menu_container .user_icon{

display: flex;

.link{

display: none;

.hero__section{

min-height: 80vh;

.hero__section_container{

flex-direction: column;

background-color: transparent;

width: 100%;

}
 .input_container_location,

.input_container_search{

padding: 18px;

border-radius: 10px;

width: 98%;

.hero__section_container{

height: calc(80vh - 40px);

.hero__section_title{

font-size: 18px;

width: 95%;

/* Out of media queries */

.container{

margin: 3rem auto;

width: 90%;

.we__offer{

display: flex;
 flex-wrap: wrap;

gap: 0.5rem;

align-items: center;

justify-content: center;

.we__offer_card{

border-radius: 10px;

/* background-color: aqua; */

overflow: hidden;

border: 1px solid #e0e0e0;

transition: all 1s ease;

margin-right: 12px;

.we__offer_card:hover{

transform: scale(1.1);

.we__offer_card img{

width: 100%;

height: 170px;

object-fit: cover;

object-position: center;
}

.we__offer_content{

padding: 10px;

.we__offer_content h2{

font-size: 20px;

font-weight: 400;

.we__offer_content p{

font-size: 12.5px;

}.collections h1{

font-weight: 600;

.collections .sub__heading_container{

font-size: 15px;

display: flex;

align-items: center;

justify-content: space-between;

flex-wrap: wrap;

gap: 1rem;

}
.sub__heading_container span:nth-child(2){

color: #ff7e8b;

font-size: 13px;

cursor: pointer;

.collections_card_container{

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

gap: 0.5rem;

margin-top: 1.25rem;

.collections_card_container .card{

height: 300px;

min-width: 240px;

background-size: cover;

background-position: center;

border-radius: 10px;

position: relative;

.card1{
 background-image: url('images/collection1.jpg');

.card2{

background-image: url('images/collection2.jpg');

.card3{

background-image: url('images/collection3.jpg');

.card4{

background-image: url('images/collection4.jpg');

/* rgba => Red, Green, Blue, Opacity */

.overlay{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

border-radius: 10px;

background: linear-gradient(

rgba(225, 0, 0, 1) 0%,

rgba(225, 0, 2, 1) 50%,
 rgba(225, 0, 0, 1) 85%,

);

z-index: 5;

.collections_card_container .card .content{

position: absolute;

bottom: 0;

left: 0;

color: white;

padding: 12px 16px;

font-size: 0.9rem;

z-index: 6;

.content h4{

font-weight: 400;

letter-spacing: 0.5px;

.get__the_app{

display: flex;

align-items: center;

justify-content: center;

background-color: rgb(255,251,247);

width: 100%;
 padding: 3rem 6rem;

.get__the_app .semiContainer{

width: 60%;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 1.5rem;

.get__the_app .semiContainer .left{ flex: 2;

.get__the_app .semiContainer .left img{

width: 100%;

object-fit: cover;

object-position: center;

.get__the_app .semiContainer .right{

flex: 3;

height: 100%;

display: flex;

flex-direction: column;
 gap: 1rem;

.right h1{

font-weight: 400;

font-size: 2rem;

.right p{

font-size: 0.8rem;

.right .radio__button_container{

display: flex;

align-items: center;

gap: 1rem;

.right .radio__button_container div{

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

.right .radio__button_container div input{

 height: 15px;

width: 15px;

accent-color: rgb(239, 79, 95);

.right .input_container{

display: flex;

gap: 0.5rem;

.input_container{

flex-wrap: wrap;

.input_container button,

.input_container input{

padding: 10px 12px;

.input_container input{

flex: auto;

border: 1.5px solid gray;

outline: none;

border-radius: 5px;

}
.input_container button{

border: none;

background-color: rgb(239, 79, 95);

color: white;

border-radius: 5px;

cursor: pointer;

.right .download__app_container{

display: flex;

flex-direction: column;

gap: 0.7rem;

.right .download__app_container h5{

font-weight: 400;

color: gray;

.right .download__app_container div{

display: flex;

gap: 1rem;

.right .download__app_container div img{

 width: 35%;

/* Media Queries For Download App */

/* 0-1300 */

@media only screen and (max-width: 1300px){

.get__the_app .semiContainer .left,

.get__the_app .semiContainer .right{

flex: 1;

.get__the_app .semiContainer{

width: 80%;

/* 0-900 */

@media only screen and (max-width: 900px){

.get__the_app{

padding: 2rem 0;

.get__the_app .semiContainer{

width: 95%;

flex-direction: column;
.footer{

width: 100%;

.footer_section1{

display: flex;

flex-wrap: wrap;

align-items: center;

justify-content: space-between;

width: 80%;

margin: auto;

.footer_section1 img{

width: 130px;

.section1__buttonContainer{

display: flex;

gap: 1rem;

.section1__buttonContainer button{

padding: 5px;

width: 90px;
 border: 1px solid gray;

border-radius: 5px;

background-color: transparent;

display: flex;

align-items: center;

justify-content: center;

gap: 12px;

cursor: pointer;

.navigation_container{

display: grid;

/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */

grid-template-columns: repeat(5, 1fr);

width: 80%;

margin: auto;

gap: 1rem;

padding: 3rem 0;

.link__container{

display: flex;

flex-direction: column;
 gap: 5px;

.link__container h5{

font-weight: 500;

font-size: 15px;

margin-bottom: 5px;

letter-spacing: 0.8px;

.footer__link{

text-decoration: none;

color: gray;

font-size: 12.5px;

font-weight: 300;

.footer__link:hover{

color: black;

.section__links_container button{

background-color: black;

border: none;

width: 25px;
 height: 25px;

border-radius: 30px;

color: white;

cursor: pointer;

.section__links_container button i{

/* color: white; */

font-size: 13px;

display: flex;

/* horizontal / x-axis */

align-items: center;

/* Vertical / y-axis */

justify-content: center;

.footer__section_logos{

width: 100%;

.disclamer{

width: 95%;
 color: gray;

margin: auto;

border-top: 1px solid gray;

padding-top: 1.5rem;

@media only screen and (max-width: 900px){

.navigation_container{

grid-template-columns: repeat(3, 1fr);

@media only screen and (max-width: 500px){

.navigation_container{

grid-template-columns: repeat(2, 1fr);

@media only screen and (max-width: 320px){

.navigation_container{

grid-template-columns: repeat(1, 1fr);

}
 3. Second Project(Tic tac Toe)

After the completion of the task first we send it to Rohan Kinnal. Sir after the
evaluation of the first task they gave us the second task. In the second task they
gave as an option to make a project that is a mini Game which is Tic Tac Toe it
mainly uses javascript logic to works.

Following are Code of the Project Tic Tac Toe

CODE OF TIC TAC TOE in HTML

<!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>Tic Tac Toe</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<nav>

<ul>
 <li>MyTicTacToe.com</li>

</ul>

</nav>

<div class="gameContainer">

<div class="container">

<div class="line"></div>

<div class="box bt-0 bl-0"><span class="boxtext"></span></div>

<div class="box bt-0"><span class="boxtext"></span></div>

<div class="box bt-0 br-0"><span class="boxtext"></span></div>

<div class="box bl-0"><span class="boxtext"></span></div>

<div class="box"><span class="boxtext"></span></div>

<div class="box br-0"><span class="boxtext"></span></div>

<div class="box bl-0 bb-0"><span class="boxtext"></span></div>

<div class="box bb-0"><span class="boxtext"></span></div>

<div class="box bb-0 br-0"><span class="boxtext"></span></div>

</div>

<div class="gameInfo">

<h1>Welcome to Tic Tac MyTicTacToe</h1>

<div>

<span class="info">Turn for X</span>

<button id="reset">Reset</button>

</div>
 <div class="imgbox">

<img src="excited.gif" alt="" />

</div>

</div>

</div>

<script src="script.js"></script>

</body>

</html>

CODE OF TIC TAC TOE in JavaScript

console.log("Welcome to Tic Tac Toe")

let music = new Audio("music.mp3")

let audioTurn = new Audio("ting.mp3")

let gameover = new Audio("gameover.mp3")

let turn = "X"

let isgameover = false;

// Function to change the turn

const changeTurn = ()=>{

return turn === "X"? "0": "X"

// Function to check for a win

const checkWin = ()=>{

let boxtext = document.getElementsByClassName('boxtext');

let wins = [

[0, 1, 2, 5, 5, 0],

[3, 4, 5, 5, 15, 0],

[6, 7, 8, 5, 25, 0],

[0, 3, 6, -5, 15, 90],

[1, 4, 7, 5, 15, 90],

[2, 5, 8, 15, 15, 90],

[0, 4, 8, 5, 15, 45],

[2, 4, 6, 5, 15, 135],

wins.forEach(e =>{

if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText ===

boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){

document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"

isgameover = true

document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width =
"200px";

document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw)

rotate(${e[5]}deg)`

document.querySelector(".line").style.width = "20vw";

}
// Game Logic

let boxes = document.getElementsByClassName("box");

Array.from(boxes).forEach(element =>{

let boxtext = element.querySelector('.boxtext');

element.addEventListener('click', ()=>{

if(boxtext.innerText === ''){

boxtext.innerText = turn;

turn = changeTurn();

audioTurn.play();

checkWin();

if (!isgameover){

document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;

// Add onclick listener to reset button

reset.addEventListener('click', ()=>{

let boxtexts = document.querySelectorAll('.boxtext');

Array.from(boxtexts).forEach(element => {

element.innerText = ""

});

turn = "X";

isgameover = false

document.querySelector(".line").style.width = "0vw";
 document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;

document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px"

})

4. Third Project(Windows 11)

After the completion of the task Second we send it to Rohan Kinnal. Sir after the
evaluation of the Second task he appreciate and they gave us the Third task. In
the Third task they gave as an option to make a project that is on Windows 11
which is mostly the same clone of the w11 most of the front end we have made
with the help of html,css and Javascript

CODE for the Windows 11 in Html

<!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>Try Windows 11</title>

<link rel="stylesheet" href="style.css">

</head>
<body>

<!-- <div class="icons">

<img src="chromeicon.png" width="74px" alt="">

<div>Google Chrome</div>

</div> -->

<div class="taskbar">

<img src="icons.PNG" alt="">

<img class="right" src="taskbarright.PNG" alt="">

</div>

<div class="startmenu">

<img src="startmenu.PNG" alt="">

</div>

<video autoplay muted id="vid">

<source src="video.webm" type="video/webm">

</video></body>
<script src="script.js"></script>

</html>

CODE for Windows11 in CSS

*{

margin: 0;

padding: 0;

body{

/* background-image: url('bg.jpeg');

background-size: cover; */

overflow: hidden;

height: 100vh;

.taskbar{
 background-color: #f3f3f3;

width: 100%;

position: absolute;

bottom: 0;

display: flex;

z-index: 110;

justify-content: center;

.startmenu{

position: absolute;

/* bottom: 50px; */

bottom: -655px;

width: 100%;

text-align: center;

transition: all 0.3s ease-in;

}

.startmenu img{

border-radius: 8px

}.
 Certificate

This is certified that Mr. Syed Zainuddin

Gousuddin Kirmani having PRN 1921341242083. I Am in Final
year of Computer Science and Engineering. Roll No: 41 at P E S
College Of Engineering affiliated to Dr. Babasaheb Ambedkar
Technical University Lonere
Successfully Completed Internship at Codetown Edtech Private
Limited's Corporate.LTD. Bengaluru.

Signatory Authority with Stamp