corso vuejs
view | history | commit | commitdiff
Cristiano Magro
2024-12-28 498b475805c4383c51ef54bc3a2bc47aa63e895a
commit | author | age
f31b9e 1 <template>
498b47 2   <section>
CM 3     <header>
4       <h1>My friends</h1>
5     </header>
6     <ul>
7       <friend-contact 
8       name="Manuel Lorenz" 
9       phone-number="123" 
10       email-address="cicio@ciccio.it"
11       ></friend-contact>
12       <friend-contact
13       name="Jeany Torpedo" 
14       phone-number="123123" 
15       email-address="torpedo@ciccio.it"
16       ></friend-contact>
17     </ul>
18   </section>
f31b9e 19 </template>
CM 20
21 <script>
22 export default {
498b47 23   data() {
CM 24     return {
25       friends: [
26         {
27           id: "manuel",
28           name: "Manuel Lorenz",
29           phone: "01234 5678 991",
30           email: "manuel@localhost.com",
31         },
32         {
33           id: "julie",
34           name: "Julie Jones",
35           phone: "09876 543 221",
36           email: "julie@localhost.com",
37         },
38       ],
39     }
40   },
f31b9e 41 };
f54162 42 </script>
CM 43
44 <style>
498b47 45 @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
f54162 46
CM 47 * {
48   box-sizing: border-box;
49 }
50
51 html {
52   font-family: 'Jost', sans-serif;
53 }
54
55 body {
56   margin: 0;
57 }
58
59 header {
60   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
61   margin: 3rem auto;
62   border-radius: 10px;
63   padding: 1rem;
64   background-color: #58004d;
65   color: white;
66   text-align: center;
67   width: 90%;
68   max-width: 40rem;
69 }
70
71 #app ul {
72   margin: 0;
73   padding: 0;
74   list-style: none;
75 }
76
77 #app li {
78   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
79   margin: 1rem auto;
80   border-radius: 10px;
81   padding: 1rem;
82   text-align: center;
83   width: 90%;
84   max-width: 40rem;
85 }
86
87 #app h2 {
88   font-size: 2rem;
89   border-bottom: 4px solid #ccc;
90   color: #58004d;
91   margin: 0 0 1rem 0;
92 }
93
94 #app button {
95   font: inherit;
96   cursor: pointer;
97   border: 1px solid #ff0077;
98   background-color: #ff0077;
99   color: white;
100   padding: 0.05rem 1rem;
101   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
102 }
103
104 #app button:hover,
105 #app button:active {
106   background-color: #ec3169;
107   border-color: #ec3169;
108   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
109 }
110 </style>