projects styling
This commit is contained in:
parent
5432b3f41f
commit
32c307c944
BIN
Sierra.jpg
Normal file
BIN
Sierra.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
3
covers.css
Normal file
3
covers.css
Normal file
@ -0,0 +1,3 @@
|
||||
#sierra{
|
||||
background-image: url("Sierra.jpg");
|
||||
}
|
||||
44
style.css
44
style.css
@ -10,6 +10,7 @@ body {
|
||||
transition: none; }
|
||||
|
||||
#top {
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: black; }
|
||||
@ -57,22 +58,40 @@ body {
|
||||
|
||||
.slide {
|
||||
padding: 0px;
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
line-height: 1.6; }
|
||||
.slide div {
|
||||
/*width wrapping*/
|
||||
/* width wrapping */
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
padding: 0px; }
|
||||
margin: auto; }
|
||||
.slide div div {
|
||||
/* Project bits */
|
||||
transition-duration: .2s;
|
||||
width: 390px;
|
||||
border-radius: 5px;
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
margin: 3px; }
|
||||
.slide div div .cover {
|
||||
height: 300px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin: 0px; }
|
||||
.slide div div .cover h2 {
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white; }
|
||||
.slide div div .cover:hover {
|
||||
box-shadow: 2px 2px 9px #666; }
|
||||
.slide p {
|
||||
max-width: 800px;
|
||||
margin: auto; }
|
||||
.slide .cover {
|
||||
height: 500px;
|
||||
background: url("Chuck.jpg");
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin: 0px; }
|
||||
.slide h1 {
|
||||
font-size: 2em;
|
||||
font-style: italic;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
margin-top: 2.3em; }
|
||||
|
||||
.arrow {
|
||||
font-variant-position: sub;
|
||||
@ -81,9 +100,6 @@ body {
|
||||
.arrow:before {
|
||||
content: "\0025BC"; }
|
||||
|
||||
h1 {
|
||||
font-size: 2em; }
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-style: italic; }
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EAxBT,KAAK;;AA4Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EApCN,OAAO;EAsCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAzCN,IAAI;EA2CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjGT,KAAK;IAkGL,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,GAAG;IAClB,OAAO,EAAE,GAAG;EAEhB,QAAE;IACE,SAAS,EAvGT,KAAK;IAwGL,MAAM,EAAE,IAAI;EAEhB,aAAO;IACH,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,gBAAgB;IAC5B,mBAAmB,EAAE,aAAa;IAClC,eAAe,EAAE,KAAK;IACtB,MAAM,EAAE,GAAG;;AAInB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
|
||||
"mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA1BT,KAAK;;AA8Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAtCN,OAAO;EAwCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA3CN,IAAI;EA6CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,UAAI;IACA,oBAAoB;IACpB,SAAS,EApGT,KAAK;IAqGL,MAAM,EAAE,IAAI;IACZ,cAAI;MACA,kBAAkB;MAClB,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,qBAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,wBAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EAlHrB,kBAAiB;UAmHN,KAAK,EAAE,KAAK;MAGpB,2BAAa;QACT,UAAU,EAAE,gBAAgB;EAIxC,QAAE;IACE,SAAS,EA/HT,KAAK;IAgIL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EArIT,KAAK;IAsIL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
|
||||
"sources": ["style.scss"],
|
||||
"names": [],
|
||||
"file": "style.css"
|
||||
|
||||
46
style.scss
46
style.scss
@ -2,6 +2,7 @@
|
||||
$width: 800px;
|
||||
$grey: #ccc;
|
||||
$pink: #ed1a76;
|
||||
$greybg: rgba(0, 0, 0, .5);
|
||||
.reset {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
@ -18,6 +19,7 @@ body {
|
||||
}
|
||||
|
||||
#top {
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: black;
|
||||
@ -94,23 +96,45 @@ body {
|
||||
@extend .reset;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
line-height: 1.6;
|
||||
div {
|
||||
/*width wrapping*/
|
||||
/* width wrapping */
|
||||
max-width: $width;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
padding: 0px;
|
||||
div {
|
||||
/* Project bits */
|
||||
transition-duration: .2s;
|
||||
width: $width/2 - 10;
|
||||
border-radius: 5px;
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
.cover {
|
||||
height: 300px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin: 0px;
|
||||
h2 {
|
||||
text-align: center;
|
||||
background: $greybg;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.cover:hover {
|
||||
box-shadow: 2px 2px 9px #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
max-width: $width;
|
||||
margin: auto;
|
||||
}
|
||||
.cover {
|
||||
height: 500px;
|
||||
background: url("Chuck.jpg");
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin: 0px;
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-style: italic;
|
||||
max-width: $width;
|
||||
margin: auto;
|
||||
margin-top: 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,10 +147,6 @@ body {
|
||||
content: "\0025BC";
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
|
||||
88
toptest.html
88
toptest.html
@ -5,9 +5,10 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="covers.css">
|
||||
<style>
|
||||
#spaceTakerUpper {
|
||||
height: 100vh;
|
||||
height: 105vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -39,15 +40,7 @@
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1>About Me</h1>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1>Projects</h1>
|
||||
<div>
|
||||
<div class="cover">
|
||||
<h2>A project</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non
|
||||
dolor. Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque
|
||||
lacus. Nulla turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis
|
||||
mattis. In tempor justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse
|
||||
@ -57,31 +50,56 @@
|
||||
molestie placerat. Vivamus aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non
|
||||
scelerisque lorem. Aenean mollis dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean
|
||||
ullamcorper urna id cursus semper. Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra
|
||||
ante massa id elit. Mauris molestie enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi
|
||||
auctor, tincidunt odio in, ultricies sapien. Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis
|
||||
felis urna. Morbi feugiat metus sed massa finibus dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada
|
||||
rutrum tellus, sit amet tempus enim pretium sed. Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae
|
||||
mauris. Aliquam in nibh placerat, mollis augue sit amet, interdum felis. Morbi justo felis, semper ac lorem in,
|
||||
lobortis pharetra purus. Curabitur ut neque vitae magna interdum pulvinar ac vitae dui. Donec consequat est ex,
|
||||
et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis egestas lectus. Quisque vel fringilla justo, ultricies
|
||||
pharetra dui. Morbi egestas libero et turpis congue tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ullamcorper
|
||||
luctus dolor, nec consectetur erat placerat at. Phasellus a metus sed lorem molestie euismod finibus id turpis.
|
||||
Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies tempus, blandit ut justo. Morbi id nulla
|
||||
tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem, sit amet pellentesque leo eleifend
|
||||
non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies, sem sed facilisis lacinia,
|
||||
ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa et, fringilla feugiat
|
||||
purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien pharetra erat
|
||||
blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget dapibus
|
||||
nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie
|
||||
metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt,
|
||||
lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis
|
||||
accumsan. Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum
|
||||
lorem cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit.
|
||||
Mauris sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu
|
||||
ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus
|
||||
et magnis dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et
|
||||
libero.</p>
|
||||
ante massa id elit. Mauris molestie enim sit amet neque viverra, luctus laoreet dolor efficitur.</p>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<h1>Projects</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div class="cover" id="sierra">
|
||||
<!-- centering container -->
|
||||
<div style="display:table;width:100%;height:100%;margin:0px;">
|
||||
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
||||
<h2>Project Sierra</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Project description</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="cover" id="sierra">
|
||||
<!-- centering container -->
|
||||
<div style="display:table;width:100%;height:100%;margin:0px;">
|
||||
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
||||
<h2>Project Sierra</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Project description</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="cover" id="sierra">
|
||||
<!-- centering container -->
|
||||
<div style="display:table;width:100%;height:100%;margin:0px;">
|
||||
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
||||
<h2>Project Sierra</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Project description</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="cover" id="sierra">
|
||||
<!-- centering container -->
|
||||
<div style="display:table;width:100%;height:100%;margin:0px;">
|
||||
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
||||
<h2>Project Sierra</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Project description</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user