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

task 2 target

Browse Source
This commit is contained in:
Brikt Wiedswang
2025-10-02 17:25:55 +02:00
parent c67ec16e5e
commit b95db501c9
2 changed files with 55 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
style.css
View File

@@ -16,14 +16,46 @@
width: 640px; width: 640px;
} }
#target { .target {
width: 64px;
height: 64px;
background-color: yellow; background-color: yellow;
border-radius: 64px; border-radius: 100%;
width: 16px;
height: 16px;
border: 16px solid red;
outline: 16px solid deepskyblue;
} }
.target-container{
display: flex;
position: relative;
justify-content: center;
width: 256px;
height: 256px;
align-items: center;
}
.circle {
position: absolute;
border-radius: 100%;
}
.circle4 {
width: 32px;
height: 32px;
background-color: yellow;
}
.circle3 {
width: 64px;
height: 64px;
background-color: red;
}
.circle2 {
width: 96px;
height: 96px;
background-color: blue;
}
.circle1 {
width: 128px;
height: 128px;
background-color: black;
}
.progress { .progress {
position: absolute; position: absolute;

17
target.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="target-container">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
</div>
</body>
</html>