Acs221029 Wad

Capital University of Science and Technology
Department of Computer Science
ACS2413 – Web Application Development

ASSIGNMENT NO. 02
Semester: Spring 2023 Max Marks:
10
Instructor: M. Ramzan Shahid Khan Assigned Date: 10th
May, 2023 Due Date: 16th May, 2023 Instructions:
• Cheating is strictly prohibited.
• Submit the file in hard formed which contains the code and the output shown on the browser.
• Write your name and reg no. on each page.  Submit in class on 16th May, 2023.
Name: M.Fahad Abid Reg. No: ACS221029
[Marks:5+5=10]
Question No.1: Build a one-page layout
Single-page layout pages contain only one HTML page. You won’t find an About page or anything other than a Home
page. Many developers go with single-page layouts to make the user experience more fluid and continuous for users. They
move from one spot on the page to another using navigation links or scrolling down to look at different content sections.
Clients might hire you to design a single-page layout for a portfolio or event website. Businesses may call upon you to add
a new page to their site. New coders can do this easily using vanilla JavaScript, PHP, HTML, or CSS.
Building single-page layouts lets you practice basic web layout skills like setting up columns, dividing pages into sections,
and working with headers and footers. You also get the chance to use some creativity using images and color pallets. How
you pad and align various elements makes a big difference in the look of your page.
Note: You can select the layout of the page according to your own understanding and styles.
CODE:
<!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">
<title>camera</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,700&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,700&display=swap');
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="picture/logo_1956.png" width="200px" alt="" ></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item dropdown">
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link Anabled" href="#" tabindex="-1" aria-disabled="true">Anabled</a>
</li>
</ul>
<form class="d-flex">
<button class="btn btn-outline-success" type="submit">Login</button>

</form>
<form class="d-flex2">
<button class="btn btn-outline-successs" type="submit">Signup</button>
</form>
</div>
</div>
</nav>


<header class="head">
<center><button class="glow-on-hover">Buy Now</button></center>
</header>

<center><h1 class="child">Our Popular Product</h1></center>

<section class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="picture/robin-mcskelly-E_eRX8Phnto-unsplash.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit
longer.</p>
</div>
<div class="card-footer">
<small class="text-muted"><center><a href="https://www.whatsapp.com/"><button> Buy</button></a></center></small>
</div>
</div>
</div>
<div class="col">
<img src="picture/hector-achautla-kizqGIJ82b0-unsplash.jpg" class="card-img-top" alt="...">
<h5 class="card-title">Lense</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<small class="text-muted"><center><a href=""><button> Buy</button></a></center></small>
</div>
</div>
</div>
<div class="col">
<img src="picture/pexels-özgür-832811.jpg" class="card-img-top" alt="...">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
content than the first to show that equal height action.</p>
</div>
</div>
</div>
</div>
</section>
<section class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<img src="picture/robin-mcskelly-E_eRX8Phnto-unsplash.jpg" class="card-img-top" alt="...">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit
longer.</p>
</div>
</div>
</div>
</div>
<div class="col">
<img src="picture/hector-achautla-kizqGIJ82b0-unsplash.jpg" class="card-img-top" alt="...">
<h5 class="card-title">Lense</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<small class="text-muted"><center><a href=""><button> Buy</button></a></center></small>
</div>
</div>
</div>
<div class="col">
<img src="picture/pexels-özgür-832811.jpg" class="card-img-top" alt="...">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
content than the first to show that equal height action.</p>
</div>
</div>
</div>
</div>
</section>


<section class="container" style="display: flex">
<div>
<img src="https://media.istockphoto.com/id/827662516/photo/canon-dslr-camera.jpg?s=612x612&w=0&k=20&c=ixVtoslKP9-
IhiIYR6HVr12xzfvDUL7uBlMTzndQPaI=" alt="" width="250px">
</div>
<div>
<h1>About Camera</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ab sed vitae in tenetur quis inventore, aliquam hic ipsam, debitis dolorum
asperiores delectus, optio repudiandae temporibus quidem! Ipsa, voluptatum consequuntur!</p>
</div>
</section>
<section class="container" style="display: flex">
<div>
<h1>About Camera</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ab sed vitae in tenetur quis inventore, aliquam hic ipsam, debitis dolorum
asperiores delectus, optio repudiandae temporibus quidem! Ipsa, voluptatum consequuntur!</p>
</div>
<div>
<img src=https://t3.ftcdn.net/jpg/00/09/05/54/360_F_9055424_C9GOc32qzyQ7Yt7y2NJ47MAiSwb8dVwF4qb6rXD.jpg alt=""

width="250px">
</div>
</section>

</div>
</body>
</html>
Output:

Acs221029 Wad

Uploaded by

Document Information

Original Description:

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

Acs221029 Wad

Uploaded by

Copyright:

Available Formats

Capital University of Science and Technology

Department of Computer Science

ACS2413 – Web Application Development

Name: M.Fahad Abid Reg. No: ACS221029

Question No.1: Build a one-page layout

<button class="btn btn-outline-success" type="submit">Login</button>

<img src=https://t3.ftcdn.net/jpg/00/09/05/54/360_F_9055424_C9GOc32qzyQ7Yt7y2NJ47MAiSwb8dVwF4qb6rXD.jpg alt=""

You might also like