-
Notifications
You must be signed in to change notification settings - Fork 1
/
profile.html
117 lines (106 loc) · 4.08 KB
/
profile.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testbed Oricana</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<header id="top">
<aside class="logo">
<img src="http://placehold.it/150x75" />
</aside>
<nav class="nav-top">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</header>
<section class="container">
<aside class="school"></aside>
<aside id="userprofile">
<aside class="userpic">Cedric</aside>
<section></section>
<article class="userdesc">
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum accusantium, fugit adipisci, pariatur quasi aspernatur nostrum dignissimos. Cum nesciunt impedit neque eveniet? Aliquam libero doloremque repellat soluta odit, dignissimos illum!Optio quod ducimus, dicta corrupti excepturi, ratione amet est aliquam odio corporis obcaecati libero voluptatem, hic similique eligendi dolores fugiat dolore commodi ipsa iusto minus. Unde amet voluptates totam ex.</p>
</article>
<aside class="social">
<a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a>
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter-square fa-2x"></i></a>
</aside>
</aside>
<section id="profile">
<h1>Cedric</h1>
<section class="userlist"><h5>Also great at</h5>
<ul class="fa-ul">
<li><i class="fa-li fa fa-square col-art"></i>3D Artist</li>
<li><i class="fa-li fa fa-square col-art"></i>Anim 3D</li>
<li><i class="fa-li fa fa-square col-design"></i>Sound Design</li>
</ul>
</section>
<section class="userlist"><h5>Also good at</h5>
<ul class="fa-ul">
<li><i class="fa-li fa fa-square col-other"></i>in lists</li>
<li><i class="fa-li fa fa-square col-art"></i>in lists</li>
<li><i class="fa-li fa fa-square col-code"></i>in lists</li>
<li><i class="fa-li fa fa-square col-design"></i>in lists</li>
</ul>
</section>
<aside class="extralist">
<h5>Conditions</h5>
<ul>
<li>Online</li>
<li>Contract Work</li>
</ul>
<h5>Language</h5>
<ul>
<li>English, French</li>
</ul>
</aside>
<aside class="software">
<h5>Software</h5>
<ul>
<li class="tooltip" data-tipsy="Adobe Photoshop" >
<img src="images/softwareicons/adobephotoshop.png" alt="Adobe Photoshop" > </li>
<li class="tooltip" data-tipsy="Maya"><img src="images/softwareicons/maya.png" alt="Maya"></li>
<li class="tooltip" data-tipsy="Blender"><img src="images/softwareicons/blender.png" alt="Blender" ></li>
<li class="tooltip" data-tipsy="Octane"><img src="images/softwareicons/octane.png" alt="Octane" ></li>
<li><a class="modal-trigger" href="#modal1">more...</a></li>
</ul>
</aside>
</section>
</aside>
</section>
<footer>
</footer>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content soft-list">
<h4>Software</h4>
<ul>
<li><img src="images/softwareicons/adobephotoshop.png" alt="Adobe Photoshop" >Adobe Photoshop</li>
<li><img src="images/softwareicons/maya.png" alt="Maya">Maya</li>
<li><img src="images/softwareicons/blender.png" alt="Blender" >Blender</li>
<li><img src="images/softwareicons/octane.png" alt="Octane" >Octane</li>
<li><img src="images/softwareicons/rpgmaker.png" alt="RPG Maker" >RPG Maker XP</li>
<li><img src="images/softwareicons/eclipse.png" alt="Eclipse" >Eclipse</li>
<li><img src="images/softwareicons/rhino.png" alt="Rhino" >Rhino</li>
<li><img src="images/softwareicons/coreldraw.png" alt="Corel Draw" >Corel Draw</li>
</ul>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green button">Agree</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script src="js/unslider.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>