212 lines
3.0 KiB
CSS
Executable File
212 lines
3.0 KiB
CSS
Executable File
@import url('https://fontlibrary.org/face/hk-grotesk');
|
|
@import url('https://fontlibrary.org/face/glacial-indifference');
|
|
|
|
body {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(9, 1fr);
|
|
grid-template-rows: repeat(9);
|
|
grid-gap: 15px;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'HankenGroteskLight', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 1.2em;
|
|
color: #000;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-weight: 100;
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
grid-column: 8 / span 2;
|
|
grid-row: 2;
|
|
}
|
|
|
|
header h1 {
|
|
position: absolute;
|
|
top:95px;
|
|
left:-60px;
|
|
font-size: 5em;
|
|
line-height: 0.85em;
|
|
margin: 0;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
nav {
|
|
grid-column: 2 / 8;
|
|
grid-row: 1;
|
|
height: 60px;
|
|
padding: 20px 0;
|
|
align-self: center;
|
|
}
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
font-size: 2em;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-indent: none;
|
|
}
|
|
|
|
nav ul li {
|
|
display: inline;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
nav a {
|
|
text-decoration: none;
|
|
color: #000;
|
|
border-bottom: thin solid rgba(0,0,0,0);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
nav a:hover {
|
|
text-decoration: none;
|
|
color: #333;
|
|
border-bottom: thin solid rgba(0,0,0,1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* WORK SECTIONS */
|
|
|
|
section img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
section#audioSection {
|
|
grid-column: 2 / 8;
|
|
grid-row: 2 / 10;
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
section#otherSection {
|
|
grid-column: 2 / 8;
|
|
grid-row: 2 / 10;
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.work {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.work > h1 {
|
|
position: absolute;
|
|
left: -400px;
|
|
top: 200px;
|
|
font-family: 'GlacialIndifferenceRegular';
|
|
font-size: 12em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
transform: rotate(-90deg);
|
|
z-index: 1;
|
|
color: #FF670F;
|
|
}
|
|
|
|
.work ul {
|
|
list-style: none;
|
|
text-indent: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.work ul li {
|
|
position: relative;
|
|
display: block;
|
|
height: 600px;
|
|
overflow: hidden;
|
|
border: solid thick white;
|
|
background-position: center !important;
|
|
background-size: cover !important;
|
|
}
|
|
|
|
.work ul a {
|
|
z-index: 5000;
|
|
}
|
|
|
|
.work ul li:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.work ul li > h3, .work ul li > p {
|
|
position: absolute;
|
|
font-weight: bold;
|
|
color: #FCFCFC;
|
|
z-index: 10;
|
|
}
|
|
|
|
.work ul li > h3 {
|
|
font-family: 'GlacialIndifferenceRegular';
|
|
text-transform: uppercase;
|
|
bottom: 0px;
|
|
right: 30px;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 7em;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
|
|
.work ul li > p {
|
|
top: 10px;
|
|
left: 20px;
|
|
font-style: italic;
|
|
max-width: 50%;
|
|
}
|
|
|
|
/* WORK INPAGE */
|
|
|
|
a#home {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
align-self: center;
|
|
color: #000;
|
|
text-decoration: none;
|
|
font-size: 1em;
|
|
height: 300px;
|
|
}
|
|
|
|
a#home:hover {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.work.text {
|
|
grid-column: 2 / span 3;
|
|
grid-row: 3 / 9;
|
|
}
|
|
|
|
.work.text > h1 {
|
|
transform: rotate(0);
|
|
font-size: 4em;
|
|
left: -75px;
|
|
top: -100px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.work.imgs {
|
|
grid-column: 5 / 8;
|
|
grid-row: 3 / 9;
|
|
}
|
|
|
|
div.imgFeat {
|
|
position: relative;
|
|
grid-column: 3 / 8;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.imgFeat > img {
|
|
max-width: 100%;
|
|
} |