+ Random value between {min} and {max} => {randomValue()}
+
+ )
+ }
+}
+
+export default Random
diff --git a/src/components/Rating.js b/src/components/Rating.js
new file mode 100644
index 000000000..b043e110d
--- /dev/null
+++ b/src/components/Rating.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+function Rating(props) {
+ const value = Math.round(props.children);
+
+ const star = (rates) => {
+ let filled = '★';
+ let empty = '☆';
+ let stars = new Array(5);
+
+ for (let i = 0; i < 5; i++) {
+ i < rates ? stars[i] = filled : stars[i] = empty;
+ }
+ return stars.join('')
+ }
+
+ return (
+
+ {star(value)}
+
+ )
+}
+
+export default Rating
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index cee5f348f..e8da473b8 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,5 @@
body {
margin: 0;
- padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
@@ -9,6 +8,218 @@ body {
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
+
+p {
+ margin: 0;
+}
+
+.challenge {
+ padding: 3.5rem 1rem 0 1rem;
+}
+
+@media (min-width: 768px) {
+ .challenge {
+ padding: 4.5rem 3.5rem 0 3.5rem;
+ }
+}
+
+.card-container,
+.card-info {
+ display: inline-flex;
+ background-color: #fabada;
+}
+
+.card-container {
+ flex-flow: row nowrap;
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .card-container {
+ flex-flow: row wrap;
+ width: auto;
+ }
+}
+
+.card-info {
+ flex-flow: column nowrap;
+ justify-content: center;
+ font-size: .875rem;
+ line-height: 1.2;
+ padding: 1rem;
+}
+
+@media (min-width: 768px) {
+ .card-info {
+ font-size: 1rem;
+ line-height: 1.8;
+ padding: 1.5rem;
+ }
+}
+
+.card-image {
+ width: 7rem;
+ height: auto;
+}
+
+@media (min-width: 768px) {
+ .card-image {
+ width: 12rem;
+ height: auto;
+ }
+}
+
+.card-label {
+ font-weight: 800;
+ margin: 0 .5rem 0 0;
+}
+
+.boxed-text {
+ padding: 1.5rem;
+ border: 1px solid #fabada;
+}
+
+.boxed-text {
+ max-width: 23rem;
+ margin-bottom: .5rem;
+}
+
+.boxes-container {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+.credit-cards,
+.driver-container {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+.cc-container {
+ display: flex;
+ width: 100%;
+ border-radius: .5rem;
+ padding: 1.25rem;
+ margin: 0 0 1rem 0;
+}
+
+@media (min-width: 768px) {
+ .cc-container {
+ width: 17.5rem;
+ padding: 2rem;
+ margin: 0 1rem 1rem 0;
+ }
+}
+
+.cc-brand {
+ width: auto;
+ height: 1.75rem;
+ align-self: flex-end;
+}
+
+.cc-number {
+ font-size: 1.45rem;
+ font-weight: 600;
+ padding: 1.5rem 0;
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .cc-number {
+ font-size: 1.65rem;
+ }
+}
+
+.cc-info {
+ display: flex;
+ width: 100%;
+}
+
+.cc-info,
+.cc-owner {
+ font-size: .875rem;
+}
+
+@media (min-width: 768px) {
+ .cc-info,
+ .cc-owner {
+ font-size: 1rem;
+ }
+}
+
+.cc-expiration {
+ margin-right: 1.5rem;
+}
+
+.driver-container {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ color: #fff;
+ background-color: #455EB3;
+ border-radius: .5rem;
+ padding: 1.25rem;
+ margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+ .driver-container {
+ padding: 2rem;
+ text-align: left;
+ }
+}
+
+.driver-image {
+ width: 6rem;
+ height: 6rem;
+ border-radius: 50%;
+}
+
+.driver-name {
+ font-size: 1.5rem;
+ margin: .5rem 0;
+}
+
+.driver-details {
+ margin: 0;
+}
+
+@media (min-width: 768px) {
+ .driver-details {
+ margin-left: 1.5rem;
+ }
+}
+
+.driver-rating {
+ display: flex;
+ justify-content: center;
+}
+
+@media (min-width: 768px) {
+ .driver-rating {
+ justify-content: flex-start;
+ }
+}
+
+.driver-car {
+ margin: .5rem 0 0 0;
+}
+
+.buttons-container {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+}
+
+.button-counter {
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: #000;
+ background-color: #fabada;
+ border: 2px solid #000;
+ border-radius: 1.5rem;
+ padding: .5rem 1rem;
+ margin: 0 1rem 0 0;
+}
\ No newline at end of file