-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesignPortfolio.html
138 lines (122 loc) · 5.96 KB
/
designPortfolio.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
<!DOCTYPE HTML>
<!--
Fractal by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Ho Chinn Fang</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="icon" href="https://img.icons8.com/material-outlined/24/000000/butterfly.png">
<link rel="stylesheet" href="assets/css/main.css" />
<script src="js/main.js"></script>
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- aos -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="node_modules/bootstrap/dist/css//bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="node_modules/mdbootstrap/css/mdb.min.css" rel="stylesheet">
<!-- custom files -->
<link rel="stylesheet" href="assets/css/custom.css" />
<script src="assets/js/custom.js"></script>
<script src="assets/js/instafeed.min.js"></script>
</head>
<body class="is-preload">
<!-- Nav -->
<nav id="nav">
<ul class="container ">
<li><a href="/index.html#header" class="scrolly">Home</a></li>
<li><a href="/index.html#aboutme" class="scrolly">About Me</a></li>
<li><a href="/index.html#skills" class="scrolly">Skills</a></li>
<li><a href="/index.html#portfolio" class="scrolly">Tech</a></li>
<li><a href="/index.html#extracurricular" class="scrolly">Extras</a></li>
<li><a href="/index.html#design" class="scrolly">Design</a></li>
<li><a href="/index.html#contact" class="scrolly">Contact</a></li>
<li><a href="https://www.linkedin.com/in/hochinnfang" target="_blank" class="icon brands fa-linkedin"><span
class="label">LinkedIn</span></a></li>
</ul>
</nav>
<section id="portfolio-page-section" class="wrapper style4">
<header class="major portfolio-page-header">
<h2>Design</h2>
<span>A side interest.</span>
</header>
<div class="container">
<div class="row portfolio-page-photo">
<a class="button portfolio-page-header-btn scrolly" href="#wp1">Banners</a>
<a id="wp1" class="button portfolio-page-header-btn scrolly" href="#wp2">Sketches and Doodles</a>
</div>
</div>
<a href="#portfolio-page-section" id="top-btn" class="button small scrolly">Top</a>
<div class="container">
<div class="row portfolio-page-photo">
<h3>Banners</h3>
<img src="images/portfoliophotos/banner1.png" class="portfolio-photo portfolio-banner" />
<img src="images/portfoliophotos/banner2.png" class="portfolio-photo portfolio-banner" />
<img src="images/portfoliophotos/banner3.png" class="portfolio-photo portfolio-banner" />
<img src="images/portfoliophotos/banner4.png" class="portfolio-photo portfolio-banner" />
<img src="images/portfoliophotos/banner5.png" class="portfolio-photo portfolio-banner" />
<img src="images/portfoliophotos/banner6.png" class="portfolio-photo portfolio-banner" />
<img src="images/portfoliophotos/banner7.png" class="portfolio-photo portfolio-banner" />
</div>
<hr id="wp2" class="stylehr1" />
<div class="row portfolio-page-photo">
<h3>Sketches and Doodles</h3>
<div class="row">
<div class="col-4">
<img src="images/designportfolio/sketch1.JPG" class="portfolio-photo portfolio-banner" />
</div>
<div class="col-4">
<img src="images/designportfolio/sketch2.JPG" class="portfolio-photo portfolio-banner" />
</div>
<div class="col-4">
<img src="images/designportfolio/sketch3.JPG" class="portfolio-photo portfolio-banner" />
</div>
</div>
<div class="row">
<div class="col-4">
<img src="images/designportfolio/doodle1.png" class="portfolio-photo portfolio-banner" />
</div>
<div class="col-4">
<img src="images/designportfolio/doodle2.PNG" class="portfolio-photo portfolio-banner" />
</div>
<div class="col-4">
<img src="images/designportfolio/doodle3.PNG" class="portfolio-photo portfolio-banner" />
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Untitled. Credits: <a href="http://html5up.net">HTML5 UP</a></p>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
AOS.init({
duration: 1000
}
);
</script>
<!-- SCRIPTS -->
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="node_modules/mdbootstrap/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="node_modules/mdbootstrap/js/mdb.min.js"></script>
</body>
</html>