diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6f92b3a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ JavaScript Basics
+
+
+
+
+
+
+
+
+ Sum two numbers
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..a2e1344
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,112 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html,
+body {
+ height: 100%;
+ font-family: Arial, sans-serif;
+ color: darkslategray;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
+}
+
+header {
+ background-color: darksalmon;
+ border-bottom: 1px solid gray;
+ padding: 1.5rem;
+ text-align: center;
+}
+
+header h1 {
+ color: brown;
+ margin: 0;
+}
+
+main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ background-color: lavender;
+}
+
+section {
+ display: flex;
+ padding: 1.5rem;
+ background-color: #f9f9f9;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+}
+
+.section {
+ margin: 24px auto;
+ max-width: 400px;
+ display: flex;
+ flex-direction: column;
+}
+
+.section-content{
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ margin-bottom: 1rem;
+ gap: 2rem;
+}
+
+.smile-content {
+ text-align: center;
+}
+
+.sum-title{
+ color: chocolate;
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+span{
+ color: chocolate;
+ font-size: 1.5rem;
+}
+
+button {
+ background-color: blueviolet;
+ color: bisque;
+ border: none;
+ padding: 0.7rem 1.5rem;
+ border-radius: 5px;
+ font-size: 1rem;
+ cursor: pointer;
+ margin: 1rem;
+ max-width: fit-content;
+ align-self: center;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.7rem;
+ font-weight: 600;
+}
+
+input {
+ width: 100%;
+ padding: 0.8rem 1rem;
+ border: 1px solid gray;
+ border-radius: 5px;
+ font-family: inherit;
+ font-size: 1rem;
+}
+
+input:focus {
+ outline: none;
+ border-color: blueviolet;
+ box-shadow: 0 0 5px rgba(138, 43, 226, 0.5);
+}