aggiungo css

Cristiano Magro

2025-01-07 43396a07d57044b6d0ea2d7e70320f93a1a0836b

aggiungo css

 10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue

@@ -1,11 +1,7 @@
<template>
    <ul>
        <learning-resource v-for="res in storedResouces" 
        :key="res.id"
        :title="res.title" 
        :description="res.description"
        :link="res.link"
        >
        <learning-resource v-for="res in storedResouces" :key="res.id" :title="res.title" :description="res.description"
            :link="res.link">
        </learning-resource>
    </ul>
</template>
@@ -14,20 +10,20 @@
import LearningResource from './components/learning-resource/LearningResource.vue';

export default {
    components:{
    components: {
        LearningResource: LearningResource,
    },
    data(){
    data() {
        return {
            storedResouces: [
                {
                    id:'official-guide',
                    id: 'official-guide',
                    title: 'Official Guide',
                    description: 'The official Vue.js documentation',
                    link: 'https://vuejs.org'
                },
                {
                    id:'google',
                    id: 'google',
                    title: 'Google',
                    description: 'Learn to google...',
                    link: 'https://google.com'
@@ -36,4 +32,20 @@
        }
    }
}
</script>
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

html {
    font-family: 'Roboto', sans-serif;
}

body {
    margin: 0;
}
</style>

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue

@@ -17,4 +17,36 @@
export default {
    props: ['title', 'description', 'link']
}
</script>
</script>

<style scoped>
li {
  margin: auto;
  max-width: 40rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h3 {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}

p {
  margin: 0.5rem 0;
}

a {
  text-decoration: none;
  color: #ce5c00;
}

a:hover,
a:active {
  color: #c89300;
}
</style>