ada/portfoliosketchpine64backup
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Gallery images in place locally and linked appropriately, titles next.

Browse source
This commit is contained in:
Alex Huddleston 2018-01-25 04:59:30 -06:00
parent 37b7a5a260
commit 9a45453f1c
3 changed files with 72 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
index.html
View file

@ -16,18 +16,57 @@
<body> <body>
<header class="centered"> <header class="centered">
<div class="title centered"> <div class="title centered">
<h1><b>Testing...</b></h1> <h1><b>Werefox Software Portfolio Page</b></h1>
<p>A Personalized Portfolio Site<p>
</div> </div>
</header> </header>
<div class="content"> <div class="content">
<div id="top-spacer"></div>
<div class="test-slider slick-slider slick-dotted draggable outer-slider-div"> <div class="test-slider slick-slider slick-dotted draggable outer-slider-div">
<div>One</div> <div>
<div>Two</div> <div class="image-container">
<div>Three</div> <a href="https://double-darling-duo-deluxe.itch.io/so-bow-y-cute">
<div>Four</div> <img src="/home/shadow8t4/git/shadow8t4-website/assets/images/420/so-bow-y-cute.png"></img>
<div>Five</div> </a>
<div>Six</div> </div>
<div class="centered-text">
<h3>So Bow-y Cute</h3>
</div>
</div>
<div>
<div class="image-container">
<a href="https://github.com/shadow8t4/ProceduralCity">
<img src="/home/shadow8t4/git/shadow8t4-website/assets/images/420/procedural-city.png"></img>
</a>
</div>
</div>
<div>
<div class="image-container">
<a href="http://werefoxsoftware.com/project-undercover/">
<img src="/home/shadow8t4/git/shadow8t4-website/assets/images/420/projectundercover-guard.png"></img>
</a>
</div>
</div>
<div>
<div class="image-container">
<a href="http://werefoxsoftware.com/project-undercover/">
<img src="/home/shadow8t4/git/shadow8t4-website/assets/images/420/projectundercover-spy.png"></img>
</a>
</div>
</div>
<div>
<div class="image-container">
<a href="http://werefoxsoftware.com/assets/other/Public_Speaking_in_VR_Research_Paper.pdf">
<img src="/home/shadow8t4/git/shadow8t4-website/assets/images/420/public-speaking-vr.png"></img>
</a>
</div>
</div>
<div>
<div class="image-container">
<a href="http://werefoxsoftware.com/revival-survival/">
<img src="/home/shadow8t4/git/shadow8t4-website/assets/images/420/revival-survival.png"></img>
</a>
</div>
</div>
</div> </div>
</div> </div>
</body> </body>

29
main.css
View file

@ -1,17 +1,17 @@
@charset "UTF-8"; @charset "UTF-8";
body { body {
margin: auto;
font-family: sans-serif; font-family: sans-serif;
background-color: #55f; background-color: #55f;
//background-image: url("https://static.pexels.com/photos/375732/pexels-photo-375732.jpeg"); //background-image: url("https://static.pexels.com/photos/375732/pexels-photo-375732.jpeg");
} }
header { header {
position: fixed; position: relative;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 1;
color: #999999; color: #999999;
background-color: #292929; background-color: #292929;
border-color: #101010; border-color: #101010;
@ -23,8 +23,6 @@ header {
.content { .content {
margin: auto; margin: auto;
padding: 25px; padding: 25px;
width: 900px;
height: 600px;
} }
.title { .title {
@ -35,14 +33,25 @@ header {
.centered { .centered {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 100px;
padding-right: 100px;
padding-top: 20px;
padding-bottom: 20px;
} }
#top-spacer { .centered-text {
height: 100px; margin: auto;
padding: auto;
text-align: center;
} }
.outer-slider-div { .image-container {
display: block; margin: auto;
height: 300px; padding: 10px
max-height: 300px; }
.image-container img {
background: #fff;
padding: 5px;
margin: auto;
} }

7
main.js
View file

@ -2,6 +2,11 @@ $(document).ready(function(){
$('.test-slider').slick({ $('.test-slider').slick({
infinite: true, infinite: true,
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 3 slidesToScroll: 1,
dots: true,
centerMode: true,
centerPadding: '20px',
adaptiveHeight: true,
adaptiveWidth: true
}); });
}); });