adds "all projects" page

This commit is contained in:
Nye Evans 2021-09-17 23:22:11 +01:00
parent 0954ee9cb6
commit b783ff4fb4
12 changed files with 193 additions and 89 deletions

View file

@ -2,6 +2,7 @@
<HTML>
<header>
<link rel = "stylesheet" href = "pages\basic.css">
<link rel = "stylesheet" href = "pages\mainpage.css">
<link rel = "stylesheet" href = "pages\effects.css">
<link rel = "icon" href = "images\Icon.ico">
@ -15,7 +16,7 @@
<body>
<div id = "introScreenSpace">
<h1>
<h1 id = "Title">
<div id = "siteTitle">Nye "Ro" Evans</div>
<div class = "subTitle">Portfolio</div>
</h1>
@ -129,6 +130,9 @@
</div>
<div id="galleryOutroLink">
<a href = "pages/AllProjects.html">See all my projects here</a>
</div>
<div class = "textBox" id= "outroText">
I hope you like my work! If you ever want to contact me, my Email, Github and Social Medias can be found below.

15
pages/AllProjects.css Normal file
View file

@ -0,0 +1,15 @@
.projectThumbnail{
width: 16vh;
margin-left: 3vw;
}
.item{
display: flex;
margin-top: 4vh;
}
.itemText{
display: flex;
flex-direction: column;
padding: 10px;
}

View file

@ -2,23 +2,80 @@
<HTML>
<header>
<link rel = "stylesheet" href = "pages\mainpage.css">
<link rel = "stylesheet" href = "pages\effects.css">
<link rel = "icon" href = "images\Icon.ico">
<link rel = "stylesheet" href = "basic.css">
<link rel = "stylesheet" href = "AllProjects.css">
<link rel = "stylesheet" href = "effects.css">
<link rel = "icon" href = "..\images\Icon.ico">
<meta charset="UTF-8">
<title>Nye Evans Portfolio</title>
</header>
<body>
<!-- <h1>All Projects</h1> -->
<h1>Things I have done:</h1>
<a href = "./gallery/aardvark-work/aardvark-work.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/aardvark-work/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h2>Your mum</h2>
<div>
lmao I did ur mom
</div>
</div>
</div>
</a>
<a href = "./gallery/epq-project/epq-project.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/epq-project/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h2>And also your dad</h2>
<div>
I am bisexual
</div>
</div>
</div>
</a>
<a href = "./gallery/mind-map/mind-map.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/mind-map/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h2>I fucked both your parents</h2>
<div>
they were totally into it because Im cool as hell B)
</div>
</div>
</div>
</a>
<a href = "./gallery/cat-tower-defence/cat-tower-defence.html" class = "galleryLink">
<div class = "item">
<img src = "./gallery/cat-tower-defence/projectHeaderImage.png" class = "orangeBorder projectThumbnail"></img>
<div class = "itemText">
<h2>*breakdown*</h2>
<div>
I'm doin' your mom, yes, yours!
First saw her in the Walmart pickin' out your drawers
Big Dolly Parton hair like an '80s prom queen
But her ass was lookin' good all up in them mom-jeans
I approached her in the checkout line, and said, "Yo baby, wassup?"
She had two gallons of milk, and I was starin' at her jugs
Five minutes later, she agreed to get with me
</div>
</div>
</div>
</a>
<div id = "socialBar">
<div id = "backButtonContainer">
<a onclick = "history.back()" class = "backButton"> <-Back to main page</a>
</div>
<div id = "socialBar" style = "margin-top: 3vh;">
<a href = "https://twitter.com/Wi__Ro" target="_blank">Twitter</a>
&NonBreakingSpace;
<a href="mailto:WillowRo@outlook.com" target="_blank">Email</a>

86
pages/basic.css Normal file
View file

@ -0,0 +1,86 @@
@import url("reset.css");
@font-face{
font-family:"roboto";
font-weight: 100;
src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
}
html{
font: 100%;
}
body{
color: #ffd256;
background-color: #181818;
font-family: "roboto";
line-height: 1.3;
}
button{
background-color: transparent;
border: none;
color: #ffd256;
}
button:focus {
border: none;
outline: none;
}
a:link:not(.galleryLink), a:visited:not(.galleryLink){
color: #ffd256;
border-radius: 2px;
transition: background-color 0.5s, color 0.5s;
}
.galleryLink{
text-decoration: none;
color:#ffd256;
}
h1{
font-size: clamp(1.2rem, 4vw, 4rem);
padding-left: 6;
margin-top: 4vh;
height: 20vh;
text-align: center;
}
.subTitle{
font-size: 30%;
padding-top: 10;
padding-left: 5;
}
#socialBar{
display: flex;
margin-bottom: 5vh;
justify-content: center;
}
#backButtonContainer{
text-align: center;
margin-bottom: 7vh;
margin-top: 7vh;
}
.orangeBorder{
border: 2px solid transparent;
border-radius: 5px;
padding: 5px;
transition: border 0.5s;
}
.orangeBorder:hover{
border: 2px solid #ffd256;
padding: 5px;
}

View file

@ -1,6 +1,7 @@
<!doctype html>
<HTML>
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
</header>
@ -46,7 +47,7 @@
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>

View file

@ -62,11 +62,6 @@ iframe:hover{
text-decoration: none;
}
#backButtonContainer{
text-align: center;
margin-bottom: 7vh;
margin-top: 7vh;
}
@media (orientation:portrait){

View file

@ -1,6 +1,7 @@
<!doctype html>
<HTML>
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
</header>
@ -26,7 +27,7 @@
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>

View file

@ -2,6 +2,7 @@
<!doctype html>
<HTML>
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
</header>
@ -31,7 +32,7 @@
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>

View file

@ -1,11 +1,12 @@
<HTML>
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
</header>
<body>
<h1>
EPQ Project
Mind Mapping Software
</h1>
<div class = "textBox">
<h2>What it is</h2>
@ -27,7 +28,7 @@
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html#galleryHeader" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>

View file

@ -1,6 +1,7 @@
<!doctype html>
<HTML>
<header>
<link rel = "stylesheet" href = "..\..\basic.css">
<link rel = "stylesheet" href = "..\blog-post-default.css">
<link rel = "stylesheet" href = "..\..\effects.css">
</header>
@ -24,7 +25,7 @@
</div>
<div id = "backButtonContainer">
<a href = "../../../index.html" class = "backButton"> <-Back to main page</a>
<a onclick = "history.back()" class = "backButton"> <-Back</a>
</div>
</body>
</HTML>

View file

@ -1,40 +1,4 @@
@import url("reset.css");
@font-face{
font-family:"roboto";
font-weight: 100;
src: url("../fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
}
html{
font: 100%;
}
body{
color: #ffd256;
background-color: #181818;
font-family: "roboto";
line-height: 1.3;
}
button{
background-color: transparent;
border: none;
color: #ffd256;
}
button:focus {
border: none;
outline: none;
}
a:link:not(.galleryLink), a:visited:not(.galleryLink){
color: #ffd256;
border-radius: 2px;
transition: background-color 0.5s, color 0.5s;
}
h1{
#siteTitle h1{
font-size: clamp(1.2rem, 4vw, 4rem);
padding-left: 6;
@ -49,26 +13,6 @@ h1{
}
.subTitle{
font-size: 30%;
padding-top: 10;
padding-left: 5;
}
.orangeBorder{
border: 2px solid transparent;
border-radius: 5px;
padding: 5px;
transition: border 0.5s;
}
.orangeBorder:hover{
border: 2px solid #ffd256;
padding: 5px;
}
.textBox{
text-align: center;
font-size: clamp(1rem, 1.2vw, 3rem);
@ -109,7 +53,7 @@ h1{
}
.galleryItem{
height: 13vw;
height: 100%;
}
@ -146,7 +90,7 @@ h1{
width: 78.5vw;
height: 19vh;
transition: visibility 0.3s, opacity 0.5s;
margin-top: 14.85vw;
margin-top: 20.85vh;
}
.popupTongue{
@ -154,8 +98,8 @@ h1{
opacity: 0;
transition: visibility 0.3s, opacity 0.5s;
width: 1.85vw;
height: 1.85vw;
width: 1.85vh;
height: 1.85vh;
margin-left: 5vw;
}
@ -184,6 +128,11 @@ h1{
font-weight: 700;
}
#galleryOutroLink{
text-align: center;
margin-top: 5vh;
}
#outroText{
margin-top: 12vh;
margin-bottom: 20vh;
@ -191,12 +140,5 @@ h1{
margin-right: 27vw;
}
#socialBar{
display: flex;
margin-bottom: 5vh;
justify-content: center;
}