added data to cards

src/App.css

@@ -2,3 +2,8 @@ body {
   background-color: #181a1b;
   color: white;
 }
+
+.Cards {
+  display: flex;
+  justify-content: center;
+}

src/App.js

@@ -3,6 +3,8 @@ import React, { Component } from "react";
 import Time from "./components/time/time-component";
 import Forecast from "./components/fetch weather/weather-fetch";
 import Card from "./components/card/card-component";
+import { cards } from "./data/card1";
+import { card2 } from "./data/card2";
 
 class App extends Component {
   constructor() {
@@ -10,14 +12,16 @@ class App extends Component {
     this.state = {};
   }
   render() {
-    const card1 = ["deneme", "deneme2"];
     return (
       <div className="App">
         <h1>
           <Time />
         </h1>
         <Forecast />
-        <Card list={card1} />
+        <div className="Cards">
+          <Card list={cards} />
+          <Card list={card2} />
+        </div>
       </div>
     );
   }

src/components/card/card-component.jsx

@@ -2,13 +2,13 @@ import "./card-style.scss";
 
 const Card = (props) => {
   return (
-    <div className="card">
-      <ul className="list">
-        {props.list.map((li) => (
-          <li className="text">{li}</li>
-        ))}
-      </ul>
-    </div>
+    <ul className="card">
+      {props.list.map((li) => (
+        <li key={li} className="text">
+          {li}
+        </li>
+      ))}
+    </ul>
   );
 };
 

src/components/card/card-style.scss

@@ -1,22 +1,29 @@
+.title {
+  text-align: center;
+}
+
 .card {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 250px;
+  margin-left: 20px;
+  width: 200px;
+  height: 260px;
+  background-color: #242f34;
+  border: 1px solid grey;
+  border-radius: 5px;
+  padding: 10px;
 
-  .list {
-    margin-left: 40px;
-    width: 200px;
-    height: 230px;
-    background-color: #242f34;
-    border: 1px solid grey;
-    border-radius: 5px;
-    padding: 20px;
+  .text {
+    text-align: center;
+    list-style: none;
+    line-height: 30px;
+  }
 
-    .text {
-      text-align: center;
-      list-style: none;
-      line-height: 30px;
-    }
+  a:link {
+    color: white;
+  } /* unvisited link */
+  a:visited {
+    color: white;
+  } /* visited link */
+  a:active {
+    color: white;
   }
 }

src/components/time/time-component.scss

@@ -1,6 +1,6 @@
 .clock {
   text-align: center;
-  font-size: 90px;
+  font-size: 120px;
 }
 
 @media screen and (max-width: 700px) {

src/data/card1.js

@@ -0,0 +1,28 @@
+export const cards = [
+  <a href="https://www.protonmail.com/login" target="">
+    Protonmail
+  </a>,
+  <li>
+    <a href="https://www.youtube.com" target="">
+      Youtube
+    </a>
+  </li>,
+  <a href="https://studio.youtube.com" target="">
+    Youtube Studio
+  </a>,
+  <li>
+    <a href="https://www.github.com" target="">
+      Github
+    </a>
+  </li>,
+  <li>
+    <a href="https://www.odysee.com" target="">
+      Odysee
+    </a>
+  </li>,
+  <li>
+    <a href="https:/www.udemy.com" target="">
+      Udemy
+    </a>
+  </li>,
+];

src/data/card2.js

@@ -0,0 +1,6 @@
+export const card2 = [
+  <a href="https://www.reddit.com/r/dataisbeautiful/">r/DataIsBeautiful</a>,
+  <a href="https://www.reddit.com/r/firefox/">r/Firefox</a>,
+  <a href="https://www.reddit.com/r/linux/">r/Linux</a>,
+  <a href="https://www.reddit.com/r/privacy/">r/Privacy</a>,
+];