-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfylo.html
executable file
·139 lines (131 loc) · 5.21 KB
/
fylo.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
<!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">
<script
src="https://kit.fontawesome.com/1c6b673aa2.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/main.css" />
<title>Frontend Mentor | Minimalist Portfolio</title>
<header class="container">
<img src="images/logo.svg" alt="Portfolio logo" class="header-logo" />
<button class="nav-toggle">
<svg
class="hamburger"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="13"
>
<g fill="#33323D" fill-rule="evenodd">
<path d="M0 0h24v1H0zM0 6h24v1H0zM0 12h24v1H0z" />
</g>
</svg>
<svg
class="close"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="19"
>
<path
fill="#33323D"
fill-rule="evenodd"
d="M17.132.661l.707.707L9.707 9.5l8.132 8.132-.707.707L9 10.207.868 18.34l-.707-.707L8.293 9.5.161 1.368.868.661 9 8.793 17.132.661z"
/>
</svg>
</button>
<nav class="navbar-header">
<ul class="nav-items nav-items-header">
<li class="nav-item nav-item-header">
<a href="index.html" class="nav-link nav-link-header active">Home</a>
</li>
<li class="nav-item nav-item-header">
<a href="portfolio.html" class="nav-link nav-link-header">Portfolio</a>
</li>
<li class="nav-item nav-item-header">
<a href="contact.html" class="nav-link nav-link-header">Contact Me</a>
</li>
</ul>
</nav>
</header>
</head>
<body>
<section class="project-hero project-hero-fylo container"></section>
<section class="project-container container">
<div class="project-details">
<h2 class="project-title">Fylo</h2>
<p class="project-info"> This project was built in pure HTML and CSS. I had mobile and desktop designs to
work to and built it so that it was fully-responsive. I took a mobile-first approach
and used modern CSS like Flexbox and Grid for layout purposes.</p>
<p class="project-desc">Interaction Design / Front End Development</p>
<p class="project-skills">HTML / CSS / JS</p>
<a href="" class="btn btn-secondary btn-secondary-project">Visit Website</a>
</div>
<div class="project-background">
<h3 class="project-background-title">Project Background</h3>
<p class="project-background-info"> 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>
<h3 class="previews">Static Previews</h3>
<div class="img-preview-1 img-preview-1-fylo"></div>
<div class="img-preview-2 img-preview-2-fylo"></div>
</div>
</section>
<section class="project-navigation container">
<a href="insure.html" class="previous-project">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" class="arrow"><path fill="none" stroke="#33323D" d="M9 0L1 8l8 8"/></svg>
<div class="arrow-info">
<h3 class="arrow-title">Insure</h3>
<p class="arrow-text">Previous Project</p>
</div>
</a>
<a href="manage.html" class="next-project">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" class="arrow"><path fill="none" stroke="#33323D" d="M1 0l8 8-8 8"/></svg>
<div class="arrow-info">
<h3 class="arrow-title">Manage</h3>
<p class="arrow-text">Next Project</p>
</div>
</a>
</section>
<section class="call-to-action cta-project container">
<h2 class="cta-title">Interested in doing a project together?</h2>
<div class="horizontal-line"></div>
<a href="contact.html" class="btn btn-secondary btn-secondary-cta">Contact Me</a>
</section>
<footer>
<div class="container">
<nav class="navbar-footer">
<img
src="images/footer-logo.svg"
alt="Portfolio logo"
class="footer-logo"
/>
<ul class="nav-items nav-items-footer">
<li class="nav-item nav-item-footer">
<a href="#" class="nav-link nav-link-footer">Home</a>
</li>
<li class="nav-item nav-item-footer">
<a href="portfolio.html" class="nav-link nav-link-footer">Portfolio</a>
</li>
<li class="nav-item nav-item-footer">
<a href="contact.html" class="nav-link nav-link-footer">Contact Me</a>
</li>
</ul>
</nav>
<div class="social-icons">
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</footer>
<script src="scripts/index.js"></script>
</body>
</html>
</body>
</html>