commit | author | age
|
5a0a7b
|
1 |
<!DOCTYPE html> |
CM |
2 |
<html lang="en"> |
|
3 |
<head> |
|
4 |
<meta charset="UTF-8" /> |
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
6 |
<title>Vue Basics</title> |
|
7 |
<link |
|
8 |
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" |
|
9 |
rel="stylesheet" |
|
10 |
/> |
|
11 |
<link rel="stylesheet" href="styles.css" /> |
|
12 |
<script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script> |
|
13 |
<script src="app.js" defer></script> |
|
14 |
</head> |
|
15 |
<body> |
|
16 |
<header> |
|
17 |
<h1>FriendList</h1> |
|
18 |
</header> |
|
19 |
<section id="app"> |
|
20 |
<ul> |
|
21 |
<li> |
|
22 |
<h2>Manuel Lorenz</h2> |
|
23 |
<button>Show Details</button> |
|
24 |
<ul> |
|
25 |
<li><strong>Phone:</strong> 01234 5678 991</li> |
|
26 |
<li><strong>Email:</strong> manuel@localhost.com</li> |
|
27 |
</ul> |
|
28 |
</li> |
|
29 |
<li> |
|
30 |
<h2>Julie Jones</h2> |
|
31 |
<button>Show Details</button> |
|
32 |
<ul> |
|
33 |
<li><strong>Phone:</strong> 09876 543 221</li> |
|
34 |
<li><strong>Email:</strong> julie@localhost.com</li> |
|
35 |
</ul> |
|
36 |
</li> |
|
37 |
</ul> |
|
38 |
</section> |
|
39 |
</body> |
|
40 |
</html> |