[AppDB] Add screenshot carousel to front page
Rosanne DiMesio
dimesio at earthlink.net
Thu Aug 31 14:36:38 CDT 2017
Signed-off-by: Rosanne DiMesio <dimesio at earthlink.net>
---
css/styles.css | 5 +++++
index.php | 62 +++++++++++++++++++++++++++++++++++++++++++++++++---------
2 files changed, 58 insertions(+), 9 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index dcde735..be5eef0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -68,6 +68,11 @@ a.btn, a.btn:visited {
overflow: auto;
}
+.carousel-control.left,
+.carousel-control.right {
+ background-image: none
+}
+
/*
=====================================================================================================================
PAGE LAYOUT
diff --git a/index.php b/index.php
index 71e32b4..b63b55d 100644
--- a/index.php
+++ b/index.php
@@ -98,12 +98,10 @@ apidb_header("Wine Application Database");
?>
-<div class="row">
- <div class="col-md-6 col-lg-8">
-
<h1 class="whq-app-title">Welcome</h1>
-
-<p>This is the Wine Application Database (AppDB). Here you can get information on application
+ <div class="row">
+ <div class="col-md-6">
+ <p>This is the Wine Application Database (AppDB). Here you can get information on application
compatibility with Wine.</p>
<?php
@@ -173,10 +171,56 @@ else
echo "</p>\n";
?>
-
-</div>
- <div class="col-md-6 col-lg-4">
- <img src="images/appdb_montage.jpg" class="fill-width" alt="Wine AppDB">
+ </div>
+
+ <div id="carouselScreenshots" class="carousel slide container col-md-6" data-ride="carousel">
+ <div class="carousel-inner" style="margin-bottom:10px">
+ <div class="item active">
+ <img src="images/steam.jpg" alt="First slide">
+ </div>
+ <div class="item">
+ <img src="images/outlook2010.jpg" alt="Second slide">
+ </div>
+ <div class="item">
+ <img src="images/eveonline.jpg" alt="Third slide">
+ </div>
+ <div class="item">
+ <img src="images/photoshopcc2015.jpg" alt="Fourth slide">
+ </div>
+ <div class="item">
+ <img src="images/falloutnv.jpg" alt="Fifth slide">
+ </div>
+ <div class="item">
+ <img src="images/reason.jpg" alt="Sixth slide">
+ </div>
+ <div class="item">
+ <img src="images/skyrim_specialed.jpg" alt="Seventh slide">
+ </div>
+ <div class="item">
+ <img src="images/goggalaxy.jpg" alt="Eighth slide">
+ </div>
+ <div class="item">
+ <img src="images/wizard101.jpg" alt="Ninth slide">
+ </div>
+ <div class="item">
+ <img src="images/matlab.jpg" alt="Tenth slide">
+ </div>
+ <div class="item">
+ <img src="images/sims3.jpg" alt="Eleventh slide">
+ </div>
+ <div class="item">
+ <img src="images/metatrader5.jpg" alt="Twelfth slide">
+ </div>
+ </div>
+ <a class="left carousel-control" href="#carouselScreenshots" data-slide="prev">
+ <span class="glyphicon glyphicon-chevron-left"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="right carousel-control" href="#carouselScreenshots" data-slide="next">
+ <span class="glyphicon glyphicon-chevron-right"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
</div>
</div>
--
2.12.3
More information about the wine-patches
mailing list