DressOrc/Portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cleaned things up, moving away from grid setup

Browse source 
moved things around, removed redundant classes/ids

nothing uses grids anymore, mainly margins although this may cause issues later, i dont have enough experience to tell yet
This commit is contained in:
Nye Evans 2020-12-31 13:46:26 +00:00
parent a523c72669
commit 8c63e5bc76
2 changed files with 55 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
Mainpage.css
View file

@ -6,15 +6,9 @@
src: url("Fonts/Roboto/RobotoMono-VariableFont_wght.ttf")
}
*{
color: #FCC42F;
font-family: "roboto";
}
body{
margin: 20;
color: #ffd256;
font-family: "roboto";
background-color: #221A0F;
background-image: url("Images/BackGroundTestNoGlow.png");
background-position: bottom;
@ -25,42 +19,36 @@ body{
h1, h2, h3{
background-color: #ffa500;
background: radial-gradient(#E39823 40%, #8D5001);
border-radius: 5px
border-radius: 5px;
font-size: clamp(12px, 1vw, 50px);
padding: 1.3vh;
}
h1{
h1{
font-size: 5vw;
padding-left: 6;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 6;
margin-left: 2vw;
margin-right: 70vw;
margin-top: 10vh;
margin-bottom: 70vh;
height: 20vh;
text-align: left;
}
h2{
font-size: 1vw;
padding: 1.3vh;
grid-column-start: 2;
grid-column-end: 12;
grid-row-start: 14;
grid-row-end: 19;
h2, h3{
margin-top: 10vh;
margin-bottom: 10vh;
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 86vw;
}
h3{
font-size: 1vw;
padding: 1.3vh;
grid-column-start: 2;
grid-column-end: 12;
grid-row-start: 2;
grid-row-end: 7;
}
.titleScreenArea{ /*the large empty space around the title*/
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 4;
grid-row-end: 8;
}
.orangeBack{ /*for anything that isnt a <h> tag*/
background-color: #ffa500;
@ -70,68 +58,39 @@ h3{
}
.orangeBorder{
border: 5px outset #E39823;
border-radius: 5px;
}
.textBox{
text-align: center;
padding: 2.5vh;
font-size: 1vw;
font-size: 1.3vw;
}
#filter{
position: fixed;
top: 0;
left: 0;
}
#bodyAboveImage{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(19, 1fr);
gap: 1vh;
height: 200vh;
}
@media (orientation:portrait){
#bodyBelowImage{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(16, 1fr);
gap: 1vh;
height: 170vh;
}
h1{
font-size: 10vw;
#profileImage{
width: 100%;
height: auto;
text-align: center;
}
margin-left: 2vw;
margin-right: 2vw;
margin-top: 5vh;
margin-bottom: 85vh;
#galleryLinkText{
grid-column-start: 6;
grid-column-end: 8;
grid-row-start: 8;
grid-row-end: 9;
}
height: 10vh;
#programGalleryButton{
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 10;
grid-row-end: 11;
}
}
#artGalleryButton{
grid-column-start: 8;
grid-column-end: 10;
grid-row-start: 10;
grid-row-end: 11;
h2, h3{
margin-top: 10vh;
margin-bottom: 10vh;
font-size: 2vw;
}
}

38
index.html
View file

@ -3,36 +3,30 @@
<link rel = "stylesheet" href = "Mainpage.css">
</header>
<body>
<img src = "Images\ScreenFilter.png" id = "Filter">
<div id = "bodyAboveImage">
<h1 class = "positioned">
<img src = "Images\ScreenFilter.png" style = "position: fixed; top: 0; left: 0;">
<div id = "introScreenSpace">
<h1>
Nye Evans
<div style = "font-size: 30%; padding-top: 10;">Portfolio</div>
</h1>
<div class = "titleScreenArea"> </div>
<h2>
[PLACEHOLDER TEXT->]Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
</h2>
</div>
<div id = "profileImage" >
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h2>
<div style = "width: 100%; height: auto; text-align: center;">
<img src = "Images\ProfilePlaceholder.png" class = "orangeBack">
</div>
<div id = "bodyBelowImage">
<h3>
[PLACEHOLDER TEXT->]Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
Welcome! Welcome to City 17! You have chosen, or been chosen, to relocate to one of our finest remaining urban centers. I thought so much of City 17 that I elected to establish my administration here, in the Citadel so thoughtfully provided by our benefactors. I've been proud to call City 17 my home. And so, whether you are here to stay, or passing through on your way to parts unknown - welcome to City 17. It's safer here.
</h3>
<h3 style = "margin-bottom: 5vh;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h3>
<div id = "galleryLinkText" class = "orangeBack textBox">check out my work here:</div>
<div id = "programGalleryButton" class = "orangeBorder textBox">programming projects</div>
<div id = "artGalleryButton" class = " orangeBorder textBox">other projects</div>
</div>
<div class = "orangeBack textBox" style = "margin-left: 35vw; margin-right: 35vw;">check out my work here:</div>
<div id = "programGalleryButton" class = "orangeBorder textBox">programming projects</div>
<div id = "artGalleryButton" class = " orangeBorder textBox">other projects</div>
</body>
</HTML>