Output
Output
Output
AFTER CLICKING
LAB – 8
WAP for Form Validation using HTML,CSS and JavaScript.
HTML CODE
<html>
<head>
<title>JavaScript Form Validation - Checking Non Empty</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #1BB295;">
<div class="container">
<form action="#" name="form1" onsubmit="required()">
<ul>
<li><h2>Input Your Name and Submit</h2></li>
<li> <input type="text" name="text1" placeholder="Enter your Name"></li>
<li class="rf">*Required Field</li>
<li><input type="submit" name="submit" class="submit" value="Submit"></li>
</ul> </form> </div> </body> </html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style-type: none;
}
.rf{
color: #BB0000;
}
form{
background-color: #fff;
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}
ul li{
margin: 5px 10px;
}
.container h2{
margin-top: 40px;
margin-bottom: 10px;
}
.container{
margin-top: 100px;
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 60px;
}
form input{
height: 40px;
padding: 10px;
width: 100%;
font-size: 15px;
outline: none;
background: #fff;
border-radius: 3px;
border: 1px solid #bfbfbf;
}
.submit{
margin-bottom: 8px;
color: white;
background-color: #1BB295;
}
JS
<script>
function required(){
var empt =document.forms["form1"]["text1"].value;
if(empt==""){
alert("Please input value in the field");
return false;
}
else{
alert("Value is accepted");
return true;
}}
</script>
OUTPUT
Form Submitted Successfully
</tr>
<tr>
<th ><pre> </pre></th>
<th><pre> </pre></th>
<th>9-10AM</th>
<th>10-11AM</th>
<th>11-12AM</th>
<th>1-2PM</th>
<th>2-3PM</th>
<th>3-4PM</th>
<th>4-5PM</th>
<th>5-6PM</th>
<th>6-7PM</th>
<th>7-8PM</th>
<th>8-9PM</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Work</td>
<td>Monday</td>
<td colspan="3">Development Meeting
</td>
<td><pre> </pre></td>
<td colspan="3">Client Meeting</td>
<td>Commute</td>
<td colspan="3">Free</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="3">in Office</td>
<td><pre> </pre></td>
<td colspan="7">In Office</td>
</tr>
<tr>
<td rowspan="2">Lecture</td>
<td>Wednesday</td>
<td colspan="3">CSC 2005</td>
<td><pre> </pre></td>
<td colspan="7">Prepration</td>
</tr>
<tr>
<td>Thursday</td>
<td colspan="3">MAM 2000</td>
<td><pre> </pre></td>
<td colspan="3">Tutorials for MAM 2000</td>
<td colspan="4">Free</td>
</tr>
<tr>
<td>Research</td>
<td>Friday</td>
<td colspan="3">Research</td>
<td> <pre> </pre></td>
<td colspan="7">Research</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT
LAB – 2
Make CV using HTML, CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Resume website html css</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="img-area">
<img src="PP.png" alt="">
</div>
<h1>Satyam Pandey</h1>
<h3>Full-Stack Web Developer</h3>
</div>
<div class="main">
<div class="left">
<h2>Personal Information</h2>
<p><strong>Name:</strong>Satyam Pandey </p>
<p><strong>Age:</strong> 21</p>
<p><strong>Email:</strong> pandeysaa91@gmailc.com</p>
<p><strong>Phone:</strong> 9120721854</p>
<h2>Skills</h2>
<h2>Education</h2>
<h3>10<sup>th</sup> (High School)</h3>
<p>UP Board,2016-2018</p>
<h3>12<sup>th</sup> (Intermediate)</h3>
<p>UP Board,2018-2020</p>
<h3>B.Tech in Computer Science</h3>
<p>AKTU, 2021-2025</p> <br>
</div>
<div class="right">
<h2>Projects</h2>
<h3>Online Voting System using BlockChain</h3> <ul>
<li>Developed and maintained web applications using React, JavaScript, and
Solidity</li>
<li>Implemented responsive design using CSS flexbox and media queries</li>
</ul> <br>
<h3>RazorPay UI Clone</h3>
<ul>
<li>Created and maintained websites using HTML and Tailwind</li>
<li>Optimized website performance and user experience using best practices</li>
</ul>
</div> </div> </div> </body> </html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight:500;
font-family: 'Montserrat', sans-serif;
}
body {
height: 100%;
width: 100%;
background: #00b6c4;
}
.container {
background: #f5f5f5;
max-width: 800px;
margin: 60px auto;
padding: 20px;
height: 100%;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.header h3 {
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
}
.img-area {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 25px auto;
border: 15px groove deepskyblue;
}
OUTPUT
LAB – 3
Make a Portfolio using HTML, CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="navbar">
<div class="logo-container">
<img src="./Images/NavLogo.jpg" class="logo">
<div class="logo-text">ortfolio</div> </div>
<div class="nav-items">
<div><a href="#projects">Projects</a></div>
<div><a href="#skills">Skills</a></div>
<div><a href="#contactme">Contact Me</a></div>
</div>
</div>
<div class="hero-section">
<div class="faded-text">Satyam Pandey</div>
<div class="hero-section-left">
<div class="hero-section-heading">Hi! Satyam Pandey</div>
<div class="her-section-subheading hero-section-heading">I am a <span
class="role"></span></div>
<div class="hero-section-description">
I'm a software developer and here is my portfolio website. Here you'll learn about
my journey as a software developer.
</div>
<div class="hero-section-right">
<div class="absolute icons icon-dots">
<img src="./Images/dots.png">
</div>
<div class="absolute icons icon-cube">
<img src="./Images/cube.png">
</div>
<div class="absolute icons icon-circle">
<img src="./Images/circle.png">
</div>
<div class="absolute icons icon-zigzag">
<img src="./Images/zigzags.png" alt="">
</div>
<div class="absolute icons icon-plus">
<img src="./Images/plus.png" alt="">
</div>
<div class="user-image">
<img src="./Images/UserImage.png" alt="">
</div> </div> </div> </div> </body> </html>
OUTPUT