Skip to content

Commit da31922

Browse files
solygambassolygambas
committed
add hero section
1 parent caa2a6e commit da31922

File tree

4 files changed

+290
-0
lines changed

4 files changed

+290
-0
lines changed

‎93-creative portfolio/index.html

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!-- Based on Design & Build A Website Crash Course by Simo Edwin - Dev Ed (2019)
2+
see: https://www.youtube.com/watch?v=EwmvBnR_xtA (HTML & CSS)
3+
https://www.youtube.com/watch?v=-elJSImGPAE (JavaScript Animations) -->
4+
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link rel="stylesheet" href="style.css" />
11+
<title>Dimitri Marco</title>
12+
</head>
13+
<body>
14+
<div class="portfolio">
15+
<header>
16+
<nav>
17+
<h3 class="logo">Dimitri Marco</h3>
18+
<svg
19+
class="menu"
20+
width="43"
21+
height="23"
22+
viewBox="0 0 43 23"
23+
fill="none"
24+
xmlns="http://www.w3.org/2000/svg"
25+
>
26+
<line y1="1.5" x2="43" y2="1.5" stroke="white" stroke-width="3" />
27+
<line y1="11.5" x2="28" y2="11.5" stroke="white" stroke-width="3" />
28+
<line y1="21.5" x2="16" y2="21.5" stroke="white" stroke-width="3" />
29+
</svg>
30+
<!-- <div class="nav-open">
31+
<div class="contact">
32+
<h3>Contact</h3>
33+
<p>02348-234-843</p>
34+
</div>
35+
<div class="social">
36+
<h3>Social</h3>
37+
<div class="social-links">
38+
<svg
39+
width="12"
40+
height="24"
41+
viewBox="0 0 12 24"
42+
fill="none"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<path
46+
d="M3 8H0V12H3V24H8V12H11.642L12 8H8V6.333C8 5.378 8.192 5 9.115 5H12V0H8.192C4.596 0 3 1.583 3 4.615V8Z"
47+
fill="#454545"
48+
/>
49+
</svg>
50+
<svg
51+
width="24"
52+
height="20"
53+
viewBox="0 0 24 20"
54+
fill="none"
55+
xmlns="http://www.w3.org/2000/svg"
56+
>
57+
<path
58+
d="M24 2.309C23.117 2.701 22.168 2.965 21.172 3.084C22.189 2.475 22.97 1.51 23.337 0.36C22.386 0.924 21.332 1.334 20.21 1.555C19.313 0.598 18.032 0 16.616 0C13.437 0 11.101 2.966 11.819 6.045C7.728 5.84 4.1 3.88 1.671 0.901C0.381 3.114 1.002 6.009 3.194 7.475C2.388 7.449 1.628 7.228 0.965 6.859C0.911 9.14 2.546 11.274 4.914 11.749C4.221 11.937 3.462 11.981 2.69 11.833C3.316 13.789 5.134 15.212 7.29 15.252C5.22 16.875 2.612 17.6 0 17.292C2.179 18.689 4.768 19.504 7.548 19.504C16.69 19.504 21.855 11.783 21.543 4.858C22.505 4.163 23.34 3.296 24 2.309Z"
59+
fill="#454545"
60+
/>
61+
</svg>
62+
<svg
63+
width="24"
64+
height="24"
65+
viewBox="0 0 24 24"
66+
fill="none"
67+
xmlns="http://www.w3.org/2000/svg"
68+
>
69+
<path
70+
d="M12 2.163C15.204 2.163 15.584 2.175 16.85 2.233C20.102 2.381 21.621 3.924 21.769 7.152C21.827 8.417 21.838 8.797 21.838 12.001C21.838 15.206 21.826 15.585 21.769 16.85C21.62 20.075 20.105 21.621 16.85 21.769C15.584 21.827 15.206 21.839 12 21.839C8.796 21.839 8.416 21.827 7.151 21.769C3.891 21.62 2.38 20.07 2.232 16.849C2.174 15.584 2.162 15.205 2.162 12C2.162 8.796 2.175 8.417 2.232 7.151C2.381 3.924 3.896 2.38 7.151 2.232C8.417 2.175 8.796 2.163 12 2.163ZM12 0C8.741 0 8.333 0.014 7.053 0.072C2.695 0.272 0.273 2.69 0.073 7.052C0.014 8.333 0 8.741 0 12C0 15.259 0.014 15.668 0.072 16.948C0.272 21.306 2.69 23.728 7.052 23.928C8.333 23.986 8.741 24 12 24C15.259 24 15.668 23.986 16.948 23.928C21.302 23.728 23.73 21.31 23.927 16.948C23.986 15.668 24 15.259 24 12C24 8.741 23.986 8.333 23.928 7.053C23.732 2.699 21.311 0.273 16.949 0.073C15.668 0.014 15.259 0 12 0V0ZM12 5.838C8.597 5.838 5.838 8.597 5.838 12C5.838 15.403 8.597 18.163 12 18.163C15.403 18.163 18.162 15.404 18.162 12C18.162 8.597 15.403 5.838 12 5.838ZM12 16C9.791 16 8 14.21 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.21 14.209 16 12 16ZM18.406 4.155C17.61 4.155 16.965 4.8 16.965 5.595C16.965 6.39 17.61 7.035 18.406 7.035C19.201 7.035 19.845 6.39 19.845 5.595C19.845 4.8 19.201 4.155 18.406 4.155Z"
71+
fill="#454545"
72+
/>
73+
</svg>
74+
</div>
75+
</div>
76+
</div> -->
77+
</nav>
78+
</header>
79+
<main>
80+
<section class="page photographer">
81+
<div class="details">
82+
<h1>Elena Morell</h1>
83+
<h2>Photographer</h2>
84+
<p>Brussels, Belgium</p>
85+
</div>
86+
<div class="hero">
87+
<img
88+
class="model-left"
89+
src="https://i.ibb.co/tBs4s1S/model-left.jpg"
90+
alt="model"
91+
/>
92+
<img
93+
class="model-right"
94+
src="https://i.ibb.co/qym8WWg/model-right.jpg"
95+
alt="model"
96+
/>
97+
</div>
98+
</section>
99+
<section class="page chef">
100+
<div class="details">
101+
<h1>Ranveer Brar</h1>
102+
<h2>Indian Chef</h2>
103+
<p>Lucknow, India</p>
104+
</div>
105+
<div class="hero">
106+
<img
107+
class="model-left"
108+
src="https://i.ibb.co/GxXYnFG/chef-left.jpg"
109+
alt="model"
110+
/>
111+
<img
112+
class="model-right"
113+
src="https://i.ibb.co/1MhtHdp/chef-right.jpg"
114+
alt="model"
115+
/>
116+
</div>
117+
</section>
118+
<section class="page hairstyle">
119+
<div class="details">
120+
<h1>John Mayer</h1>
121+
<h2>Hair Stylist</h2>
122+
<p>Melbourne, Australia</p>
123+
</div>
124+
<div class="hero">
125+
<img
126+
class="model-left"
127+
src="https://i.ibb.co/gSXws6P/hair-left.jpg"
128+
alt="model"
129+
/>
130+
<img
131+
class="model-right"
132+
src="https://i.ibb.co/pfTdVTt/hair-right.jpg"
133+
alt="model"
134+
/>
135+
</div>
136+
</section>
137+
<!-- <aside>
138+
<div class="pages">
139+
<div class="page-1">
140+
<h3>01</h3>
141+
<svg
142+
class="slide active"
143+
width="12"
144+
height="12"
145+
viewBox="0 0 12 12"
146+
fill="none"
147+
xmlns="http://www.w3.org/2000/svg"
148+
>
149+
<circle cx="6" cy="6" r="6" fill="white" />
150+
</svg>
151+
</div>
152+
<div class="page-2">
153+
<h3>02</h3>
154+
<svg
155+
class="slide"
156+
width="12"
157+
height="12"
158+
viewBox="0 0 12 12"
159+
fill="none"
160+
xmlns="http://www.w3.org/2000/svg"
161+
>
162+
<circle cx="6" cy="6" r="6" fill="white" />
163+
</svg>
164+
</div>
165+
<div class="page-3">
166+
<h3>03</h3>
167+
<svg
168+
class="slide"
169+
width="12"
170+
height="12"
171+
viewBox="0 0 12 12"
172+
fill="none"
173+
xmlns="http://www.w3.org/2000/svg"
174+
>
175+
<circle cx="6" cy="6" r="6" fill="white" />
176+
</svg>
177+
</div>
178+
</div>
179+
</aside> -->
180+
</main>
181+
</div>
182+
<script
183+
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
184+
integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U="
185+
crossorigin="anonymous"
186+
></script>
187+
<script
188+
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"
189+
integrity="sha256-fIkQKQryItPqpaWZbtwG25Jp2p5ujqo/NwJrfqAB+Qk="
190+
crossorigin="anonymous"
191+
></script>
192+
<script src="script.js"></script>
193+
</body>
194+
</html>

‎93-creative portfolio/script.js

Whitespace-only changes.

‎93-creative portfolio/style.css

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
2+
3+
*,
4+
*::before,
5+
*::after {
6+
box-sizing: border-box;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
11+
body {
12+
font-family: "Poppins", sans-serif;
13+
font-weight: 200;
14+
}
15+
16+
.portfolio {
17+
color: rgba(255, 255, 255, 0.9);
18+
background: radial-gradient(rgba(43, 55, 96, 1), rgba(11, 16, 35, 1));
19+
}
20+
21+
nav {
22+
min-height: 10vh;
23+
width: 90%;
24+
margin: auto;
25+
display: flex;
26+
justify-content: space-between;
27+
align-items: center;
28+
padding: 20px 0;
29+
}
30+
31+
.logo {
32+
font-size: 1.25rem;
33+
}
34+
35+
.page {
36+
min-height: 90vh;
37+
display: grid;
38+
grid-template-columns: 5% 1fr 1fr 1fr 5%;
39+
}
40+
41+
.chef,
42+
.hairstyle {
43+
position: absolute;
44+
bottom: 0%;
45+
left: 0%;
46+
width: 100%;
47+
opacity: 0;
48+
pointer-events: none;
49+
}
50+
51+
.hero {
52+
overflow: hidden;
53+
height: 500px;
54+
align-self: center;
55+
justify-self: center;
56+
display: flex;
57+
}
58+
59+
.hero img {
60+
height: 500px;
61+
transition: transform 0.3s ease-out;
62+
}
63+
64+
.model-right {
65+
transform: translate(0%, 10%);
66+
}
67+
68+
.model-left {
69+
transform: translate(0%, -10%);
70+
}
71+
72+
.hero:hover .model-right,
73+
.hero:hover .model-left {
74+
transform: translate(0%, 0%);
75+
}
76+
77+
.details {
78+
grid-column: 2/3;
79+
align-self: end;
80+
}
81+
82+
.details h1 {
83+
font-size: 4rem;
84+
font-weight: 400;
85+
}
86+
87+
.details h2 {
88+
font-size: 2.625rem;
89+
padding: 20px 0;
90+
}
91+
92+
.details p {
93+
font-size: 1.5rem;
94+
padding: 20px 0 50px;
95+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
| 90 | [Tooltip](https://github.com/solygambas/html-css-fifty-projects/tree/master/90-tooltip) | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb) |
9999
| 91 | [Chat Interface](https://github.com/solygambas/html-css-fifty-projects/tree/master/91-chat%20interface) | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ) |
100100
| 92 | [Music Streaming Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/92-music%20streaming%20service) | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg) |
101+
| 93 | [Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/93-creative%20portfolio) | [Live Demo](#) |
101102

102103
This repository is mostly based on 2 courses by Brad Traversy (2020):
103104

0 commit comments

Comments
 (0)