Personalizando

Vyckie · Vyckie · commit 4625c1fd9aa0 · 2022-11-03T22:01:07.000-03:00
diff --git a/Explore/assets/bg-yellow.svg b/Explore/assets/bg-yellow.svg
diff --git a/Explore/assets/icon-colombia.svg b/Explore/assets/icon-colombia.svg
@@ -0,0 +1,12 @@
+<svg width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_175_390)">
+<path d="M0 25.4551C0 11.648 11.193 0.455078 25 0.455078C38.807 0.455078 50 11.648 50 25.4551L25 27.629L0 25.4551Z" fill="#FFDA44"/>
+<path d="M3.3457 37.9547C7.66846 45.427 15.747 50.4547 25.0004 50.4547C34.2538 50.4547 42.3323 45.427 46.6551 37.9547L25.0004 36.3242L3.3457 37.9547Z" fill="#D80027"/>
+<path d="M46.6547 37.9551C48.7818 34.2779 50 30.0089 50 25.4551H0C0 30.0089 1.21816 34.2779 3.34531 37.9551H46.6547Z" fill="#0052B4"/>
+</g>
+<defs>
+<clipPath id="clip0_175_390">
+<rect width="50" height="50" fill="white" transform="translate(0 0.455078)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Explore/assets/icon-hungary.svg b/Explore/assets/icon-hungary.svg
@@ -0,0 +1,12 @@
+<svg width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_175_385)">
+<path d="M1.55498 16.8507C0.550098 19.5591 0 22.4883 0 25.5463C0 28.6043 0.550098 31.5337 1.55498 34.2419L25 36.4158L48.445 34.2419C49.4499 31.5337 50 28.6043 50 25.5463C50 22.4883 49.4499 19.5591 48.445 16.8507L25 14.6768L1.55498 16.8507Z" fill="#F0F0F0"/>
+<path d="M24.9996 0.545898C14.2506 0.545898 5.08691 7.33027 1.55469 16.8503H48.4448C44.9123 7.33027 35.7488 0.545898 24.9996 0.545898Z" fill="#D80027"/>
+<path d="M24.9996 50.5456C35.7488 50.5456 44.9123 43.7612 48.4447 34.2412H1.55469C5.08691 43.7612 14.2506 50.5456 24.9996 50.5456Z" fill="#6DA544"/>
+</g>
+<defs>
+<clipPath id="clip0_175_385">
+<rect width="50" height="50" fill="white" transform="translate(0 0.545898)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Explore/assets/icon-japao.svg b/Explore/assets/icon-japao.svg
@@ -0,0 +1,11 @@
+<svg width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_175_392)">
+<path d="M25 50.4551C38.8071 50.4551 50 39.2622 50 25.4551C50 11.648 38.8071 0.455078 25 0.455078C11.1929 0.455078 0 11.648 0 25.4551C0 39.2622 11.1929 50.4551 25 50.4551Z" fill="#F0F0F0"/>
+<path d="M25.0004 36.325C31.0035 36.325 35.8699 31.4585 35.8699 25.4555C35.8699 19.4524 31.0035 14.5859 25.0004 14.5859C18.9973 14.5859 14.1309 19.4524 14.1309 25.4555C14.1309 31.4585 18.9973 36.325 25.0004 36.325Z" fill="#D80027"/>
+</g>
+<defs>
+<clipPath id="clip0_175_392">
+<rect width="50" height="50" fill="white" transform="translate(0 0.455078)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Explore/index.html b/Explore/index.html
@@ -7,9 +7,16 @@
     <title>Calendario De Jogos Copa</title>
     <link rel="stylesheet" href="./style.css">
 </head>
-<body>
+<body class="">
     
-    <div id="app"></div>
+    <div id="app">
+        <header>
+            <img src="./assets/logo.svg" alt="">
+        </header>
+        <main id="cards">
+               
+        </main>
+    </div>
     <script src="./main.js"></script>
 </body>
 </html>
diff --git a/Explore/main.js b/Explore/main.js
@@ -8,9 +8,11 @@ function createGame(play1,play2,hours){
     `
 }
 
+let delay =0;
 function createCard(date, day, games){
+    delay = delay + 0.1;
     return `
-    <div class="card">
+    <div class="card" style="animation-delay: ${delay}s">
     <h2> ${date} <span>${day}</span></h2>
         <ul>
             ${games}
@@ -22,12 +24,8 @@ function createCard(date, day, games){
 
 
 
-document.querySelector("#app").innerHTML = `
-<header>
-<img src="./assets/logo.svg" alt="">
-</header>
-<main id="cards">
-    ${createCard("24/11", "QUINTA", createGame("camaroes","suica","9:00"))}
-    ${createCard("28/11", "SEGUNDA", createGame("suica","brasil","11:00"))}
-    ${createCard("02/12", "SEXTA", createGame("camaroes","argentina","12:00"))}
-</main>`
+document.querySelector("#cards").innerHTML = `
+    ${createCard("24/11", "QUINTA", createGame("camaroes","suica","9:00")+ createGame("japao","colombia","15:00"))} 
+    ${createCard("28/11", "SEGUNDA", createGame("suica","brasil","11:00") + createGame("brasil","argentina","22:00"))} 
+    ${createCard("02/12", "SEXTA", createGame("camaroes","argentina","12:00") + createGame("japao","hungary","17:00"))}
+`
diff --git a/Explore/style.css b/Explore/style.css
@@ -4,25 +4,42 @@
     box-sizing: border-box;
 }
 
+:root{
+    --card-color-primary: #f7dd43;
+    --card-title-border-color: #746615;
+}
+
+body.blue{
+    --card-color-primary: #338Af3;
+    --card-title-border-color: #338Af3;
+}
+
+body.green{
+    --card-color-primary: #047c3f;
+    --card-title-border-color: #047c3f;
+}
+
 ul{
     list-style: none;
 }
 
 body{
     background-color: #121214;
-    background-image: url(./assets/bg.svg);
+    background-image: url(./assets/bg-yellow.svg);
     background-position-x: center;
     background-position-y: 50%;
 }
 
 #app{
     border: 1px;
     width: fit-content;
-    margin: 52px auto;
+    margin: auto;
+    padding: 52px;
 }
 
 header{
     margin-bottom: 53px;
+    text-align: center;
 }
 
 #cards{
@@ -35,25 +52,27 @@ header{
     border: 1px;
     padding: 32px 23px;
     text-align: center;
+
     background: #1d1c19;
-    border-bottom: 2px solid #f7dd43;
+    border-bottom: 2px solid var(--card-color-primary);
     border-radius: 6px;
 }
 
 .card h2{
     display: flex;
     gap: 16px;
     justify-content: center;
+    align-items:center; //
 
     padding: 8px 16px;
-    border: 1px solid #746615;
+    border: 1px solid var(--card-title-border-color);
     border-radius: 6px;
 
     width: fit-content;
     margin-inline:auto;
     margin-bottom: 53px;
 
-    color: #F7DD43;
+    color: #f7dd43;
 }
 
 .card h2 span{
@@ -66,15 +85,68 @@ header{
     display: flex;
     flex-direction: column;
     gap: 24px;
+
+    width:270px;
 }
 
 .card ul li{
     display: flex;
     align-items: center;
     justify-content: space-between;
+    color: #FFFFFF;
 }
 
 .card ul li + li{
     padding-top:24px;
-    border-top: 1px solid green;
+    border-top: 1px solid #323238;
+}
+
+.card ul li strong{
+    font-weight: 900;
+    font-size:36px;
+    line-heignt: 125%;
+
+    color:#E1E1E6;
+}
+
+.card h2:hover,
+.card ul li strong:hover,
+.card ul li img:hover {
+    transform: scale(1.1); // alterar tamanho dos componentes
+
+}
+
+.card h2,
+.card ul li strong,
+.card ul li img{
+    transition: transform 0.3s;
+}
+
+.card{
+    animation: appear 0.7s
+}
+
+//.card:nth-child(2){
+//    animation-delay:0.1s;
+//}
+
+//.card:nth-child(3){
+//    animation-delay:0.2s;
+//}
+
+@keyframes appear{
+    0% {
+        transform: translateY(-50px);
+        opacity: 0;
+    }
+
+    100%{
+        opacity: 1;
+    }
+}
+@media(min-width: 700px){
+    #cards{
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 }
