From 25b6c0884dfba0e7de08de32790ec2f7d057d6db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Fri, 22 Jan 2021 15:12:57 +0300 Subject: [PATCH] added data to cards --- .eslintcache | 2 +- src/App.css | 5 +++ src/App.js | 8 +++-- src/components/card/card-component.jsx | 14 ++++----- src/components/card/card-style.scss | 41 +++++++++++++++---------- src/components/time/time-component.scss | 2 +- src/data/card1.js | 28 +++++++++++++++++ src/data/card2.js | 6 ++++ 8 files changed, 78 insertions(+), 28 deletions(-) create mode 100644 src/data/card1.js create mode 100644 src/data/card2.js diff --git a/.eslintcache b/.eslintcache index ee9b14c..5fa6fc7 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/home/yusuf/Programming/React/homepage/src/index.js":"1","/home/yusuf/Programming/React/homepage/src/App.js":"2","/home/yusuf/Programming/React/homepage/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx":"4","/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx":"5","/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx":"6"},{"size":500,"mtime":1611166245620,"results":"7","hashOfConfig":"8"},{"size":559,"mtime":1611234006423,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1611166245620,"results":"10","hashOfConfig":"8"},{"size":496,"mtime":1611233470447,"results":"11","hashOfConfig":"8"},{"size":993,"mtime":1611233413913,"results":"12","hashOfConfig":"8"},{"size":261,"mtime":1611234119493,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"p1t955",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/homepage/src/index.js",[],["27","28"],"/home/yusuf/Programming/React/homepage/src/App.js",[],"/home/yusuf/Programming/React/homepage/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx",[],{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","replacedBy":"32"},"no-native-reassign",["33"],"no-negated-in-lhs",["34"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/home/yusuf/Programming/React/homepage/src/index.js":"1","/home/yusuf/Programming/React/homepage/src/App.js":"2","/home/yusuf/Programming/React/homepage/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx":"4","/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx":"5","/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx":"6","/home/yusuf/Programming/React/homepage/src/data/card1.js":"7","/home/yusuf/Programming/React/homepage/src/data/card2.js":"8"},{"size":500,"mtime":1611166245620,"results":"9","hashOfConfig":"10"},{"size":675,"mtime":1611317556333,"results":"11","hashOfConfig":"10"},{"size":362,"mtime":1611166245620,"results":"12","hashOfConfig":"10"},{"size":496,"mtime":1611233470447,"results":"13","hashOfConfig":"10"},{"size":993,"mtime":1611233413913,"results":"14","hashOfConfig":"10"},{"size":242,"mtime":1611317509940,"results":"15","hashOfConfig":"10"},{"size":525,"mtime":1611317530510,"results":"16","hashOfConfig":"10"},{"size":282,"mtime":1611315056757,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"p1t955",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"/home/yusuf/Programming/React/homepage/src/index.js",[],["35","36"],"/home/yusuf/Programming/React/homepage/src/App.js",[],"/home/yusuf/Programming/React/homepage/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/data/card1.js",[],"/home/yusuf/Programming/React/homepage/src/data/card2.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/src/App.css b/src/App.css index b2dc82b..343ffe2 100644 --- a/src/App.css +++ b/src/App.css @@ -2,3 +2,8 @@ body { background-color: #181a1b; color: white; } + +.Cards { + display: flex; + justify-content: center; +} diff --git a/src/App.js b/src/App.js index f5fb147..c4953ce 100644 --- a/src/App.js +++ b/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 (

- +
+ + +
); } diff --git a/src/components/card/card-component.jsx b/src/components/card/card-component.jsx index 8e543f1..bb39395 100644 --- a/src/components/card/card-component.jsx +++ b/src/components/card/card-component.jsx @@ -2,13 +2,13 @@ import "./card-style.scss"; const Card = (props) => { return ( -
- -
+ ); }; diff --git a/src/components/card/card-style.scss b/src/components/card/card-style.scss index 8844e94..806c5d7 100644 --- a/src/components/card/card-style.scss +++ b/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; } } diff --git a/src/components/time/time-component.scss b/src/components/time/time-component.scss index 99b14eb..9d35325 100644 --- a/src/components/time/time-component.scss +++ b/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) { diff --git a/src/data/card1.js b/src/data/card1.js new file mode 100644 index 0000000..ac267c1 --- /dev/null +++ b/src/data/card1.js @@ -0,0 +1,28 @@ +export const cards = [ + + Protonmail + , +
  • + + Youtube + +
    • , + + Youtube Studio + , +
  • + + Github + +
    • , +
  • + + Odysee + +
    • , +
  • + + Udemy + +
    • , +]; diff --git a/src/data/card2.js b/src/data/card2.js new file mode 100644 index 0000000..f4cbb54 --- /dev/null +++ b/src/data/card2.js @@ -0,0 +1,6 @@ +export const card2 = [ + r/DataIsBeautiful, + r/Firefox, + r/Linux, + r/Privacy, +];