diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c4d100a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ Digital Marketing Projects
+
+
+
+
+ Digital Marketing
+
+
+
+
+
Newsletter Widget
+
+
+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..b3b224f
--- /dev/null
+++ b/main.js
@@ -0,0 +1,5 @@
+"use strict";
+
+function onCardClick(path) {
+ window.open(path, "_self");
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..37f0758
--- /dev/null
+++ b/style.css
@@ -0,0 +1,67 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "lato", sans-serif;
+}
+
+body {
+ color: white;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ padding: 60px;
+ background: linear-gradient(to right bottom, #7ed56f, #28b485);
+}
+
+h1 {
+ font-size: 3.5rem;
+ font-weight: 400;
+ margin-bottom: 5.5rem;
+ letter-spacing: 0.25rem;
+ text-align: center;
+}
+
+h4 {
+ letter-spacing: 0.125rem;
+}
+
+section {
+ display: grid;
+ justify-items: start;
+ grid-auto-rows: 315px;
+ grid-template-columns: repeat(auto-fill, 500px);
+}
+
+.card {
+ position: relative;
+ display: flex;
+ cursor: pointer;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ height: 100%;
+ transition: transform 300ms;
+}
+
+iframe {
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 12px;
+ box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
+}
+
+.card::after {
+ content: "";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.card:hover {
+ transform: translateY(-1.5rem) scale(1.03);
+}