-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (135 loc) · 6.1 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
<!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="./styles/style.css" />
<link rel="stylesheet" href="https://use.typekit.net/cab1dbf.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="./js/mainFunctions.js" defer></script>
<title>Patricias Portfolio</title>
</head>
<body>
<a name="top"></a>
<main>
<div class="nav-container">
<nav>
<div id="logo">
<a href="#top"><img src="./img/LOGOWHALE.png" alt=""></a>
</div>
<ul>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<Section id="home">
<div class="showcase">
<img src="./img/LOGOwhale02.png" alt="">
<h1>PATRI SANTAENGRACIA</h1>
<p>Hi, I'm Patri. I am a 22 year old Spanish junior art director based in Edinburgh, UK.</p>
<div class="arrow-container">
<a href="#projects"><div class="arrow"></div></a>
</div>
</div>
</Section>
<div class="projects-showcase">
<section id="projects">
<h2 class="fade-in">Projects</h2>
<div class="cards">
<a href="./html/how-you-end-it.html">
<div class="card slide-in from-bottom">
<img src="./img/how-you-end-it/cover.jpg" alt="">
<div class="card-overlay">
<h3>How You End It...</h3>
</div>
</div>
</a>
<a href="./html/paint-in-black-history.html">
<div class="card slide-in from-bottom">
<img src="./img/paint-in-black-history/cover.jpg" alt="">
<div class="card-overlay">
<h3>Paint in Black History</h3>
</div>
</div>
</a>
<a href="./html/hitting-the-right-notes.html">
<div class="card slide-in from-bottom">
<img src="./img/hitting-the-right-notes/cover.jpg" alt="">
<div class="card-overlay">
<h3>Hitting the Right Notes</h3>
</div>
</div>
</a>
<a href="./html/skin-cancer-is-black-business.html">
<div class="card slide-in from-bottom">
<img src="./img/black-business/cover.jpg" alt="">
<div class="card-overlay">
<h3>Skin Cancer Is Black Business</h3>
</div>
</div>
</a>
<a href="./html/simply-duolingo.html">
<div class="card slide-in from-bottom">
<img src="./img/DUOLINGo/cover.jpg" alt="">
<div class="card-overlay">
<h3>SIMply Duolingo</h3>
</div>
</div>
</a>
<a href="./html/period-poverty.html">
<div class="card slide-in from-bottom">
<img src="./img/period-poverty/cover.jpg" alt="">
<div class="card-overlay">
<h3>Period Poverty</h3>
</div>
</div>
</a>
<a href="./html/local-shopping.html">
<div class="card slide-in from-bottom">
<img src="./img/local-shopping/cover.jpg" alt="">
<div class="card-overlay">
<h3>Tap Into Local</h3>
</div>
</div>
</a>
<a href="./html/dobb-in-the-knobbs.html">
<div class="card slide-in from-bottom">
<img src="./img/dobb-in-the-knobbs/cover.jpg" alt="">
<div class="card-overlay">
<h3>Dobb in the Knobbs</h3>
</div>
</div>
</a>
</div>
</section>
</div>
<section id="about">
<h2 class="fade-in">About Me</h2>
<div class="about-container slide-in from-left">
<div class="about-pic"><img src="./img/patri-pic.jpeg" alt="about pic"></div>
<p>A Spanish born artist who never sleeps.
I studied animation at university, but it’s the one form of art I don’t actually do.
Instead, I prefer to sketch, storyboard, paint - anything else really.
Freelance life as an artist has given me quite a bit of experience (and paticence) when
dealing with complicated clients.</p>
</div>
</section>
<section id="contact">
<h2 class="fade-in">Get in Touch!</h2>
<div class="contact-container fade-in">
<p>[email protected]</p>
</div>
</section>
</main>
<footer>
<ul>
<li><a href="#"><img src="./img/li-logo.png" alt=""></a></li>
<li><a href="#"><img src="./img/twitter-logo.png" alt=""></a></li>
<li><a href="#"><img src="./img/insta-logo.png" alt=""></a></li>
</ul>
</footer>
</body>
</html>