WD Lab Manual

C. S. I.
INSTITUTE OF TECHNOLOGY
T HOVALAI – 629 302
KANYAKUMARI DISTRICT
PRACTICAL LAB MANUAL
SUBJECT : WEB DESIGN

SUB.CODE : MC4023
PREPARED BY : M JULIE EMERALD JIJU
INDEX
S.NO CONTENT
1
LANDING PAGE FOR A WEBSITE
2 ADMIN DASHBOARD FOR AN E-COMMERCE

WEBSITE
EVENT REGISTRATION FORM
3
4 STICKY NAVBAR
5 DEVELOPER PORTFOLIO
6 PRICING CARD LIST
REGISTRATION FORM AND VALIDATION

7
USING JAVASCRIPT
‘JSONPLACEHOLDER’ API TO GET POST DATA

8
AND DISPLAY DATA
2
Ex.No : 1
LANDING PAGE FOR A WEBSITE
AIM :
To develop a landing page for a website.
ALGORITHM :
1. Prepare the content of the page

2. Arrange the layout to build the landing page
3. Setup analytics
4. Check the functioning of the landing page
5. Launch the advertising campaign
6. Publish
SOURCE CODE :
Index.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">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Landing Page Design Using HTML & CSS</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="images/logo.png" class="logo">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Community</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
3
<button class="btn" id="btn1">Log In</button>
<button class="btn" id="btn2">Sign Up</button>
</div>
<div class="content">
<div class="text">
<h1>Be Young, Have Fun, <br> <span>Drink Pepsi</span></h1>
<p>Pepsi is a carbonated soft drink manufactured by PepsiCo. <br>Originally created
and developed in 1893 by Caleb Bradham <br>and introduced as Brad's Drink, it was renamed
as Pepsi-Cola in 1898, and then shortened to Pepsi in 1961.
</p>
<button class="btn3">Buy Now</button>
</div>
<div class="pepsi">
<img src="images/pepsi.png" alt="">
</div>
</div>
</div>
</body>
</html>
Style.css
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.container {
height: 100vh;
width: 100%;
background-image: url(images/bg.png);
background-position: center;
background-size: cover;
padding-right: 3%;
padding-left: 5%;
box-sizing: border-box;
position: relative;
}
.header {
width: 100%;
height: 15vh;
margin: auto;
display: flex;
align-items: center;
4
}
.logo {
width: 80px;
margin-top: 10px;
cursor: pointer;
}
nav {
flex: 1;
padding-left: 450px;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
}
#btn1 {
background: linear-gradient(to bottom, #378de5 3%, #48789b 100%);
border-radius: 30px;
border: 1px solid #5e97d1;
cursor: pointer;
color: #fff;
font-size: 17px;
font-weight: 700;
padding: 12px 20px;
margin: 10px;
box-shadow: 1px 4px 12px rgba(94,28,68,.15);
text-shadow: 0px 1px 0px #528ecc;
}
#btn2 {
background: linear-gradient(to bottom, #cbcbcb 2%, #fff 100%);
border: 1px solid #cbcbcb;
5
cursor: pointer;
color: #5e97d1;
font-size: 17px;
font-weight: 700;
padding: 12px 20px;
margin: 10px;
text-shadow: 0px 1px 0px #cbcbcb;
}
.btn:hover {
transform: scale(1.1);
transition: .2s ease-in-out;
}
.content {
position: relative;
display: flex;
width: 100%;
justify-content: space-between;
}
.content .text {
position: relative;
max-width: 600px;
}
.content .text h1 {
font-weight: 800;
margin-top: 80px;
line-height: 1.5em;
letter-spacing: .1em;
font-size: 40px;
color: #fff;
}
.content .text h1 span {
font-size: 50px;
}
.content .text p {
font-size: 17px;
font-weight: 600;
letter-spacing: .1em;
6
margin-top: 40px;
color: #e7e3e3;
}
.btn3 {
background: linear-gradient(to bottom, #cbcbcb 2%, #fff 100%);
margin-top: 60px;
margin-left: 140px;
padding: 15px 30px;
text-align: center;
transition: .5s;
border: none;
outline: none;
color: #1b1b1b;
font-size: 20px;
font-weight: 700;
}
.pepsi {
display: flex;
height: 100%;
position: absolute;
width: 600px;
margin-top: 80px;
padding-left: 440px;
justify-content: flex-end;
}
OUTPUT :
7
Ex.No : 2
ADMIN DASHBOARD FOR AN E-COMMERCE WEBSITE
AIM :
To develop an Admin Dashboard for an E-Commerce website.
ALGORITHM :
 Create a project folder and inside it create three files “index.html“(for

writing the HTML), “style.css“(for writing the CSS), and “index.js“(for writing
the js).
 Now, create a header section to keep the header logo and other options
like the menu button, Admin profile picture, and the search bar inside it.
 Then create a search bar using the Input tag and give a style to it using
CSS.
 Then create a nav bar and make it positioned relative and place it on the
left side of the screen.
 Then create the main div to keep the main body of the dashboard.
 Then below the cards make a square div that will contain the information.
 Then make the page responsive, add @media query with different
breakpoints and give the styling according to the screen size.
SOURCE CODE :
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title> Responsiive Admin Dashboard </title>
<link rel="stylesheet" href="style.css">

<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
8
<i class='bx bxl-c-plus-plus'></i>
<span class="logo_name">CodingLab</span>
</div>
<ul class="nav-links">
<li>
<a href="#" class="active">
<i class='bx bx-grid-alt' ></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-box' ></i>
<span class="links_name">Product</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-list-ul' ></i>
<span class="links_name">Order list</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Analytics</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-coin-stack' ></i>
<span class="links_name">Stock</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-book-alt' ></i>
<span class="links_name">Total order</span>
</a>
</li>
9
<li>
<a href="#">
<i class='bx bx-user' ></i>
<span class="links_name">Team</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-message' ></i>
<span class="links_name">Messages</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-heart' ></i>
<span class="links_name">Favrorites</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="links_name">Setting</span>
</a>
</li>
<li class="log_out">
<a href="#">
<i class='bx bx-log-out'></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class='bx bx-menu sidebarBtn'></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search...">
10
<i class='bx bx-search' ></i>
</div>
<div class="profile-details">
<img src="images/profile.jpg" alt="">
<span class="admin_name">Prem Shahi</span>
<i class='bx bx-chevron-down' ></i>
</div>
</nav>
<div class="home-content">
<div class="overview-boxes">
<div class="box">
<div class="right-side">
<div class="box-topic">Total Order</div>
<div class="number">40,876</div>
<div class="indicator">
<i class='bx bx-up-arrow-alt'></i>
<span class="text">Up from yesterday</span>
</div>
</div>
<i class='bx bx-cart-alt cart'></i>
</div>
<div class="box">
<div class="box-topic">Total Sales</div>
</div>
</div>
<i class='bx bxs-cart-add cart two' ></i>
</div>
<div class="box">
<div class="box-topic">Total Profit</div>
<div class="number">$12,876</div>
</div>
11
</div>
<i class='bx bx-cart cart three' ></i>
</div>
<div class="box">
<div class="box-topic">Total Return</div>
<i class='bx bx-down-arrow-alt down'></i>
<span class="text">Down From Today</span>
</div>
</div>
<i class='bx bxs-cart-download cart four' ></i>
</div>
</div>
<div class="sales-boxes">
<div class="recent-sales box">
<div class="title">Recent Sales</div>
<div class="sales-details">
<ul class="details">
<li class="topic">Date</li>
<li><a href="#">02 Jan 2021</a></li>
<li><a href="#">02 Jan 2021</a></li>
<li><a href="#">02 Jan 2021</a></li>
<li><a href="#">02 Jan 2021</a></li>
<li><a href="#">02 Jan 2021</a></li>
<li><a href="#">02 Jan 2021</a></li>
<li><a href="#">02 Jan 2021</a></li>
</ul>
<li class="topic">Customer</li>
<li><a href="#">Alex Doe</a></li>
<li><a href="#">David Mart</a></li>
<li><a href="#">Roe Parter</a></li>
<li><a href="#">Diana Penty</a></li>
<li><a href="#">Martin Paw</a></li>
<li><a href="#">Doe Alex</a></li>
<li><a href="#">Aiana Lexa</a></li>
<li><a href="#">Rexel Mags</a></li>
<li><a href="#">Tiana Loths</a></li>
12
</ul>
<li class="topic">Sales</li>
<li><a href="#">Delivered</a></li>
<li><a href="#">Pending</a></li>
<li><a href="#">Returned</a></li>
<li><a href="#">Returned</a></li>
</ul>
<li class="topic">Total</li>
<li><a href="#">$204.98</a></li>
<li><a href="#">$24.55</a></li>
<li><a href="#">$25.88</a></li>
<li><a href="#">$170.66</a></li>
<li><a href="#">$56.56</a></li>
<li><a href="#">$44.95</a></li>
<li><a href="#">$67.33</a></li>
<li><a href="#">$23.53</a></li>
<li><a href="#">$46.52</a></li>
</ul>
</div>
<div class="button">
<a href="#">See All</a>
</div>
</div>
<div class="top-sales box">
<div class="title">Top Seling Product</div>
<ul class="top-sales-details">
<li>
<a href="#">
<img src="images/sunglasses.jpg" alt="">
<span class="product">Vuitton Sunglasses</span>
</a>
<span class="price">$1107</span>
</li>
13
<li>
<a href="#">
<img src="images/jeans.jpg" alt="">
<span class="product">Hourglass Jeans </span>
</a>
</li>
<li>
<a href="#">
<img src="images/nike.jpg" alt="">
<span class="product">Nike Sport Shoe</span>
</a>
</li>
<li>
<a href="#">
<img src="images/scarves.jpg" alt="">
<span class="product">Hermes Silk Scarves.</span>
</a>
</li>
<li>
<a href="#">
<img src="images/blueBag.jpg" alt="">
<span class="product">Succi Ladies Bag</span>
</a>
</li>
<li>
<a href="#">
<img src="images/bag.jpg" alt="">
<span class="product">Gucci Womens's Bags</span>
</a>
<li>
<a href="#">
<img src="images/addidas.jpg" alt="">
<span class="product">Addidas Running Shoe</span>
</a>
14
</li>
<li>
<a href="#">
<img src="images/shirt.jpg" alt="">
<span class="product">Bilack Wear's Shirt</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<script>
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function() {
sidebar.classList.toggle("active");
if(sidebar.classList.contains("active")){
sidebarBtn.classList.replace("bx-menu" ,"bx-menu-alt-right");
}else
sidebarBtn.classList.replace("bx-menu-alt-right", "bx-menu");
}
</script>
</body>
</html>
style.css
/* Googlefont Poppins CDN Link */
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&displa
y=swap');
*{
margin: 0;
padding: 0;
}
.sidebar{
position: fixed;
15
height: 100%;
width: 240px;
background: #0A2558;
transition: all 0.5s ease;
}
.sidebar.active{
width: 60px;
}
.sidebar .logo-details{
height: 80px;
display: flex;
}
.sidebar .logo-details i{
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 24px;
font-weight: 500;
}
.sidebar .nav-links{
margin-top: 10px;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
height: 50px;
}
.sidebar .nav-links li a{
height: 100%;
width: 100%;
display: flex;
16
}
.sidebar .nav-links li a.active{
background: #081D45;
}
.sidebar .nav-links li a:hover{
background: #081D45;
}
.sidebar .nav-links li i{
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.sidebar .nav-links .log_out{
position: absolute;
bottom: 0;
width: 100%;
}
.home-section{
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
}
.sidebar.active ~ .home-section{
left: 60px;
}
.home-section nav{
display: flex;
height: 80px;
17
background: #fff;
display: flex;
position: fixed;
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.sidebar.active ~ .home-section nav{
left: 60px;
}
.home-section nav .sidebar-button{
display: flex;
font-size: 24px;
font-weight: 500;
}
nav .sidebar-button i{
font-size: 35px;
margin-right: 10px;
}
.home-section nav .search-box{
position: relative;
height: 50px;
max-width: 550px;
width: 100%;
margin: 0 20px;
}
nav .search-box input{
height: 100%;
width: 100%;
outline: none;
background: #F5F6FA;
border: 2px solid #EFEEF1;
border-radius: 6px;
font-size: 18px;
18
padding: 0 15px;
}
nav .search-box .bx-search{
position: absolute;
height: 40px;
width: 40px;
background: #2697FF;
right: 5px;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 22px;
transition: all 0.4 ease;
}
.home-section nav .profile-details{
display: flex;
background: #F5F6FA;
border: 2px solid #EFEEF1;
border-radius: 6px;
height: 50px;
min-width: 190px;
padding: 0 15px 0 2px;
}
nav .profile-details img{
height: 40px;
width: 40px;
border-radius: 6px;
object-fit: cover;
}
nav .profile-details .admin_name{
font-size: 15px;
font-weight: 500;
color: #333;
margin: 0 10px;
}
19
nav .profile-details i{
font-size: 25px;
color: #333;
}
.home-section .home-content{
position: relative;
padding-top: 104px;
}
.home-content .overview-boxes{
display: flex;
flex-wrap: wrap;
padding: 0 20px;
margin-bottom: 26px;
}
.overview-boxes .box{
display: flex;
justify-content: center;
width: calc(100% / 4 - 15px);
background: #fff;
padding: 15px 14px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.overview-boxes .box-topic{
font-size: 20px;
font-weight: 500;
}
.home-content .box .number{
font-size: 35px;
margin-top: -6px;
font-weight: 500;
}
.home-content .box .indicator{
display: flex;
}
20
.home-content .box .indicator i{
height: 20px;
width: 20px;
background: #8FDACB;
line-height: 20px;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 20px;
margin-right: 5px;
}
.box .indicator i.down{
background: #e87d88;
}
.home-content .box .indicator .text{
font-size: 12px;
}
.home-content .box .cart{
font-size: 32px;
height: 50px;
width: 50px;
background: #cce5ff;
line-height: 50px;
text-align: center;
color: #66b0ff;
margin: -15px 0 0 6px;
}
.home-content .box .cart.two{
color: #2BD47D;
background: #C0F2D8;
}
.home-content .box .cart.three{
color: #ffc233;
background: #ffe8b3;
}
.home-content .box .cart.four{
color: #e05260;
background: #f7d4d7;
21
}
.home-content .total-order{
font-size: 20px;
font-weight: 500;
}
.home-content .sales-boxes{
display: flex;
/* padding: 0 20px; */
}
/* left box */
.home-content .sales-boxes .recent-sales{
width: 65%;
background: #fff;
padding: 20px 30px;
margin: 0 20px;
}
.home-content .sales-boxes .sales-details{
display: flex;
}
.sales-boxes .box .title{
font-size: 24px;
font-weight: 500;
/* margin-bottom: 10px; */
}
.sales-boxes .sales-details li.topic{
font-size: 20px;
font-weight: 500;
}
.sales-boxes .sales-details li{
list-style: none;
margin: 8px 0;
}
.sales-boxes .sales-details li a{
font-size: 18px;
color: #333;
22
font-size: 400;
}
.sales-boxes .box .button{
width: 100%;
display: flex;
justify-content: flex-end;
}
.sales-boxes .box .button a{
color: #fff;
background: #0A2558;
padding: 4px 12px;
font-size: 15px;
font-weight: 400;
border-radius: 4px;
}
.sales-boxes .box .button a:hover{
background: #0d3073;
}
/* Right box */
.home-content .sales-boxes .top-sales{
width: 35%;
background: #fff;
padding: 20px 30px;
margin: 0 20px 0 0;
}
.sales-boxes .top-sales li{
display: flex;
margin: 10px 0;
}
.sales-boxes .top-sales li a img{
height: 40px;
width: 40px;
object-fit: cover;
23
margin-right: 10px;
background: #333;
}
.sales-boxes .top-sales li a{
display: flex;
}
.sales-boxes .top-sales li .product,
.price{
font-size: 17px;
font-weight: 400;
color: #333;
}
/* Responsive Media Query */
@media (max-width: 1240px) {
.sidebar{
width: 60px;
}
.sidebar.active{
width: 220px;
}
.home-section{
left: 60px;
}
left: 220px;
overflow: hidden;
}
.home-section nav{
left: 60px;
}
left: 220px;
}
24
}
.home-content .sales-boxes{
flex-direction: column;
}
.home-content .sales-boxes .box{
width: 100%;
overflow-x: scroll;
}
.home-content .sales-boxes .top-sales{
margin: 0;
}
}
width: calc(100% / 2 - 15px);
}
}
nav .sidebar-button .dashboard,
nav .profile-details .admin_name,
nav .profile-details i{
display: none;
}
.home-section nav .profile-details{
height: 50px;
min-width: 40px;
}
.home-content .sales-boxes .sales-details{
width: 560px;
}
}
width: 100%;
}
.sidebar.active ~ .home-section nav .profile-details{
25
display: none;
}
}
.sidebar{
width: 0;
}
.sidebar.active{
width: 60px;
}
.home-section{
width: 100%;
left: 0;
}
left: 60px;
}
.home-section nav{
width: 100%;
left: 0;
}
left: 60px;
}
}
OUTPUT :
26
Ex.No : 3
EVENT REGISTRATION FORM
AIM :
To develop an Event Registration form.
ALGORITHM :
Step 1: Basic structure of registration form.

Step 2: Add headings to the form.
Step 3: Create a box to input the name.
Step 3: Create email and phone no input boxes.
Step 4: Create a select box in the Registration Form.
Step 5: Create a button in the HTML registration form.
SOURCE CODE :
Test.html
<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label> Firstname </label>

<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
<label>
Course :
27
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
28
</body>
</html>
Registrationcssfile.css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}
input[type=text], input[type=password], textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
}
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
29
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Student Registration Form</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
30
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Re-type Password</b></label>
<input type="password" placeholder="Retype Password" name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
</html>
OUTPUT :
31
Ex.No : 4
STICKY NAVBAR
AIM :
To develop a program to illustrate Sticky Navbar.
ALGORITHM :
 Create the structure using HTML

 Create a sticky class in CSS.
 Create a Javascript function to include a sticky class on scrolling.
 Launch the function using the addEventListener().
SOURCE CODE :
Sticky.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class='container'>
<div id="navigation-bar">
<nav>
<ul>
<li><a href="#" id="logo">LOGO</a></li>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Services</a></li>
<li><a href=#>Contact</a></li>
<a href="#" id="menu-icon"></a>
</ul>
</nav>
</div>
<div class='content'>
<p>Some text some text some text some text..</p>
32
33
</div>
</body>
</html>
Style.scss
#container { width: 100%;
}
/** HEADER */
/** NAVIGATION BAR */
nav {
overflow: hidden; background-color: #333; position: fixed;
top: 0;
width: 100%; ul {
text-align: center; list-style-type: none; list-style-type: none; margin: 0;
padding: 15px; li {
display: inline;
font-family: "Fira Sans", sans-serif; font-size: 17px;
a{
color: #f2f2f2;
text-decoration: none; padding: 14px;
&:hover {
background-color: #111;
}
34
}
}
}
}
.content {
text-align: center;
}
Go to URL https://json2csharp.com/css-tools/scss-to-css
Convert style.scss to test.css
test.css
#container {
width: 100%;
}
/** HEADER */
/** NAVIGATION BAR */
nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
nav ul {
text-align: center;
list-style-type: none;
list-style-type: none;
margin: 0;
padding: 15px;
}
nav ul li {
display: inline;
font-family: "Fira Sans", sans-serif;
font-size: 17px;
}
nav ul li a {
color: #f2f2f2;
padding: 14px;
35
}
nav ul li a:hover {
}
.content {
text-align: center;
}
OUTPUT :
36
Ex.No : 5
DEVELOPER PORTFOLIO
AIM :
To design and develop a Developer Portfolio page.
ALGORITHM :
Step One: Add HTML Skeleton. Type an HTML skeleton code, which is the
starting point for your website.
Step Two: Add Navigation Bar.
Step Three: Add Hero section.
Step Four: Add About Me section.
Step Five: Add Work Experience section.
Step Six: Add Contact section.
Step Seven: Add Footer section.
SOURCE CODE :
app.js
<!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" />

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

<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
37
sizes="32x32"
href="assets/icons/favicon-32x32.png"
/>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Jane Doe | Web Developer</title>
</head>
<body>










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

<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</body>
</html>
Portfolio.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" />
38

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

<link
rel="apple-touch-icon"
sizes="180x180"
href="apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="favicon-32x32.png"
/>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Jane Doe | Web Developer</title>
</head>
<body>

<nav>
<h1>JANE DOE</h1>
<ul class="navigation">
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>

</button>
</nav>
<p> 0024 </p>

<section class="hero" id="about">
<img
39
src="wfh_1.svg"
alt="jane-doe"
loading="lazy"
class="hero-img"
/>
<div class="bio animate__animated animate__shakeX">
<h2 class="bio-title">About Me</h2>
<p class="bio-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sed
dolorem fugit sapiente porro veniam pariatur dolore nostrum delectus
inventore tempore minus nemo, iste ullam illo laboriosam maiores
repudiandae quos!
</p>
</div>
</section>

<section class="more-about">
<h2>More About Me</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
nesciunt excepturi quos obcaecati incidunt voluptatem ipsam sunt ipsum,
autem deleniti cupiditate molestias quis unde quae totam porro dicta
iure animi inventore, veniam hic! Omnis nulla, delectus a voluptatibus
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur
nostrum dolor minus, libero delectus praesentium perferendis
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero,
consequuntur labore? Ea totam voluptas amet!
</p>
</section>

<section class="skills" id="skills">
<h2 class="skill-header">My Top Skills</h2>
<div class="skills-wrapper">
<div class="first-set animate__animated animate__pulse">
<img
src="icons8-html-5.svg"
40
alt=""
loading="lazy"
class="icon icon-card"
/>
<img
src="icons8-css3.svg"
alt=""
loading="lazy"
/>
<img
src="icons8-javascript.svg"
alt=""
loading="lazy"
/>
</div>
<div class="second-set animate__animated animate__pulse">
<img
src="icons8-bootstrap.svg"
alt=""
loading="lazy"
/>
<img
src="icons8-react-native.svg"
alt=""
loading="lazy"
/>
<img
src="icons8-git.svg"
alt=""
loading="lazy"
/>
</div>
</div>
</section>

41
<section class="projects" id="projects">
<h2 class="projects-title">Some of my Recent Projects</h2>
<div class="projects-container">
<div class="project-container project-card">
<img
src="expenseTracker.png"
alt="expense-tracker"
loading="lazy"
class="project-pic"
/>
<h3 class="project-title">Expense Tracker</h3>
<p class="project-details">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
ratione vel inventore labore commodi modi quos culpa aut saepe!
Alias!
</p>
<a href="#" target="_blank" class="project-link">Check it Out</a>
</div>
<img
src="netflixClone.png"
alt="netflic-clone"
loading="lazy"
class="project-pic"
/>
<h3 class="project-title">Netflix Clone</h3>
Alias!
</p>
</div>
<img
src="C:\Users\new\Desktop\PORTFOLIO/greenyEarth.png"
alt="greeny-earth"
loading="lazy"
class="project-pic"
/>
42
<h3 class="project-title">Greeny Earth</h3>
Alias!
</p>
</div>
</div>
</section>

<section class="contact" id="contact">
<h2>Get In Touch With Me</h2>
<div class="contact-form-container">
<div class="contact-form">
<form action="https://formspree.io/f/xyylnggw" method="POST">
<div class="form-control">
<label for="name">Name</label>
<input
type="text"
id="name"
name="sender-name"
placeholder="Enter Your Name"
class="input-field"
required
/>
</div>
<label for="email">Email</label>
<input
type="email"
id="email"
name="sender-email"
placeholder="Enter Your Email"
class="input-field"
required
/>
</div>
<label for="message">Message</label>
43
<textarea
id="message"
cols="60"
rows="10"
placeholder="Enter Your Message"
name="message"
class="input-field"
required
></textarea>
</div>
<input
type="submit"
value="Submit"
id="submit-btn"
class="submit-btn"
/>
</form>
</div>
</div>
</section>


<div class="socials">
<a href="#" target="_blank"
><img
src="icons8-twitter-circled.gif"
alt="Twitter"
loading="lazy"
class="socicon"
/></a>
><img
src="icons8-instagram.gif"
alt="Instagram"
loading="lazy"
class="socicon"
/></a>
><img
src="icons8-linkedin-circled.gif"
44
alt="Linkedin"
loading="lazy"
class="socicon"
/></a>
><img src="icons8-github.gif" alt="Github" class="socicon"
/></a>
</div>

<i class="scroll-up" id="scroll-up"
><img
src="icons8-upward-arrow.gif"
class="socicon up-arrow"
alt=""
/></i>

<footer>
<p class="copy">© Copyright 2021</p>
<p class="copy">
Built with ♡ by
<a href="https://twitter.com/koladechris" target="_blank"
>Kolade Chris (Ksound)</a
>
</p>
</footer>

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

<script
type="module"
src="ionicons.esm.js"
></script>
<script
nomodule
src="ionicons.js"
></script>
</body>
</html>
45
OUTPUT :
About page :
Skills page :
46
Projects page :
Contact page :
47
Ex.No : 6
PRICING CARD LIST
AIM :
To design and develop a Pricing card list.
ALGORITHM :
 Create the structure using HTML

 Create some basic styling using CSS
 In order to code the 3 layouts, write 3 media queries.
 Turn the card-container into a flex container and all its children items into
flex items
 The default flex-direction value is row
 flex-grow value of 1, that means they are going to grow at the same
proportion if there is enough space available.
 flex-shrink value is 0, that means that items will not shrink at all.
SOURCE CODE :
Flexbox.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Flat Pricing Card List Design - Using HTML & CSS</title>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<section class="main-container">
<div class="card-container">
<div class="pricing-card card-01">
<div class="pricing">
<div class="price">
<sup>$</sup>
<span>12</span>
48
</div>
<p>/month</p>
<span class="type">Basic</span>
</div>
<div class="card-body">
<div class="top-shape"></div>
<div class="card-content">
<ul>
<li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
<li class="disabled">Lorem Ipsum Dolor. <i class="uil uil-times-circle"></i></li>
</ul>
<button class="buy-btn">Buy Now</button>
</div>
</div>
<div class="ribbon"></div>
</div>
<div class="price">
<sup>$</sup>
<span>20</span>
</div>
<p>/month</p>
<span class="type">Pro</span>
</div>
<ul>
</ul>
</div>
49
</div>
</div>
<div class="price">
<sup>$</sup>
<span>25</span>
</div>
<p>/month</p>
<span class="type">Premium</span>
</div>
<ul>
</ul>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Style.css
/*============ Google fonts ============*/
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
:root{
/*===== Colors =====*/
--card-01-color-01: #ffb200;
--card-01-color-02: #ff9700;
50
--card-02-color-01: #96c110;
--card-02-color-02: #80ad0a;
--card-03-color-01: #64b2f2;
--card-03-color-02: #489ed9;
--card-body-bg-color: #fff;
--text-disabled-color: #b2b2b2;
--icon-disabled-color: #ff0404;
--body-bg-color: #e5f6ff;
/*===== Fonts =====*/
--poppins-font: 'Poppins', sans-serif;
--bebas-font: 'Bebas Neue', cursive;
}
*{
margin: 0;
padding: 0;
}
body{
background: var(--body-bg-color);
}
.main-container{
position: relative;
max-width: 900px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
display: flex;
}
.card-container{
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 40px;
margin: 50px 0;
}
.pricing-card{
51
position: relative;
}
.card-body{
position: relative;
width: 100%;
background: var(--card-body-bg-color);
border-radius: 0 0 10px 10px;
box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
margin-top: 60px;
}
.card-body .top-shape{
clip-path: polygon(0 0, 100% 0%, 100% 50%, 50% 75%, 0 50%);
height: 200px;
}
.card-01 .card-body .top-shape{
background: var(--card-01-color-01);
}
}
}
.card-body .top-shape:before{
content: '';
position: absolute;
clip-path: polygon(0 0, 100% 0%, 100% 25%, 50% 50%, 0 25%);
width: 100%;
height: 200px;
}
.card-01 .card-body .top-shape:before{
}
}
}
.pricing{
52
z-index: 999;
font-family: var(--bebas-font);
text-align: center;
position: absolute;
width: 100%;
}
.price{
display: flex;
margin-bottom: 3px;
}
.price span{
font-size: 9em;
line-height: 100px;
}
.price sup{
font-size: 2em;
transform: translateY(-15px);
}
.pricing p{
font-family: var(--poppins-font);
font-weight: 500;
}
.pricing .type{
font-size: 2.5em;
}
.card-body .card-content{
display: flex;
flex-direction: column;
transform: translateY(-30px);
}
.card-body .card-content ul{
width: 100%;
text-align: center;
53
padding: 0 20px;
}
.card-body .card-content ul li{
list-style: none;
font-size: 0.95em;
font-weight: 500;
display: flex;
line-height: 35px;
}
.card-body .card-content ul li i{
font-size: 1.9em;
margin-left: 15px;
}
.card-01 .card-body .card-content ul .active i{
color: var(--card-01-color-01);
}

}
}
.card-body .card-content ul .disabled{
color: var(--text-disabled-color);
}
.card-body .card-content ul .disabled i{
color: var(--icon-disabled-color);
}
.card-content .buy-btn{
font-family: var(--bebas-font);
border: none;
outline: none;
padding: 0 28px;
font-size: 1.9em;
54
cursor: pointer;
}
.card-01 .card-content .buy-btn{
background: linear-gradient(var(--card-01-color-01) 50%, var(--card-01-color-02) 50%);
}
}
}
.card-01 .card-content .buy-btn:hover{
}
}
}
.ribbon{
width: 110px;
height: 110px;
position: absolute;
bottom: -10px;
left: -10px;
display: flex;
overflow: hidden;
}
.ribbon:before{
content: 'Limited Time';
display: flex;
font-size: 0.8em;
font-weight: 600;
55
position: absolute;
width: 150%;
height: 30px;
transform: rotate(45deg) translateY(15px);
}
.card-01 .ribbon:before{
}
}
}
.ribbon:after{
z-index: -1;
content: '';
position: absolute;
width: 150%;
height: 30px;
transform: rotate(225deg) translateY(15px);
}
.card-01 .ribbon:after{
}
}
}
@media screen and (max-width: 845px){
.main-container{
max-width: 680px;
}
.pricing-card{
margin: 20px 0;
}
}
@media screen and (max-width: 575px){
56
.main-container{
max-width: 350px;
}
OUTPUT :
57
Ex.No : 7
REGISTRATION FORM AND VALIDATION USING
JAVASCRIPT
AIM :
Develop a register form and validate it using JavaScript.
ALGORITHM :
 Create a registration form in HTML that contains input fields and submit
button to submit your details.
 fill out the form with their details and submit it to the server
 before submitting the form, we need to check the validation of the form
whether the form is filled correctly or not
 Add JavaScript code for validation check. If textbox will blank, password
not match, password not in valid form and email id not valid then it will
give error message.
SOURCE CODE:
Applicationform.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Form</title>
<script src="validator.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action="confirmation.php"
method="post">
<h2>Application Form</h2>
<div class="row">
<label>Full Name</label>
<input type="text" name="name">
<div class="error" id="nameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
58
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<label>Mobile Number</label>
<input type="text" name="mobile" maxlength="10">
<div class="error" id="mobileErr"></div>
</div>
<div class="row">
<label>Country</label>
<select name="country">
<option>Select</option>
<option>Australia</option>
<option>India</option>
<option>United States</option>
<option>United Kingdom</option>
</select>
<div class="error" id="countryErr"></div>
</div>
<div class="row">
<label>Gender</label>
<div class="form-inline">
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</div>
<div class="error" id="genderErr"></div>
</div>
<div class="row">
<label>Hobbies <i>(Optional)</i></label>
<div class="form-inline">
<label><input type="checkbox" name="hobbies[]" value="sports"> Sports</label>
<label><input type="checkbox" name="hobbies[]" value="movies"> Movies</label>
<label><input type="checkbox" name="hobbies[]" value="music"> Music</label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</body>
59
</html>
Style.css
body {
font-size: 16px;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
text-align: center;
text-decoration: underline;
}
form {
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px
}
label i {
color: #999;
font-size: 80%;
}
input, select {
padding: 10px;
display: block;
width: 100%;
border-radius: 2px;
}
.row {
padding-bottom: 10px;
}
.form-inline {
60
padding: 8px 10px 4px;
border-radius: 2px;
}
.form-inline label, .form-inline input {
width: auto;
padding-right: 15px;
}
.error {
color: red;
font-size: 90%;
}
input[type="submit"] {
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #0165b6;
}
OUTPUT :
61
Ex.No : 8
‘JSONPLACEHOLDER’ API TO GET POST DATA AND
DISPLAY DATA
AIM :
Develop a website that uses the ‘jsonplaceholder’ Api.
ALGORITHM :
 JSON Placeholder is a fake REST API that is primarily used for prototyping
and testing used when you need fake data to prototype or test some fake data.
 To get JSON from the server send an HTTP GET request and pass the
"Accept: application/json" HTTP header, which will tell the server that the
client expects JSON in response
 To return a JSON response, the client needs to include the JSON data in the
body of the HTTP response message and specify the data type in the "Content-
Type: application/json" header.
SOURCE CODE :
<html>
<head>
</head>
<body>
<form id="form" method="post">
<input type="text", id="name" placeholder="Name"/></br>
<input type="text", id="body" placeholder="Body"/></br>
<input type="submit" value="Add"/>
</form>
<div>
<h3>The Following data is successfuly posted</h3>
<h4 id="title"></h4>
<h5 id="bd"></h5>
</div>
</body>
<script>
var form=document.getElementById('form')
form.addEventListener('submit', function(e){
e.preventDefault()
var name=document.getElementById('name').value
var body=document.getElementById('body').value
fetch('https://jsonplaceholder.typicode.com/posts', {
62
method: 'POST',
body: JSON.stringify({
title:name,
body:body,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
}
})
.then(function(response){
return response.json()})
.then(function(data)
{console.log(data)
title=document.getElementById("title")
body=document.getElementById("bd")
title.innerHTML = data.title
body.innerHTML = data.body
}).catch(error => console.error('Error:', error));
});
</script>
</html>
OUTPUT
63

WD Lab Manual

Uploaded by

Copyright:

Available Formats

WD Lab Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WD Lab Manual

Uploaded by

Copyright:

Available Formats

C. S. I.

PRACTICAL LAB MANUAL

SUBJECT : WEB DESIGN

2 ADMIN DASHBOARD FOR AN E-COMMERCE

6 PRICING CARD LIST

REGISTRATION FORM AND VALIDATION

‘JSONPLACEHOLDER’ API TO GET POST DATA

1. Prepare the content of the page

To develop an Admin Dashboard for an E-Commerce website.

 Create a project folder and inside it create three files “index.html“(for

To develop an Event Registration form.

Step 1: Basic structure of registration form.

<label> Firstname </label>

 Create the structure using HTML

To design and develop a Developer Portfolio page.

To design and develop a Pricing card list.

 Create the structure using HTML

.card-02 .card-body .card-content ul .active i{

Develop a register form and validate it using JavaScript.

Develop a website that uses the ‘jsonplaceholder’ Api.

You might also like