From 2c2e5cd89247387e18ac1fe53b1f4ff4f4024de0 Mon Sep 17 00:00:00 2001 From: vinaybiradar1717 Date: Wed, 14 Aug 2019 22:59:59 +0530 Subject: [PATCH 1/6] card created Signed-off-by: vinaybiradar1717 --- src/components/Card/Card.scss | 26 +++++++++++ src/components/Card/index.js | 81 +++++++++++++++++++++++++++++++++++ src/stories/card.stories.js | 12 ++++++ 3 files changed, 119 insertions(+) create mode 100644 src/components/Card/Card.scss create mode 100644 src/components/Card/index.js create mode 100644 src/stories/card.stories.js diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss new file mode 100644 index 0000000..f40cefc --- /dev/null +++ b/src/components/Card/Card.scss @@ -0,0 +1,26 @@ +@import "../../styles/ColorSchema.scss"; + +.Card { + display: flex; + justify-content: center; + text-align: center; +} + +.Card p { + min-height: 300px; + padding: 0 15px; + text-align: left; +} +.Card-detail { + background-color: silver; + border-radius: 7%; + width: 280px; + height: 400px; +} + + +.column { + float: left; + width: 25%; + margin: 100px 100px; + } \ No newline at end of file diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 0000000..f180355 --- /dev/null +++ b/src/components/Card/index.js @@ -0,0 +1,81 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +/* eslint-disable jsx-a11y/label-has-for */ +/* eslint-disable linebreak-style */ +/* eslint-disable react/destructuring-assignment */ +/* eslint-disable react/button-has-type */ +/* eslint-disable react/prefer-stateless-function */ +import React from "react"; +import "./Card.css"; + +function Card(props) { + return( +
+
+
+

Title

+

Sed ut perspiciatis unde omnis iste natus + error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. + Neque porro quisquam est, qui dolorem ipsum quia + dolor sit amet,

+ +
+
+
+
+

Title

+

Sed ut perspiciatis unde omnis iste natus + error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. + Neque porro quisquam est, qui dolorem ipsum quia + dolor sit amet,

+ +
+
+
+
+

Title

+

Sed ut perspiciatis unde omnis iste natus + error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. + Neque porro quisquam est, qui dolorem ipsum quia + dolor sit amet,

+ +
+
+
+
+

Title

+

Sed ut perspiciatis unde omnis iste natus + error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. + Neque porro quisquam est, qui dolorem ipsum quia + dolor sit amet,

+ +
+
+
+ ) +} + +export default Card; \ No newline at end of file diff --git a/src/stories/card.stories.js b/src/stories/card.stories.js new file mode 100644 index 0000000..438795c --- /dev/null +++ b/src/stories/card.stories.js @@ -0,0 +1,12 @@ +/* eslint-disable import/no-extraneous-dependencies */ + +import React from "react"; +import { storiesOf, addDecorator } from "@storybook/react"; +import { withInfo } from "@storybook/addon-info"; +import Card from "../components/Card"; + +storiesOf("Card", module) + .addDecorator(withInfo) + .addWithJSX("Card", () => ( + + )); \ No newline at end of file From 78187ae107ebf0ab4c9c53524d9769d7089e9952 Mon Sep 17 00:00:00 2001 From: vinaybiradar1717 Date: Wed, 14 Aug 2019 23:28:57 +0530 Subject: [PATCH 2/6] card: Basic card --- src/components/Card/Card.scss | 33 ++++++++++++++++++++++++++++++++- src/components/Card/index.js | 2 +- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index f40cefc..a48b5b9 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -16,11 +16,42 @@ border-radius: 7%; width: 280px; height: 400px; + margin: 50px 80px; + box-shadow: 2px 4px 8px 0 rgba(228, 212, 212, 0.5); } .column { float: left; width: 25%; - margin: 100px 100px; + } + + .row {margin: 0 -5px;} + + /* Clear floats after the columns */ + .row:after { + content: ""; + display: table; + clear: both; + } + + /* Responsive columns */ + @media screen and (max-width: 600px) { + .column { + width: 100%; + display: block; + margin-bottom: 20px; + } + } + + /* Style the counter cards */ + .card { + + padding: 16px; + text-align: center; + background-color: #f1f1f1; + } + + .Card-button { + background-color: yellow; } \ No newline at end of file diff --git a/src/components/Card/index.js b/src/components/Card/index.js index f180355..9a8bbe1 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -9,7 +9,7 @@ import "./Card.css"; function Card(props) { return( -
+

Title

From 16b042b5ef83181c54f8ef1ec35bb73f7fe1fbc6 Mon Sep 17 00:00:00 2001 From: vinaybiradar1717 Date: Thu, 15 Aug 2019 01:30:09 +0530 Subject: [PATCH 3/6] card button Signed-off-by: vinaybiradar1717 --- src/components/Card/Card.scss | 40 ++++++++++++++++++++++++++++++++--- src/components/Card/index.js | 8 +++---- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index a48b5b9..281d491 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -1,21 +1,27 @@ @import "../../styles/ColorSchema.scss"; +* { + box-sizing: border-box; +} + .Card { display: flex; justify-content: center; text-align: center; + min-height: 500px; } .Card p { min-height: 300px; padding: 0 15px; text-align: left; + margin: 0px; } .Card-detail { - background-color: silver; + background-color: white; border-radius: 7%; width: 280px; - height: 400px; + height: 430px; margin: 50px 80px; box-shadow: 2px 4px 8px 0 rgba(228, 212, 212, 0.5); } @@ -24,6 +30,7 @@ .column { float: left; width: 25%; + // height: 700px; } .row {margin: 0 -5px;} @@ -51,7 +58,34 @@ text-align: center; background-color: #f1f1f1; } + + .Card-button { - background-color: yellow; + background-position: center; + transition: background 0.8s; + } + .Card-button:hover { + background: #6eb9f7 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; + } + .Card-button:active { + background-color: #6eb9f7; + background-size: 100%; + transition: background 0s; + } + + /* Button style */ + button { + width: 80%; + height: 50px; + border: none; + border-radius: 15px; + padding: 12px 18px; + font-size: 16px; + text-transform: uppercase; + cursor: pointer; + color: white; + background-color: #2597f3; + box-shadow: 0 0 4px #999; + outline: none; } \ No newline at end of file diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 9a8bbe1..724725a 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -23,7 +23,7 @@ function Card(props) { dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

- +
@@ -39,7 +39,7 @@ function Card(props) { dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

- +
@@ -55,7 +55,7 @@ function Card(props) { dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

- +
@@ -71,7 +71,7 @@ function Card(props) { dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

- +
From 7ece51ba9748086621e47c9a5a419ed218251931 Mon Sep 17 00:00:00 2001 From: vinaybiradar1717 Date: Thu, 15 Aug 2019 01:39:35 +0530 Subject: [PATCH 4/6] button styled again Signed-off-by: vinaybiradar1717 --- src/components/Card/Card.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 281d491..b8b52ec 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -18,7 +18,9 @@ margin: 0px; } .Card-detail { - background-color: white; + padding: 16px; + text-align: center; + background-color: #f1f1f1; border-radius: 7%; width: 280px; height: 430px; @@ -51,13 +53,13 @@ } } - /* Style the counter cards */ - .card { + // /* Style the counter cards */ + // .Card { - padding: 16px; - text-align: center; - background-color: #f1f1f1; - } + // padding: 16px; + // text-align: center; + // background-color: #f1f1f1; + // } From 78fef54ea169a68a84a0bca4c02dd78dd7003285 Mon Sep 17 00:00:00 2001 From: vinaybiradar1717 Date: Thu, 15 Aug 2019 02:04:46 +0530 Subject: [PATCH 5/6] responsive cards Signed-off-by: vinaybiradar1717 --- src/components/Card/Card.scss | 15 +++++++++++++++ src/components/Card/index.js | 4 +++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index b8b52ec..3ed7edb 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -45,6 +45,21 @@ } /* Responsive columns */ + @media screen and (max-width: 1200px) { + .column { + width: 33.33%; + display: block; + margin-bottom: 20px; + } + } + @media screen and (max-width: 1000px) { + .column { + width: 50%; + display: block; + margin-bottom: 20px; + } + } + @media screen and (max-width: 600px) { .column { width: 100%; diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 724725a..f69a753 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -9,7 +9,8 @@ import "./Card.css"; function Card(props) { return( -
+
+

Title

@@ -75,6 +76,7 @@ function Card(props) {
+
) } From b04112e47a8774d6678746083b67e4cad888161a Mon Sep 17 00:00:00 2001 From: vinaybiradar1717 Date: Thu, 15 Aug 2019 03:39:10 +0530 Subject: [PATCH 6/6] card Signed-off-by: vinaybiradar1717 --- src/components/Card/Card.scss | 176 ++++++++++++++++---------------- src/components/Card/index.js | 82 +++++++-------- src/components/Card1/Card1.scss | 88 ++++++++++++++++ src/components/Card1/index.js | 26 +++++ src/components/index.js | 1 + src/stories/card1.stories.js | 12 +++ 6 files changed, 258 insertions(+), 127 deletions(-) create mode 100644 src/components/Card1/Card1.scss create mode 100644 src/components/Card1/index.js create mode 100644 src/stories/card1.stories.js diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 3ed7edb..4ebdaf6 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -2,107 +2,109 @@ * { box-sizing: border-box; + justify-content: center; + text-align: center; } .Card { - display: flex; - justify-content: center; - text-align: center; - min-height: 500px; + display: flex; + justify-content: center; + text-align: center; + min-height: 30px; } -.Card p { - min-height: 300px; - padding: 0 15px; - text-align: left; - margin: 0px; +// .Card-title { +// width: 75%; +// background-color: yellow; +// } +button { + width: 80%; + height: 50px; + border: none; + border-radius: 15px; + padding: 12px 18px; + font-size: 16px; + text-transform: uppercase; + cursor: pointer; + color: white; + background-color: #2597f3; + box-shadow: 0 0 4px #999; + outline: none; } -.Card-detail { - padding: 16px; - text-align: center; - background-color: #f1f1f1; - border-radius: 7%; - width: 280px; - height: 430px; - margin: 50px 80px; - box-shadow: 2px 4px 8px 0 rgba(228, 212, 212, 0.5); +.Card-title { + width: 75%; + background-color: red; } +.column p { + min-height: 300px; + padding: 0 15px; + text-align: left; + margin: 0px; +} +.Card-detail { + padding: 16px; + text-align: center; + background-color: #f1f1f1; + border-radius: 7%; + width: 280px; + height: 360px; + margin: 50px 80px; + box-shadow: 2px 4px 8px 0 rgba(228, 212, 212, 0.5); +} .column { - float: left; - width: 25%; - // height: 700px; - } + float: left; + width: 25%; + // height: 700px; +} - .row {margin: 0 -5px;} +.row { + margin: 0 -5px; +} - /* Clear floats after the columns */ - .row:after { - content: ""; - display: table; - clear: both; - } - - /* Responsive columns */ - @media screen and (max-width: 1200px) { - .column { - width: 33.33%; - display: block; - margin-bottom: 20px; - } +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Responsive columns */ +@media screen and (max-width: 1200px) { + .column { + width: 33.33%; + display: block; + margin-bottom: 20px; } - @media screen and (max-width: 1000px) { - .column { - width: 50%; - display: block; - margin-bottom: 20px; - } +} +@media screen and (max-width: 1000px) { + .column { + width: 50%; + display: block; + margin-bottom: 20px; } +} - @media screen and (max-width: 600px) { - .column { - width: 100%; - display: block; - margin-bottom: 20px; - } +@media screen and (max-width: 600px) { + .column { + width: 100%; + display: block; + margin-bottom: 20px; } - - // /* Style the counter cards */ - // .Card { - - // padding: 16px; - // text-align: center; - // background-color: #f1f1f1; - // } - - +} - .Card-button { - background-position: center; - transition: background 0.8s; - } - .Card-button:hover { - background: #6eb9f7 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; - } - .Card-button:active { - background-color: #6eb9f7; - background-size: 100%; - transition: background 0s; - } - - /* Button style */ - button { - width: 80%; - height: 50px; - border: none; - border-radius: 15px; - padding: 12px 18px; - font-size: 16px; - text-transform: uppercase; - cursor: pointer; - color: white; - background-color: #2597f3; - box-shadow: 0 0 4px #999; - outline: none; - } \ No newline at end of file +.Card-button { + background-position: center; + transition: background 0.8s; +} +.Card-button:hover { + background: #6eb9f7 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; +} +.Card-button:active { + background-color: #6eb9f7; + background-size: 100%; + transition: background 0s; +} + +/* Button style */ diff --git a/src/components/Card/index.js b/src/components/Card/index.js index f69a753..b7f8c8b 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -8,75 +8,77 @@ import React from "react"; import "./Card.css"; function Card(props) { - return( -
+ return ( +
-
-
-

Title

+
+
+

Title

+
+

Sed ut perspiciatis unde omnis iste natus - error sit voluptatem accusantium doloremque - laudantium, totam rem aperiam, eaque ipsa quae - ab illo inventore veritatis et quasi architecto - beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur - aut odit aut fugit, sed quia consequuntur magni - dolores eos qui ratione voluptatem sequi nesciunt. - Neque porro quisquam est, qui dolorem ipsum quia + error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. + Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

+
-
-
-
+
+

Title

Sed ut perspiciatis unde omnis iste natus - error sit voluptatem accusantium doloremque + error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto - beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur - aut odit aut fugit, sed quia consequuntur magni - dolores eos qui ratione voluptatem sequi nesciunt. + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

+
-
-
-
+
+

Title

Sed ut perspiciatis unde omnis iste natus - error sit voluptatem accusantium doloremque + error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto - beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur - aut odit aut fugit, sed quia consequuntur magni - dolores eos qui ratione voluptatem sequi nesciunt. + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

- + +
-
-
-
+
+

Title

Sed ut perspiciatis unde omnis iste natus - error sit voluptatem accusantium doloremque + error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto - beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur - aut odit aut fugit, sed quia consequuntur magni - dolores eos qui ratione voluptatem sequi nesciunt. + beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur + aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

+
-
+
-
) } diff --git a/src/components/Card1/Card1.scss b/src/components/Card1/Card1.scss new file mode 100644 index 0000000..4219650 --- /dev/null +++ b/src/components/Card1/Card1.scss @@ -0,0 +1,88 @@ +.container { + position: absolute; + left: 0px; + top: 0px; + width: 1024px; + height: 768px; + z-index: 8; +} +.Button_text { + font-size: 12px; + font-family: "Open Sans"; + color: rgb(0, 0, 0); + line-height: 1.402; + text-align: center; + position: absolute; + padding: 30px; + margin-top: -17px; + height: 9px; + z-index: 7; +} +.button { + border-width: 0.22px; + border-radius: 21px; + border-color: rgb(0, 0, 0); + border-style: solid; + background-color: rgb(0, 174, 239); + position: absolute; + left: 570px; + top: 537px; + width: 134px; + height: 41px; + z-index: 6; +} +.text { + font-size: 12px; + font-family: "Open Sans"; + color: rgb(0, 0, 0); + line-height: 1.402; + text-align: left; + position: absolute; + padding: 30px; + z-index: 5; + width: 200px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.Title__text { + font-size: 19px; + font-family: "Open Sans"; + color: rgb(0, 0, 0); + line-height: 1.402; + text-align: center; + position: absolute; + // left: 486.445px; + // top: 225.558px; + padding: 20px; + + width: 24px; + height: 9px; + z-index: 4; +} +.title_rectangle { + border-width: 0.22px; + border-color: rgb(0, 0, 0); + border-style: solid; + border-radius: 21px; + background-color: rgb(0, 174, 239); + position: absolute; + left: 435px; + top: 191px; + width: 163px; + height: 50px; + z-index: 3; +} +.card { + border-width: 0.22px; + border-color: rgb(0, 0, 0); + border-style: solid; + border-radius: 10px; + background-color: rgb(255, 255, 255); + position: absolute; + left: 435px; + top: 216px; + width: 269px; + height: 341px; + z-index: 2; +} diff --git a/src/components/Card1/index.js b/src/components/Card1/index.js new file mode 100644 index 0000000..7254398 --- /dev/null +++ b/src/components/Card1/index.js @@ -0,0 +1,26 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +/* eslint-disable jsx-a11y/label-has-for */ +/* eslint-disable linebreak-style */ +/* eslint-disable react/destructuring-assignment */ +/* eslint-disable react/button-has-type */ +/* eslint-disable react/prefer-stateless-function */ +import React from "react"; +import "./Card1.css"; +import Typography from "../Typography"; +function Card1() { + return ( +
+
+
+ dsadsadjksabdjhasvdjhsaghjdgyjasgdhjasghdgashdgahsdkasjdlihasukdhskajhdkjsahkjdhsajkd +
+
Hello
+
+ +
Yaha ayega
+ +
+ ) +} + +export default Card1; \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 8ba538e..b12110c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -9,3 +9,4 @@ export { default as Grid } from "./Grid"; export { default as Media } from "./Media"; export { default as Switch } from "./Switch"; export { default as ZapBar } from "./ZapBar"; +export { default as Card1 } from "./Card1"; diff --git a/src/stories/card1.stories.js b/src/stories/card1.stories.js new file mode 100644 index 0000000..ff388b9 --- /dev/null +++ b/src/stories/card1.stories.js @@ -0,0 +1,12 @@ +/* eslint-disable import/no-extraneous-dependencies */ + +import React from "react"; +import { storiesOf, addDecorator } from "@storybook/react"; +import { withInfo } from "@storybook/addon-info"; +import Card1 from "../components/Card1/index"; + +storiesOf("Card1", module) + .addDecorator(withInfo) + .addWithJSX("Card", () => ( + + )); \ No newline at end of file