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

initial

Browse Source
This commit is contained in:
Vegard Bieker Matthey
2025-10-02 14:25:42 +02:00
commit 57e3a3cae4
6 changed files with 158 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
*.pdf

23
aceofspades.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<div class="top">
<div>A</div>
<div>&spades;</div>
</div>
<div class="center">&spades;</div>
<div class="bottom">
<div>A</div>
<div>&spades;</div>
</div>
</div>
</div>
</body>
</html>

13
progressbar.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="progress"></div>
<div class="progress stage2"></div>
</body>
</html>

15
searchbar.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="search-container">
<input type="search" class="search-bar" id="search-field" placeholder="Search..."/>
</div>
</body>
</html>

31
sixofclubs.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<div class="left">
<div>6</div>
<div>&clubs;</div>
</div>
<div class="middle">
<div>&clubs;</div>
<div>&clubs;</div>
<div>&clubs;</div>
<div>&clubs;</div>
<div>&clubs;</div>
<div>&clubs;</div>
</div>
<div class="right">
<div>6</div>
<div>&clubs;</div>
</div>
</div>
</div>
</body>
</html>

75
style.css Normal file
View File

@@ -0,0 +1,75 @@
.search-bar {
background-color: #669bbc;
width: 33%;
height: 3em;
border: 0.5em solid #780000;
border-radius: 1em;
}
.search-bar:focus {
width: 100%;
border-color: #003049;
}
.search-container {
padding: 32px 0px 0px 32px;
width: 640px;
}
#target {
background-color: yellow;
border-radius: 64px;
width: 16px;
height: 16px;
border: 16px solid red;
outline: 16px solid deepskyblue;
}
.progress {
position: absolute;
background-color: gray;
border-radius: 32px;
width: 300px;
height: 16px;
}
.stage0 {
width: 0px;
}
.stage1 {
width: 100px;
background-color: red;
}
.stage2 {
width: 200px;
background-color: yellow;
}
.stage3 {
width: 300px;
background-color: green;
}
.card {
display: inline-flex;
justify-content: space-between;
flex-direction: column;
width: 12em;
height: 18em;
border: 1px solid black;
border-radius: 5px;
}
.container>.card>.middle {
display: grid;
text-align: center;
grid-template-columns: repeat(2, 50% [col-start]);
font-size: 3em;
}
.container>.card.>.left {
}
.container>.card.>.right {
text-align: center;
}