-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (153 loc) · 8.84 KB
/
index.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
197
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--/ /---- Put your name in the title of the page ----/ /-->
<title>Put Your Name Here</title>
<!--/ /-------- Normalize CSS --------/ /-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<!--/ /-------- Google Fonts --------/ /-->
<!-- Add a link to google fonts here if you want them -->
<!--/ /-------- Font Awesome --------/ /-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!--/ /-------- Your Styles --------/ /-->
<link href="styles.css" rel="stylesheet">
<!--/ /---Put a short description for your site below. 20 words or less---/ /-->
<meta description="A short description for your site...">
<!--/ /-------- Needed For Mobile Devices --------/ /-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- ------------------------------------------------------
The site is designed to be mobile first. The wrapper elements
are in place for when you get to desktop size to contain the
content.
------------------------------------------------------- -->
<header class="primary">
<div class="wrapper">
<div class="logo-container">
<h1>Your<br>Name<br>Portfolio</h1>
<!-- ------------------------------------------------------
Note that the image of the logo is linked to the home page.
------------------------------------------------------- -->
<a href="index.html"><img src="https://dummyimage.com/175/c4c4c4/fff&text=logo" alt="logo image" id="logo"></a>
</div>
<!-- ------------------------------------------------------
The navigation here is linking to the sections further down
the page.
------------------------------------------------------- -->
<nav id="mainnav">
<ul>
<li><a href="#work">Work</a></li>
<li><a href="#about-contact">About</a></li>
<li><a href="#about-contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- ------------------------------------------------------
This is the work section, which has two parts: the featured
section and the projects section.
------------------------------------------------------- -->
<section id="work">
<div class="wrapper">
<h2>Check Out My Best Projects</h2>
<section class="featured">
<article>
<!-- ------------------------------------------------------
Link the image below to the detail page for this project.
Use the page.html file to make that page. Also link the
anchor tag in the paragraph below to the same page.
------------------------------------------------------- -->
<a href="#"><img src="https://dummyimage.com/510x300/c4c4c4/fff&text=Featured+Project" alt="image"></a>
</article>
<article>
<h3>Title of Project</h3>
<h4>Challenge Statement</h4>
<p>Before they sold out single-origin coffee fingerstache sartorial freegan master cleanse. Sartorial blog fap, shoreditch scenester tacos poutine. Bespoke brunch viral listicle, keffiyeh celiac paleo organic scenester next level cliche put a bird on it cardigan. Forage kombucha pitchfork literally. Art party narwhal food truck selfies, XOXO leggings distillery four loko fap. An additional sentence.</p> <p><a href="#">Find out how I solved this problem</a></p>
</article>
</section> <!-- end row -->
<!-- ------------------------------------------------------
The projects section is for additional projects. I put four in
here, but it could be more, or less. You just have to pay
attention to how they wrap, and how many you want per row.
Note that each image should be linked to the page with more
detailed information about that project. You can use a copy of
page.html to create those pages.
------------------------------------------------------- -->
<section class="projects">
<article>
<h3>Project Title</h3>
<a href="#"><img src="https://dummyimage.com/340x200/c4c4c4/fff&text=Another+Project" alt="image"></a>
<p><strong>Role:</strong> Designer</p>
<p><strong>Description:</strong> Website for a restaurant and redesigned the online menu.</p>
</article>
<article>
<h3>Project Title</h3>
<a href="#"><img src="https://dummyimage.com/340x200/c4c4c4/fff&text=Another+Project" alt="image"></a>
<p><strong>Role:</strong> Designer</p>
<p><strong>Description:</strong> Website for a restaurant and redesigned the online menu.</p>
</article>
<article>
<h3>Project Title</h3>
<a href="#"><img src="https://dummyimage.com/340x200/c4c4c4/fff&text=Another+Project" alt="image"></a>
<p><strong>Role:</strong> Designer</p>
<p><strong>Description:</strong> Website for a restaurant and redesigned the online menu.</p>
</article>
<article>
<h3>Project Title</h3>
<a href="#"><img src="https://dummyimage.com/340x200/c4c4c4/fff&text=Another+Project" alt="image"></a>
<p><strong>Role:</strong> Designer</p>
<p><strong>Description:</strong> Website for a restaurant and redesigned the online menu.</p>
</article>
</section><!-- end row -->
</div> <!-- end work wrapper -->
</section>
<!-- ------------------------------------------------------
This is the about and contact section. The links in the main
navigation link to this section.
------------------------------------------------------- -->
<section id="about-contact" class="secondary">
<div class="wrapper">
<div class="profile-photo">
<img src="http://placehold.it/260?text=Your+Photo" alt="image">
</div>
<article>
<h2>About Me</h2>
<p>Fixie owner, father of 3, fender owner, reclaimed wood collector and javascripter. Acting at the junction of minimalism and intellectual purity to create great work for living breathing human beings. I'm a designer and this is my work.</p>
<h3>Skills</h3>
<p>I am particularly good at BLAH BLAH and really enjoy BLAH. I am currently learning BLAH and I'm very exited about BLAH BLAH.</p>
</article>
<article>
<h2>Contact Me!</h2>
<p>I am currently looking for opportunities to work on a team at a design shop. Please feel free to contact me by phone, email or through the usual social media channels.</p>
<!-- ------------------------------------------------------
Be sure to encode your email address at this site, so you
don't get spam. http://wbwip.com/wbw/emailencoder.html
------------------------------------------------------- -->
<p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:email@somewhere.com">email@somewhere.com</a><br>
<i class="fa fa-phone" aria-hidden="true"></i> 123-456-7890</p>
<!-- ------------------------------------------------------
You can see here that I have included font-awesome. It is used
to create the icons above and below. You can go to the font-awesome
website to see the available icons and swap some out.
------------------------------------------------------- -->
<p class="social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter-square"></i></a>
</p>
</article>
</div>
</section>
<!-- ------------------------------------------------------
The footer section is not doing much on this page. Add more
content if necessary.
------------------------------------------------------- -->
<footer class="primary">
<div class="wrapper">
<p class="centered">© 2019 all rights reserved</p>
</div>
</footer>
</body>
</html>