-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (49 loc) · 2.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progetto JavaScript Basics di Nome Cognome</title>
<link rel="icon" href="img/KM_logo.svg"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<section class="container d-flex flex-column text-center backGround">
<div class="p-3">
<h1 class="display-2 mb-0 font-weight-bolder title">Kyle Morena</h1>
</div>
<div class="d-flex flex-grow-1 flex-column justify-content-center align-items-center">
<div class="card d-flex w-50 text-white bg-dark">
<div class="card-header"><h2 class="display-4 font-weight-normal">Counter</h2></div>
<div class="card-body">
<div class="d-flex justify-content-around align-items-center">
<button type="button" class="btn btn-secondary font-weight-bold h-50 plus-button">+</button>
<h3 class="display-4 text-danger counter-display">0</h3>
<button type="button" class="btn btn-secondary font-weight-bold h-50 minus-button">-</button>
</div>
<div class="buttons-container">
<button type="button" class="btn btn-info font-weight-bold start-button">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
</button>
<button type="button" class="btn btn-info font-weight-bold stop-button">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-pause-fill" viewBox="0 0 16 16">
<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/>
</svg>
</button>
<button type="button" class="btn btn-info font-weight-bold reset-button">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<script src="js/index.js"></script>
</body>
</html>