js

Vyckie · Vyckie · commit 6eea82bda8c1 · 2022-11-02T23:35:45.000-03:00
diff --git a/Explore/assets/icon-argentina.svg b/Explore/assets/icon-argentina.svg
@@ -0,0 +1,13 @@
+<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_343)">
+<path d="M25 50.7275C38.8071 50.7275 50 39.5347 50 25.7275C50 11.9204 38.8071 0.727539 25 0.727539C11.1929 0.727539 0 11.9204 0 25.7275C0 39.5347 11.1929 50.7275 25 50.7275Z" fill="#F0F0F0"/>
+<path d="M24.9998 0.727539C15.0883 0.727539 6.52422 6.49561 2.48047 14.858H47.519C43.4754 6.49561 34.9112 0.727539 24.9998 0.727539V0.727539Z" fill="#338AF3"/>
+<path d="M24.9998 50.7271C34.9112 50.7271 43.4754 44.9591 47.5191 36.5967H2.48047C6.52422 44.9591 15.0883 50.7271 24.9998 50.7271Z" fill="#338AF3"/>
+<path d="M32.4717 25.7272L29.4185 27.1635L31.0443 30.1204L27.7289 29.4861L27.3088 32.8354L24.9995 30.3721L22.6901 32.8354L22.2701 29.4861L18.9547 30.1203L20.5805 27.1634L17.5273 25.7272L20.5806 24.291L18.9547 21.3342L22.27 21.9684L22.6902 18.6191L24.9995 21.0824L27.3089 18.6191L27.7289 21.9684L31.0444 21.3342L29.4186 24.2911L32.4717 25.7272Z" fill="#FFDA44"/>
+</g>
+<defs>
+<clipPath id="clip0_175_343">
+<rect width="50" height="50" fill="white" transform="translate(0 0.727539)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Explore/assets/icon-brasil.svg b/Explore/assets/icon-brasil.svg
@@ -0,0 +1,14 @@
+<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_336)">
+<path d="M25 50.8184C38.8071 50.8184 50 39.6255 50 25.8184C50 12.0112 38.8071 0.818359 25 0.818359C11.1929 0.818359 0 12.0112 0 25.8184C0 39.6255 11.1929 50.8184 25 50.8184Z" fill="#6DA544"/>
+<path d="M24.9998 10.6006L45.652 25.818L24.9998 41.0353L4.34766 25.818L24.9998 10.6006Z" fill="#FFDA44"/>
+<path d="M25.0003 34.5143C29.8027 34.5143 33.6959 30.6211 33.6959 25.8187C33.6959 21.0162 29.8027 17.123 25.0003 17.123C20.1978 17.123 16.3047 21.0162 16.3047 25.8187C16.3047 30.6211 20.1978 34.5143 25.0003 34.5143Z" fill="#F0F0F0"/>
+<path d="M20.6517 25.2754C19.1396 25.2754 17.6803 25.5054 16.3066 25.9321C16.3675 30.6821 20.2351 34.5146 24.9995 34.5146C27.9456 34.5146 30.5476 33.048 32.1205 30.8067C29.4294 27.4379 25.2887 25.2754 20.6517 25.2754Z" fill="#0052B4"/>
+<path d="M33.534 27.4847C33.6387 26.9452 33.6952 26.3887 33.6952 25.8187C33.6952 21.0161 29.8021 17.123 24.9996 17.123C21.4162 17.123 18.34 19.2911 17.0088 22.3866C18.1855 22.1428 19.4039 22.0144 20.6519 22.0144C25.7023 22.0143 30.2713 24.1137 33.534 27.4847Z" fill="#0052B4"/>
+</g>
+<defs>
+<clipPath id="clip0_175_336">
+<rect width="50" height="50" fill="white" transform="translate(0 0.818359)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Explore/index.html b/Explore/index.html
@@ -9,37 +9,7 @@
 </head>
 <body>
     
-    <div id="app">
-        <header>
-            <img src="./assets/logo.svg" alt="">
-        </header>
-        <main id="cards">
-            <div class="card">
-                <h2> 24/11 <span>quinta</span></h2>
-                <ul>
-                    <li>
-                        <img src="./assets/icon-suica.svg" alt="bandeira da suiça">
-                        <strong>7:00</strong>
-                        <img src="./assets/icon-camaroes.svg" alt="bandeira de camarôes">Camarões
-                    </li>
-                    <li>
-                        <img src="" alt="">
-                        <strong>7:00</strong>
-                        <img src="" alt="">Camarões
-                    </li>
-                    <li>
-                        <img src="" alt="">
-                        <strong>7:00</strong>
-                        <img src="" alt="">Camarões
-                    </li>
-                    
-                </ul>
-                
-            </div>
-        </main>
-        <footer>
-
-        </footer>
-    </div>
+    <div id="app"></div>
+    <script src="./main.js"></script>
 </body>
 </html>
diff --git a/Explore/main.js b/Explore/main.js
@@ -0,0 +1,33 @@
+function createGame(play1,play2,hours){
+    return`
+        <li>
+            <img src="./assets/icon-${play1}.svg" alt="bandeira da ${play1}">
+            <strong>${hours}</strong>
+            <img src="./assets/icon-${play2}.svg" alt="bandeira de ${play2}">
+        </li>   
+    `
+}
+
+function createCard(date, day, games){
+    return `
+    <div class="card">
+    <h2> ${date} <span>${day}</span></h2>
+        <ul>
+            ${games}
+        </ul>
+
+</div>
+    `
+}
+
+
+
+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>`
diff --git a/Explore/style.css b/Explore/style.css
@@ -25,6 +25,12 @@ header{
     margin-bottom: 53px;
 }
 
+#cards{
+    display: flex;
+    flex-direction: column;
+    gap: 33px;
+}
+
 .card{
     border: 1px;
     padding: 32px 23px;
@@ -53,7 +59,7 @@ header{
 .card h2 span{
     color: #E1E1E6;
     font-size:14px;
-    text-transform: uppercasse;
+    text-transform: uppercase;
 }
 
 .card ul{
