Professional Documents
Culture Documents
Submitted by
Tanishka Pramod Patil
Pranjal Bhimrao Salve
Affiliated to
Maharashtra State
Board of Technical Education
Certificate
This is to certify that Mr./Ms. Tanishka Pramod Patil with Roll No-57 has successfully completed Micro-project in
course 22519 - Client Side Scripting Language for the academic year -24 as prescribed in the 'Assessment
Manual'during his/her tenure of completing Fifth Semester of Diploma Programme in Computer Engineering
from institute, Sandip Polytechnic with institute code 1167.
Certificate
This is to certify that Mr./Ms. Pranjal Bhimrao Salve with Roll No-62 has successfully completed Micro-project
in course 22519 - Client Side Scripting Language for the academic year -24 as prescribed in the 'Assessment
Manual'during his/her tenure of completing Fifth Semester of Diploma Programme in Computer Engineering
from institute, Sandip Polytechnic with institute code 1167.
Cascading Style Sheets are an important way to control how your web pages look. CSS controls the fonts, text,
colors, backgrounds, margins, and layout. That means any change you make has the potential to cascade and
alter the presentation of unrelated bits of the UI. Extended CSS languages, a.k.a. CSS preprocessors, such as Sass,
Less and Stylus make things a little easier by offering up features that make writing CSS easier
<!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>Sandip University</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-
+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
<body>
<header class="container-fluid nav-style mx-auto ">
<div class="row">
<div class="col-md-10 col-11 mx-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img
src="https://www.sandipuniversity.edu.in/images/sandip-university-logo.png" class="img-
fluid mt-4" alt=""
width="180"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
</div>
</nav>
</div>
</div>
</header>
<!-- carosel -->
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.sandipuniversity.edu.in/images/main-slider/banner-su.jpg" class="d-
block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.sandipuniversity.edu.in/images/main-slider/ugc-approval.jpg" class="d-
block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://www.sandipuniversity.edu.in/images/main-slider/placement-h.jpg" class="d-
block w-100"
alt="...">
</div>
</div>
</div>
<!-- -->
<!-- Dropdown -->
<div class="row">
<div class="col-md-5 mx-auto mt-5">
<select name="choose" id="select" onchange="showData()">
<option value="0">select field</option>
<option value="1">engineering</option>
<option value="2">polytechnic</option>
<option value="3">LAW</option>
<option value="4">MBA</option>
</select>
</div>
</div>
<!-- -->
</div>
<div class="col-md-4 col-lg-4 col-xl-4 mx-auto mt-3">
<h5 class="text-uppercase mb-4 font-weight-bold text-warning">Contact Us</h5>
<p>
<i id="c-info" class="fas fa-home mr-3"></i>Nashik
</p>
<p>
<i id="c-info" class="fas fa-envelope mr-3"></i>SandipUniversity@gmail.com
</p>
<h5 class="text-uppercase mb-4 font-weight-bold text-warning">Follow Us</h5>
<div class=" text-center text-md-left">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a id="follow" href="#" class="btn-floating btn-sm " style="font-size: 25px;"><i
class="fab fa-facebook"></i></a>
</li>
<li class="list-inline-item">
<a id="follow" href="#" class="btn-floating btn-sm " style="font-size: 25px;"><i
class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a id="follow" href="#" class="btn-floating btn-sm " style="font-size: 25px;"><i
class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div><br>
<div class="col-md-5">
<p>© 2022,<B> SANDIP UNIVERSITY </B>| All rights reserved
</p>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>
Member.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Members</title>
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
src="https://www.sandipuniversity.edu.in/images/sandip-university-logo.png" class="img-
width="180"></a>
target="#navbarSupportedContent"
navigation">
<span class="navbar-toggler-icon"></span>
</button>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li
</ul>
</div>
</nav>
</div>
</div>
</header>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Deepika_Padukone_Cannes_2018_%28crop
<div class="card-body">
</div>
</div>
</div>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Deepika_Padukone_Cannes_2018_%28crop
<div class="card-body">
</div>
</div>
</div>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Deepika_Padukone_Cannes_2018_%28crop
<div class="card-body">
</div>
</div>
</div>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Deepika_Padukone_Cannes_2018_%28crop
<div class="card-body">
</div>
</div>
</div>
width="250px"
</div>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</div>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</div>
<p>
</p>
<p>
</p>
<li class="list-inline-item">
class="fab fa-facebook"></i></a>
</li>
<li class="list-inline-item">
<a id="follow" href="#" class="btn-floating btn-sm " style="font-size: 25px;"><i
class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div><br>
<div class="col-md-5">
</p>
</div>
</footer>
</body>
</html>
Style.css
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
.nav-style {
background: #fff;
.navbar-brand {
width: 500px;
height: 120px;
.navbar-nav li {
text-transform: uppercase;
font-size: 14px;
font-weight: 2px;
letter-spacing: 2px;
color: #333;
position: relative;
.navbar-nav li a {
font-weight: bold;
.navbar-nav li a:before {
content: '';
position: absolute;
top: 100%;
width: 0%;
height: 10%;
background: #ff7230;
.navbar-nav li a:hover:before {
width: 80%
footer {
background-color: black;
#para {
color: white;
#para:hover {
color: #ffcb3d;
#follow {
color: white;
#follow:hover {
color: #ffcb3d;
}
#c-info {
color: white;
#c-info:hover {
color: #ffcb3d;
#select {
width: 100%;
height: 50px;
color: white;
background-color: black;
text-align: center;
margin-bottom: 20px;
.imageid {
width: 100%;
height: 400px;
margin: auto;
margin-top: 20px;
#imageId {
width: 100%;
}
@media(max-width: 998px) {
.navbar-nav {
.navbar-nav li a:hover:before {
width: 0%;
.navbar-brand {
width: 300px;
height: 80px;
}
5.0 Actual Resources Used:
Sr
Name of Resource/Material Specification Qty. Remarks
No
1 Hardware Resource Laptop 2GB Ram 1
2 Software Resource Notepad 1
3 Any Other Resource - -
(A) (B)
Total Marks
Process and Product Assessment Individual Presentation/Viva
(10 Marks)
(6 Marks) (4 Marks)
Dated Signature:
Annexure – IV
(A) (B)
Total Marks
Process and Product Assessment Individual Presentation/Viva
(10 Marks)
(6 Marks) (4 Marks)
Dated Signature: