diff --git a/cmp-intro-01-starting-setup/app.js b/cmp-intro-01-starting-setup/app.js new file mode 100644 index 0000000..e69de29 diff --git a/cmp-intro-01-starting-setup/index.html b/cmp-intro-01-starting-setup/index.html new file mode 100644 index 0000000..e00c538 --- /dev/null +++ b/cmp-intro-01-starting-setup/index.html @@ -0,0 +1,40 @@ + + + + + + Vue Basics + + + + + + +
+

FriendList

+
+
+ +
+ + diff --git a/cmp-intro-01-starting-setup/styles.css b/cmp-intro-01-starting-setup/styles.css new file mode 100644 index 0000000..700054f --- /dev/null +++ b/cmp-intro-01-starting-setup/styles.css @@ -0,0 +1,63 @@ +* { + box-sizing: border-box; +} + +html { + font-family: 'Jost', sans-serif; +} + +body { + margin: 0; +} + +header { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + margin: 3rem auto; + border-radius: 10px; + padding: 1rem; + background-color: #58004d; + color: white; + text-align: center; + width: 90%; + max-width: 40rem; +} + +#app ul { + margin: 0; + padding: 0; + list-style: none; +} + +#app li { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + margin: 1rem auto; + border-radius: 10px; + padding: 1rem; + text-align: center; + width: 90%; + max-width: 40rem; +} + +#app h2 { + font-size: 2rem; + border-bottom: 4px solid #ccc; + color: #58004d; + margin: 0 0 1rem 0; +} + +#app button { + font: inherit; + cursor: pointer; + border: 1px solid #ff0077; + background-color: #ff0077; + color: white; + padding: 0.05rem 1rem; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26); +} + +#app button:hover, +#app button:active { + background-color: #ec3169; + border-color: #ec3169; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); +}