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

fixed image, split grid in two

Browse source 
to fit image without adding it to grid, I needed two grids and the image between the two
This commit is contained in:
Nye Evans 2020-12-29 21:25:29 +00:00
parent 0b455914b3
commit b429bcd629
2 changed files with 55 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
Mainpage.css
View file

@ -16,11 +16,7 @@
body{
margin: 20;
background-color: #221A0F;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(42, 1fr);
gap: 1vh;
height: 400vh;
}
@ -53,8 +49,8 @@ h3{
padding: 1.3vh;
grid-column-start: 2;
grid-column-end: 12;
grid-row-start: 32;
grid-row-end: 37;
grid-row-start: 2;
grid-row-end: 7;
}
.titleScreenArea{ /*the large empty space around the title*/
@ -88,33 +84,47 @@ h3{
font-size: 1vw;
}
#bodyAboveImage{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(19, 1fr);
gap: 1vh;
height: 200vh;
}
#bodyBelowImage{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
gap: 1vh;
height: 130vh;
}
#profileImage{
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 20;
grid-row-end: 30;
width: 100%;
height: auto;
text-align: center;
}
#galleryLinkText{
grid-column-start: 6;
grid-column-end: 8;
grid-row-start: 38;
grid-row-end: 39;
font-size: ;
grid-row-start: 8;
grid-row-end: 9;
}
#programGalleryButton{
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 40;
grid-row-end: 41;
grid-row-start: 10;
grid-row-end: 11;
}
#artGalleryButton{
grid-column-start: 8;
grid-column-end: 10;
grid-row-start: 40;
grid-row-end: 41;
grid-row-start: 10;
grid-row-end: 11;
}

4
index.html
View file

@ -3,6 +3,7 @@
<link rel = "stylesheet" href = "Mainpage.css">
</header>
<body>
<div id = "bodyAboveImage">
<h1 class = "positioned">
Nye Evans
<div style = "font-size: 30%; padding-top: 10;">Portfolio</div>
@ -15,11 +16,13 @@
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" >
<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.
@ -31,5 +34,6 @@
<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>
</body>
</HTML>