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>
<header class="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>
</header>
<div class="content">
<div id="top-spacer"></div>
<div class="test-slider slick-slider slick-dotted draggable outer-slider-div">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>
<div class="image-container">
<a href="https://double-darling-duo-deluxe.itch.io/so-bow-y-cute">
<img src="/home/shadow8t4/git/shadow8t4-website/assets/images/420/so-bow-y-cute.png"></img>
</a>
</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>
</body>

29
main.css
View file

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

7
main.js
View file

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