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.

+ +
+
+ +

10k+

+

companies

+ +
+
+ +

314

+

templates

+ +
+
+ +

12m+

+

queries

+ +
+
+
+
+ photos of company employees +
+
+ + + + \ 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; +}