From 9a45453f1c0e56845861b49ec27e5933d007faf6 Mon Sep 17 00:00:00 2001 From: Alex Huddleston Date: Thu, 25 Jan 2018 04:59:30 -0600 Subject: [PATCH] Gallery images in place locally and linked appropriately, titles next. --- index.html | 55 ++++++++++++++++++++++++++++++++++++++++++++++-------- main.css | 29 ++++++++++++++++++---------- main.js | 7 ++++++- 3 files changed, 72 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index a7be028..0980660 100644 --- a/index.html +++ b/index.html @@ -16,18 +16,57 @@
-

Testing...

+

Werefox Software Portfolio Page

+

A Personalized Portfolio Site

-
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
+
+
+ + + +
+
+

So Bow-y Cute

+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
diff --git a/main.css b/main.css index 208cac4..70c17f3 100644 --- a/main.css +++ b/main.css @@ -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; } diff --git a/main.js b/main.js index 384eec5..51e3d63 100644 --- a/main.js +++ b/main.js @@ -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 }); });