-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (142 loc) · 6.82 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
<!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">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/cv.css">
<title>cv</title>
</head>
<body>
<section class="container">
<div class="row">
<!-- the left side of the page -->
<div class="col-left">
<div class="profile-img">
<h2>Jane Doe</h2>
</div>
<div class="inner-container">
<ul class="contact-info">
<li><i class="fa fa-briefcase"></i> Designer</li>
<li><i class="fa fa-home"></i> London, UK</li>
<li><i class="fa fa-envelope"></i> ex@mail.com</li>
<li><i class="fa fa-phone"></i> 1224435534</li>
</ul>
<hr>
<div class="skills">
<strong><i class="fa fa-asterisk"></i> skills</strong>
<ul>
<li>
<label for="">Adobe Photoshop</label>
<div class="progress">
<div class="progress-bar" style="width: 90%;">90%</div>
</div>
</li>
<li>
<label for="">Photography</label>
<div class="progress">
<div class="progress-bar" style="width: 80%;">80%</div>
</div>
</li>
<li>
<label for="">Illustrator</label>
<div class="progress">
<div class="progress-bar" style="width: 75%;">75%</div>
</div>
</li>
<li>
<label for="">Media</label>
<div class="progress">
<div class="progress-bar" style="width: 50%;">50%</div>
</div>
</li>
</ul>
</div>
<div class="languages">
<strong><i class="fa fa-globe"></i> Languages</strong>
<ul>
<li>
<label for="">English</label>
<div class="progress">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</li>
<li>
<label for="">Spanish</label>
<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
</div>
</li>
<li>
<label for="">German</label>
<div class="progress">
<div class="progress-bar" style="width: 25%;"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- the right side of the page -->
<div class="col-right">
<div class="work-experience">
<h2><i class="fa fa-suitcase"></i> Work Experience</h2>
<div class="companies">
<div class="company">
<h3>Front End Developer / w3schools.com</h3>
<p class="calender"><i class="fa fa-calendar"></i> Jan 2015 - <span class="badg">Current</span></p>
<p class="text">Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
</div>
<hr>
<div class="company">
<h3>Web Developer / something.com</h3>
<p class="calender"><i class="fa fa-calendar"></i> Mar 2012 - Dec 2014</p>
<p class="text">Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
</div>
<hr>
<div class="company">
<h3>Graphic Designer / designsomething.com</h3>
<p class="calender"><i class="fa fa-calendar"></i> Jun 2010 - Mar 2012</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="education">
<h2><i class="fa fa-certificate"></i> Education</h2>
<div class="schools">
<div class="school">
<h3>W3Schools.com</h3>
<p class="calender"><i class="fa fa-calendar"></i> Forever</p>
<p class="text">Web Development! All I need to know in one place</p>
</div>
<hr>
<div class="school">
<h3>London Business School</h3>
<p class="calender"><i class="fa fa-calendar"></i> 2013 - 2015</p>
<p class="text">Master Degree</p>
</div>
<hr>
<div class="school">
<h3>School of Coding</h3>
<p class="calender"><i class="fa fa-calendar"></i> 2010 - 2013</p>
<p class="text">Bachelor Degree</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>Find me on social media.</p>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-snapchat"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-twitter"></i>
</div>
<p>Powered by w3.css</p>
</footer>
</body>
</html>