-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmanage.html
196 lines (180 loc) · 10.7 KB
/
manage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,400..700;1,400..700&display=swap"
rel="stylesheet" />
<title>Frontend Mentor | Minimalist Portfolio</title>
<link rel="stylesheet" href="./dist/output.css" />
</head>
<body class="bg-very-light-grey">
<main class="main">
<header class="Container relative flex justify-between items-center mt-8 md:mt-16">
<a href="#"><img src="images/logo.svg" alt="#" /></a>
<input type="checkbox" id="navi-toggle" class="nav-checkbox hidden h-0 w-0" />
<label for="navi-toggle" class="nav-btn md:hidden">
<img class="open" src="images/icons/hamburger.svg" alt="#" />
<img class="close hidden absolute top-[7px] right-[35px]" src="images/icons/close.svg" alt="#" />
</label>
<nav class="nav">
<ul class="nav-list md:flex gap-10 text-sm font-sans-sarif text-grayish-dark-blue">
<li class="nav-item">
<a class="uppercase tracking-[2px] hover:text-slightly-desaturated-cyan"
href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="uppercase tracking-[2px] hover:text-slightly-desaturated-cyan"
href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="uppercase tracking-[2px] hover:text-slightly-desaturated-cyan"
href="contact.html">Contact Me</a>
</li>
</ul>
</nav>
</header>
<section class="Container mt-10 md:mt-[94px]">
<div>
<picture>
<source media="(min-width:820px)" srcset="images/detail/desktop/image-manage-hero@2x.jpg" />
<source media="(min-width:465px)" srcset="images/detail/tablet/image-manage-hero@2x.jpg" />
<img src="images/detail/mobile/image-manage-hero@2x.jpg" alt="manage" />
</picture>
</div>
<div class="lg:mt-[115px] mt-10 lg:flex lg:justify-between">
<div class="lg:max-w-[350px]">
<hr class="border-t-grayish-dark-blue opacity-[0.2]" />
<div class="my-6 md:my-8">
<div class="relative text-grayish-dark-blue">
<h2 class="text-[40px] leading-[42px] font-real-nova font-bold tracking-[-0.36px]">Manage
</h2>
<p
class="text-[15px] leading-[30px] my-6 md:my-0 md:absolute lg:relative md:right-0 md:max-w-[339px] md:top-0 lg:max-w-[350px]">
This project required me to build a fully responsive landing page to the designs
provided. I used
HTML5, along with CSS Grid and JavaScript for the areas that required interactivity,
such as the
testimonial slider.
</p>
<div class="text-slightly-desaturated-cyan lg:mt-6">
<p class="text-[13px] leading-[30px]">Interaction Design / Front End Development</p>
<p class="text-[13px] leading-[30px]">HTML / CSS / JS</p>
</div>
<button
class="font-sans-sarif h-12 w-[178px] border-[1px] border-grayish-dark-blue text-[12px] tracking-[2px] uppercase hover:bg-grayish-dark-blue hover:text-white mt-6 lg:mt-8">
Visit Website
</button>
</div>
</div>
<hr class="border-t-grayish-dark-blue opacity-[0.2]" />
</div>
<div class="lg:max-w-[635px] mt-12 md:mt-10 lg:mt-0 text-grayish-dark-blue">
<div>
<h2 class="text-[32px] leading-[42px] font-real-nova tracking-[-0.29px]">Project Background</h2>
<p class="mt-7 text-[15px] leading-[30px]">
This project was a front-end challenge from Frontend Mentor. It’s a platform that enables
you to
practice building websites to a design and project brief. Each challenge includes mobile and
desktop
designs to show how the website should look at different screen sizes. Creating these
projects has
helped me refine my workflow and solve real-world coding problems. I’ve learned something
new with each
project, helping me to improve and adapt my style.
</p>
</div>
<div class="mt-10">
<h3 class="text-[32px] leading-[42px] font-real-nova tracking-[-0.29px]>Static Previews">
Static Previews
</h3>
<picture>
<source media="(min-width:820px)"
srcset="images/detail/desktop/image-manage-preview-1@2x.jpg" />
<source media="(min-width:465px)"
srcset="images/detail/tablet/image-manage-preview-1@2x.jpg" />
<img class="mt-10 lg:mt-7" src="images/detail/mobile/image-manage-preview-1@2x.jpg"
alt="manage" />
</picture>
<picture>
<source media="(min-width:820px)"
srcset="images/detail/desktop/image-manage-preview-2@2x.jpg" />
<source media="(min-width:465px)"
srcset="images/detail/tablet/image-manage-preview-2@2x.jpg" />
<img class="mt-8" src="images/detail/mobile/image-manage-preview-2@2x.jpg" alt="manage" />
</picture>
</div>
</div>
</div>
<div class="mt-16 md:mt-[80px] lg:mt-16">
<hr class="border-t-grayish-dark-blue opacity-[0.2]" />
<div class="flex justify-between text-grayish-dark-blue">
<div class="py-6 md:py-8 flex flex-col md:flex-row gap-4 md:gap-[25px]">
<button><img src="images/icons/arrow-left.svg" alt="arrow-left" /></button>
<div>
<h3 class="text-[32px] leading-[36px]">Fylo</h3>
<p class="text-base leading-[30px] opacity-[0.5]">Previous Project</p>
</div>
</div>
<span class="block w-[1px] bg-grayish-dark-blue opacity-[0.2]"></span>
<div class="py-6 md:py-8 flex flex-col md:flex-row-reverse gap-4 md:gap-[25px]">
<button class="self-end"><img src="images/icons/arrow-right.svg" alt="arrow-left" /></button>
<div>
<h3 class="text-[32px] leading-[36px]">Bookmark</h3>
<p class="text-base leading-[30px] opacity-[0.5]">Next Project</p>
</div>
</div>
</div>
<hr class="border-t-grayish-dark-blue opacity-[0.2]" />
</div>
<div
class="mt-[64px] md:mt-[80px] lg:mt-[115px] mb-[80px] lg:mb-[150px] font-real-nova text-grayish-dark-blue flex flex-col md:flex-row items-center justify-between">
<h2
class="w-full text-[40px] leading-[42px] tracking-[-0.36px] font-bold text-center md:text-left md:max-w-[350px]">
Interested in doing a project together?
</h2>
<span class="hidden md:block flex-1 h-[1px] bg-grayish-dark-blue mx-8 opacity-[0.2]"></span>
<button
class="font-sans-sarif w-full h-12 md:max-w-[160px] border-[1px] border-grayish-dark-blue uppercase text-[12px] tracking-[2px] hover:bg-grayish-dark-blue hover:text-white mt-10 md:mt-0 mx-auto md:mx-0">
Contact Me
</button>
</div>
</section>
<footer class="bg-grayish-dark-blue">
<div class="Container py-14 md:py-6 md:flex items-center justify-between">
<div class="flex flex-col md:flex-row items-center">
<a href="#"><img src="images/icons/logo-white.svg" alt="#" /></a>
<ul class="text-white flex flex-col md:flex-row md:ml-12 gap-[17px] md:gap-[42px] my-10 md:my-0">
<li class="text-center md:text-left">
<a class="text-[12px] tracking-[2px] leading-0 hover:text-slightly-desaturated-cyan"
href="index.html">HOME</a>
</li>
<li class="text-center md:text-left">
<a class="text-[12px] tracking-[2px] leading-0 hover:text-slightly-desaturated-cyan"
href="portfolio.html">PORTFOLIO</a>
</li>
<li class="text-center md:text-left">
<a class="text-[12px] tracking-[2px] leading-0 hover:text-slightly-desaturated-cyan"
href="contact.html">CONTACT ME</a>
</li>
</ul>
</div>
<div>
<ul class="flex items-center gap-[15px] justify-center">
<li>
<a href="#"><img src="images/icons/github-white.svg" alt="github" /></a>
</li>
<li><a href="#"></a><img src="images/icons/twitter-white.svg" alt="twitter" /></li>
<li>
<a href="#"><img src="images/icons/linkedin-white.svg" alt="linkedin" /></a>
</li>
</ul>
</div>
</div>
</footer>
</main>
</body>
</html>