diff --git a/epf-front-skeleton-main/src/app/app.component.html b/epf-front-skeleton-main/src/app/app.component.html index 79e3127e2dba3c723168ab57573c74cc4e3048f0..694e7598d4114e23bda670f5a5c0aa75c2005e79 100644 --- a/epf-front-skeleton-main/src/app/app.component.html +++ b/epf-front-skeleton-main/src/app/app.component.html @@ -1,3 +1,3 @@ -<epf-navbar></epf-navbar> +<epf-navbar class="nav"></epf-navbar> <router-outlet></router-outlet> diff --git a/epf-front-skeleton-main/src/app/app.component.scss b/epf-front-skeleton-main/src/app/app.component.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..48438a7f4bb14c3effd6c675f015a876673df196 100644 --- a/epf-front-skeleton-main/src/app/app.component.scss +++ b/epf-front-skeleton-main/src/app/app.component.scss @@ -0,0 +1,14 @@ +:host { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background-image: url('../assets/background.jpg'); + background-size: cover; + background-attachment: fixed; + padding: 0; +} + +.nav { + align-self: center; +} diff --git a/epf-front-skeleton-main/src/app/home/home.component.html b/epf-front-skeleton-main/src/app/home/home.component.html index 8b7b71e2c6de813301ca91347fe03c31e42192d6..a4b8b66cad8fa974b0701a541d07fb18846b0b70 100644 --- a/epf-front-skeleton-main/src/app/home/home.component.html +++ b/epf-front-skeleton-main/src/app/home/home.component.html @@ -1,32 +1,26 @@ -<div class="left"> - <span class="title">Bonjour à toi jeune Peufien !</span> - <p>Nous sommes heureux de t'accueillir pour ce cours de Java Spring Angular ! - <img src="assets/soleil.gif" class="sun"> - </p> - <span class="title">Comment se passe ce cours : </span> - <div class="card-group"> - <div class="card"> - <img class="card-img-top" src="assets/img1.png" alt="Card image cap"> - <div class="card-body"> - <p class="card-text">Tu réalises un projet from scratch</p> +<div class="content"> + <div class="left"> + <span class="title">Bonjour à vous !</span> + <p>Vous avez atteint la dernière étape de votre formation avec succès ! Bienvenue au cours Java Spring</p> + <span class="title">Comment se passe ce cours : </span> + <div class="content-card"> + <div class="line"> + <img src="assets/build.png" alt="Image 1"> + <p>Vous avez le choix entre démarrer un projet à partir de zéro ou développer un backend pour <a + href="url_de_telechargement" download style="color: mediumvioletred">cette base de structure frontend</a>.</p> </div> - </div> - <div class="card"> - <img class="card-img-top" src="assets/img2.png" alt="Card image cap"> - <div class="card-body"> - <p class="card-text">Tu as un max de fun en travaillant en équipe!</p> + <div class="line"> + <img src="assets/team.png" alt="Image 2"> + <p>Vous accomplirez davantage en travaillant en équipe ( un groupe de 3p serait idéal).</p> </div> - </div> - <div class="card"> - <img class="card-img-top" src="assets/img3.png" alt="Card image cap"> - <div class="card-body"> - <p class="card-text">Tes profs sont prêts à voler à ton secours à tout moment !</p> + <div class="line"> + <img src="assets/ask-for-help.png" alt="Image 3"> + <p>N'hésitez pas à demander de l'aide à votre formatrice. Ne restez pas bloqués !</p> </div> </div> + + </div> + <div class="right"> + <img src="../../assets/3dgirl.png" alt="Card image cap"> </div> - <p>Nous sommes là pour t'aider et t'accompagner pendant 4 journées de TP. N'hésite pas si tu as la moindre question - ! </p> -</div> -<div class="right"> - <img src="assets/homepage-cat.png"> </div> diff --git a/epf-front-skeleton-main/src/app/home/home.component.scss b/epf-front-skeleton-main/src/app/home/home.component.scss index 9da57dfe5dc1507bdf2f0246e38e498a4e528532..3a64186f138ea328c692d9d6ea90ca52bbd12c1e 100644 --- a/epf-front-skeleton-main/src/app/home/home.component.scss +++ b/epf-front-skeleton-main/src/app/home/home.component.scss @@ -1,53 +1,111 @@ :host { display: flex; - align-items: center; - margin: 25px; + flex-direction: column; + width: 100%; + height: 100%; + background-image: url('../../assets/background.jpg'); + background-size: cover; + background-attachment: fixed; + padding: 0; + .nav { + display: flex; + flex-direction: column; + align-items: center; + } .title { text-align: center; font-family: Caveat, sans-serif; - font-size: 3.5em; + font-size: 5.5em; font-weight: 700; margin: 30px 0; + margin-top: 60px; } p { text-align: center; - margin-top: 30px; + margin-top: 20px; font-size: 1.3em; } - .left { - width: 50%; - height: 100%; + .center { + width: 100%; display: flex; flex-direction: column; - - .sun { - width: 90px; - margin-left: 35px; + align-content: center; } - .card { - border: none; + .content { + display: flex; + flex-direction: row; + + .left { + width: 70%; + height: 100%; display: flex; - align-items: baseline; + flex-direction: column; + + .sun { + width: 90px; + margin-left: 35px; + } + + .card { + border: none; + display: flex; + align-items: baseline; + + .card-text { + font-family: "Dancing Script", sans-serif; + font-size: x-large; + margin-top: 0; + } + } + } + + .right { + width: 60%; + text-align: right; + img { + width: 100%; + height: 100%; + } + } + + .slogan { + text-align: left; + font-family: RoxboroughCF, sans-serif; + font-size: 2.5em; + font-weight: 900; + max-width: 800px; + margin: 20px; /* Ajoutez une marge pour l'espacement */ + margin-top: 200px; + white-space: pre-line; /* Force le saut de ligne */ - .card-text { - font-family: "Dancing Script", sans-serif; - font-size: x-large; - margin-top: 0 + span { + display: block; /* Force le saut de ligne */ } } } + /* Votre fichier CSS ou styles.css global */ - .right { - width: 50%; + .content-card { display: flex; - justify-content: center; + flex-direction: column; + margin-left: 40px; + + + .line { + display: flex; + align-items: center; + margin-bottom: 10px; /* Ajoutez une marge entre chaque ligne au besoin */ + } img { - width: 80%; + width: 180px; /* Ajustez la largeur de l'image au besoin */ + height: 180px; /* Ajustez la hauteur de l'image au besoin */ + margin-right: 10px; /* Ajoutez une marge à droite de l'image au besoin */ } } + } diff --git a/epf-front-skeleton-main/src/app/majors/majors.component.scss b/epf-front-skeleton-main/src/app/majors/majors.component.scss index 0f9d16a1c2f2ff6ff6e345650325eab907cceda8..d188b66b048df30e888643d8d66e15f8eaa1db16 100644 --- a/epf-front-skeleton-main/src/app/majors/majors.component.scss +++ b/epf-front-skeleton-main/src/app/majors/majors.component.scss @@ -4,10 +4,13 @@ display: flex; flex-direction: column; padding: 30px; + height: 100vh; + width: 80%; + align-self: center; h1 { display: flex; - color: theme.$common-purple; + color: coral; font-size: xx-large; margin-right: 50px; margin-bottom: 0; diff --git a/epf-front-skeleton-main/src/app/navbar/navbar.component.html b/epf-front-skeleton-main/src/app/navbar/navbar.component.html index 49ca134367dc164f50d59c7bbd694fc5941e876f..19f25dfc9ef1a9378a87d65480c2da6286f64b8e 100644 --- a/epf-front-skeleton-main/src/app/navbar/navbar.component.html +++ b/epf-front-skeleton-main/src/app/navbar/navbar.component.html @@ -1,6 +1,6 @@ <nav> - <div> - <img src="assets/logo-epf.png" routerLink=""> + <div class="navbar"> + <img src="assets/logo.png" routerLink="" style="width: 155px; height: 155px; margin-top: 20px"> <mat-nav-list> <a mat-list-item routerLink="{{link.href}}" routerLinkActive="active" *ngFor="let link of links">{{ link.name }}</a> diff --git a/epf-front-skeleton-main/src/app/navbar/navbar.component.scss b/epf-front-skeleton-main/src/app/navbar/navbar.component.scss index 52fb8fe1c3c4ac8a062dc3924cf696292f45e37a..ad596df36cb7e20de5ada1f0c977d72954666eb1 100644 --- a/epf-front-skeleton-main/src/app/navbar/navbar.component.scss +++ b/epf-front-skeleton-main/src/app/navbar/navbar.component.scss @@ -2,15 +2,20 @@ nav { height: 80px; - background: linear-gradient(to right, theme.$common-purple, theme.$common-red); + width: 1500px; + background-color: floralwhite; + border-radius: 10px; /* Ajustez le rayon selon vos préférences */ + padding: 10px; /* Ajoutez de la marge pour l'espacement à l'intérieur du rectangle */ + margin-top: 30px; div { height: 100%; display: flex; align-items: center; + flex-direction: row; + margin-top: -65px; img { - margin-left: 20px; height: 60px; transition: .3s; @@ -32,9 +37,12 @@ nav { } .mat-list-base .mat-list-item { - font-size: large; - color: theme.$white; + color: black; transition: .3s; + font-family: Caveat, sans-serif; + font-size: 2em; + font-weight: 700; + margin-right: 40px; &:hover { transform: scale(1.2); diff --git a/epf-front-skeleton-main/src/app/students/students.component.html b/epf-front-skeleton-main/src/app/students/students.component.html index 72af817bb1e9bd740c2e95569a7cd89943c11965..d36e5cacfa5dd8ff5e606c46bf326d41d91fd124 100644 --- a/epf-front-skeleton-main/src/app/students/students.component.html +++ b/epf-front-skeleton-main/src/app/students/students.component.html @@ -1,15 +1,15 @@ <div class="d-flex align-items-center"> - <h1>Students</h1> - <a mat-raised-button color="primary" routerLink="/student-details/new">New</a> + <h1>Étudiants</h1> + <a mat-raised-button color="primary" routerLink="/student-details/new">Ajouter</a> </div> <table class="table table-hover"> <thead> <tr> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Birthdate</th> + <th scope="col">Prénom</th> + <th scope="col">Nom</th> + <th scope="col">Date de naissance</th> <th scope="col">Major</th> - <th scope="col">Delete</th> + <th scope="col">Supprimer</th> </tr> </thead> <tbody> @@ -19,7 +19,7 @@ <td>{{ student.birthdate | date : "dd/MM/yyyy" }}</td> <td>{{ student.major!!.name }}</td> <td> - <button mat-icon-button color="warn" (click)="deleteStudent($event, student)"> + <button mat-icon-button (click)="deleteStudent($event, student)"> <mat-icon>delete</mat-icon> </button> </td> diff --git a/epf-front-skeleton-main/src/app/students/students.component.scss b/epf-front-skeleton-main/src/app/students/students.component.scss index 584f56d9eaa572da4b946d71606a995cd4b90638..3e971f45d39b00878d7cad46b5aa810fc4d1ee0f 100644 --- a/epf-front-skeleton-main/src/app/students/students.component.scss +++ b/epf-front-skeleton-main/src/app/students/students.component.scss @@ -4,10 +4,13 @@ display: flex; flex-direction: column; padding: 30px; + height: 100vh; + width: 80%; + align-self: center; h1 { display: flex; - color: theme.$common-purple; + color: coral; font-size: xx-large; margin-right: 100px; margin-bottom: 0; diff --git a/epf-front-skeleton-main/src/assets/3dgirl.png b/epf-front-skeleton-main/src/assets/3dgirl.png new file mode 100644 index 0000000000000000000000000000000000000000..cd8cdc0ac032f4b0013003f00621c58963bb8f88 Binary files /dev/null and b/epf-front-skeleton-main/src/assets/3dgirl.png differ diff --git a/epf-front-skeleton-main/src/assets/EtudiMa.png b/epf-front-skeleton-main/src/assets/EtudiMa.png new file mode 100644 index 0000000000000000000000000000000000000000..7f505e4213385de2b08dc97a6832096fadcb014b Binary files /dev/null and b/epf-front-skeleton-main/src/assets/EtudiMa.png differ diff --git a/epf-front-skeleton-main/src/assets/ask-for-help.png b/epf-front-skeleton-main/src/assets/ask-for-help.png new file mode 100644 index 0000000000000000000000000000000000000000..81bf4f50276b4efdcf571d544f02f50fe2c711b0 Binary files /dev/null and b/epf-front-skeleton-main/src/assets/ask-for-help.png differ diff --git a/epf-front-skeleton-main/src/assets/background.jpg b/epf-front-skeleton-main/src/assets/background.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9957c31887f52c3aae27529d969300ab66331fb8 Binary files /dev/null and b/epf-front-skeleton-main/src/assets/background.jpg differ diff --git a/epf-front-skeleton-main/src/assets/build.png b/epf-front-skeleton-main/src/assets/build.png new file mode 100644 index 0000000000000000000000000000000000000000..e49865bf0ebedb7cab3117e9ede827575b89247c Binary files /dev/null and b/epf-front-skeleton-main/src/assets/build.png differ diff --git a/epf-front-skeleton-main/src/assets/defaultPicture.svg b/epf-front-skeleton-main/src/assets/defaultPicture.svg deleted file mode 100644 index c935fa809c5f9fe0dc4bf18c75d016cba81d94db..0000000000000000000000000000000000000000 --- a/epf-front-skeleton-main/src/assets/defaultPicture.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" fill="none" shape-rendering="auto"><desc>"Custom Avatar" by "Ashley Seo", licensed under "CC BY 4.0". / Remix of the original. - Created with dicebear.com</desc><metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:RDF><cc:Work><dc:title>Custom Avatar</dc:title><dc:creator><cc:Agent rdf:about="http://www.ashleyseo.com/"><dc:title>Ashley Seo</dc:title></cc:Agent></dc:creator><dc:source>https://www.figma.com/community/file/881358461963645496</dc:source><cc:license rdf:resource="https://creativecommons.org/licenses/by/4.0/" /></cc:Work></rdf:RDF></metadata><mask id="viewboxMask"><rect width="480" height="480" rx="0" ry="0" x="0" y="0" fill="#fff" /></mask><g mask="url(#viewboxMask)"><g transform="matrix(.85775 0 0 .85427 52 47)"><path d="M264 38.6s131.4 20.6 121.4 208.1c0 .7 15.2 10.9 16.4 12a77.1 77.1 0 0 1 23.4 36.3c13.9 51.3-35.7 104.2-75.8 118.2a155 155 0 0 1-46.7 8.3c-103.1 3-239.7-62.7-246.7-191a202.7 202.7 0 0 1 15.1-83.9c0 .1 57.4-142.5 192.9-108Z" fill="#efcc9f"/><path d="M388.7 248.7a57 57 0 0 0-3.2 10.5 40 40 0 0 0 8.5 30.4 42.3 42.3 0 0 0 33 15.7c-3.2-31.7-29-50.7-38.3-56.6ZM203.5 332c24.4-5.2 39.6-31 33.9-57.5-5.7-26.5-30.2-43.7-54.6-38.5-24.4 5.3-39.5 31-33.8 57.6 5.7 26.5 30.1 43.7 54.5 38.5Z" fill="#DC2400" style="mix-blend-mode:multiply" opacity=".1"/><path opacity=".1" d="M323 257.9s20.9-19.9 37-1.2Z" fill="#000"/><path d="M128.7 356.9C59.3 391.7-3.7 304.4 16.5 255.3c12.9-31.4 50.4-33.8 72.1-5.2a185 185 0 0 1 29.1 59.1" fill="#efcc9f"/><path opacity=".1" d="M71.5 279c9 9 16.1 22.5 25 30-1.7-12.5-4.3-26-10.4-37.3-6.2-11.6-17.5-21-29-20.3-14.2 1-25.9 17.6-27.4 32.6 1-9 19-15 25.9-14.2 10.8 20.4 15 60.6 15 60.6 9-22.7 5.4-40.7 1-51.5Z" fill="#000"/></g><g transform="matrix(.85472 0 0 .855 19 -17)"><path d="M385.3 380.4c9.4.2 18.3-2.5 26-10.5 4-4.2 8.2-6.5 14-3 13.9 8.7 17.1 30.2 13.4 44.6a63.3 63.3 0 0 1-30.7 36.8c-38.2 22.4-67.6 17.4-106.8 3-30.8-11.2-72.5-33.9-62-72.9 13.2-48.3 69.6-25 101.4-12 13.5 5.5 29.6 13.5 44.7 14Z" fill="#fff"/><path d="m347 463.2-6-.8 22.7-86.7 5.7 1.9-22.3 85.6ZM426.9 433a68.7 68.7 0 0 1-5.1 5.3l-13-66 2.6-2.4c.8-.9 1.7-1.7 2.6-2.4l12.9 65.6ZM296.8 351.4 264.4 433a98.1 98.1 0 0 1-5-3.7l31.4-79 6 1.1Z" fill="#D1D3D4"/></g><g transform="matrix(.85472 0 0 .855 19 -17)"><path d="M397 294.3a80.4 80.4 0 0 0 16.9-8.1c3.1 3.5 5 9 5 14 0 8-3.6 16.6-12.8 15.6-7.7-.8-9.7-11-9.7-16 0-1.9.2-3.8.6-5.5ZM301.2 283.1c-2.8 3.8-4.6 9-4.6 15.4 0 12.5 6.1 19 15.4 21.5 13 2 19.1-7.6 19.1-19.5a26 26 0 0 0-.8-6.4 49 49 0 0 1-29-11Z" fill="#2A1200"/><path d="M332 270.3a43.9 43.9 0 0 1-38.3-12.6c-3.3-3.3-4.2-9.2-1-13 3-3.6 8.6-4.7 12-1.2l3.3 3c.3.3 1.3.8 1.6 1.2l.6.3a37.7 37.7 0 0 0 6 3c.5 0 1.2.3 1.7.5a34.8 34.8 0 0 0 6.3 1h2c1.5-.2 2.9-.3 4.3-.6 4.4-.8 9 3.5 9.3 8.3.2 5.2-3 9.3-7.7 10.1ZM421.7 261.4c-6 6-13.8 9.5-21.8 9.7a8.1 8.1 0 0 1-6-2.8 9.5 9.5 0 0 1-2.1-6.5 10 10 0 0 1 2.7-6.5 9 9 0 0 1 6.2-2.7h1.1l3.4-1c1.3-.6 2.5-1.4 3.7-2.2l1.2-1.1c1.6-1.7 4-2.7 6.1-2.7 2.1 0 4.6 1 6 2.8 1.4 1.8 2.4 4 2.2 6.5-.2 2.5-1 4.8-2.7 6.5Z" fill="#71472D"/></g><g transform="matrix(.85472 0 0 .85667 18 -15)"><path d="M366.8 170.9c-8 7.2-16.8 17.6-26.5 29.1-16.3 19.3-35.3 41.8-57.3 57.3a227.2 227.2 0 0 1-86.5 35.3 86.4 86.4 0 0 0-16.4 32c-3.2 9.9-5.5 17-13 17.4-9-20.6-25.4-54.2-71.1-39-38.5 12.8-40.4 56.3-28 78.5 7 12.4 35.3 40 81 34l29.5 25.5c-2.9 5.4-8.2 13.1-25.8 20.7-21.9 9.5-123.8 1-133.3-60.8-23.8-20.6-61.1-78.2-20-143.6 12.6-20 30.3-34.4 51.3-43.7-.2-8.2-.2-17.7.1-28.6 2-60 58.1-108.4 102-118.9 42.7-10.2 132.8-6.8 169.8 26.2C443 47.5 473.8 193.9 469.5 249.5c22.4 44 7 106.7-1 131.5-4-33.6-31.3-56-44-61.5 5.6-30.4-5-82-11-104a139 139 0 0 0-46.7-44.6Z" fill="#71472d"/></g><g transform="matrix(.85472 0 0 .85667 14 -12)"></g></g></svg> \ No newline at end of file diff --git a/epf-front-skeleton-main/src/assets/homepage-cat.png b/epf-front-skeleton-main/src/assets/homepage-cat.png deleted file mode 100644 index bd4cb1387858e4f8b18421f5abbdecbdda2b2978..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/homepage-cat.png and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/img1.png b/epf-front-skeleton-main/src/assets/img1.png deleted file mode 100644 index 234b78caada1a098c6cc68745c06d4383aa48222..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/img1.png and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/img2.png b/epf-front-skeleton-main/src/assets/img2.png deleted file mode 100644 index 81504bd418d93e7f44fff6d7ad0b3c516d45e743..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/img2.png and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/img3.png b/epf-front-skeleton-main/src/assets/img3.png deleted file mode 100644 index beed08c771354ea9833e040fc737836465eca580..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/img3.png and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/logo-epf-rouge.png b/epf-front-skeleton-main/src/assets/logo-epf-rouge.png deleted file mode 100644 index da7280f4ed673ad8922f174a3f1d59ea4469274f..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/logo-epf-rouge.png and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/logo-epf.png b/epf-front-skeleton-main/src/assets/logo-epf.png deleted file mode 100644 index 51624745f4afbabd0bae433feb04be90943e0420..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/logo-epf.png and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/logo-takima.png b/epf-front-skeleton-main/src/assets/logo-takima.png deleted file mode 100644 index 4ed698f8b31e7435ce90587a2e465f32f302193f..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/logo-takima.png and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/logo.png b/epf-front-skeleton-main/src/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..f232cd5f2610aa3ea0ee4ae986aa3e5f1be46890 Binary files /dev/null and b/epf-front-skeleton-main/src/assets/logo.png differ diff --git a/epf-front-skeleton-main/src/assets/soleil.gif b/epf-front-skeleton-main/src/assets/soleil.gif deleted file mode 100644 index 85b885dd576e3872e58e9f4c19529daaf6b4ddf5..0000000000000000000000000000000000000000 Binary files a/epf-front-skeleton-main/src/assets/soleil.gif and /dev/null differ diff --git a/epf-front-skeleton-main/src/assets/team.png b/epf-front-skeleton-main/src/assets/team.png new file mode 100644 index 0000000000000000000000000000000000000000..4ce0529b0f7c96735f5932541a8c586a557d04a5 Binary files /dev/null and b/epf-front-skeleton-main/src/assets/team.png differ diff --git a/epf-front-skeleton-main/src/index.html b/epf-front-skeleton-main/src/index.html index 35d1b283b12ee3c759fd230d03f296cc709da99d..1a8bb6c3538b52145b2ff17b935fc4f5a7bdb719 100644 --- a/epf-front-skeleton-main/src/index.html +++ b/epf-front-skeleton-main/src/index.html @@ -5,7 +5,7 @@ <title>Project Skeleton</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="icon" type="image/png" href="assets/logo-epf-rouge.png"> + <link rel="icon" type="image/png" href="assets/logo.png"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">