Skip to content

Commit 2f2797f

Browse files
Wagner3UBWagner3UB
committed
section learn more acrescentada e criada para desk
1 parent 58eb38a commit 2f2797f

7 files changed

Lines changed: 133 additions & 23 deletions

File tree

‎css/reset.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
/* com "box-sizing: border-box" nada pode modificar o width, principalmente bording e padding*/
1111

12-
html, body, div, section, p, h1, h2, h3, h4, h5, h6, ul, ol, hr, li, a, img, strong, em, span, form, input, textarea, label, button {
12+
html, body, div, section, figure, article, p, h1, h2, h3, h4, h5, h6, ul, ol, hr, li, a, img, strong, em, span, form, input, textarea, label, button {
1313
margin: 0;
1414
padding: 0;
1515
font-size: 100%;

‎css/style.css‎

Lines changed: 94 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ h1,h2,h3,h4,h5,h6 {
2121
max-width: 1111px;
2222
margin: 0 auto;
2323
}
24+
.btn{
25+
cursor: pointer;
26+
color: var(--white);
27+
background-color: var(--green);
28+
border-radius: 4px;
29+
font-size: 21px;
30+
line-height: 1.17em;
31+
padding: 8px 0;
32+
}
2433

2534
/* HEADER SECTION */
2635
header{
@@ -108,14 +117,7 @@ nav li a{
108117
line-height: 1.42em;
109118
}
110119
.top_banner button{
111-
cursor: pointer;
112120
width: 310px;
113-
color: var(--white);
114-
background-color: var(--green);
115-
border-radius: 4px;
116-
font-size: 21px;
117-
line-height: 1.17em;
118-
padding: 8px 0;
119121
margin-top: 53px;
120122
}
121123

@@ -140,6 +142,10 @@ nav li a{
140142
justify-content: space-between;
141143
flex-wrap: wrap;
142144
}
145+
.prateleira button{
146+
width: 173px;
147+
margin: 54px auto;
148+
}
143149
.produto{
144150
width: 255px;
145151
margin-bottom: 30px;
@@ -195,6 +201,65 @@ nav li a{
195201
background-color: var(--white);
196202
}
197203

204+
/* LEARN MORE */
205+
.learn-more{
206+
background-color: rgba(247, 248, 250, 1);
207+
padding: 130px 0;
208+
}
209+
.learn-more .container div{
210+
width: 50%;
211+
}
212+
.learn-more ul{
213+
margin-top: 40px;
214+
}
215+
.learn-more h2{
216+
display: block;
217+
width: 350px;
218+
font-size: 40px;
219+
line-height: 1.44em;
220+
letter-spacing: -.9px;
221+
}
222+
.learn-more h4{
223+
font-size: 16px;
224+
line-height: 1.44em;
225+
color: var(--green);
226+
}
227+
.learn-more ul li{
228+
list-style-image: url(../img/Group.png);
229+
list-style-position: inside;
230+
font-family: "Poppins", Helvetica, Arial, sans-serif;
231+
font-weight: 400;
232+
line-height: 1.8em;
233+
margin-bottom: 10px;
234+
}
235+
.learn-more ul li span{
236+
font-weight: 500;
237+
}
238+
.learn-more .container{
239+
position: relative;
240+
}
241+
.learn-more figure{
242+
position: absolute;
243+
right: 0;
244+
bottom: 0;
245+
}
246+
/* .learn-more figure::before{
247+
content: "";
248+
position: absolute;
249+
height: 100%;
250+
width: 350px;
251+
bottom: 0;
252+
left: 50%;
253+
transform: translateX(-50%);
254+
z-index: 1;
255+
box-shadow: 0px 4px 94px rgba(123, 123, 123, 0.35);
256+
} */
257+
.learn-more button{
258+
width: 194px;
259+
margin-top: 68px;
260+
}
261+
262+
198263

199264

200265
@media screen and (max-width: 376px){
@@ -261,4 +326,26 @@ nav li a{
261326
margin-top: 35px;
262327
margin-bottom: 43px;
263328
}
329+
330+
/* PRODUCTS */
331+
.m-hide{
332+
display: none;
333+
}
334+
.see_more.active{
335+
display: none;
336+
}
337+
.produto{
338+
width: 100%;
339+
}
340+
.produto .img_produto{
341+
background-repeat: no-repeat;
342+
background-size: cover;
343+
background-position: top;
344+
}
345+
.produto div {
346+
padding: 7px 26px 10px;
347+
}
348+
.produto h3, .produto p{
349+
line-height: 1.1em;
350+
}
264351
}

‎img/Group.png‎

296 Bytes
Loading

‎img/image.png‎

244 KB
Loading

‎img/velas.jpg‎

89.8 KB
Loading

‎index.html‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@ <h1><a href="/"><img src="img/logo.png" alt="Brand Logo"></a></h1>
5656
<img src="img/leaf.png" alt="leaf">
5757
<h1>The nature candle</h1>
5858
<h2>All handmade with natural soy wax, Candleaf is a companion for all your pleasure moments </h2>
59-
<button>Discovery our collection</button>
59+
<button class="btn">Discovery our collection</button>
6060
</div>
6161
</section>
6262

6363
<section class="products">
6464
<div class="container">
6565
<h2 class="main_product_title">Products</h2>
6666
<h3 class="sub_product_title">Order it for you or for your beloved ones </h3>
67-
<div class="prateleira">
67+
<article class="prateleira">
6868
<article class="produto produto-box1">
6969
<div class="img_produto img_produto1"></div>
7070
<div>
@@ -79,49 +79,68 @@ <h3>Sweet Straweberry</h3>
7979
<p>9,99$</p>
8080
</div>
8181
</article>
82-
<div class="produto produto-box3">
82+
<article class="produto produto-box3">
8383
<div class="img_produto img_produto3"></div>
8484
<div>
8585
<h3>Cool Blueberries</h3>
8686
<p>9,99$</p>
8787
</div>
88-
</div>
89-
<div class="produto produto-box4">
88+
</article>
89+
<article class="produto produto-box4">
9090
<div class="img_produto img_produto4"></div>
9191
<div>
9292
<h3>Juicy Lemon</h3>
9393
<p>9,99$</p>
9494
</div>
95-
</div>
96-
<div class="produto produto-box5">
95+
</article>
96+
<article class="produto produto-box5 m-">
9797
<div class="img_produto img_produto5"></div>
9898
<div>
9999
<h3>Windy Lavanda</h3>
100100
<p>9,99$</p>
101101
</div>
102-
</div>
103-
<div class="produto produto-box6">
102+
</article>
103+
<article class="produto produto-box6 m-hide">
104104
<div class="img_produto img_produto6"></div>
105105
<div>
106106
<h3>Fragrant Cinnamon</h3>
107107
<p>9,99$</p>
108108
</div>
109-
</div>
110-
<div class="produto produto-box7">
109+
</article>
110+
<article class="produto produto-box7 m-hide">
111111
<div class="img_produto img_produto7"></div>
112112
<div>
113113
<h3>Summer Cherries</h3>
114114
<p>9,99$</p>
115115
</div>
116-
</div>
117-
<div class="produto produto-box8">
116+
</article>
117+
<article class="produto produto-box8 m-hide">
118118
<div class="img_produto img_produto8"></div>
119119
<div>
120120
<h3>Clean Lavander</h3>
121121
<p>9,99$</p>
122122
</div>
123-
</div>
123+
</article>
124+
<button class="see_more btn">See more</button>
125+
</article>
126+
</div>
127+
</section>
128+
<section class="learn-more">
129+
<div class="container">
130+
<div>
131+
<h2>Clean and fragrant soy wax</h2>
132+
<h4>Made for your home and for your wellness</h4>
133+
<ul>
134+
<li><span>Eco-sustainable:</span> All recyclable materials, 0% CO2 emissions</li>
135+
<li><span> Hyphoallergenic:</span> 100% natural, human friendly ingredients </li>
136+
<li><span>Handmade:</span> All candles are craftly made with love.</li>
137+
<li><span>Long burning:</span> No more waste. Created for last long.</li>
138+
</ul>
139+
<button class="btn">Learn more</button>
124140
</div>
141+
<figure>
142+
<img src="img/velas.jpg" alt="">
143+
</figure>
125144
</div>
126145
</section>
127146
</main>

‎js/script.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@ $(function(){
22
$("nav").on("click", function(){
33
$("nav ul, .menu-hamburger span:nth-child(1), .menu-hamburger span:nth-child(2), .menu-hamburger span:nth-child(3)").toggleClass("active");
44
});
5-
});
5+
$(".see_more").on("click", function(){
6+
$(".m-hide").removeClass("m-hide");
7+
$(".see_more").addClass("active");
8+
});
9+
});

0 commit comments

Comments
 (0)