Skip to content

Commit 87bad68

Browse files
GoldenMacaGoldenMaca
committed
second section
1 parent 5bb8e28 commit 87bad68

5 files changed

Lines changed: 142 additions & 7 deletions

File tree

‎projects/client-project/images/arrow.png‎

17.7 KB
Loading

‎projects/client-project/images/galleft.jpg‎

944 KB
Loading

‎projects/client-project/images/galright.jpg‎

537 KB
Loading

‎projects/client-project/index.html‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,31 @@
1414
<link href="https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap" rel="stylesheet">
1515
<script>
1616

17+
18+
// Hard reset on load
19+
slides.forEach(slide => slide.classList.remove("show"));
20+
21+
const observer = new IntersectionObserver(
22+
(entries) => {
23+
entries.forEach(entry => {
24+
if (entry.isIntersecting) {
25+
entry.target.classList.add("show");
26+
observer.unobserve(entry.target); // optional: prevents retrigger
27+
}
28+
});
29+
},
30+
{
31+
threshold: 0.25,
32+
rootMargin: "0px 0px -100px 0px"
33+
}
34+
);
35+
36+
slides.forEach((el, i) => {
37+
el.style.transitionDelay = `${i * 0.2}s`;
38+
observer.observe(el);
39+
});
40+
41+
1742
</script>
1843
</head>
1944
<body>
@@ -29,23 +54,32 @@
2954
</nav>
3055
<div id="main">
3156
<div id="content">
32-
<h2 style="font-size: clamp(1.5rem, 5vw, 4rem); padding:0; margin:20px 20px 0 20px;">Welcome to My Weaving Studio</h2>
57+
<h2 style="font-size: clamp(1.5rem, 5vw, 4rem); padding:0; margin:20px 20px 0 20px; text-wrap: nowrap;">Welcome to My Weaving Studio</h2>
3358
<p>Explore the art of weaving and discover unique handmade pieces...</p>
3459
</div>
3560
<div id="topbtn"><a href="#Mystory">Discover my creations</a></div>
3661
</div>
3762
<div id="Mystory">
3863
<img style="width: 40vw; height:auto; margin: 20px;" src="images/portrait.png" alt="">
3964
<div id="mscont">
40-
<h2 style="font-size: clamp(1.5rem, 5vw, 4rem);">Hi, I'm Lauren</h2>
41-
<p style="width: 40vw; font-size: clamp(1rem, 2vw, 1.5rem);">I'm a passionate weaver with a love for creating unique, handmade pieces. Each item is crafted with care and attention to detail, reflecting my dedication to the art of weaving.</p>
65+
<h2 style="font-size: clamp(1.5rem, 5vw, 4rem); text-wrap: nowrap;">Hi, I'm Lauren</h2>
66+
<p style="width: 40vw; font-size: clamp(1rem, 2vw, 1.5rem); text-wrap: balance;">I'm a passionate weaver with a love for creating unique, handmade pieces. Each item is crafted with care and attention to detail, reflecting my dedication to the art of weaving.</p>
4267
<div id="btnmscont">
4368
<a href="mystory.html">View My Story</a>
4469
</div>
4570
</div>
4671
</div>
47-
<div id="Gallery"></div>
72+
<div id="Gallery">
73+
<h4 style="font-size: clamp(1.5rem, 4vw, 3.5rem); margin: 0 10vw 6vh 11vw; text-align: center; text-wrap: balance;">Bring Home the Beauty of Handwoven Textiles</h4>
74+
<div id="imgs">
75+
<img class="galimg galleft slide-in left" src="images/galleft.jpg" alt="">
76+
<img class="galimg galright slide-in right" src="images/galright.jpg" alt="">
77+
</div>
4878

79+
<div id="btnimgs">
80+
<a href="gallery.html">View Gallery</a>
81+
</div>
82+
</div>
4983
<div id="Contact"></div>
5084

5185
<div id="Socials"></div>

‎projects/client-project/styles.css‎

Lines changed: 104 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,40 @@ nav a:hover{
121121
*/
122122

123123
#Gallery {
124-
height: 100vh;
124+
padding-top: 5vh;
125+
top: 0;
126+
height: auto;
125127
width: 100%;
126-
background-color: #ec5f5f;
127-
128+
background-color: #c1417f;
129+
margin: 0;
130+
align-items: center;
131+
justify-content: center;
132+
justify-items: center;
133+
}
134+
135+
#btnimgs a{
136+
display: inline-block;
137+
padding: 10px 6vw;
138+
margin-top: 20px;
139+
margin-bottom: 20px;
140+
background: #67103a;
141+
color: white;
142+
border-radius: 5px;
143+
text-decoration: none;
144+
transition: background 0.3s ease;
145+
transition: transform 0.3s ease;
146+
}
147+
148+
#btnimgs a:hover {
149+
background: #aa3b5e;
150+
transform: scale(1.05);
151+
}
152+
153+
#imgs {
154+
display: flex;
155+
justify-content: center;
156+
align-items: center;
157+
gap: 20px;
128158
}
129159

130160
#Contact {
@@ -149,6 +179,10 @@ nav a:hover{
149179
padding: 20px;
150180
}
151181

182+
#mscont {
183+
margin-left: clamp(10px, 3vw, 30px);
184+
}
185+
152186
#btnmscont a {
153187
display: inline-block;
154188
padding: 10px 30px;
@@ -169,4 +203,71 @@ nav a:hover{
169203
height: 10vh;
170204
width: 100%;
171205
background-color: #b49c43;
206+
}
207+
208+
.galimg {
209+
width: clamp(100px, 45vw, 400px);
210+
height: auto;
211+
margin: 0;
212+
border-radius: 10px;
213+
object-fit: cover;
214+
border: 5px solid white;
215+
transition: transform 400ms ease;
216+
}
217+
218+
.galimg:hover {
219+
transform: scale(1.1) rotate(7deg) translate3d(0, 0, 0.1px);
220+
221+
}
222+
223+
224+
225+
226+
/* Base hidden state */
227+
.slide {
228+
opacity: 1; /* IMPORTANT: not 0 */
229+
will-change: transform;
230+
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
231+
}
232+
233+
/* Start OUTSIDE the viewport */
234+
.slide-left {
235+
transform: translateX(-120%);
236+
}
237+
238+
.slide-right {
239+
transform: translateX(120%);
240+
}
241+
242+
/* When revealed */
243+
.slide.show {
244+
transform: translateX(0);
245+
}
246+
247+
248+
@media (max-width: 768px) {
249+
.main {
250+
background-size: contain;
251+
background-position: center top;
252+
}
253+
254+
nav a {
255+
padding: 2px 5px;
256+
}
257+
258+
#topbtn a {
259+
padding: 8px 16px;
260+
}
261+
262+
#btnimgs a {
263+
padding: 8px 4vw;
264+
}
265+
266+
#mscont {
267+
margin-left: clamp(5px, 2vw, 15px);
268+
}
269+
270+
.galimg {
271+
width: clamp(80px, 40vw, 350px);
272+
}
172273
}

0 commit comments

Comments
 (0)