Scribd
Upload
21 views

Web Design Record

The document provides a bonafide certificate for a student's web design subject work. It includes the student name, registration number, branch, semester and is signed by the faculty in-charge and head of the department. The internal and external examiners are also included.

Uploaded by

1yearmca
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
21 views

Web Design Record

The document provides a bonafide certificate for a student's web design subject work. It includes the student name, registration number, branch, semester and is signed by the faculty in-charge and head of the department. The internal and external examiners are also included.

Uploaded by

1yearmca
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 88

VIVEKANANDHA

INSTITUTE OF INFORMATION AND MANAGEMENT STUDIES


ELAYAMAPALAYAM TIRUCHENGODE-637 205
NAMAKKAL

Name :………………………………………………………..

Register No. :………………………………………………………..

Branch :………………………………………………………..

Semester :………………………………………………………..

Certified that this Bonafide Record of work done by the above


student for the Subject Code / Name MC4023 WEB DESIGN

Faculty In-charge Head of the Department

Submitted for the Anna University Practical Examination held on


……………. at Vivekanandha Institute of Information and Management
Studies

Internal Examiner External Examiner


S.No STAFF
DATE DESCRIPTIONS PAGE
. SIGN
01 LANDING PAGE

02 BOX MODEL

03 EVENT REGISTRATION FORM

STICKY NAVBAR USING FLOATS AND


04
SASS

05 DEVELOPER PORTFOLIO PAGE

PRICING CARD LIST USING PLAIN CSS


06
AND FLEXBOX

07 REGISTER FORM AND VALIDATION


DEVELOP A WEBSITE THAT USES
08 “JSONPLACEHOLDER” API TO GET
POSTS DATA
09 TODO CRUD OPERATION
REGISTERS AND AUTHENTICATES
10 USER SESSION AND STORES USER
DATA

INDEX

EXP No.: 01
DATE: LANDING PAGE
AIM:

To Create a Landing Page using HTML, CSS, JAVASCRIPT.

ALGORITHM:

1. Define the document type and languages. Create a head section with meta
tags for character set, view port and style sheet link.

2. Include the CSS file “index.css”. Set the title of the page to “Landing
Page”.

3. Create the body of the document. Create a Navigation bar with a heading
and menu button.

4. Include a Navigation menu with links for home, about and signup.
Implement a Side Navigation bar for Responsiveness.

5. Use flex box to align content. Create an “about” section with boxes
containing course information.

6. Add a button for signing up. Provide contact information and additional
details.

7. Implement responsive design for smaller screens. Style the content


section, about section and contact form.

8. Write JavaScript functions to open and close the side navigation bar.
Toggle with of the side navigation bar when the menu button is clicked.

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" href="index.css">

<title>Landing Page</title>

</head>

<body>

<nav>

<div class="heading">Landing Page</div>

<span class="sideMenuButton"

onclick="openNavbar()">

</span>

<div class="navbar">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Sign Up</a></li>

</ul>

</div>
</nav>

<!-- Side navigation bar for

responsive website -->

<div class="sideNavigationBar" id="sideNavigationBar">

<a href="#" class="closeButton"

onclick="closeNavbar()">

</a>

<a href="#">Home</a>

<a href="#">About</a>

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

</div>

<!-- Content -->

<div class="line" id="Home">

<div class="side1">

<h1>VIIMS INSTITUTIONS</h1>

<button>

<a href= "http://viims.ac.in/">

Explore More

</a>

</button>

</div>

<div class="side2">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/
HTML-Tutorial.png"

width="500">

</div>

</div>

<section class="about" id="My Projects">

<div class="content">

<div class="title">

<span><h2>Courses</h2></span>

</div>

<div class="boxes">

<div class="box">

<div class="topic">

<a href="" target="_blank">

<b>DSA </b>

</a>

</div>

<p>

The term DSA stands for Data

Structures and Algorithms. As

the name itself suggests, it


is a combination of two

separate yet interrelated

topics.

</p>

</div>

<div class="box">

<div class="topic">

<a href="" target="_blank">

<b>HTML</b>

</a>

</div>

<p>
HTML stands for HyperText Markup Language. It is used
to design web pages using the markup language.
</p>

</div>

<div class="box">

<div class="topic">

<a href="" target="_blank">

<b>Javascript</b>

</a>

</div>
<p>

JavaScript (JS) is the most

popular lightweight, interpreted

compiled programming language.

</p>

</div>

</div>

</div>

</section>

<section class="contact" id="contact">

<div class="content">

<div class="title"><span>Sign Up</span></div>

<div class="contactMenu">

<div class="input1">

<div class="label1">Your Name</div>

<div class="input2">

<input type="text"

placeholder="Enter your Name here">

</div>

<div class="label1">

<label>Your Email</label>

</div>
<div class="input2">

<input type="text"

placeholder="Enter your Email here">

</div>

<div class="label1">

<label>Your Password</label>

</div>

<div class="input2">

<input type="text"

placeholder="Enter your Password here">

</div>

<div class="button">

<button>Sign Up</button>

</div>

</div>

<div class="input3">

<div class="rightside1">

<div class="title1">

<span>

Contact Us

</span>

</div>
<div class="content1">

A-143, 9th Floor, Sovereign

Corporate Tower, Sector-136,

Noida, Uttar Pradesh - 201305

</div>

<div class="title1">

<span>More Information</span>

</div>

<div class="content1">

Greetings to all the Geeks out there! We welcome you to the


platform where we consistently strive to offer the best of education.

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Footer section -->

<footer>

<div class="footer">

<span>

Created By
<a href="http://viims.ac.in/"

target="_blank">

Viims Student

</a>

</span>

</div>

</footer>

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

</body>

</html>

CSS File: index.css

*{

padding: 0;

margin: 0;

box-sizing: border-box;

body {

background-color: white;

color: black;

font-family: "Fira Sans", sans-serif;

background-color: white;
}

nav {

width: 100%;

height: 80px;

display: flex;

justify-content: space-between;

padding: 20px 5%;

background-color:cornflowerblue;

nav .heading {

font-size: 30px;

font-weight: 700;

color: white;

nav ul {

display: flex;

list-style: none;

nav ul li {

padding: 8px 15px;

border-radius: 10px;

transition: 0.2s ease-in;


}nav ul li a {

color: black;

font-size: 20px;

font-weight: 500;

text-decoration: none;

color: white;

nav ul li:hover {

background-color: blue;

nav ul li a:hover {

color: white;

nav .sideMenuButton {

font-size: 30px;

font-weight: bolder;

cursor: pointer;

display: none;

/* responsive navbar css */

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

nav .sideMenuButton {
display: flex;

nav .navbar {

display: none;

.sideNavigationBar {

display: block !important;

.sideNavigationBar {

height: 100%;

position: fixed;

top: 0;

right: 0%;

background-color:cornflowerblue;

overflow-x: hidden;

transition: 0.3s ease-in;

padding-top: 60px;

display: none;

.sideNavigationBar a {
padding: 8px 8px 8px 40px;

display: block;

font-size: 25px;

font-weight: 500;

color: #d1d1d1;

transition: 0.3s;

text-decoration: none;

.sideNavigationBar a button {

padding: 10px 20px;

border-radius: 10px;

color: cornflowerblue;

font-size: 16px;

border-style: none;

font-weight: 700;

.sideNavigationBar a:hover {

color: white;

.sideNavigationBar .closeButton {

position: absolute;

top: 10px;
right: 25px;

font-size: 20px;

margin-left: 50px;

.line {

display: flex;

justify-content: space-between;

Align-items: center;

margin: 2% 5%;

.line .side1 {

padding-right: 50px;

.side1 h1 {

font-size: 60px;

margin-bottom: 10px;

color: blue;

.side1 button {

width: 200px;

padding: 12px 20px;

border-radius: 20px;
border-style: none;

color: black;

font-size: 17px;

font-weight: 600;

a{

text-decoration: none;

color: black;

/* Header content responsive */

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

.side2 img {

width: 350px;

.side1 h1 {

font-size: 40px;

.side1 p {

font-size: 17px;

.line {

margin-top: 80px;
}

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

.side1 h1 {

font-size: 35px;

.line {

flex-direction: column;

.line .side1 {

padding: 30px;

/* section */

section .topic a {

font-size: 25px;

font-weight: 500;

margin-bottom: 10px;

.about .boxes {

display: flex;

flex-wrap: wrap;
justify-content: space-between;

.about .boxes .box {

margin: 10px 20px;

max-width: calc(100% / 3 - 50px);

text-align: center;

border-radius: 12px;

padding: 30px 10px;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);

cursor: default;

/* Contact Page */

.contact {

padding: 20px;

.contact .content {

margin: 0 auto;

padding: 30px 0;

.content .title {

width: 80%;

text-align: center;
font-weight: bolder;

font-size: 40px;

.title {

margin-bottom: 30px;

margin-left: 80px;

.contactMenu {

display: flex;

justify-content: space-evenly;

.input2 {

margin-top: 10;

.label1 {

font-size: 18px;

margin-top: 8px;

margin-bottom: 8px;

font-weight: bolder;

.contactMenu .input1 input {

border-radius: 13px;
padding: 6px;

.input2 input {

border-color: rgb(252, 244, 244);

width: 400px;

.button {

margin-top: 12px;

margin-left: 5px;

.button button {

width: 162px;

height: 35px;

border-radius: 12px;

border-color: transparent;

.button button:hover {

background-color: blue;

button {

width: 162px;

height: 35px;
border-radius: 12px;

border-color: transparent;

button:hover {

background-color: cornflowerblue;

.rightside1 {

display: flex;

flex-direction: column;

margin-left: 300px;

.title1 {

font-size: 18px;

margin-top: 8px;

margin-bottom: 5px;

font-weight: bolder;

.content1 {

width: 450px;

margin-top: 2px;

color: grey;

}
/* Footer */

footer {

background: var(--primary-color);

padding: 15px 0;

text-align: center;

font-family: "Poppins", sans-serif;

footer .footer span {

font-size: 17px;

font-weight: 400;

color: var(--white-color);

footer .footer span a {

font-weight: 500;

color: var(--white-color);

footer .footer span a:hover {

text-decoration: underline;

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

.contactMenu {

flex-direction: column;
align-items: center;

.rightside1 {

display: flex;

flex-direction: column;

margin-left: 0px;

.content1 {

width: 100%;

margin-top: 2px;

color: grey;

.side2 img {

width: 95%;

height: 90%;

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

.side2 img {

width: 100%;

section .topic a {
font-size: 20px;

section .topic p {

font-size: 5px;

.about .boxes {

display: flex;

flex-direction: column;

align-items: center; }

.about .boxes .box {

max-width: 70%; }

JavaScript File: main.js

function openNavbar() {

document.getElementById("sideNavigationBar")

.style.width = "50%"; }

function closeNavbar() {

document.getElementById("sideNavigationBar")

.style.width = "0%"; }

OUTPUT:
RESULT:

Thus the above program has been verified and executed successfully.
EXP No.: 02
BOX MODEL
DATE:

AIM:
To develop a box model using HTML, CSS.

ALGORITHMS:

1. Imagine creating a digital page to showcase content.

2. This box has some space around it (50 pixels margin) and a colorful

border (50 pixels thick and purple).

3. The first section has big, bold black text, a purple background, and

some space from the top.

4. Write a main heading on your page saying "CSS Box-Model

Property."

5. Assemble all these elements on your digital page.

6. Open your webpage, and you'll see a neat title and a stylish box .
SOURCE CODE:

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main
{
font-size:30px;
font-weight:bold;
Text-align:center;
}
.gfg
{
margin-left:50px;
border:50px solid Purple;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.gfg1
{
font-size:40px;
font-weight:bold;
color:black;
margin-top:60px;
background-color:purple;
}
.gfg2
{
font-size:20px;
font-weight:bold;
background-color:white;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "gfg">
<div class = "gfg1">Welcome!!</div>
<div class = "gfg2">Web Design World</div>
</div>
</body>
</html>

OUTPUT:
RESULT:

Thus the above program has been executed and verified successfully.
EXP No.: 03
EVENT REGISTRATION FORM
DATE:

AIM:
To design and develop an event registration form using HTML and CSS.

ALGORITHMS:

1. Design a web form using HTML to collect user information.


2. Include input fields for name, email, phone, number of attendees,
comments, and a submit button.
3. Style the form elements using CSS to make the form visually
appealing and user-friendly.

4. Create an HTML file (index.html) that defines the structure of the


form.
Include input fields (text, email, tel, number, textarea) and a submit
button within a <form> tag.
5. Style the form elements using CSS to make the form visually
appealing and user-friendly.
6. Use JavaScript to perform client-side validation.
7. Store the data in a database or perform other required actions.

SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.form-group {
margin-bottom: 15px;
}

label {
display: block;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
</style>
<head>
<meta charset="UTF-8">
<title>Event Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Event Registration</h1>
<form id="registrationForm">
<div class="form-group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="attendees">Number of Attendees:</label>
<input type="number" id="attendees" name="attendees" required>
</div>
<div class="form-group">
<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>
</div>
<button type="submit">Register</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
OUTPUT:

RESULT:
Thus the above program has been executed and verified successfully.
EXP No.: 04
STICKY NAVBAR USING FLOATS AND SASS
DATE:

AIM:
To design and develop a sticky NAVBAR using floats and SASS.

ALGORITHMS:
1. Begin with <!DOCTYPE html> and <html lang="en">.

2. Set character encoding (UTF-8) and define the viewport for


responsive design.

3. Link the external stylesheet styles.css. Provide a title for the


webpage within the <head> section.

4. Create a <header> element. Inside the header, place a <nav>


with a class of "navbar".

5. Include a <div> with the class "logo" for displaying the logo.
Inside <nav>, include a <ul> with a class of "nav-list"
containing several list items (<li>).

6. Add space below the fixed header for each section.

7. Give the sections some padding and a light background color to


make them distinct.

8. Open the HTML file in a web browser.


SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}

.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}

#navbar {
overflow: hidden;
background-color: #333;
}

#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

#navbar a:hover {
background-color: #ddd;
color: black;
}

#navbar a.active {
background-color: #04AA6D;
color: white;
}

.content {
padding: 16px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
}

.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<div id="navbar">
<a class="active" href="javascript:void(0)">Home</a>
<a href="javascript:void(0)">News</a>
<a href="javascript:void(0)">Contact</a>
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.</p>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>

</body>
</html>
OUTPUT:

RESULT:
Thus the above program has been verified and executed successfully.
EXP No.: 05
DEVELOPER PORTFOLIO PAGE
DATE:

AIM:
To design and develop a developer portfolio page.

ALGORITHMS:

1. Declare the document type as HTML5 (<!DOCTYPE html>).

2. Open the HTML document (<html lang="en">).

3. Set the character set and viewport meta tags in the head.

4. Set global styling for the body, including font-family, margin,


zpadding, box-sizing, and background color.

5. Create a flex container for the main section, setting flex-wrap and
justify-content properties.

6. Style the profile and projects sections within the flex container
with specific width, margin, padding, background color, border-
radius, and box-shadow.

7. Include a footer with a paragraph containing copyright information.

8. Close all open HTML tags (</html>).


SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Developer Portfolio</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 2em;
}
.profile {
flex: 1;
max-width: 300px;
margin: 1em;
padding: 1em;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.projects {
flex: 2;
margin: 1em;
padding: 1em;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 1em;
background-color: #333;
color: #fff;}
@media (max-width: 768px) {
section {
flex-direction: column; }
}
</style>
</head>
<body>
<header>
<h1>Your Name</h1>
<p>Web Developer</p>
</header>
<section>
<div class="profile">
<h2>Profile</h2>
<p>Add your bio and other relevant information here.</p>
</div>
<div class="projects">
<h2>Projects</h2>
<!-- Add your project details and links here -->
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</div>
</section>
<footer>
<p>&copy; 2023 Your Developer Portfolio. All rights reserved.</p>
</footer>
</body>
</html>
OUTPUT:
RESULT:
Thus the above program has been executed and verified successfully.

EXP No.: 06
PRICING CARD LIST USING PLAIN CSS AND
DATE: FLEXBOX
AIM:
To design and develop pricing card list using plain css and flexbox.

ALGORITHMS:

1. The HTML file (index.html) contains a basic structure with a


<head> section for meta tags and links to external stylesheets, and
a <body> section where the pricing cards are defined within a
<section>.
2. The :root section defines CSS variables for colors and fonts.
3. Each pricing card (pricing-card) consists of:
4. A pricing section (pricing) for displaying the price, type, and
limited time ribbon.
5. A card body (card-body) with a top shape and card content.
6. The top shape is styled differently for each card using the card -
01,card-02 and card-03 classes.
7. The card content includes an unordered list (ul) with list items (li)
representing different course features. Each list item can be active
or disabled, and the icon changes accordingly (checkmark or times
symbol).
8. Fonts are imported from Google Fonts and assigned to variables
like --poppins-font and --bebas-font. Include input fields (text,
email, tel, number, textarea) and a submit button within a <form>
tag.
SOURCE CODE:

INDEX.HTML
<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Flat Pricing Card List Design - Using HTML & CSS</title>

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

<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>

</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">PYTHON PROGRAMMING <i class="uil uil-


check-circle"></i></li>

<li class="active">DATA STRUCTURES <i class="uil uil-check-


circle"></i></li>

<li class="disabled">SOFTWARE ENGINEERING <i class="uil uil-


times-circle"></i></li>

<li class="disabled">RESEARCH METHODOLOGY <i class="uil


uil-times-circle"></i></li>

<li class="disabled">STATISTICS <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="pricing-card card-02">

<div class="pricing">

<div class="price">
<sup>$</sup>

<span>20</span>

</div>

<p>/month</p>

<span class="type">Pro</span>

</div>

<div class="card-body">

<div class="top-shape"></div>

<div class="card-content">

<ul>

<li class="active">ADBT <i class="uil uil-check-circle"></i></li>

<li class="active">FSWD <i class="uil uil-check-circle"></i></li>

<li class="active">CLOUD COMPUTING <i class="uil uil-check-


circle"></i></li>

<li class="disabled">SPM <i class="uil uil-times-circle"></i></li>

<li class="disabled">MAD <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="pricing-card card-03">

<div class="pricing">

<div class="price">

<sup>$</sup>

<span>25</span>

</div>

<p>/month</p>

<span class="type">Premium</span>

</div>

<div class="card-body">

<div class="top-shape"></div>

<div class="card-content">

<ul>

<li class="active">WEB DESIGN <i class="uil


uil-check-circle"></i></li>

<li class="active">DATA MINING <i class="uil


uil-check-circle"></i></li>

<li class="active">MACHINE LEARNING <i class="uil uil-check-


circle"></i></li>

<li class="active">IOT <i class="uil uil-check-circle"></i></li>

<li class="active">DIGITAL MARKETING <i class="uil uil-check-


circle"></i></li>

</ul>
<button class="buy-btn">Buy Now</button>

</div>

</div>

<div class="ribbon"></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;

--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;

box-sizing: border-box;

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;

justify-content: center;

align-items: center;

.card-container{

display: grid;

width: 100%;

grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));

gap: 40px;

margin: 50px 0;

.pricing-card{

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-02 .card-body .top-shape{

background: var(--card-02-color-01);

.card-03 .card-body .top-shape{

background: var(--card-03-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{

background: var(--card-01-color-02);

.card-02 .card-body .top-shape:before{

background: var(--card-02-color-02);

.card-03 .card-body .top-shape:before{

background: var(--card-03-color-02);

.pricing{

z-index: 999;

font-family: var(--bebas-font);

text-align: center;

position: absolute;

width: 100%;

.price{

display: flex;

justify-content: center;
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;

margin-bottom: 10px;

.pricing .type{

text-transform: uppercase;

font-size: 2.5em;

.card-body .card-content{

display: flex;

justify-content: center;
align-items: center;

flex-direction: column;

transform: translateY(-30px);

.card-body .card-content ul{

width: 100%;

font-family: var(--poppins-font);

text-align: center;

margin-bottom: 20px;

padding: 0 20px;

.card-body .card-content ul li{

list-style: none;

font-size: 0.95em;

font-weight: 500;

display: flex;

justify-content: center;

align-items: center;

line-height: 35px;

white-space: nowrap;

.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-02 .card-body .card-content ul .active i{

color: var(--card-02-color-01);

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

color: var(--card-03-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;

border-radius: 15px;

text-transform: uppercase;

font-size: 1.9em;

cursor: pointer;

margin-bottom: 40px;

.card-01 .card-content .buy-btn{

background: linear-gradient(var(--card-01-color-01) 50%, var(--card-01-color-


02) 50%);

.card-02 .card-content .buy-btn{

background: linear-gradient(var(--card-02-color-01) 50%, var(--card-02-color-


02) 50%);

.card-03 .card-content .buy-btn{

background: linear-gradient(var(--card-03-color-01) 50%, var(--card-03-color-


02) 50%);

.card-01 .card-content .buy-btn:hover{

background: linear-gradient(var(--card-01-color-02) 50%, var(--card-01-color-


01) 50%);

}
.card-02 .card-content .buy-btn:hover{

background: linear-gradient(var(--card-02-color-02) 50%, var(--card-02-color-


01) 50%);

.card-03 .card-content .buy-btn:hover{

background: linear-gradient(var(--card-03-color-02) 50%, var(--card-03-color-


01) 50%);

.ribbon{

width: 110px;

height: 110px;

position: absolute;

bottom: -10px;

left: -10px;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

.ribbon:before{

content: 'Limited Time';

display: flex;
justify-content: center;

align-items: center;

font-family: var(--poppins-font);

font-size: 0.8em;

font-weight: 600;

position: absolute;

width: 150%;

height: 30px;

transform: rotate(45deg) translateY(15px);

.card-01 .ribbon:before{

background: var(--card-01-color-01);

.card-02 .ribbon:before{

background: var(--card-02-color-01);

.card-03 .ribbon:before{

background: var(--card-03-color-01);

.ribbon:after{

z-index: -1;
content: '';

position: absolute;

width: 150%;

height: 30px;

transform: rotate(225deg) translateY(15px);

.card-01 .ribbon:after{

background: var(--card-01-color-02);

.card-02 .ribbon:after{

background: var(--card-02-color-02);

.card-03 .ribbon:after{

background: var(--card-03-color-02);

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

.main-container{

max-width: 680px;

.pricing-card{

margin: 20px 0;
}

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

.main-container{

max-width: 350px;

OUTPUT:
RESULT:
Thus the above program has been executed and verified successfully.

EXP No.: 7
REGISTER FORM AND VALIDATION
DATE:
AIM:
To develop a register form and validate it using javascript and
design the forms using CSS3 and display error messages in the
HTML page.

ALGORITHMS:

1. Design a web page with a form that includes fields for username,
email, and password.
2. Use CSS to style the form, making it visually appealing and user-
friendly.
3. Write JavaScript code to validate the user inputs before submitting the
form.
4. Check if the username has at least 3 characters. Validate the email
using a simple regex pattern for a valid email format.
5. Ensure the password has at least 6 characters.
6. If any of the validation checks fail, display an error message next to
the respective input field.
7. If all inputs are valid, allow the user to submit the form.
8. Save the HTML, CSS, and JavaScript code in separate files.
9. Open the HTML file in a web browser to see and interact with the
registration form.

SOURCE CODE:

INDEX.HTML
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>Registration Form</title>

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

</head>

<body>

<div class="container">

<form id="registrationForm" onsubmit="return validateForm()">

<h2>Registration Form</h2>

<label for="username">Username:</label>

<input type="text" id="username" name="username"


placeholder="Enter your username" required>

<div id="usernameError" class="error"></div>

<label for="email">Email:</label>

<input type="email" id="email" name="email"


placeholder="Enter your email" required>

<div id="emailError" class="error"></div>

<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password" required>

<div id="passwordError" class="error"></div>

<button type="submit">Register</button>

</form>

</div>

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

</body>

</html>

STYLES.CSS

body {

font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

.container {

max-width: 400px;

margin: 50px auto;

background-color: #fff;

padding: 20px;

border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

form {

display: flex;

flex-direction: column;

label {

margin-bottom: 5px;

input {

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 4px;

button {

padding: 10px;

background-color: #4caf50;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;
}

.error {

color: #ff0000;

margin-bottom: 10px;

SCRIPT.JS

function validateForm() {

var username = document.getElementById('username').value;

var email = document.getElementById('email').value;

var password = document.getElementById('password').value;

// Reset error messages

document.getElementById('usernameError').innerHTML = '';

document.getElementById('emailError').innerHTML = '';

document.getElementById('passwordError').innerHTML = '';

var isValid = true;

// Validate username

if (username.length < 3) {

document.getElementById('usernameError').innerHTML =
'Username must be at least 3 characters';

isValid = false;

// Validate email
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

document.getElementById('emailError').innerHTML = 'Enter a valid


email address';

isValid = false;

// Validate password

if (password.length < 6) {

document.getElementById('passwordError').innerHTML =
'Password must be at least 6 characters';

isValid = false;

return isValid;

OUTPUT:
RESULT:

Thus the above program has been executed successfully.

EXP No.: 8 DEVELOP A WEBSITE THAT USES


“JSONPLACEHOLDER” API TO GET
DATE:
POSTS DATA
AIM:
To design and develop a website that uses ”jsonplaceholder” Api to get
posts data and display in the form of a card.

ALGORITHMS:
1. Create a webpage with a space to show data. Include styles to make
it look nice.Connect a script to make it interactive.

2. Make a container that organizes content neatly. Design cards to


display data with a clean look.

3. Write a function (fetchData) to get data from an online place


(API). If something goes wrong while getting data, show an error
message.

4. Write another function (renderData) to show the fetched data on


the webpage. For each piece of data, create a card. Each card has a
title and a body. Put the cards in the container on the webpage.

5. When someone opens the webpage, call the function to get and
show the data.

6. If everything works fine, they'll see nicely organized information


cards.

SOURCE CODE:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Sample API Data</title>
<linkrel="stylesheet"href="styles.css">
</head>
<body>
<divclass="container">
<!-- Data will be rendered here -->
</div>
<scriptsrc="script.js"></script>
</body>
</html>

STYLES.CSS

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
width: 300px;
box-shadow: 0px4px6pxrgba(0, 0, 0, 0.1);
background-color: #fff;
}
.cardh2 {
font-size: 20px;
margin: 0;
}
.cardp {
margin: 10px0;
}

SCRIPT.JS

// Function to fetch data from the API


asyncfunctionfetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = awaitresponse.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Function to render data in cards

asyncfunctionrenderData() {
const container = document.querySelector('.container');
const data = awaitfetchData();

if (!data) {
return;
}
data.forEach(item => {
const card = document.createElement('div');
card.classList.add('card');
const title = document.createElement('h2');
title.textContent = item.title;
const body = document.createElement('p');
body.textContent = item.body;
card.appendChild(title);
card.appendChild(body);
container.appendChild(card);
});
}
// Call the renderData function to display data
renderData();

OUTPUT:
RESULT:

Thus the above program has been executed and verified successfully.
EXP No.: 9
TODO CRUD OPERATION
DATE:

AIM:
To develop a php server that Creates,Reads,Updates and Deletes TODO
and save them in MySql database.

ALGORITHM:
1. The HTML file sets up a basic webpage structure with an input field
to add tasks, a button to add tasks, and an unordered list to display
tasks.

2. The CSS file adds a bit of styling to make the Todo List look neat
and organized.

3. When the "Add Task" button is clicked, the addTask() function is


called.

4. The function checks if the input field is not empty. If not empty, it
creates a new task item in the list with the input value.

5. Clicking on a task toggles its completion status, visually marking it


with a line-through style.

6. Type a task in the input field. Click the "Add Task" button.

7. Click on a task in the list to mark it as completed or undo


completion.

8. Each task in the list has a click event (li.onclick).


SOURCE CODE:
<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Simple Todo List</title>

<link rel=”stylesheet” href=”todo.css”>

</head>

<body>

<input type=”text”id=”taskInput”placeholder=”Add a new task”>

<button onclick=”addTask()”>Add Task</button>

<ul id=:taskList”></ul>

<script src=”todo.js”></script>

</body>

</html>

Todo.css

body {

font-family:’Arial’,sans-serif;

background: #f5f5f5;

margin: 0;

padding: 20px;
box-sizing: border-box;

display: flex;

flex-direction: column;

align-items: center;

input, button {

margin-bottom: 10px;

padding: 8px;

box-sizing: border-box;

button {

background: #4CAF50;

color: #fff;

border: none;

cursor: pointer;

/* Add this style to strike through completed tasks */

.completed {

text-decoration: line-through;

Todo.js
function addTask() {

const input = document.getElementById(‘taskInput’);

const taskList = document.getElementById(‘taskList’);

if (input.value.trim() !==”) {

const li = document.createElement(‘li’);

li.textContent = input.value;

li.onclick = function () {

li.classList.toggle(‘completed’);

};

taskList.appendChild(li);

input.value = “;

OUTPUT:
RESULT:

Thus the above program has been executed and verified successfully.

EXP No.: 10
DATE: REGISTERS AND AUTHENTICATES USER SESSION
AND STORES USER DATA
AIM:
To design and develop a php server that registers and authentications user
session and stores user data in mysql databases.

ALGORITHMS:

1. Start the MySQL by clicking on the Start button.

2. Create all the files needed for login.

3. Create login table in the database using phpMyAdmin in XAMPP.

4. index.html - This file is created for the GUI view of the login page and

empty field validation.

5. style.css - This file is created for the attractive view of the login form.

6. connection.php - Connection file contains the connection code for

database connectivity.

7. authentication.php - This file validates the form data with the database

which is submitted by the user.

SOURCE CODE:
index.html

<html>
<head>
<title>PHP login system</title>
// insert style.css file inside index.html
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<div id = "frm">
<h1>Login</h1>
<form name="f1" action = "authentication.php" onsubmit = "return validation
()" method = "POST">
<p>
<label> UserName: </label>
<input type = "text" id ="user" name = "user" />
</p>
<p>
<label> Password: </label>
<input type = "password" id ="pass" name = "pass" />
</p>
<p>
<input type = "submit" id = "btn" value = "Login" />
</p>
</form>
</div>
// validation for empty field
<script>
function validation()
{
var id=document.f1.user.value;
var ps=document.f1.pass.value;
if(id.length=="" && ps.length=="") {
alert("User Name and Password fields are empty");
return false;
}
else
{
if(id.length=="") {
alert("User Name is empty");
return false;
}
if (ps.length=="") {
alert("Password field is empty");
return false;
}
}
}
</script>
</body>
</html>

style.css

body{
background: #eee;
}

#frm{
border: solid gray 1px;
width:25%;
border-radius: 2px;
margin: 120px auto;
background: white;
padding: 50px;
}

#btn{
color: #fff;
background: #337ab7;
padding: 7px;
margin-left: 70%;
}

Database and Table Creation

Connection.php

<?php
$host = "localhost";
$user = "root";
$password = '';
$db_name = "javatpoint";

$con = mysqli_connect($host, $user, $password, $db_name);


if(mysqli_connect_errno()) {
die("Failed to connect with MySQL: ". mysqli_connect_error());
}
?>

Authentication.php

<?php
include('connection.php');
$username = $_POST['user'];
$password = $_POST['pass'];

//to prevent from mysqli injection


$username = stripcslashes($username);
$password = stripcslashes($password);
$username = mysqli_real_escape_string($con, $username);
$password = mysqli_real_escape_string($con, $password);

$sql = "select *from login where username = '$username' and password = '$pa
ssword'";
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);
$count = mysqli_num_rows($result);

if($count == 1){
echo "<h1><center> Login successful </center></h1>";
}
else{
echo "<h1> Login failed. Invalid username or password.</h1>";
}
?>

OUTPUT:
 we have inserted an incorrect username, so the user is unable to log in,
and it will give the login failed error.
RESULT:
Thus the program has been executed and verified successfully.

You might also like