diff --git a/index.html b/index.html
index 16aabe8..ddd8a56 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
GDG Talk Counter
+
GDG Counter Website
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..ff254fb
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,72 @@
+*,
+*::before,
+*::after {
+ font-family: inherit;
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: 'Open Sans', sans-serif;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+}
+
+h1 {
+ text-align: center;
+ font-weight: 700;
+}
+
+.app {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.5rem;
+}
+
+#counter-value {
+ grid-column: span 2;
+
+ place-self: center;
+
+ font-weight: 200;
+ font-size: 32px;
+
+ padding: 1rem 0;
+}
+
+button {
+ /* box-shadow: 0 0 4px 0 #00000018, 0 0 32px 0 #00000010; */
+
+ border: 1px solid #d4d4d4;
+ background: linear-gradient(to bottom, #f8f8f8 0%, #f0f0f0 50%, #d8d8d8 100%);
+
+ color: #333;
+
+ font-size: 15px;
+ font-weight: 400;
+
+ border-radius: 0.5rem;
+ height: 2rem;
+ padding: 0 1rem;
+
+ cursor: pointer;
+
+ transition: all 250ms ease-in-out;
+}
+
+button:hover {
+ /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */
+
+ border: 1px solid #d0d0d0;
+ background: linear-gradient(to bottom, #fdfdfd 0%, #ededed 40%, #ededed 60%, #d0d0d0 100%);
+}
+
+button:active {
+ /* box-shadow: 0 0 4px 0 #00000018, 0 0 24px 4px #00000018; */
+
+ border: 1px solid #c8c8c8;
+ background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 50%, #c8c8c8 100%);
+}