Desglobe

components/header.html

@@ -1,5 +1,11 @@
 <header class="header container">
   <article class="header__article">
+<<<<<<< HEAD
+    <div class="header__article__circle header__article__circle--bg hide icon-hide"><img src="../assets/icons/Ellipse 20.svg" alt="ellipse"></div>
+    <div class="header__article__circle header__article__circle--sm1 hide icon-hide"><img src="../assets/icons/Ellipse 21.svg" alt="ellipse"></div>
+    <div class="header__article__circle header__article__circle--sm2 hide icon-hide"><img src="../assets/icons/Ellipse 22.svg" alt="ellipse"></div>
+
+=======
     <div
       class="header__article__circle header__article__circle--bg hide icon-hide"
     >
@@ -16,6 +22,7 @@
       <img src="../assets/icons/Ellipse 22.svg" alt="ellipse" />
     </div>
 
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
     <h1 class="header__title">Perfect Solution For Small Businesses</h1>
     <p class="header__paragraph">
       We are your one-stop-shop agency for everything digital marketing,
@@ -24,6 +31,10 @@ <h1 class="header__title">Perfect Solution For Small Businesses</h1>
     <button class="btn">Get Started</button>
   </article>
   <aside class="header__aside">
+<<<<<<< HEAD
+    <div class="header__aside__container header__aside__container--1 hide"><img src="../assets/images/handsome-man-with-laptop 1.svg" alt="handsome-man-with-laptop"></div>
+    <div class="header__aside__container header__aside__container--2"><img src="../assets/images/Mask group.svg" alt="handsome-man-with-laptop"></div>
+=======
     <div class="header__aside__container header__aside__container--1 hide">
       <img
         src="../assets/images/man-with-laptop1.png"
@@ -36,5 +47,7 @@ <h1 class="header__title">Perfect Solution For Small Businesses</h1>
         alt="handsome-man-with-laptop"
       />
     </div>
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
   </aside>
 </header>
+

components/services.html

@@ -0,0 +1,21 @@
+<section class="servico">
+  <div class="rafter">
+    <div class="shapes">
+      <div class="shapes__small shapes--small">
+        <div class="innersm"></div>
+      </div>
+      <div class="shapes__big shapes--big">
+        <div class="innerbg"></div>
+      </div>
+    </div>
+    <div class="line">
+      <div class="line__main line--main"></div>
+      <p class="line__text line--text">CARE & SHARE</p>
+    </div>
+    <div class="cushare">
+      <h3 class="cushare__head cushare--headt">We Care And Share Businesses With Our Customers</h3>
+      <p class="cushare__parag cushare--parag">Your website is the first thing that speaks to your customers. This is why we make sure your site leaves a lasting impression.</p>
+      <button class="cushare__btn cushare--btn">Check More</button>
+    </div>
+  </div>
+</section>

css/style.comp.css

@@ -332,15 +332,23 @@ ol[role="list"] {
 
 /* Set core root defaults */
 html:focus-within {
+<<<<<<< HEAD
+  scroll-behavior: smooth; }
+=======
   scroll-behavior: smooth;
   overflow-x: hidden; }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
 
 /* Set core body defaults */
 body {
   min-height: 100vh;
   text-rendering: optimizeSpeed;
+<<<<<<< HEAD
+  line-height: 1.5; }
+=======
   line-height: 1.5;
   overflow-x: hidden; }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
 
 /* A elements that don't have a class get default styles */
 a:not([class]) {
@@ -381,6 +389,13 @@ select {
   max-width: 100%;
   margin: 0 auto; }
 
+<<<<<<< HEAD
+.header {
+  display: flex; }
+  .header__article {
+    flex-basis: 50%;
+    position: relative; }
+=======
 .nav-bar {
   display: flex;
   align-items: center;
@@ -659,11 +674,23 @@ select {
     @media (min-width: 481px) and (max-width: 768px) {
       .header__article {
         width: 60%; } }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
   .header__article__circle {
     position: absolute;
     z-index: -1; }
     .header__article__circle img {
       width: 80%; }
+<<<<<<< HEAD
+    .header__article__circle--bg {
+      top: 3rem;
+      left: -4.8rem; }
+    .header__article__circle--sm1 {
+      top: 14.5rem;
+      left: 27rem; }
+    .header__article__circle--sm2 {
+      top: 25.5rem;
+      left: 6.5rem; }
+=======
       @media (min-width: 769px) and (max-width: 1024px) {
         .header__article__circle img {
           width: 50%; } }
@@ -702,11 +729,14 @@ select {
       @media (min-width: 1025px) and (max-width: 1200px) {
         .header__article__circle--sm2 {
           top: 24rem; } }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
   .header__title {
     font-size: 3.25rem;
     width: 33.9rem;
     font-weight: 800;
     margin-top: 6rem; }
+<<<<<<< HEAD
+=======
     @media (min-width: 300px) and (max-width: 480px) {
       .header__title {
         font-size: 1.5rem;
@@ -725,10 +755,13 @@ select {
       .header__title {
         font-size: 2.8rem;
         width: 100%; } }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
   .header__paragraph {
     font-size: 1.5rem;
     width: 33.9rem;
     margin-top: 2rem; }
+<<<<<<< HEAD
+=======
     @media (min-width: 300px) and (max-width: 480px) {
       .header__paragraph {
         font-size: 0.7rem;
@@ -747,10 +780,13 @@ select {
       .header__paragraph {
         font-size: 1.2rem;
         width: 70%; } }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
   .header__aside {
     flex-basis: 50%;
     display: flex;
     justify-content: center; }
+<<<<<<< HEAD
+=======
     @media (min-width: 300px) and (max-width: 480px) {
       .header__aside {
         flex-basis: 30%; } }
@@ -766,6 +802,7 @@ select {
     @media (min-width: 1025px) and (max-width: 1200px) {
       .header__aside {
         margin-left: 1rem; } }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
     .header__aside__container img {
       border-radius: 50%;
       margin: auto;
@@ -774,6 +811,11 @@ select {
       background-color: #cdf4fe;
       width: 20rem;
       height: 27.8rem;
+<<<<<<< HEAD
+      border-radius: 0px 0px 31.25rem 31.25rem; }
+      .header__aside__container--1 img {
+        margin-top: 10.6rem; }
+=======
       border-radius: 0rem 0rem 31.25rem 31.25rem; }
       @media (min-width: 481px) and (max-width: 768px) {
         .header__aside__container--1 {
@@ -799,10 +841,16 @@ select {
           .header__aside__container--1 img {
             margin-top: 14rem;
             width: 80%; } }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
     .header__aside__container--2 {
       background-color: #3561e6;
       width: 21.5rem;
       height: 38.7rem;
+<<<<<<< HEAD
+      border-radius: 0px 0px 31.25rem 31.25rem; }
+      .header__aside__container--2 img {
+        margin-top: 21rem; }
+=======
       border-radius: 0rem 0rem 31.25rem 31.25rem; }
       @media (min-width: 300px) and (max-width: 480px) {
         .header__aside__container--2 {
@@ -845,10 +893,182 @@ select {
   @media (min-width: 769px) and (max-width: 1024px) {
     .header .hide {
       display: block; } }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827
 
 .btn {
   margin-top: 2rem;
   padding: 15px 25px; }
+<<<<<<< HEAD
+
+@media (min-width: 300px) and (max-width: 480px) {
+  .header {
+    padding: 1rem; }
+    .header__article {
+      flex-basis: 70%; }
+    .header__title {
+      font-size: 1.5rem;
+      font-weight: 800;
+      margin-top: 2rem;
+      width: 100%; }
+    .header__paragraph {
+      font-size: 0.7rem;
+      margin-top: 1rem;
+      width: 100%; }
+    .header__aside {
+      flex-basis: 30%;
+      display: flex;
+      justify-content: center; }
+      .header__aside__container--2 {
+        background-color: #3561e6;
+        width: 5rem;
+        height: 15rem;
+        border-radius: 0px 0px 31.25rem 31.25rem; }
+        .header__aside__container--2 img {
+          margin-top: 10rem;
+          width: 90%; }
+  .hide {
+    display: none; }
+  .btn {
+    margin-top: 1rem;
+    padding: 7px 12px; } }
+
+@media (min-width: 481px) and (max-width: 768px) {
+  .header {
+    padding: 1rem; }
+    .header__article {
+      width: 60%; }
+    .header__title {
+      font-size: 1.8rem;
+      font-weight: 800;
+      margin-top: 2rem;
+      width: 100%; }
+    .header__paragraph {
+      font-size: 0.9rem;
+      margin-top: 1rem;
+      width: 100%; }
+    .header__aside {
+      margin-left: 4rem;
+      width: 40%;
+      display: flex;
+      justify-content: center; }
+      .header__aside__container--1 {
+        background-color: #cdf4fe;
+        width: 6rem;
+        height: 10rem;
+        border-radius: 0px 0px 31.25rem 31.25rem; }
+        .header__aside__container--1 img {
+          margin-top: 4rem;
+          width: 90%; }
+      .header__aside__container--2 {
+        background-color: #3561e6;
+        width: 7rem;
+        height: 15rem;
+        border-radius: 0px 0px 31.25rem 31.25rem; }
+        .header__aside__container--2 img {
+          margin-top: 8rem;
+          width: 90%; }
+    .header .icon-hide {
+      display: none; }
+  .btn {
+    margin-top: 1rem;
+    padding: 7px 12px; } }
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .header {
+    padding: 2rem; }
+    .header__article__circle img {
+      width: 50%; }
+    .header__article__circle--bg {
+      top: 4rem;
+      left: -2rem; }
+    .header__article__circle--sm1 {
+      top: 16rem;
+      left: 14rem; }
+    .header__article__circle--sm2 {
+      top: 25rem;
+      left: 6.5rem; }
+    .header__title {
+      font-size: 2.5rem;
+      width: 100%;
+      font-weight: 800;
+      margin-top: 6rem; }
+    .header__paragraph {
+      font-size: 1rem;
+      width: 100%;
+      margin-top: 2rem; }
+    .header__aside {
+      margin-left: 1rem;
+      flex-basis: 50%;
+      display: flex;
+      justify-content: center; }
+      .header__aside__container img {
+        border-radius: 50%;
+        margin: auto;
+        width: 14.4rem; }
+      .header__aside__container--1 {
+        background-color: #cdf4fe;
+        width: 60%;
+        height: 27.8rem; }
+        .header__aside__container--1 img {
+          margin-top: 14rem;
+          width: 80%; }
+      .header__aside__container--2 {
+        width: 70%;
+        height: 38.7rem; }
+        .header__aside__container--2 img {
+          margin-top: 23rem;
+          width: 80%; }
+    .header .hide {
+      display: block; } }
+
+@media (min-width: 1025px) and (max-width: 1200px) {
+  .header {
+    padding: 2rem; }
+    .header__article__circle img {
+      width: 50%; }
+    .header__article__circle--bg {
+      top: 4rem;
+      left: -2rem; }
+    .header__article__circle--sm1 {
+      top: 13rem;
+      left: 24rem; }
+    .header__article__circle--sm2 {
+      top: 24rem;
+      left: 6.5rem; }
+    .header__title {
+      font-size: 2.8rem;
+      width: 100%;
+      font-weight: 800;
+      margin-top: 6rem; }
+    .header__paragraph {
+      font-size: 1.2rem;
+      width: 70%;
+      margin-top: 2rem; }
+    .header__aside {
+      margin-left: 1rem;
+      flex-basis: 50%;
+      display: flex;
+      justify-content: center; }
+      .header__aside__container img {
+        border-radius: 50%;
+        margin: auto;
+        width: 14.4rem; }
+      .header__aside__container--1 {
+        background-color: #cdf4fe;
+        width: 60%;
+        height: 27.8rem; }
+        .header__aside__container--1 img {
+          margin-top: 14rem;
+          width: 80%; }
+      .header__aside__container--2 {
+        width: 70%;
+        height: 38.7rem; }
+        .header__aside__container--2 img {
+          margin-top: 23rem;
+          width: 80%; }
+    .header .hide {
+      display: block; } }
+=======
   @media (min-width: 300px) and (max-width: 480px) {
     .btn {
       margin-top: 1rem;
@@ -1504,3 +1724,4 @@ select {
   font-weight: 500;
   font-size: 20px;
   line-height: 36px; }
+>>>>>>> 45225f0b1b183d12f7a32153e9f4c88f8ddc5827