Scribd
Upload
17 views4 pages

Erjon Kurmekaj

The document outlines a web development assignment focused on creating a webpage using CSS positioning and alignment techniques, specifically Flexbox and Grid. It includes a sample HTML structure with a header, a flex container, a grid container, and a footer. The CSS styles define the layout and appearance of these elements, demonstrating the use of both layout techniques.

Uploaded by

kurmekajeri8
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
17 views4 pages

Erjon Kurmekaj

The document outlines a web development assignment focused on creating a webpage using CSS positioning and alignment techniques, specifically Flexbox and Grid. It includes a sample HTML structure with a header, a flex container, a grid container, and a footer. The CSS styles define the layout and appearance of these elements, demonstrating the use of both layout techniques.

Uploaded by

kurmekajeri8
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/ 4

DETYRE

Tema : Krijoni nje faqe web duke perdorur


pozicionimin dhe rreshtimin ne css , perdorni dy
teknikat flex box dhe grid per te rreshtuar elementet .

Lenda : Programim ne web

Klasa 11-2 TIK

Shkolla Profesionale Kamez

Selim Hysenaj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox and Grid Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}

header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1rem 0;
}

.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f4f4f4;
padding: 1rem;
}

.flex-container div {
background-color: #2196F3;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
flex: 1;
}

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 1rem;
background-color: #ddd;
}

.grid-container div {
background-color: #FF5722;
color: white;
text-align: center;
padding: 20px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
</style>
</head>
<body>

<header>
<h1>Flexbox and Grid Example</h1>
</header>

<section class="flex-container">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</section>

<section class="grid-container">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
</section>

<footer>
<p>&copy; 2025 Flex and Grid Demo</p>
</footer>

</body>
</html>

You might also like