From 12ff41b3ec85a11ec265b3d0dfe79dda503331f0 Mon Sep 17 00:00:00 2001 From: Kravmaga 01 <92754288+Kravmaga01@users.noreply.github.com> Date: Mon, 3 Oct 2022 19:08:02 -0500 Subject: [PATCH 1/4] =?UTF-8?q?add:=20maquetaci=C3=B3n=20terminada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/modules/_variables.scss | 1 + index.html | 136 +++++++++++++++++++++++++- 2 files changed, 135 insertions(+), 2 deletions(-) diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..222cfb6 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,3 @@ $colorLight: #fff; $colorDark: #000; + diff --git a/index.html b/index.html index 747a38f..84ce4f1 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,141 @@ - Sass Project + lorem Picsum -

Hello world!

+
+
+
+
+
+ +
+

+
+

+
+
+ +
+
+
+
+
+

+
+
+

+ 

+                

+                

+            

+            

+        

+        

+            

+                

+                

+                

+                
here

+            

+            

+                
+            

+        

+        

+            

+                

+                

+                

+            

+            

+                
+            

+        

+        

+            

+                

+                

+                

+            

+            

+                
+            

+        

+        

+            

+                

+                

+                

+                

+                

+            

+            

+                
+            

+        

+        

+            

+                

+                

+                

+                

+                

+                

+                

+                

+            

+            

+                
+            

+        

+        

+            

+                

+                    

+                    

+                    

+                    

+                    

+                    

+                    

+                    

+                

+                

+                    
+                        
+                    

+                

+            

+        

+        

+            

+                

+                    

+                    

+                    

+                    

+                

+                

+                    
+                        
+                    

+                

+            

+        

+        
+
+    

 
 

From 80a3a15083fd70b271a89bc6860ffe24f981deef Mon Sep 17 00:00:00 2001
From: Kravmaga 01 <92754288+Kravmaga01@users.noreply.github.com>
Date: Sun, 9 Oct 2022 23:09:42 -0500
Subject: [PATCH 2/4] estructura gird

---
 assets/styles/components/_hero.scss     |  41 ++++
 assets/styles/components/_main.scss     |  13 ++
 assets/styles/modules/_app.scss         |  19 ++
 assets/styles/modules/_breakpoints.scss |   4 +-
 assets/styles/styles.scss               |   2 +
 index.html                              | 240 +++++++++++++-----------
 6 files changed, 206 insertions(+), 113 deletions(-)

diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss
index e69de29..b3b0f65 100644
--- a/assets/styles/components/_hero.scss
+++ b/assets/styles/components/_hero.scss
@@ -0,0 +1,41 @@
+
+.container-section-hero {
+    border: 2px solid black;
+    background: #aa5858;
+    grid-area: 1/1/4/4;
+  .container-article-hero {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: aqua;
+    .header-hero {
+      display: flex;
+      flex-direction: column;
+      background-color: #aa5858;
+      .header-figure-hero{
+        display: flex;
+        .brand-icon {
+          width: 42px;
+          height: 42px;
+        } 
+        h1{
+          font-family: 'Work Sans',sans-serif;
+          color: hsl(0deg 0 0);
+          font-weight:bold ;
+        }
+      }
+      .artilce-figure-hero{ 
+        .img-figure-article-hero{
+          width: 393px;
+          height: 921px;
+        }
+      }
+    }
+  }
+}
+
+
+
diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss
index e69de29..ce3e82a 100644
--- a/assets/styles/components/_main.scss
+++ b/assets/styles/components/_main.scss
@@ -0,0 +1,13 @@
+.container-section-light{
+    padding: 100px 0;
+}
+
+
+.container-section-dark {
+    .brand-icon{
+        position: relative;
+        width: 42px;
+        margin-right: 10px;
+        top: 7px;
+    }
+}
\ No newline at end of file
diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss
index cdfd8ae..3302270 100644
--- a/assets/styles/modules/_app.scss
+++ b/assets/styles/modules/_app.scss
@@ -6,3 +6,22 @@
   text-decoration: none;
   text-rendering: optimizeLegibility;
 }
+
+.container-section-main{
+  width: 100%;
+  background-color: rgb(76, 206, 11);
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows:repeat(9, 500px);
+}
+
+.container-section{
+  grid-column: 1/ span 2;
+  border: 2px solid black;
+  background: white;
+}
+
+
+
+
+
diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss
index bbbea70..1cf4e29 100644
--- a/assets/styles/modules/_breakpoints.scss
+++ b/assets/styles/modules/_breakpoints.scss
@@ -2,7 +2,9 @@
 @import "variables";
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+    
+}
 
 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) {}
diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss
index 43949c9..8288c62 100644
--- a/assets/styles/styles.scss
+++ b/assets/styles/styles.scss
@@ -8,3 +8,5 @@
 // COMPONENTS
 @import "components/main.scss";
 @import "components/hero.scss";
+
+// 
\ No newline at end of file
diff --git a/index.html b/index.html
index 84ce4f1..81ade30 100644
--- a/index.html
+++ b/index.html
@@ -1,144 +1,160 @@
 
 
+
 
     
     
-    
+    
     lorem Picsum
 
+
 
-    

-        

-            

-                

-                    

-                        
+
+    

+        

+            

+                

+                    

+                        brand-icon
+                        
Lorem Picsum

                     

-                    

+                    
The Lorem Ipsum for photos

                 

-                

+                

+                    
+                

             

-            

-                
-            

-        

-        

-            

-            

-                

-            

-            

-                

-                

-                

-                

-            

-            

-        

-        

-            

-                

-                

-                

-                
here

-            

-            

-                
-            

         

-        

-            

-                

-                

-                

-            

-            

-                
-            

-        

-        

-            

-                

-                

-                

-            

-            

-                
-            

-        

-        

-            

-                

-                

-                

-                

-                

-            

-            

-                
-            

-        

-        

-            

-                

-                

-                

-                

-                

-                

-                

-                

-            

-            

-                
-            

-        

-        

-            

+
+            

+                

                 

-                    

+                    

+                

+                

                     

-                    

+                    
a

                     

+                    

+                

+                

+            

+
+

+                

+                    

                     

+                    

+                    
here

+                

+                

+                    
+                

+            

+
+            

+                

+                    

                     

-                    

-                    

+                    

                 

-                

-                    
-                        
-                    

-                

-            

-        

-        

-            

+                

+                    
+                

+            

+
+            

+                

+                    

+                    

+                    

+                

+                

+                    
+                

+            

+
+            

+                

+                    

+                    

+                    

+                    

+                    

+                

+                

+                    
+                

+            

+
+            

                 

                     

                     

+                    

+                    

+                    

                     

                     

+                    

                 

                 

-                    
-                        
-                    

+                    
                 

-            

-        

-        
+
+            

+                

+                    

+                        

+                        

+                        

+                        

+                    

+                    

+                        
+                            
+                        

+                    

+                

+            

+
+            
 
     

 
-
+
+
\ No newline at end of file

From c08b9ead40858150e4e04cd7887f1649c132e39d Mon Sep 17 00:00:00 2001
From: Kravmaga 01 <92754288+Kravmaga01@users.noreply.github.com>
Date: Tue, 11 Oct 2022 13:30:39 -0500
Subject: [PATCH 3/4] firts mobile ready

---
 assets/styles/components/_hero.scss     |  67 +++---
 assets/styles/components/_main.scss     |  17 +-
 assets/styles/modules/_app.scss         |  38 +++-
 assets/styles/modules/_breakpoints.scss |  14 +-
 assets/styles/modules/_typography.scss  |  51 ++++-
 assets/styles/styles.css                | 131 +++++++++++-
 assets/styles/styles.css.map            |   2 +-
 assets/styles/styles.scss               |   2 +-
 index.html                              | 267 +++++++++++-------------
 9 files changed, 380 insertions(+), 209 deletions(-)

diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss
index b3b0f65..21a2363 100644
--- a/assets/styles/components/_hero.scss
+++ b/assets/styles/components/_hero.scss
@@ -1,41 +1,34 @@
-
-.container-section-hero {
-    border: 2px solid black;
-    background: #aa5858;
-    grid-area: 1/1/4/4;
-  .container-article-hero {
+.hero {
+  text-align: center;
+  &_header {
+    display: grid;
+    place-content: center;
+  }
+  &_header-img {
     display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: aqua;
-    .header-hero {
-      display: flex;
-      flex-direction: column;
-      background-color: #aa5858;
-      .header-figure-hero{
-        display: flex;
-        .brand-icon {
-          width: 42px;
-          height: 42px;
-        } 
-        h1{
-          font-family: 'Work Sans',sans-serif;
-          color: hsl(0deg 0 0);
-          font-weight:bold ;
-        }
-      }
-      .artilce-figure-hero{ 
-        .img-figure-article-hero{
-          width: 393px;
-          height: 921px;
-        }
-      }
-    }
   }
-}
-
 
+  &__heder-img img {
+    place-self: center;
+    width: 42px;
+    height: 42px;
+  }
+  &__header h1 {
+    padding-inline: 1rem;
+  }
+  &_brand-icon {
+    width: 42px;
+    height: 42px;
+  }
+}
 
+.hero h2 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.5rem;
+}
+.shadow {
+  border-radius: 0.5rem;
+  box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3),
+    0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03);
+}
diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss
index ce3e82a..326ecfc 100644
--- a/assets/styles/components/_main.scss
+++ b/assets/styles/components/_main.scss
@@ -1,13 +1,6 @@
-.container-section-light{
-    padding: 100px 0;
+.align-center {
+  text-align: center;
+}
+.section-background {
+  background-color: #f4f8fc;
 }
-
-
-.container-section-dark {
-    .brand-icon{
-        position: relative;
-        width: 42px;
-        margin-right: 10px;
-        top: 7px;
-    }
-}
\ No newline at end of file
diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss
index 3302270..19e9f8c 100644
--- a/assets/styles/modules/_app.scss
+++ b/assets/styles/modules/_app.scss
@@ -7,21 +7,37 @@
   text-rendering: optimizeLegibility;
 }
 
-.container-section-main{
-  width: 100%;
-  background-color: rgb(76, 206, 11);
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-rows:repeat(9, 500px);
+html {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  font-size: 100%;
+  font-family: "Inter", sans-serif;
 }
 
-.container-section{
-  grid-column: 1/ span 2;
-  border: 2px solid black;
-  background: white;
+body {
+  margin: 0;
 }
 
+a {
+  text-decoration: none;
+}
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+.container {
+  max-width: 992px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1rem;
+}
 
+.section {
+  padding: 100px 0;
+  background-color: #fff;
+}
 
-
+.align-center {
+  text-align: center;
+}
diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss
index 1cf4e29..c21290e 100644
--- a/assets/styles/modules/_breakpoints.scss
+++ b/assets/styles/modules/_breakpoints.scss
@@ -1,10 +1,20 @@
 //BREAKPOINTS MOBILE FIRST
 @import "variables";
 
+.small {
+  margin-bottom: 1rem;
+}
+
 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) {
-    
+  .container {
+    max-width: 768px;
+  }
+  .hero__header {
+    grid-template-columns: auto auto;
+  }
 }
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) {}
+@media (min-width: 992px) {
+}
diff --git a/assets/styles/modules/_typography.scss b/assets/styles/modules/_typography.scss
index f6d5096..d957523 100644
--- a/assets/styles/modules/_typography.scss
+++ b/assets/styles/modules/_typography.scss
@@ -1,5 +1,50 @@
-@import url('https://rsms.me/inter/inter.css');
-html { font-family: 'Inter', sans-serif; }
+@import url("https://rsms.me/inter/inter.css");
+html {
+  font-family: "Inter", sans-serif;
+}
 @supports (font-variation-settings: normal) {
-  html { font-family: 'Inter var', sans-serif; }
+  html {
+    font-family: "Inter var", sans-serif;
+  }
+}
+a {
+  text-decoration: none;
+  color: #386bf3;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+h1 {
+  font-size: 2.625rem;
+}
+p {
+  line-height: 1.6;
+}
+
+code {
+  background-color: #f4f7fc;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+pre {
+  white-space: nowrap;
+  padding: 0.875rem;
+  margin-bottom: 1.625rem;
+  border-radius: 0.5rem;
+  background-color: #f4f7fc;
+  font-size: 0.875rem;
+}
+
+.sub-title-large {
+  font-size: 2.25rem;
+}
+
+.sub-title-small {
+  font-weight: 300;
 }
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 84eb7fe..76e7c93 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -8,6 +8,54 @@
   text-rendering: optimizeLegibility;
 }
 
+html {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  font-size: 100%;
+  font-family: "Inter", sans-serif;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  max-width: 992px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1rem;
+}
+
+.section {
+  padding: 100px 0;
+  background-color: #fff;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.small {
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+  .hero__header {
+    grid-template-columns: auto auto;
+  }
+}
 html {
   font-family: "Inter", sans-serif;
 }
@@ -17,5 +65,86 @@ html {
     font-family: "Inter var", sans-serif;
   }
 }
+a {
+  text-decoration: none;
+  color: #386bf3;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+h1 {
+  font-size: 2.625rem;
+}
+
+p {
+  line-height: 1.6;
+}
+
+code {
+  background-color: #f4f7fc;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+pre {
+  white-space: nowrap;
+  padding: 0.875rem;
+  margin-bottom: 1.625rem;
+  border-radius: 0.5rem;
+  background-color: #f4f7fc;
+  font-size: 0.875rem;
+}
+
+.sub-title-large {
+  font-size: 2.25rem;
+}
+
+.sub-title-small {
+  font-weight: 300;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.section-background {
+  background-color: #f4f8fc;
+}
+
+.hero {
+  text-align: center;
+}
+.hero_header {
+  display: grid;
+  place-content: center;
+}
+.hero_header-img {
+  display: flex;
+}
+.hero__heder-img img {
+  place-self: center;
+  width: 42px;
+  height: 42px;
+}
+.hero__header h1 {
+  padding-inline: 1rem;
+}
+.hero_brand-icon {
+  width: 42px;
+  height: 42px;
+}
+
+.hero h2 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.5rem;
+}
 
-/*# sourceMappingURL=styles.css.map */
+.shadow {
+  border-radius: 0.5rem;
+  box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03);
+}/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map
index f39486f..91bed70 100644
--- a/assets/styles/styles.css.map
+++ b/assets/styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_breakpoints.scss","components/_main.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;ACAR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACEF;;ADCA;EACE,sBAAA;EACA,kCAAA;EACA,eAAA;EACA,gCAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;EACE,qBAAA;ACEF;;ADCA;EACE,eAAA;EACA,YAAA;ACEF;;ADAA;EACE,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;ACGF;;ADAA;EACE,gBAAA;EACA,sBAAA;ACGF;;ADAA;EACE,kBAAA;ACGF;;ACzCA;EACE,mBAAA;AD4CF;;ACxCA;EACE;IACE,gBAAA;ED2CF;ECzCA;IACE,gCAAA;ED2CF;AACF;AFxDA;EACE,gCAAA;AE0DF;;AFxDA;EACE;IACE,oCAAA;EE2DF;AACF;AFzDA;EACE,qBAAA;EACA,cAAA;AE2DF;;AFxDA;;;EAGE,SAAA;AE2DF;;AFxDA;EACE,mBAAA;AE2DF;;AFzDA;EACE,gBAAA;AE4DF;;AFzDA;EACE,yBAAA;EACA,gBAAA;EACA,sBAAA;EACA,mBAAA;AE4DF;;AFzDA;EACE,mBAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBAAA;EACA,mBAAA;AE4DF;;AFzDA;EACE,kBAAA;AE4DF;;AFzDA;EACE,gBAAA;AE4DF;;AE5GA;EACE,kBAAA;AF+GF;;AE7GA;EACE,yBAAA;AFgHF;;AGpHA;EACE,kBAAA;AHuHF;AGtHE;EACE,aAAA;EACA,qBAAA;AHwHJ;AGtHE;EACE,aAAA;AHwHJ;AGrHE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;AHuHJ;AGrHE;EACE,oBAAA;AHuHJ;AGrHE;EACE,WAAA;EACA,YAAA;AHuHJ;;AGnHA;EACE,oCAAA;EACA,iBAAA;AHsHF;;AGpHA;EACE,qBAAA;EACA,+IAAA;AHuHF","file":"styles.css"}
\ No newline at end of file
diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss
index 8288c62..7ece4df 100644
--- a/assets/styles/styles.scss
+++ b/assets/styles/styles.scss
@@ -9,4 +9,4 @@
 @import "components/main.scss";
 @import "components/hero.scss";
 
-// 
\ No newline at end of file
+//
diff --git a/index.html b/index.html
index 81ade30..baabb1b 100644
--- a/index.html
+++ b/index.html
@@ -2,158 +2,143 @@
 
 
 
-    
-    
-    
-    lorem Picsum
+    
+    
+    
+    
+    
 
 
 
+    

+        

+            

+                Picsum icon
+                
Lorem Picsum

+            

+            
The Lorem Ipsum for photos.

+            Random photo from picsum.photos
+        

+    

+    

 
-    

-        

-            

-                

-                    

-                        brand-icon
-                        
Lorem Picsum

-                    

-                    
The Lorem Ipsum for photos

-                

-                

-                    
-                

+        

+            

+                
Easy to use, stylish placeholders

+                

+                    Just add your desired image size (width & height) after our URL, and
+                    you'll get a random image.
+                

+                
+            https://some-url.com
+          

+                
To get square image, just add the size

+                
+            https://some-url.com
+          

             

         

 
-            

-                

-                

-                    

-                

-                

-                    

-                    
a

-                    

-                    

-                

-                

-            

-
-

-                

-                    

-                    

-                    

-                    
here

-                

-                

-                    
-                

-            

-
-            

-                

-                    

-                    

-                    

-                

-                

-                    
-                

-            

-
-            

-                

-                    

-                    

-                    

-                

-                

-                    
-                

-            

-
-            

-                

-                    

-                    

-                    

-                    

-                    

-                

-                

-                    
-                

-            

-
-            

-                

-                    

-                    

-                    

-                    

-                    

-                    

-                    

-                    

-                

-                

-                    
-                

-            

 
-            

-                

-                    

-                        

-                        

-                        

-                        

-                        

-                        

-                        

-                        

-                    

-                    

-                        
-                            
-                        

-                    

-                

-            

+        

+            

+                
Specific Image

+                

+                    Get a specific image by adding /id/{image} to the start
+                    of the url.
+                

+                
+            https://some-url.com
+          

+                
You can find a list all the images here.

+                Dark puppy
+            

+        

 
-            

-                

-                    

-                        

-                        

-                        

-                        

-                    

-                    

-                        
-                            
-                        

-                    

-                

-            

 
-            

-                

-                    

-                        

-                        

-                        

-                        

-                        

-                    

-                

-            

+        

+            

+                
Static Random Image

+                

+                    Get the same random image every time based on a seed, by adding
+                    /seed/{seed} to the start of the url.
+                

+                
+            https://some-url.com
+          

+                Snow-capped hills
+            

+        

 
+        

+            

+                
Grayscale

+                

+                    Get a grayscale image by appending ?grayscale to the
+                    end of the url.
+                

+                
+            https://some-url.com
+          

+                Walrus grayscale image
+            

+        

+        
+        

+            

+                
Blur

+                
Get a blurred image by appending ?blur to the end of the url.

+                
+            https://some-url.com
+          

+                

+                    You can adjust the amount of blur by providing a number between
+                    1 and 10.
+                

+                
+            https://some-url.com
+          

+                Cafeteria
+            

+        

+        
+        

+            

+                
Advanced Usage

+                

+                    You may combine any of the options above. For example, to get a
+                    specific image that is grayscale and blurred.
+                

+                
+            https://some-url.com
+          

+                

+                    To request multiple images of the same size in your browser, add the
+                    random query param to prevent the images from being
+                    cached:
+                

+                
+            Some https query arguments
+          

+                

+                    If you need a file ending, you can add .jpg to the end
+                    of the url.
+                

+                
+            https://some-url.com
+          

+                

+                    To get an image in the WebP format, you can add
+                    .webp to the end of the url.
+                

+                
+            https://some-url.com
+          

+                Beacon
+            

+        

     

 
 

From b5b88c8da9f279bd24bcf7866d837a02491f0f98 Mon Sep 17 00:00:00 2001
From: Kravmaga 01 <92754288+Kravmaga01@users.noreply.github.com>
Date: Tue, 11 Oct 2022 16:11:58 -0500
Subject: [PATCH 4/4]  add: se agrego las dimeciones para el desktop

---
 assets/styles/components/_hero.scss     |   9 +-
 assets/styles/modules/_app.scss         |   7 ++
 assets/styles/modules/_breakpoints.scss |   9 +-
 assets/styles/styles.css                |  21 ++--
 assets/styles/styles.css.map            |   2 +-
 index.html                              | 160 ++++++++++++++----------
 6 files changed, 122 insertions(+), 86 deletions(-)

diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss
index 21a2363..ccfb21e 100644
--- a/assets/styles/components/_hero.scss
+++ b/assets/styles/components/_hero.scss
@@ -1,11 +1,12 @@
 .hero {
   text-align: center;
-  &_header {
+  &_continer {
     display: grid;
     place-content: center;
   }
   &_header-img {
     display: flex;
+    justify-content: center;
   }
 
   &__heder-img img {
@@ -26,9 +27,3 @@
   font-family: "Open Sans", sans-serif;
   font-size: 1.5rem;
 }
-.shadow {
-  border-radius: 0.5rem;
-  box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25),
-    0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3),
-    0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03);
-}
diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss
index 19e9f8c..d2b2352 100644
--- a/assets/styles/modules/_app.scss
+++ b/assets/styles/modules/_app.scss
@@ -7,6 +7,13 @@
   text-rendering: optimizeLegibility;
 }
 
+.shadow {
+  border-radius: 0.5rem;
+  box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25),
+    0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3),
+    0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03);
+}
+
 html {
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss
index c21290e..5d2b5d1 100644
--- a/assets/styles/modules/_breakpoints.scss
+++ b/assets/styles/modules/_breakpoints.scss
@@ -1,5 +1,8 @@
 //BREAKPOINTS MOBILE FIRST
 @import "variables";
+.grid {
+  display: grid;
+}
 
 .small {
   margin-bottom: 1rem;
@@ -10,11 +13,11 @@
   .container {
     max-width: 768px;
   }
-  .hero__header {
-    grid-template-columns: auto auto;
-  }
 }
 
 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) {
+  .grid {
+    grid-template-columns: auto auto;
+  }
 }
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 76e7c93..3f24dc9 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -8,6 +8,11 @@
   text-rendering: optimizeLegibility;
 }
 
+.shadow {
+  border-radius: 0.5rem;
+  box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03);
+}
+
 html {
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
@@ -44,6 +49,10 @@ img {
   text-align: center;
 }
 
+.grid {
+  display: grid;
+}
+
 .small {
   margin-bottom: 1rem;
 }
@@ -52,7 +61,9 @@ img {
   .container {
     max-width: 768px;
   }
-  .hero__header {
+}
+@media (min-width: 992px) {
+  .grid {
     grid-template-columns: auto auto;
   }
 }
@@ -119,12 +130,13 @@ pre {
 .hero {
   text-align: center;
 }
-.hero_header {
+.hero_continer {
   display: grid;
   place-content: center;
 }
 .hero_header-img {
   display: flex;
+  justify-content: center;
 }
 .hero__heder-img img {
   place-self: center;
@@ -142,9 +154,4 @@ pre {
 .hero h2 {
   font-family: "Open Sans", sans-serif;
   font-size: 1.5rem;
-}
-
-.shadow {
-  border-radius: 0.5rem;
-  box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03);
 }/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map
index 91bed70..5ddc007 100644
--- a/assets/styles/styles.css.map
+++ b/assets/styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_breakpoints.scss","components/_main.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;ACAR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACEF;;ADCA;EACE,sBAAA;EACA,kCAAA;EACA,eAAA;EACA,gCAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;EACE,qBAAA;ACEF;;ADCA;EACE,eAAA;EACA,YAAA;ACEF;;ADAA;EACE,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;ACGF;;ADAA;EACE,gBAAA;EACA,sBAAA;ACGF;;ADAA;EACE,kBAAA;ACGF;;ACzCA;EACE,mBAAA;AD4CF;;ACxCA;EACE;IACE,gBAAA;ED2CF;ECzCA;IACE,gCAAA;ED2CF;AACF;AFxDA;EACE,gCAAA;AE0DF;;AFxDA;EACE;IACE,oCAAA;EE2DF;AACF;AFzDA;EACE,qBAAA;EACA,cAAA;AE2DF;;AFxDA;;;EAGE,SAAA;AE2DF;;AFxDA;EACE,mBAAA;AE2DF;;AFzDA;EACE,gBAAA;AE4DF;;AFzDA;EACE,yBAAA;EACA,gBAAA;EACA,sBAAA;EACA,mBAAA;AE4DF;;AFzDA;EACE,mBAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBAAA;EACA,mBAAA;AE4DF;;AFzDA;EACE,kBAAA;AE4DF;;AFzDA;EACE,gBAAA;AE4DF;;AE5GA;EACE,kBAAA;AF+GF;;AE7GA;EACE,yBAAA;AFgHF;;AGpHA;EACE,kBAAA;AHuHF;AGtHE;EACE,aAAA;EACA,qBAAA;AHwHJ;AGtHE;EACE,aAAA;AHwHJ;AGrHE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;AHuHJ;AGrHE;EACE,oBAAA;AHuHJ;AGrHE;EACE,WAAA;EACA,YAAA;AHuHJ;;AGnHA;EACE,oCAAA;EACA,iBAAA;AHsHF;;AGpHA;EACE,qBAAA;EACA,+IAAA;AHuHF","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_breakpoints.scss","components/_main.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;ACAR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACEF;;ADCA;EACE,qBAAA;EACA,+IAAA;ACEF;;ADGA;EACE,sBAAA;EACA,kCAAA;EACA,eAAA;EACA,gCAAA;ACAF;;ADGA;EACE,SAAA;ACAF;;ADGA;EACE,qBAAA;ACAF;;ADGA;EACE,eAAA;EACA,YAAA;ACAF;;ADEA;EACE,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;ACCF;;ADEA;EACE,gBAAA;EACA,sBAAA;ACCF;;ADEA;EACE,kBAAA;ACCF;;AC/CA;EACE,aAAA;ADkDF;;AC/CA;EACE,mBAAA;ADkDF;;AC9CA;EACE;IACE,gBAAA;EDiDF;AACF;AC7CA;EACE;IACE,gCAAA;ED+CF;AACF;AFnEA;EACE,gCAAA;AEqEF;;AFnEA;EACE;IACE,oCAAA;EEsEF;AACF;AFpEA;EACE,qBAAA;EACA,cAAA;AEsEF;;AFnEA;;;EAGE,SAAA;AEsEF;;AFnEA;EACE,mBAAA;AEsEF;;AFpEA;EACE,gBAAA;AEuEF;;AFpEA;EACE,yBAAA;EACA,gBAAA;EACA,sBAAA;EACA,mBAAA;AEuEF;;AFpEA;EACE,mBAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBAAA;EACA,mBAAA;AEuEF;;AFpEA;EACE,kBAAA;AEuEF;;AFpEA;EACE,gBAAA;AEuEF;;AEvHA;EACE,kBAAA;AF0HF;;AExHA;EACE,yBAAA;AF2HF;;AG/HA;EACE,kBAAA;AHkIF;AGjIE;EACE,aAAA;EACA,qBAAA;AHmIJ;AGjIE;EACE,aAAA;EACA,uBAAA;AHmIJ;AGhIE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;AHkIJ;AGhIE;EACE,oBAAA;AHkIJ;AGhIE;EACE,WAAA;EACA,YAAA;AHkIJ;;AG9HA;EACE,oCAAA;EACA,iBAAA;AHiIF","file":"styles.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index baabb1b..79e3eec 100644
--- a/index.html
+++ b/index.html
@@ -11,14 +11,21 @@
 
 
     

-        

-            

-                Picsum icon
-                
Lorem Picsum

-            

-            
The Lorem Ipsum for photos.

-            Random photo from picsum.photos
+        

+            

+                

+                    

+                        Picsum icon
+                        
Lorem Picsum

+                        
The Lorem Ipsum for photos.

+                    

+                

+                Random photo from picsum.photos
+
+
+            

+
         

     

     

@@ -42,102 +49,119 @@ 
Easy to use, stylish placeholders

 
 
         

-            

-                
Specific Image

-                

-                    Get a specific image by adding /id/{image} to the start
-                    of the url.
-                

-                
+            

+                

+
+
+                    
Specific Image

+                    

+                        Get a specific image by adding /id/{image} to the start
+                        of the url.
+                    

+                    
             https://some-url.com
-          

-                
You can find a list all the images here.

+                

+                    
You can find a list all the images here.

+                
                 Dark puppy
-            

+            
         

 
 
         

-            

-                
Static Random Image

-                

-                    Get the same random image every time based on a seed, by adding
-                    /seed/{seed} to the start of the url.
-                

-                
+            

+                

+
+
+                    
Static Random Image

+                    

+                        Get the same random image every time based on a seed, by adding
+                        /seed/{seed} to the start of the url.
+                    

+                    
             https://some-url.com
           

+                

                 Snow-capped hills
-            

+            
         

 
         

-            

-                
Grayscale

-                

-                    Get a grayscale image by appending ?grayscale to the
-                    end of the url.
-                

-                
+            

+                

+
+
+                    
Grayscale

+                    

+                        Get a grayscale image by appending ?grayscale to the
+                        end of the url.
+                    

+                    
             https://some-url.com
           

+                

                 Walrus grayscale image
-            

+            
         

         
         

-            

-                
Blur

-                
Get a blurred image by appending ?blur to the end of the url.

-                
+            

+                

+                    
Blur

+                    
Get a blurred image by appending ?blur to the end of the url.

+                    
             https://some-url.com
           

-                

-                    You can adjust the amount of blur by providing a number between
-                    1 and 10.
-                

-                
+                    

+                        You can adjust the amount of blur by providing a number between
+                        1 and 10.
+                    

+                    
             https://some-url.com
           

+                

                 Cafeteria
-            

+            
         

         
         

-            

-                
Advanced Usage

-                

-                    You may combine any of the options above. For example, to get a
-                    specific image that is grayscale and blurred.
-                

-                
+            

+                

+
+                    
Advanced Usage

+                    

+                        You may combine any of the options above. For example, to get a
+                        specific image that is grayscale and blurred.
+                    

+                    
             https://some-url.com
           

-                

-                    To request multiple images of the same size in your browser, add the
-                    random query param to prevent the images from being
-                    cached:
-                

-                
+                    

+                        To request multiple images of the same size in your browser, add the
+                        random query param to prevent the images from being
+                        cached:
+                    

+                    
             Some https query arguments
           

-                

-                    If you need a file ending, you can add .jpg to the end
-                    of the url.
-                

-                
+                    

+                        If you need a file ending, you can add .jpg to the end
+                        of the url.
+                    

+                    
             https://some-url.com
           

-                

-                    To get an image in the WebP format, you can add
-                    .webp to the end of the url.
-                

-                
+                    

+                        To get an image in the WebP format, you can add
+                        .webp to the end of the url.
+                    

+                    
             https://some-url.com
           

+                

                 Beacon
-            

+