diff --git a/Sierra.jpg b/Sierra.jpg new file mode 100644 index 0000000..2825d98 Binary files /dev/null and b/Sierra.jpg differ diff --git a/covers.css b/covers.css new file mode 100644 index 0000000..083ae25 --- /dev/null +++ b/covers.css @@ -0,0 +1,3 @@ +#sierra{ + background-image: url("Sierra.jpg"); +} \ No newline at end of file diff --git a/style.css b/style.css index b50033a..6e44071 100644 --- a/style.css +++ b/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; } diff --git a/style.css.map b/style.css.map index f7979db..0c116dd 100644 --- a/style.css.map +++ b/style.css.map @@ -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" diff --git a/style.scss b/style.scss index 11a9e3e..7096ab2 100644 --- a/style.scss +++ b/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; diff --git a/toptest.html b/toptest.html index d49a55a..13d6e4b 100644 --- a/toptest.html +++ b/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>