-
Notifications
You must be signed in to change notification settings - Fork 0
/
profile.html
138 lines (131 loc) · 6.92 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles-profile.css">
<link rel="stylesheet" href="mediaqueries.css" />
<title>Alumni Profile</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<header class="header">
<a href="https://www.redi-school.org/">
<img src="asset/rediLogo.png" class="logo" alt="Redi School logo">
</a>
<div class="container">
<div class="detail">
<ul class="nav-links">
<li><a href="https://www.redi-school.org/">Home</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Project</a></li>
<li><a href="https://www.redi-school.org/blog">Blog</a></li>
<li><a href="https://www.redi-school.org/contact">Contact</a></li>
<li><div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div></li>
</ul>
</div>
</div>
</header>
<!-- two column flexbox container-->
<div class="flex-container">
<!--Left side column-->
<div class="left-container">
<div class="picture">
<img src="https://ca.slack-edge.com/T024UKMKVCL-U05S6HG0K0Q-c46e9cef3a0c-512" alt="profile pics" style="width: 100%;" class="rounded">
</div>
<div class="basic-info">
<h2 class="name">Natalia Silvestre</h2>
<h2 class="course">UX/UI design Basic</h2>
<h2 class="job-type">Full time</h2>
<h2 class="location">Aarhus</h2>
</div>
<!--Left side column: Social media buttons-->
<div>
<button type="button" class="social-media-btn">
<a href="https://www.w3schools.com/" alt="Linkedin" target="_blank" class="orange-text-btn"><b>Linkedin</b></a>
</button>
</div>
<div>
<button type="button" class="social-media-btn">
<a href="https://www.w3schools.com/" alt="Behance" target="_blank" class="orange-text-btn"><b>Behance</b></a>
</button>
</div>
<div>
<button type="button" class="social-media-btn">
<a href="https://www.w3schools.com/" alt="Dribble" target="_blank" class="orange-text-btn"><b>Dribble</b></a> <!-- How to open a new tab: target="_blank" -->
</button>
</div>
<!--Left side column: CV & Portfolio buttons-->
<div>
<p id="above-cv-text">Check out my portfolio & CV to see a showcase of my recent projects. Each project reflects my commitment to creating visually appealing, intuitive, and user-centric designs.</p>
<button type="button" class="cv-portfolio-btn">
<a id="cv" href="https://www.w3schools.com/" alt="Download CV" target="_blank" class="orange-text-btn"><b>Download CV</b></a>
</button>
</div>
<div>
<button type="button" class="cv-portfolio-btn">
<a id="portfolio" href="https://www.w3schools.com/" alt="Download Portfolio" target="_blank" class="orange-text-btn"><b>Download Portfolio</b></a>
</button>
</div>
</div>
<!--right side column-->
<div class="right-container">
<div id="bio">
<h1>Bio</h1>
<div class="text-box">
<p id="bio-text">Hi, <br>
I am a passionate and innovative UI designer who recently graduated with a degree in
Digital Design from Aarhus University. With a keen eye for detail and a commitment to
creating visually stunning anduser-friendly interfaces. I am eager to contribute my skills
to a dynamic team and bring fresh perspectives to the world of digital design. I am glad you
got interested! I always open for suggestions :)<br>
For cooperation: [email protected]
</p>
</div>
</div>
<div id="key-skills">
<h1>Key skills</h1>
<div class="skill-label">
<span class="label" id="label-UXUI"><b>UX/UI</b></span>
<span class="label" id="label-figma"><b>Figma</b></span>
<span class="label" id="label-js"><b>Javascript</b></span>
<span class="label" id="label-scrum"><b>Scrum</b></span>
<span class="label" id="label-teamwork"><b>Teamwork</b></span>
<span class="label" id="label-research"><b>Research</b></span>
<span class="label" id="label-testing"><b>Testing</b></span>
<span class="label" id="label-communication"><b>Communication</b></span>
</div>
</div>
<div id="achievements">
<h1>Achievements</h1>
<div class="text-box">
<p id="achievement-text">
During my time at ReDI School, I honed my skills in UI design, user research, and interactive
prototyping. My coursework equipped me with a strong foundation in design principles and a
deep understanding of user-centered design.
</p>
</div>
</div>
<div class="personal-imgs">
<img src="https://plus.unsplash.com/premium_photo-1700316993751-e79a424660dd?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="personal pics" class="semi-rounded">
<img src="https://plus.unsplash.com/premium_photo-1700335324570-18fe238a9b0e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzN3x8fGVufDB8fHx8fA%3D%3D" alt="personal pics" class="semi-rounded">
<img src="https://plus.unsplash.com/premium_photo-1700316993751-e79a424660dd?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="personal pics" class="semi-rounded">
</div>
<div class="text-box">
<p id="picture-text">
Welcome to my design world! Explore my creative journey and discover what inspires my work
through a collection of personal pictures. 📸
</p>
</div>
</div>
<script src="profile.js"></script>
</body>
</html>