Scribd
Upload
5 views5 pages

Semester Project

The document contains HTML code for a responsive layout website featuring a landing page with a header, a grid of cards, and a footer. The design utilizes CSS for styling and responsiveness, adjusting the layout based on screen size. Additionally, there is a JavaScript alert that welcomes users upon page load.

Uploaded by

mehmoodjawad12000
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
5 views5 pages

Semester Project

The document contains HTML code for a responsive layout website featuring a landing page with a header, a grid of cards, and a footer. The design utilizes CSS for styling and responsiveness, adjusting the layout based on screen size. Additionally, there is a JavaScript alert that welcomes users upon page load.

Uploaded by

mehmoodjawad12000
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

Name: Jawad Mehmood

Semester Project

Title: Responsive Layout Website

Code:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

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


scale=1.0”>

<title>Landing Page</title>

<style>

 {

Margin: 0;

Padding: 0;

Box-sizing: border-box;

Body {

Font-family: Arial, sans-serif;

.header {

Background: #333;

Color: #fff;

Padding: 20px;

Text-align: center;

.container {

Max-width: 1200px;

Margin: 40px auto;


Display: grid;

Grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Gap: 20px;

Padding: 0 20px;

.card {

Background: #f9f9f9;

Padding: 20px;

Border-radius: 8px;

Box-shadow: 0 0 10px rgba(0,0,0,0.1);

Text-align: center;

.card h3 {

Margin-bottom: 10px;

.card p {

Color: #666;

.footer {

Background: #333;

Color: #fff;

Text-align: center;

Padding: 10px;

Position: fixed;

Bottom: 0;

Width: 100%;

@media (max-width: 768px) {

.container {
Grid-template-columns: 1fr;

</style>

</head>

<body>

<div class=”header”>

<h1>Welcome to My Site</h1>

</div>

<div class=”container”>

<div class=”card”>

<h3>Card 1</h3>

<p>This is a responsive card layout.</p>

</div>

<div class=”card”>

<h3>Card 2</h3>

<p>Grid adjusts based on screen size.</p>

</div>

<div class=”card”>

<h3>Card 3</h3>

<p>Works on mobile, tablet, and desktop.</p>

</div>

<div class=”card”>

<h3>Card 4</h3>

<p>Simple CSS grid for responsiveness.</p>

</div>

</div>

<div class=”footer”>

<p>&copy; 2025 My Site</p>


</div>

<script>

// Simple JS alert on page load

[Link] = () => {

Alert(“Welcome to the landing page!”);

</script>

</body>

</html>

Description:

This web code is for landing page of website with cards in it and is
responsive.

Output:

You might also like