vegard-uni/webtek-assignment-3
0
0
Fork 0
Code Issues Pull Requests Releases Activity

minor cleanup and validation

Browse Source
This commit is contained in:
Vegard Bieker Matthey
2025-10-24 15:31:58 +02:00
parent d25e431fb5
commit 1bb73cff42
2 changed files with 86 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
responsive.css Normal file
View File

@@ -0,0 +1,77 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.intro {
text-align: center;
padding: 40px;
background: #f4f4f4;
}
.features {
display: flex;
@media (max-width: 600px) {
flex-direction: column;
}
justify-content: space-around;
align-items: stretch;
padding: 20px;
gap: 20px;
}
.feature-item {
background: #fff;
flex: 1;
padding: 20px;
border: 1px solid #ddd;
width: 30%;
@media (max-width: 600px) {
width: 100%;
}
}
footer {
text-align: center;
padding: 20px;
background: #333;
color: #fff;
}
img {
width: 100%;
}
figcaption {
font-size: 0.75em;
}

85
responsive.html
View File

@@ -1,76 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.intro {
text-align: center;
padding: 40px;
background: #f4f4f4;
}
.features {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px;
}
.feature-item {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
width: 30%;
}
footer {
text-align: center;
padding: 20px;
background: #333;
color: #fff;
}
img{
width: 100%;
}
</style>
<title>Our different kitchens</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<header>
@@ -95,30 +28,30 @@ img{
<figure>
<img
src="images/kitchen1.jpg"
alt="Modern appliances" />
alt="Modern appliances">
<figcaption>Modern appliances</figcaption>
</figure>
<p>Description of feature 1.</p>
<p>Modern appliances something something description.</p>
</div>
<div class="feature-item">
<h3>Feature 2</h3>
<figure>
<img
src="images/kitchen2.jpg"
alt="industrial kitchen" />
alt="industrial kitchen">
<figcaption>Suitable for private and commmercial settings</figcaption>
</figure>
<p>Description of feature 2.</p>
<p>Restaurants kitchens something something.</p>
</div>
<div class="feature-item">
<h3>Feature 3</h3>
<figure>
<img
src="images/kitchen3.jpg"
alt="food preparatoin" />
alt="food preparatoin">
<figcaption>Safe and efficient food preparation</figcaption>
</figure>
<p>Description of feature 3.</p>
<p>Food preparation something something.</p>
</div>
</section>
</main>