Scribd
Upload
3 views

Web Lab Task 7

Uploaded by

Revenger Mian
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Web Lab Task 7

Uploaded by

Revenger Mian
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Web Technologies

Lab Task # 7
Name: Mian Habib Jan
Reg No: SP21-BSE-042
Submitted To : Mam Sadaf Riaz

QUESTION: 01
You need to create a personal portfolio website using Bootstrap. The website should
showcase the client’s skills, projects, and contact details, and must be responsive for
both mobile and desktop.

Requirements:

• Navigation Bar: Include links to Home, About, Skills, Projects, and Contact.

• About Section: Write a short bio of the client.

• Skills Section: List the client’s key skills.

• Projects Section: Show the client’s projects using a grid or cards.

• Contact Section: Add a contact form (name, email, and message).

• Responsive Design: Ensure the website works on both mobile and desktop
screens.

Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head><script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
" integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link"
href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!-- Home Section -->


<section id="home" class="text-center py-5 bg-light">
<div class="container">
<h1>My Portfolio</h1>
<p>Your one-stop hub for skills and projects.</p>
</div>
</section>

<!-- About Section -->


<section id="about" class="py-5">
<div class="container">
<h2>About Me</h2>
<p>Hello! I'm a passionate developer with a knack for solving problems and
building amazing web applications.</p>
</div>
</section>

<!-- Skills Section -->


<section id="skills" class="py-5 bg-light">
<div class="container">
<h2>Skills</h2>
<div class="row">
<div class="col-md-4">HTML & CSS</div>
<div class="col-md-4">JavaScript</div>
<div class="col-md-4">Bootstrap</div>
</div>
</div>
</section>

<!-- Projects Section -->


<section id="projects" class="py-5">
<div class="container">
<h2>Projects</h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="/1.png" class="card-img-top" alt="Project 1">
<div class="card-body">
<h5 class="card-title">Stock Price Prediction</h5>
<p class="card-text">This project leverages machine learning models
to analyze historical stock data and predict future prices. It involves data
preprocessing, feature selection, and implementing algorithms like Linear
Regression, LSTM, or ARIMA to forecast trends. Ideal for financial analysts and
investors seeking data-driven insights.

</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="/2.jpg" class="card-img-top" alt="Project 2">
<div class="card-body">
<h5 class="card-title">Automatic home System</h5>
<p class="card-text">A web or desktop application designed to
streamline hotel operations, including room booking, guest check-ins/check-outs,
billing, and inventory management. It ensures efficient management, improved
guest experiences, and easy integration with third-party travel platforms.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="/3.png" class="card-img-top" alt="Project 3">
<div class="card-body">
<h5 class="card-title">Hotel Management System</h5>
<p class="card-text">This project uses AI and CAD tools to create
optimized and personalized home designs based on user preferences, plot
dimensions, and environmental factors. The system generates 2D layouts and 3D
visualizations, reducing the manual effort in architectural planning..</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Contact Section -->


<section id="contact" class="py-5 bg-light">
<div class="container">
<h2>Contact Me</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter
your name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter
your email">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4" placeholder="Enter
your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Screenshots:

You might also like