From b70aa73de9b50ee944f75aa143d8d8b0b8f577b1 Mon Sep 17 00:00:00 2001
From: Dgley Ramos <dgleysilva@gmail.com>
Date: Thu, 11 May 2023 21:15:40 +0000
Subject: [PATCH] =?UTF-8?q?Fazendo=20a=20responsividade=20da=20p=C3=A1gina?=
 =?UTF-8?q?=20home?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .styles.css.swp | Bin 12288 -> 0 bytes
 styles.css      | 131 +++++++++++++++++++++++++++++++++++-------------
 2 files changed, 96 insertions(+), 35 deletions(-)
 delete mode 100644 .styles.css.swp

diff --git a/.styles.css.swp b/.styles.css.swp
deleted file mode 100644
index f6a38fcc19502cc3f5f0549595f8f2fad4df91f5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 12288
zcmeI%O-lkn7zgmNAn?!&_64S*ORzdBgs6Bnp<8z760^><E$FVyPWguQExL8<-UsNz
zbm;?l=o<8_FC~JMN8vy4XPlXxXUE@dSXW%0o%2FE%c$)!wpF`Qsn-M>J#RAQHFeL(
zRv5*L%bU{o%NOTX9)1gEI@&d1Xfu)RHFcD3M1Q<vt_*%c00OHD+}RtauwBpRvLfDk
zba=q`Q}tD=;CTo@00Izz00bZa0SG`~jRkBw!5-=S8`J-=Gwl-#{d9;90uX=z1Rwwb
z2tWV=5P$##AOL|i6p)IsPrCG1cj@r-{eO1<|Dy4T@<Dm0yir~#Pn02LK<QHg$~C1%
z8P`}t0~{Fw5P$##AOHafKmY;|fB*y_@Lz!;<GdxiPRCdFw#c(NA==#%P0l8SI4-et
zBMhwc18oL$jb=$V>^hO(_XDrU-Owm)9GZ%^O<Fl)P333AdD*H;{#4MkTAaS{J)^0Z
htBo%M6;7Th$NQ5lX*@qDa#3Q*wp42TJ{p`1*f(M~T5bRU

diff --git a/styles.css b/styles.css
index 65fa461..b0723d4 100644
--- a/styles.css
+++ b/styles.css
@@ -38,9 +38,11 @@ body{
   height: 100%;
   max-width: 1200px;
   margin: 0 auto;
+  padding: 1.2rem 1.5rem;
 }
 .row{
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -68,40 +70,33 @@ body{
 
 /*página inicial*/
 main{
-  height: 80%;
+  height: 75%;
 }
 /*Header*/
-.header{
-  height:15%;
-}
-.header > .container > .row{
-  justify-content: space-between;
-}
 .header__logo{
-  width: 25%;
+  width: 75%;
 }
 .header__list{
-  width: 50%;
+  width: 100%;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-evenly;
   align-items: center;
-  column-gap: 10px;
 }
 .list__item{
-  padding: 5px 20px;
+  padding: 5px 10px;
   background-color: var(--btn-primary);
   border-radius: 4px;
   cursor: pointer;
-  transition: all 100ms ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 .list__item--link{
   color: #1d1d2e;
-  transition: all 100ms ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 .list__item:hover{
-  transform: translateY(-2px);
+  transform: scale(1.1);
   background-color: var(--btn-hover-color);
   border: 1px solid var(--border-color);
 
@@ -113,14 +108,8 @@ main{
 
 
 /*Hero*/
-.hero{
-  height: 100%
-}
-.hero > .container > .row{
-  justify-content: space-between;
-}
 .hero__content{
-  width: 40%;
+  width: 100%;
 }
 .hero__content h2{
   font-family: var(--poppins);
@@ -129,17 +118,20 @@ main{
   margin-bottom: 10px;
 }
 .hero__form{
-  width: 40%;
+  width: 100%;
 }
 .newsletter{
   width: 100%;
+  height: 80px;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   align-items: stretch;
   margin-top: 10px;
+  gap: 5px;
 }
 .input-group{
-  width: 79%;
+  width: 100%;
   height: 40px;
   display: flex;
   justify-content: center;
@@ -150,8 +142,6 @@ main{
   width: 100%;
   height: 100%;
   padding-left: 5px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
 }
 .input-group input::placeholder{
   color: #101026;
@@ -160,10 +150,9 @@ main{
   outline: none;
 }
 .form__btn{
-  width: 20%;
+  width: 100%;
+  height: 40px;
   background-color: var(--btn-primary);
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
   cursor: pointer;
 }
 
@@ -190,18 +179,90 @@ main{
 
 
 
-
-
-
-
-
 /*footer*/
 .footer{
-  height:5%;
+  height:20px;
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-bottom:1rem;
 }
 .footer__copy{
   font-size: 12px;
 }
+
+
+
+
+
+/* Small devices (landscape phones, 576px and up)*/
+@media (min-width: 576px) {
+  .header{
+    height: 80px;
+  }
+  .header .container .row {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+  .header__logo{
+    width: 25%;
+  }
+  .header__list{
+    width: 75%;
+    justify-content: flex-end;
+    column-gap: 8px;
+  }
+
+  main{
+    height: calc(100% - 100px);
+  }
+
+}
+
+/* Medium devices (tablets, 768px and up)*/
+@media (min-width: 768px) {
+  .hero{
+    height: 100%;
+  }
+  .hero .container .row{
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+
+
+}
+
+/* Large devices (desktops, 992px and up)*/
+@media (min-width: 992px) {
+  .newsletter{
+    flex-direction: row;
+  }
+  .hero__content{
+    width: 40%;
+  }
+  .hero__form{
+    width: 40%;
+  }
+  .input-group{
+    width: 79%;
+  }
+  .form__btn{
+    width: 20%;
+  }
+}
+
+/* X-Large devices (large desktops, 1200px and up)*/
+@media (min-width: 1200px) {
+  .hero{
+    background: url(https://images.pexels.com/photos/16668845/pexels-photo-16668845.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    background-attachment: fixed;
+
+  }
+}
+
+/* XX-Large devices (larger desktops, 1400px and up)*/
+@media (min-width: 1400px) {}