-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject.html
168 lines (141 loc) · 8.02 KB
/
project.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎄Javascriptmas Projects</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/9ae4f8d271.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<a href="index.html"><i class="fas fa-code"></i></a>
</div>
<button class="nav-toggle" aria-label="toggle-navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link"href ="index.html">Home </a></li>
<li class="nav__item"><a class="nav__link" href ="index.html#about">About me</a></li>
<li class="nav__item"><a class="nav__link" href ="index.html#skills">Skills</a></li>
<li class="nav__item"><a class="nav__link" href ="index.html#work">My work</a></li>
<li href= "index.html#contact-me" class="nav__item"><a class="nav__link" href ="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="my-work" id="work">
<h2 class="section__title section__title--work">Javascriptmas</h2>
<div class="my-portfolio">
<div class="my-portfolio__item">
<div class="my-portfolio__img">
<a href="https://codepen.io/kynnedye/pen/BawYwWJ" target="_blank">
<img class="portfolio-img" src="images/translator.png"/>
</div>
<div class="my-portfolio__description">
<h2 class="portfolio-name" >Christmas Translator</h2>
<p class="portfolio-description">This challenge was to hook up a translator that would show different christmas messages in several langauges.</p>
<div class="link-btns">
<a href="https://codepen.io/kynnedye/pen/BawYwWJ" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
<div class="my-portfolio__item">
<div class="my-portfolio__description left">
<h2 class="portfolio-name" >Christmas desserts</h2>
<p class="portfolio-description">This project uses an api and Javascript to display different christmas desserts.</p>
<div class="link-btns">
<a href="https://codepen.io/kynnedye/pen/vYedemx" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="my-portfolio__img">
<a href="https://codepen.io/kynnedye/pen/vYedemx" target="_blank">
<img class="portfolio-img" src="images/dessert.png"/>
</a>
</div>
</div>
<div class="my-portfolio__item">
<div class="my-portfolio__img">
<a href="https://codepen.io/kynnedye/pen/bGoLoRM" target="_blank">
<img class="portfolio-img" src="images/nicelist.png"/>
</a>
</div>
<div class="my-portfolio__description">
<h2 class="portfolio-name" >Nice and Naughty list</h2>
<p class="portfolio-description">This project was to make a list that can sort people on to the naughty or the nice list</p>
<div class="link-btns">
<a href="https://codepen.io/kynnedye/pen/bGoLoRM" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
<div class="my-portfolio__item">
<div class="my-portfolio__description left">
<h2 class="portfolio-name" >Santa sign</h2>
<p class="portfolio-description">In this challenge you can change the message on the sign. Also you are able to change the background and text color.</p>
<div class="link-btns">
<a href="https://codepen.io/kynnedye/pen/xxXYXLG" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="my-portfolio__img">
<a href="https://codepen.io/kynnedye/pen/xxXYXLG">
<img class="portfolio-img" src="images/santasign.png"/>
</a>
</div>
</div>
<div class="my-portfolio__item">
<div class="my-portfolio__img">
<a href="https://codepen.io/kynnedye/pen/wvryroy" target="_blank">
<img class="portfolio-img" src="images/moviepicker.png"/>
</a>
</div>
<div class="my-portfolio__description">
<h2 class="portfolio-name" >Christmas movie selector</h2>
<p class="portfolio-description">In this challenge, I created an array of objects of different christmas movies. With the selectors you can choose the genre and rating.</p>
<div class="link-btns">
<a href="https://codepen.io/kynnedye/pen/wvryroy" target="_blank" ><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact-me"class="footer">
<h2 id ="message">Like what you see?</h2>
<ul id ="footer-social"class="social-list contact-socials">
<li class="social-list__item">
<a class="social-list__link" href="https://codepen.io/your-work">
<i class="fab fa-codepen"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="https://www.linkedin.com/in/kynnedy-esteves-683276215/">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="https://twitter.com/mothercoder">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="https://github.com/kynnedye">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
<button id="contact-btn">Contact me</button>
<form action ="POST" data-netlify="true" name="contact" id="form">
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
</footer>
<script src="main.js"></script>
</body>
</html>