first commit
This commit is contained in:
jpez
commit
0c4f26b880
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
|
|
@ -0,0 +1,109 @@
|
|||
.bio {
|
||||
grid-area: aside;
|
||||
background-color: #14213d;
|
||||
opacity: 90%;
|
||||
border-top-left-radius: 10em;
|
||||
border-bottom-left-radius: 10em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bio > h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bio > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profileImg {
|
||||
content: url("../assets/images/profileImage.png");
|
||||
size: 10%;
|
||||
max-height: 20em;
|
||||
border: solid #f29602;
|
||||
border-radius: 1000%;
|
||||
}
|
||||
|
||||
.monikers {
|
||||
font-family: bio;
|
||||
font-size: x-large;
|
||||
color: #E5E5E5;
|
||||
}
|
||||
|
||||
.monikers > h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.monikers > p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.generalInfo {
|
||||
text-align: left;
|
||||
margin-left: 6em;
|
||||
color: #E5E5E5;
|
||||
}
|
||||
|
||||
.generalInfo > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #E5E5E5;
|
||||
font-family: bio;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.languages > span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.languages > span > a > h2 {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
.languages > span > a {
|
||||
margin: 0;
|
||||
text-decoration: 0;
|
||||
color: #E5E5E5;
|
||||
}
|
||||
|
||||
.languages > ul > li {
|
||||
margin-left: 1em;
|
||||
font-family: bio;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.generalInfo > span > p {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: bio;
|
||||
src: url(../assets/fonts/RafflesBryantRegular.woff);
|
||||
}
|
||||
|
||||
.langList{
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: none;
|
||||
font-family: bio;
|
||||
}
|
||||
|
||||
#langDrop:target .langList {
|
||||
display: flex;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#langDrop:target .close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main > h1 {
|
||||
color: #E5E5E5;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!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>J-Pez Development</title>
|
||||
|
||||
<link rel="stylesheet" href="../style/main.css" media = "screen">
|
||||
<link rel="stylesheet" href="../style/mobile.css" media ="screen and (max-width:800px)">
|
||||
<link rel="stylesheet" href="../home/index.css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<header class="title-card">
|
||||
<a class="shownav menubutton" href="#clicked"></a>
|
||||
<a class="link" href="./index.html"><h1>J-Pez Development</h1></a>
|
||||
</header>
|
||||
<nav class="navigation">
|
||||
<a class="link" id="port" href="../portfolio/portfolio.html"><h2>Portfolio</h2></a>
|
||||
<a class="link" id="blog" href="../blog/blog.html"><h2>Blog</h2></a>
|
||||
<a class="link" id="contact" href="../contact/contact.html"><h2>Contact</h2></a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>Welcome to my little corner of the internet :)</h1>
|
||||
</main>
|
||||
|
||||
<aside class="bio">
|
||||
<section class="monikers">
|
||||
<h1>Joshua Perry</h1>
|
||||
<p>(A.K.A J-Pez)</p>
|
||||
</section>
|
||||
<img class="profileImg" alt="An Image of Joshua"/>
|
||||
<section class="generalInfo">
|
||||
<span>
|
||||
<h2 class="title">D.O.B</h2>
|
||||
<p>09/02/2001</p>
|
||||
</span>
|
||||
<span>
|
||||
<h2 class="title">Pronouns</h2>
|
||||
<p>He/Him</p>
|
||||
</span>
|
||||
<span>
|
||||
<h2 class="title">Occupation</h2>
|
||||
<p>Student</p>
|
||||
</span>
|
||||
<span>
|
||||
<h2 class="title">Studying</h2>
|
||||
<p>BSc Computing(Software Engineering)</p>
|
||||
</span>
|
||||
<span>
|
||||
<h2 class="title">Institution</h2>
|
||||
<p>University of Northampton</p>
|
||||
</span>
|
||||
<span>
|
||||
<h2 class="title">Gradutation Year</h2>
|
||||
<p>2024</p>
|
||||
</span>
|
||||
</section>
|
||||
<section class="generalInfo languages" id="langDrop">
|
||||
<span id="lang">
|
||||
<a href="#lang" class="close">X</a>
|
||||
<a href="#langDrop"><h2 class="title">Languages</h2></a>
|
||||
</span>
|
||||
<ul class="langList">
|
||||
<li>HTML5</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript (including Node.js)</li>
|
||||
<li>Java</li>
|
||||
<li>C#</li>
|
||||
<li>F#</li>
|
||||
<li>Python</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="qualifications">
|
||||
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
© Joshua Perry 2022
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
body {
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
background-image: url("../assets/images/background.jpg");
|
||||
background-size: cover;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 20% 40% 40%;
|
||||
grid-template-rows: 20% 60% 20%;
|
||||
grid-template-areas:
|
||||
"header nav nav"
|
||||
"main main aside"
|
||||
"footer footer footer";
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.title-card {
|
||||
background-color: #000000;
|
||||
opacity: 90%;
|
||||
margin: 0;
|
||||
color: #f29602;
|
||||
font-family: headers;
|
||||
grid-area: header;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.title-card > a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title-card > a > h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
margin: 0;
|
||||
margin-right: -12em;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% 25%;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-areas: "port blog contact";
|
||||
}
|
||||
|
||||
.link {
|
||||
margin: 0;
|
||||
opacity: 90%;
|
||||
font-family: headers;
|
||||
font-size: x-large;
|
||||
background-color: #000000;
|
||||
color: #f29602;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link > h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.link:hover {
|
||||
border-bottom: 0.5em solid #32cd32;
|
||||
}
|
||||
|
||||
.link #home {
|
||||
grid-area: home;
|
||||
}
|
||||
|
||||
.link #port {
|
||||
grid-area: port;
|
||||
}
|
||||
|
||||
.link #blog {
|
||||
grid-area: blog;
|
||||
}
|
||||
|
||||
.link #contact {
|
||||
grid-area: contact;
|
||||
}
|
||||
|
||||
#contact {
|
||||
border-top-right-radius: 10em;
|
||||
border-bottom-right-radius: 10em;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: headers;
|
||||
src: url(../assets/fonts/game_over.woff);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.bio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in New Issue