diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/images/favicon-32x32.png differ
diff --git a/images/image-header-desktop.jpg b/images/image-header-desktop.jpg
new file mode 100644
index 0000000..1d49067
Binary files /dev/null and b/images/image-header-desktop.jpg differ
diff --git a/images/image-header-mobile.jpg b/images/image-header-mobile.jpg
new file mode 100644
index 0000000..73dfe51
Binary files /dev/null and b/images/image-header-mobile.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..031ace2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ stats preview card
+
+
+
+
+
+
+ Get insights that help your business grow.
+ Discover the benefits of data analytics and make better decisions regarding revenue, customer
+ experience, and
+ overall efficiency.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/query.css b/query.css
new file mode 100644
index 0000000..e4afdcc
--- /dev/null
+++ b/query.css
@@ -0,0 +1,114 @@
+/*BELOW 1200px (smaller desktops)/*
+/*****************************************************/
+@media (max-width: 75em) {
+ html {
+ font-size: 56.25%;
+ }
+}
+
+/*****************************************************/
+/*BELOW 1024px (Tablets and small desktop)/*
+/*****************************************************/
+@media (max-width: 64em) {
+ html {
+ font-size: 50%;
+ }
+}
+
+/*****************************************************/
+/*BELOW 910 (Tablets)/*
+/*****************************************************/
+@media (max-width: 56em) {
+ .section-one {
+ width: 43rem;
+ padding: 5rem;
+ height: 33rem;
+ }
+ .image {
+ width: 43rem;
+ height: 33rem;
+ }
+ .content {
+ margin-bottom: 5rem;
+ }
+}
+
+/*****************************************************/
+/*BELOW 704 (smaller Tablets)/*
+/*****************************************************/
+@media (max-width: 44em) {
+ html {
+ /* 7/16 */
+ font-size: 43%;
+ }
+ .section-one {
+ width: 43rem;
+ padding: 5rem;
+ height: 33rem;
+ }
+ .image {
+ width: 43rem;
+ height: 33rem;
+ }
+ .content {
+ margin-bottom: 5rem;
+ }
+}
+
+/*****************************************************/
+/*BELOW 650px ( phones)/*
+/*****************************************************/
+@media (max-width: 40em) {
+ .container {
+ display: flex;
+ flex-direction: column-reverse;
+ align-items: center;
+ justify-content: center;
+ }
+ body {
+ height: 100vh;
+ padding: 5rem;
+ }
+ .image {
+ align-self: flex-start;
+ position: relative;
+ }
+ .section-one {
+ width: auto;
+ padding: 3rem;
+ text-align: center;
+ height: auto;
+ }
+ .image {
+ width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+ }
+ .company-details {
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+ }
+}
+
+/* @media (max-width: 40em) {
+ .container {
+ display: flex;
+ flex-direction: column-reverse;
+ align-items: center;
+ justify-content: center;
+ }
+ body {
+ height: auto;
+ padding: 2rem;
+ }
+ .section-one {
+ width: auto;
+ padding: 2rem;
+ text-align: center;
+ }
+ .image {
+ width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+ } */
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..681314c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,78 @@
+/* Font-sizes(px):
+10/12/14/16/18/20/24/30/36/44/52/62/74/86/98
+
+- SPACING SYSTEM (px)
+2/4/8/12/16/24/32/48/64/80/96/128 */
+
+* {
+ padding: 0px;
+ margin: 0px;
+ box-sizing: border-box;
+}
+html {
+ /* width: 62.5%; */
+ font-size: 62.5%;
+}
+
+body {
+ background-color: hsl(233, 47%, 7%);
+ font-family: "Inter", sans-serif;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ height: 100vh;
+}
+
+.container {
+ display: flex;
+ /* overflow: hidden; */
+}
+
+.heading {
+ color: hsl(0, 0%, 100%);
+ font-size: 3rem;
+ margin-bottom: 2rem;
+}
+.insight {
+ color: hsl(277, 64%, 61%);
+}
+.content {
+ color: hsla(0, 0%, 100%, 0.6);
+ font-size: 1.4rem;
+ font-weight: 500;
+ line-height: 2.5rem;
+ margin-bottom: 6rem;
+}
+.section-one {
+ background-color: hsl(244, 38%, 16%);
+ border-radius: 0.5rem;
+ padding: 7rem;
+ width: 50rem;
+ height: 40rem;
+}
+
+.image {
+ width: 50rem;
+ height: 40rem;
+ border-top-right-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+ background: linear-gradient(hsl(277, 64%, 61%)),
+ url("images/image-header-desktop.jpg");
+ /* background-size: cover;
+ background-position: center; */
+}
+.comapnies-det {
+ color: hsl(0, 0%, 100%);
+ font-size: 2rem;
+ font-weight: 700;
+ margin-bottom: 0.5rem;
+}
+.companies-info {
+ color: hsla(0, 0%, 100%, 0.6);
+ font-size: 1.2rem;
+ text-transform: uppercase;
+}
+.company-details {
+ display: flex;
+ justify-content: space-between;
+}