Skip to content

Commit

Permalink
Merge pull request #5 from Chrisvimu/dev-002
Browse files Browse the repository at this point in the history 
Dev 002, added section imgs and styling
  • Loading branch information
@Chrisvimu
Chrisvimu authored Sep 27, 2024
2 parents d601e33 + fc9def9 commit d2f8ce2
Show file tree
Hide file tree
Showing 4 changed files with 231 additions and 76 deletions.
130 changes: 101 additions & 29 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
/*
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "IBM Plex Sans", sans-serif;
color: #7C6A0A;
background-color: #FFEFE7;
max-width: 100vw;
font-size: 1em;
}

box-sizing: border-box;
margin: 0;
padding: 0;
font-family: $font-stack;
color: $primary-text-color;
background-color: $primary-color;
max-width: 100vw;
font-size: fluid-type(1, 1.5);
}
*/
.container {
max-width: 100vw;
}
Expand All @@ -19,6 +20,7 @@ body {
box-sizing: border-box;
background-color: #FFEFE7;
font-family: "IBM Plex Sans", sans-serif;
font-size: calc(1rem + (1.5 - 1) * (100vw - 20vw) / (100 - 20));
}

.navbar {
Expand All @@ -33,7 +35,9 @@ body {
nav {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: #7C6A0A;
padding: 0.5em;
}
Expand All @@ -45,7 +49,7 @@ nav .icons {
display: flex;
gap: 0.8em;
}
nav .icons button {
nav .icons button button {
background: none;
border-style: none;
cursor: pointer;
Expand All @@ -65,29 +69,32 @@ nav .icons button svg :hover {
}

article {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: blue;
color: #7C6A0A;
font-family: "IBM Plex Sans", sans-serif;
padding-left: 1rem;
padding-right: 1rem;
display: flex;
width: auto;
justify-content: space-between;
padding-top: 2em;
}
article h1 {
font-size: 3em;
font-size: calc(3rem + (3 - 3) * (100vw - 20vw) / (100 - 20));
padding: 0%;
margin: 0%;
}
article p {
font-size: 1.5em;
font-size: calc(1rem + (1.5 - 1) * (100vw - 20vw) / (100 - 20));
}
article button {
display: flex;
border: none;
background: none;
border-style: none;
cursor: pointer;
}
article button {
width: 15vw;
height: auto;
background-color: #FA9500;
Expand All @@ -110,6 +117,7 @@ article .impact-section {
row-gap: 1.2rem;
display: flex;
flex-direction: column;
font-size: calc(1rem + (1.5 - 1) * (100vw - 20vw) / (100 - 20));
}
article .image-section {
width: 50%;
Expand All @@ -132,70 +140,74 @@ section {
padding: 1rem;
width: 100%;
height: auto;
font-size: calc(1rem + (1.5 - 1) * (100vw - 20vw) / (100 - 20));
}
section h2 {
color: #7C6A0A;
font-size: 2em;
font-size: calc(2rem + (3 - 2) * (100vw - 20vw) / (100 - 20));
height: auto;
font-weight: bold;
font-style: italic;
}
section .healthcare h2, section .furniture h2 {
font-weight: 300;
section .healthcare h2, section .info-section .about-us h2, .info-section section .about-us h2, section .furniture h2 {
font-size: calc(3rem + (3.5 - 3) * (100vw - 20vw) / (100 - 20));
padding-bottom: 1em;
height: auto;
}
section .healthcare .card-section, section .furniture .card-section {
section .healthcare .card-section, section .info-section .about-us .card-section, .info-section section .about-us .card-section, section .furniture .card-section {
background-color: #FA9500;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: auto;
height: auto;
padding: 0.5rem;
justify-items: center;
justify-content: center;
align-items: center;
-moz-column-gap: 8vw;
column-gap: 8vw;
row-gap: 4vh;
flex-wrap: wrap;
font-size: calc(1rem + (1.5 - 1) * (100vw - 20vw) / (100 - 20));
}
section .healthcare .product-card, section .furniture .product-card {
section .healthcare .product-card, section .info-section .about-us .product-card, .info-section section .about-us .product-card, section .furniture .product-card {
background-color: purple;
width: 20vw;
height: auto;
color: #7C6A0A;
padding: 0.5rem;
border-radius: 1rem;
justify-items: center;
font-size: calc(1rem + (1.5 - 1) * (100vw - 20vw) / (100 - 20));
}
section .healthcare .product-card .icon, section .furniture .product-card .icon {
section .healthcare .product-card .icon, section .info-section .about-us .product-card .icon, .info-section section .about-us .product-card .icon, section .furniture .product-card .icon {
display: flex;
justify-content: flex-end;
padding: 0.2rem;
}
section .healthcare .product-card .icon svg, section .furniture .product-card .icon svg {
section .healthcare .product-card .icon svg, section .info-section .about-us .product-card .icon svg, .info-section section .about-us .product-card .icon svg, section .furniture .product-card .icon svg {
stroke: black;
stroke-width: 3em;
stroke-linecap: round;
width: 1em;
height: 1em;
cursor: pointer;
}
section .healthcare .product-card .icon svg :hover, section .furniture .product-card .icon svg :hover {
section .healthcare .product-card .icon svg :hover, section .info-section .about-us .product-card .icon svg :hover, .info-section section .about-us .product-card .icon svg :hover, section .furniture .product-card .icon svg :hover {
stroke: red;
fill: red;
width: 3em;
height: 3em;
}
section .healthcare .product-card .product-image, section .furniture .product-card .product-image {
section .healthcare .product-card .product-image, section .info-section .about-us .product-card .product-image, .info-section section .about-us .product-card .product-image, section .furniture .product-card .product-image {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 0%;
}
section .healthcare .product-card .product-image img, section .furniture .product-card .product-image img {
section .healthcare .product-card .product-image img, section .info-section .about-us .product-card .product-image img, .info-section section .about-us .product-card .product-image img, section .furniture .product-card .product-image img {
width: 85%;
max-width: 100vw;
overflow: hidden;
Expand Down Expand Up @@ -237,11 +249,71 @@ main {
background-color: yellow;
}

.info-section .about-us {
padding-bottom: 1em;
background-color: #293e86;
}
.info-section .about-us .mision-section {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background-color: aqua;
}
.info-section .about-us .mision-section .earth, .info-section .about-us .mision-section .innovation {
background-color: chartreuse;
gap: 1em;
width: 30vw;
}
.info-section .about-us .mision-section .earth img, .info-section .about-us .mision-section .innovation img {
-o-object-fit: cover;
object-fit: cover;
}
.info-section .about-us h2 {
font-size: calc(3rem + (3.5 - 3) * (100vw - 20vw) / (100 - 20));
padding-bottom: 1em;
height: auto;
font-weight: bold;
font-style: italic;
}
.info-section .about-us p {
font-size: calc(2rem + (1.5 - 2) * (100vw - 20vw) / (100 - 20));
text-align: center;
color: #FA9500;
}

.gallery {
background-color: #BABD8D;
color: #7C6A0A;
font-family: "IBM Plex Sans", sans-serif;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

footer {
background-color: #FFEFE7;
width: 100%;
height: 15rem;
color: #7C6A0A;
font-family: "IBM Plex Sans", sans-serif;
font-size: calc(1rem + (1.5 - 1) * (100vw - 20vw) / (100 - 20));
padding: 1rem;
}

.product-image {
width: 10rem;
height: 8rem;
-o-object-fit: cover;
object-fit: cover;
}

.gallery-img {
width: 20vw;
height: 25vh;
-o-object-fit: cover;
object-fit: cover;
max-width: 90VW;
}/*# sourceMappingURL=style.css.map */
2 changes: 1 addition & 1 deletion css/style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

45 changes: 22 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,47 +210,46 @@ <h3>Lámpara de bambú</h3>
<section class="info-section">
<div class="about-us">
<h2>Porque nosotros?</h2>
<div class="earth">
<img src="resources/img/earth.png" alt="Earth">
<p>Porque nos preocupamos por el planeta</p>
</div>
<div class="innovation"></div>
<img src="" alt="">
<p></p>
<div class="mission-section">
<div class="earth">
<img src="resources/img/earth.png" alt="Earth">
<p>Compromiso con el medio ambiente garantizando el uso de materiales 100% reciclables.</p>
</div>
<div class="innovation"></div>
<img src="resources/img/ecology.png" alt="Ecology">
<p> Innovando con estilo el diseño de nuestros muebles es único. </p>
</div>
</div>
</div>
<div class="gallery">
<h2>Galeria de estilos</h2>
<div>
<img src="resources/img/gallery1.jpg" alt="Gallery 1">
</div>
<div>
<img src="" alt="Gallery 2">
</div>
<div>
<img src="" alt="Gallery 3">
<div class="gallery-img">
<img src="resources/img/gallery-1.jpg" alt="Gallery 1">
<img src="resources/img/gallery-2.jpg" alt="Gallery 2">
<img src="resources/img/gallery-3.jpg" alt="Gallery 3">
</div>
</div>
<div class="location">
<h2>Encuentranos en</h2>
<div class="map">
<img src="" alt="Location 1">
<img src="resources/img/map.png" alt="Location 1">
</div>
<p>ubicacion 1</p>
<h3>Centro Mayor Centro Comercial</h3>
<p>Cl. 38A Sur #34d-51, Bogotá, Colombia</p>
</div>
</section>
</main>
<footer class="footer">
<h3>Eco-Store</h3>
<h2>Made by @chrisvimu</h2>
<p>Careers</p>
<p>Terms & Conditions</p>
<p>Platzi course</p>
<p>Platzi course</p>
<p>Platzi course</p>
<p>Platzi course</p>
<p>Eco-store inc</p>
<div class="social media">
<img src="" alt="Facebook">
<img src="" alt="Instagram">
<img src="" alt="X">
<img src="resources/img/facebook-logo.png" alt="Facebook">
<img src="resources/img/instagram-logo.png" alt="Instagram">
<img src="resources/img/twitter-logo.png" alt="X">
</div>
</footer>
</body>
Expand Down
Loading

0 comments on commit d2f8ce2

Please sign in to comment.