diff --git a/solution/index.html b/solution/index.html
new file mode 100644
index 00000000..5a0a2f58
--- /dev/null
+++ b/solution/index.html
@@ -0,0 +1,14 @@
+
+
+ Card Dealer
+
+
+
+
+
+
+
diff --git a/solution/script.js b/solution/script.js
new file mode 100644
index 00000000..a546dda1
--- /dev/null
+++ b/solution/script.js
@@ -0,0 +1,22 @@
+window.onload = function() {
+
+ let cardNumber = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
+ let suit = ["Diamonds", "Spades", "Hearts", "Clubs"];
+ let randomCardNumber = Math.floor(Math.random() * cardNumber.length);
+ let randomSuitNumber = Math.floor(Math.random() * suit.length);
+ let finalSuit = suit[randomSuitNumber];
+
+ document.getElementById('cardContent').innerHTML = cardNumber[randomCardNumber];
+ document.getElementById('theCard').className = "";
+ document.getElementById('theCard').classList.add("card");
+ document.getElementById('theCard').classList.add(getSuiteClass(finalSuit));
+ }
+
+ function getSuiteClass(suit) {
+ switch (suit) {
+ case "Diamonds": return "suit-diamonds";
+ case "Spades": return "suit-spades";
+ case "Hearts": return "suit-hearts";
+ case "Clubs": return "suit-clubs";
+ }
+ }
diff --git a/solution/styles.css b/solution/styles.css
new file mode 100644
index 00000000..f646df22
--- /dev/null
+++ b/solution/styles.css
@@ -0,0 +1,114 @@
+@charset "UTF-8";
+body {
+ background: green;
+}
+.centered{margin-left: auto;margin-right: auto; width: 300px;}
+a.button {
+ display: block;
+ width: 300px;
+ height: 50px;
+ background: SandyBrown;
+ font-family: Arial;
+ text-decoration: none;
+ font-size: 25px;
+ line-height: 50px;
+ text-align: center;
+ color: #444;
+ font-weight: bold;
+ border-radius: 5px;
+ box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
+ margin-top: 20px;
+
+}
+a.button:hover {
+ background: #f7bf90;
+}
+
+.card {
+ width: 300px;
+ height: 440px;
+ border-radius: 15px;
+ background: white;
+ box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
+ position: relative;
+}
+.card p {
+ font: 150px/440px Arial, serif;
+ text-align: center;
+}
+
+div.suit-hearts:before {
+ content: "♥";
+ font-size: 90px;
+ position: absolute;
+ top: 8px;
+ left: 20px;
+ color: red;
+}
+
+div.suit-hearts:after {
+ content: "♥";
+ font-size: 90px;
+ position: absolute;
+ bottom: 8px;
+ right: 20px;
+ color: red;
+ transform: rotate(180deg);
+}
+
+div.suit-diamonds:before {
+ content: "♦";
+ font-size: 90px;
+ position: absolute;
+ top: 8px;
+ left: 20px;
+ color: red;
+}
+
+div.suit-diamonds:after {
+ content: "♦";
+ font-size: 90px;
+ position: absolute;
+ bottom: 8px;
+ right: 20px;
+ color: red;
+ transform: rotate(180deg);
+}
+
+div.suit-spades:before {
+ content: "♠";
+ font-size: 90px;
+ position: absolute;
+ top: 8px;
+ left: 20px;
+ color: black;
+}
+
+div.suit-spades:after {
+ content: "♠";
+ font-size: 90px;
+ position: absolute;
+ bottom: 8px;
+ right: 20px;
+ color: black;
+ transform: rotate(180deg);
+}
+
+div.suit-clubs:before {
+ content: "♣";
+ font-size: 90px;
+ position: absolute;
+ top: 8px;
+ left: 20px;
+ color: black;
+}
+
+div.suit-clubs:after {
+ content: "♣";
+ font-size: 90px;
+ position: absolute;
+ bottom: 8px;
+ right: 20px;
+ color: black;
+ transform: rotate(180deg);
+}