diff --git a/assets/css/reset.css b/assets/css/reset.css
index 1068e61..ef03e71 100644
--- a/assets/css/reset.css
+++ b/assets/css/reset.css
@@ -2,4 +2,10 @@
margin: 0;
padding: 0;
box-sizing: border-box;
+}
+
+img {
+ max-width: 100%;
+ display: block;
+ height: auto;
}
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
index e69de29..e92ff32 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -0,0 +1,61 @@
+.page-header {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 28px 0 29px 0;
+}
+
+.header-logo {
+ display: block;
+}
+
+
+/*= =*\
+= UTILS =
+\*= =*/
+.sm-wrapper {
+ display: flex;
+}
+
+.center {
+ align-items: center;
+ justify-content: center;
+}
+
+.text-upper {
+ text-transform: uppercase;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.bg-black {
+ background-color: var(--bg-clr-black);
+}
+
+.bg-blue-gradient-180 {
+ background-color: var(--gradient-blue-180);
+}
+
+@media screen and (max-width: 414px) {
+ .hero-image-desktop {
+ display: none;
+ }
+
+ .hero-image-mobile {
+ display: flex;
+ }
+}
+
+
+@media screen and (min-width: 415px) {
+ .hero-image-desktop {
+ display: flex;
+ }
+
+ .hero-image-mobile {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0d0516c..085928a 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,20 @@
+
+
M3 Amazing Landing page
-
+
+
+
+
+
+ 
+ 
+
+
+
+