Scribd
Upload
9 views14 pages

WE-LAB-3 22K-4818 1) : HTML Lang Charset Name Content

The document contains multiple HTML templates showcasing various web applications, including an interactive portfolio for a software engineer named Mustafa Siddiqui, a sign-in form using Tailwind CSS, a sign-up form using Bootstrap, a to-do app, and a pricing page. Each section highlights different functionalities and design elements, utilizing frameworks like Tailwind CSS and Bootstrap for styling. The templates are structured with responsive design principles and include features such as navigation, forms, and tables.

Uploaded by

Hexter Hani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views14 pages

WE-LAB-3 22K-4818 1) : HTML Lang Charset Name Content

The document contains multiple HTML templates showcasing various web applications, including an interactive portfolio for a software engineer named Mustafa Siddiqui, a sign-in form using Tailwind CSS, a sign-up form using Bootstrap, a to-do app, and a pricing page. Each section highlights different functionalities and design elements, utilizing frameworks like Tailwind CSS and Bootstrap for styling. The templates are structured with responsive design principles and include features such as navigation, forms, and tables.

Uploaded by

Hexter Hani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

WE-LAB-3

22K-4818

1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Interactive Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white">
<nav class="fixed w-full bg-gray-800 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">Mustafa Siddiqui</h1>
<ul class="flex space-x-6">
<li><a href="#about" class="hover:text-yellow-
400">About</a></li>
<li><a href="#skills" class="hover:text-yellow-
400">Skills</a></li>
<li><a href="#experience" class="hover:text-yellow-
400">Experience</a></li>
<li><a href="#projects" class="hover:text-yellow-
400">Projects</a></li>
</ul>
</div>
</nav>

<section class="h-screen flex items-center justify-center text-center


px-6">
<div>
<h2 class="text-4xl font-bold mb-4">Hi, I'm Mustafa
Siddiqui</h2>
<p class="text-lg">Software Engineer | Social Media Manager |
Freelancer</p>
<a href="#about" class="mt-6 inline-block bg-yellow-400 text-
black px-6 py-2 rounded-lg font-semibold hover:bg-yellow-500">Learn
More</a>
</div>
</section>

<section id="about" class="py-20 px-6 text-center bg-gray-800">


<h2 class="text-3xl font-bold mb-6">About Me</h2>
<p class="max-w-3xl mx-auto">I'm a passionate software engineer
with expertise in Java, Spring Boot, and social media marketing. I love
solving problems and creating efficient digital solutions.</p>
</section>

<section id="skills" class="py-20 px-6 text-center">


<h2 class="text-3xl font-bold mb-6">Skills</h2>
<div class="flex flex-wrap justify-center gap-4">
<span class="bg-yellow-400 text-black px-4 py-2 rounded-
lg">Java</span>
<span class="bg-yellow-400 text-black px-4 py-2 rounded-
lg">Spring Boot</span>
<span class="bg-yellow-400 text-black px-4 py-2 rounded-
lg">C++</span>
<span class="bg-yellow-400 text-black px-4 py-2 rounded-
lg">Social Media Marketing</span>
<span class="bg-yellow-400 text-black px-4 py-2 rounded-
lg">Video Editing</span>
</div>
</section>

<section id="experience" class="py-20 px-6 text-center bg-gray-800">


<h2 class="text-3xl font-bold mb-6">Experience</h2>
<p>📌 Social Media Team Lead at Global Bloom</p>
<p>📌 Social Media Manager at RIGOUT</p>
<p>📌 Freelance Digital Marketer & Software Developer</p>
</section>

<section id="projects" class="py-20 px-6 text-center">


<h2 class="text-3xl font-bold mb-6">Projects</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold">Airline Reservation
System</h3>
<p>Developed using Java and Spring Boot.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold">Social Media Analytics
Tool</h3>
<p>Automated reports using Python and APIs.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold">Hotel Management
System</h3>
<p>Developed using Java and OOP Concepts.</p>
</div>
</div>
</section>

<footer class="py-6 text-center bg-gray-800">


<p>&copy; 2025 Mustafa Siddiqui. All rights reserved.</p>
</footer>
</body>
</html>
2)

SIGN-IN USING TAILWIND


<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body class="bg-gray-50 mt-5">


<div class="mx-auto w-full bg-white rounded-lg shadow dark:border
md:mt-0 sm:max-w-md xl:p-0">
<div class="p-6 space-y-4 md:space-y-4 sm:p-8">
<h1 class="text-xl font-bold leading-tight tracking-tight text-
gray-900 md:text-2xl">
Sign in
</h1>
<form action="#" class="space-y-4 md:space-y-6">
<div>
<label for="email" class="block mb-2 text-sm font-medium
text-gray-900">Username</label>
<div class="relative">
<input type="email" name="username" id="username"
class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg
focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
placeholder="Enter Username" required="">
<div class="absolute inset-y-0 right-3 pl-3
flex items-center
pointer-events-none">
&#128100
</div>
</div>
<label for="email" class="mt-4 block mb-2 text-sm font-
medium text-gray-900">Password</label>
<div class="relative">
<input type="email" name="username" id="username"
class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg
focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
placeholder="Enter Password" required="">
<div class="absolute inset-y-0 right-3 pl-3
flex items-center
pointer-events-none">
&#128065
</div>
</div>

<div class="flex items-center justify-between mt-3">


<div class="flex items-start">
<div class="flex items-center h-5">
<input id="remember" aria-describedby="remember"
type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50
focus:ring-3 focus:ring-primary-300" required="">
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500">Remember
me</label>
</div>
</div>
<a href="#" class="text-sm font-bold text-blue-600
hover:underline">Forgot your password?</a>
</div>
<button type="submit" class="w-full text-white bg-blue-600 mt-3
rounded-lg text-lg py-2.5 text-center px-5">Sign in</button>
<p class="mt-3 text-center font-light text-gray-500">Dont
have an account? <a href="#" class="font-bold text-blue-600 ">register
here</a></p>
</form>
</div>
</div>
</body>
</html>
SIGN-UP USING BOOTSTRAP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sign Up</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body>
<div class="form-box p-5">
<div class="form-title">
<h2 class="fw-bold mb-3 text-primary">Sign Up</h2>
</div>
<form action="">
<div class="form-floating mb-3 border rounded border-primary
">
<input type="text" class="form-control form-control-sm"
placeholder="Enter First Name" id="floatingInp">
<label for="floatingInp">First Name</label>
</div>
<div class="form-floating mb-3 border rounded border-primary
">
<input type="text" class="form-control form-control-sm"
placeholder="Enter Last Name" id="floatingInp">
<label for="floatingInp">Last Name</label>
</div>
<div class="form-floating mb-3 border rounded border-primary
">
<input type="email" class="form-control form-control-sm"
placeholder="Enter Your E-Mail" id="floatingInp">
<label for="floatingInp">Email</label>
</div>
<div class="form-floating mb-3 border rounded border-primary
">
<input type="password" class="form-control form-control-
sm" placeholder="Enter Your Password" id="floatingPassword">
<label for="floatingPassword">Password</label>
</div>
<div class="mt-3">
<button class="btn text-white border bg-primary">Sign
Up</button>
</div>
</form>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundl
e.min.js" integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do App</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi
n.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">To Do App</h1>

<div class="d-flex justify-content-center mt-4">


<input type="text" id="taskInput" class="form-control w-50"
placeholder="Enter a task here">
<button class="btn btn-primary ml-2">Save</button>
<button class="btn btn-warning text-white ml-2">Get Tasks</button>
</div>

<table class="table table-bordered mt-4" id="taskTable">


<thead>
<tr>
<th>No.</th>
<th>Todo Item</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>Buy groceries for next week</td>
<td>in Progress</td>
<td>
<button class="btn btn-danger ">Delete</button>
<button class="btn btn-success text-white ml-
2">Finished</button>
</td>
<tr>
<td>2</td>
<td>Renew car insurance</td>
<td>in Progress</td>
<td>
<button class="btn btn-danger ">Delete</button>
<button class="btn btn-success text-white ml-
2">Finished</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Sign up for online course</td>
<td>in Progress</td>
<td>
<button class="btn btn-danger ">Delete</button>
<button class="btn btn-success text-white ml-
2">Finished</button>
</td>
</tr>
</tbody>
</table>
</div>

<script src="https://code.jquery.com/jquery-
3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.mi
n.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.
js"></script>
</body>
</html>
4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 4 - Pricing</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-6 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-
12">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold
text-gray-900 text-black">Pricing</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl text-
gray-400">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio
magni quos rerum quisquam ea commodi voluptatum quas ratione, voluptatem
illo laboriosam iste itaque! Esse.</p>
</div>
<div class="lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10
lg:space-y-0 space-y-8">
<div class="flex flex-col p-6 mx-auto max-w-lg text-
center text-gray-900 bg-white rounded-lg border border-gray-100 shadow
border-gray-600 xl:p-8 bg-gray-800 text-black">
<h3 class="mb-4 text-2xl font-semibold">Free</h3>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-
extrabold">$0</span>
<span class="text-gray-500 text-4xl text-gray-
400">/ mo</span>
</div>
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<span>10 users included</span>
</li>
<li class="flex items-center space-x-3">
<span>2 GB of storage</span>
</li>
<li class="flex items-center space-x-3">
<span>Email support</span>
</li>
<li class="flex items-center space-x-3">
<span>Help center access</span>
</li>
</ul>
<button class="bg-transparent text-blue-500 font-
semibold py-2 px-4 border border-blue-500 rounded">Sign up for
free</button>
</div>
<div class="flex flex-col p-6 mx-auto max-w-lg text-
center text-gray-900 bg-white rounded-lg border border-gray-100 shadow
border-gray-600 xl:p-8 bg-gray-800 text-black">
<h3 class="mb-4 text-2xl font-semibold">Pro</h3>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-
extrabold">$15</span>
<span class="text-gray-500 text-4xl text-gray-
400">/ mo</span>
</div>
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<span>20 users included</span>
</li>
<li class="flex items-center space-x-3">
<span>10 GB of storage</span>
</li>
<li class="flex items-center space-x-3">
<span>Priority Email support</span>
</li>
<li class="flex items-center space-x-3">
<span>Help center access</span>
</li>
</ul>
<button class="bg-blue-500 text-white font-semibold
py-2 px-4 border border-blue-500 rounded">Get Started</button>
</div>
<div class="flex flex-col p-6 mx-auto max-w-lg text-
center text-gray-900 bg-white rounded-lg border border-gray-100 shadow
border-gray-600 xl:p-8 bg-gray-800 text-black">
<h3 class="mb-4 text-2xl font-
semibold">Enterprise</h3>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-
extrabold">$29</span>
<span class="text-gray-500 text-4xl text-gray-
400">/ mo</span>
</div>
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<span>30 users included</span>
</li>
<li class="flex items-center space-x-3">
<span>15 GB of storage</span>
</li>
<li class="flex items-center space-x-3">
<span>Phone and Email support</span>
</li>
<li class="flex items-center space-x-3">
<span>Help center access</span>
</li>
</ul>
<button class="bg-blue-500 text-white font-semibold
py-2 px-4 border border-blue-500 rounded">Contact us</button>
</div>
</div>
</div>
</body>
</html>

You might also like