gallery page

This commit is contained in:
phoenixbyrd
2020-11-11 13:15:43 -06:00
parent af8b1161e3
commit 6638a5b08a
20 changed files with 216 additions and 7 deletions

View File

@@ -15,6 +15,7 @@
<img src="./images/TwisterOSLogo-Large-New3.png" />
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="download.html">DOWNLOADS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="faq.html">FAQ</a></li>

View File

@@ -15,6 +15,7 @@
<img src="./images/TwisterOSLogo-Large-New3.png" />
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="download.html">DOWNLOADS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="faq.html">FAQ</a></li>

View File

@@ -15,6 +15,7 @@
<img src="./images/TwisterOSLogo-Large-New3.png" />
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="download.html">DOWNLOADS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="faq.html">FAQ</a></li>

155
gallery.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./carousel.css" />
<link rel="icon" href="favicon.png">
<title>Twister OS</title>
</head>
<body>
<main class="about">
<div class="nav">
<nav>
<img src="./images/TwisterOSLogo-Large-New3.png" />
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="download.html">DOWNLOADS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="https://checkout.square.site/merchant/ML5E5KGWRH8ME/checkout/GLDTDH4U5ZXZY5WJCCVEWIK7">DONATE</a></li>
</ul>
</nav>
</div>
<div class="gallery-container">
<div class="responsive">
<div class="gallery">
<a target="_blank" href="./gallery/desktop.png">
<img src="./gallery/desktop.png" alt="Desktop" width="600" height="400">
</a>
<div class="desc">Desktop</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="./gallery/netflix.png">
<img src="./gallery/netflix.png" alt="Netflix" width="600" height="400">
</a>
<div class="desc">Netflix Web App</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/xfinity-channels.png">
<img src="/gallery/xfinity-channels.png" alt="Xfinity Channels List" width="600" height="400">
</a>
<div class="desc">Xfinity TV Stream Web App</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/xfinity-show.png">
<img src="/gallery/xfinity-show.png" alt="Xfinity Show" width="600" height="400">
</a>
<div class="desc">Watch Xfinity Shows</div>
</div>
</div>
<br><br>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/spotify.png">
<img src="/gallery/spotify.png" alt="Spotify" width="600" height="400">
</a>
<div class="desc">Spotify Web App</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/hulu.png">
<img src="/gallery/hulu.png" alt="Hulu" width="600" height="400">
</a>
<div class="desc">Hulu Web App</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/sublime.png">
<img src="/gallery/sublime.png" alt="Sublime Text Editor 2" width="600" height="400">
</a>
<div class="desc">Sublime Text Editor 2</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/vscode.png">
<img src="/gallery/vscode.png" alt="vscode" width="600" height="400">
</a>
<div class="desc">Visual Studio Code</div>
</div>
</div>
<br><br>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/lutris1.png">
<img src="/gallery/lutris1.png" alt="Lutris 1" width="600" height="400">
</a>
<div class="desc">Lutris Library (1)</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/lutris2.png">
<img src="/gallery/lutris2.png" alt="Lutris 2" width="600" height="400">
</a>
<div class="desc">Lutris Library (2)</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/lutris3.png">
<img src="/gallery/lutris3.png" alt="Lutris 3" width="600" height="400">
</a>
<div class="desc">Lutris Library (3)</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="/gallery/lutris4.png">
<img src="/gallery/lutris4.png" alt="Lutris 4" width="600" height="400">
</a>
<div class="desc">Lutris Library (4)</div>
</div>
</div>
</div>
<footer style="margin-top: 100px;"><p>Twister OS 2020 | <a href="https://discord.gg/Fh8sjmu" target="_blank">Join our Discord!</a></p></footer>
</main>
</body>
</html>

BIN
gallery/desktop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
gallery/hulu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 848 KiB

BIN
gallery/lutris1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
gallery/lutris2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
gallery/lutris3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
gallery/lutris4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 575 KiB

BIN
gallery/netflix.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
gallery/spotify.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 498 KiB

BIN
gallery/sublime.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB

BIN
gallery/vscode.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

BIN
gallery/xfinity-show.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

@@ -16,6 +16,7 @@
<img src="./images/TwisterOSLogo-Large-New3.png" />
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="download.html">DOWNLOADS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="faq.html">FAQ</a></li>

View File

@@ -26,7 +26,7 @@ nav ul {
nav li {
display: inline;
margin-right: 20px;
margin-right: 10px;
font-weight: bold;
font-size: 20px;
color: #FACF46;
@@ -358,10 +358,58 @@ ul li {
}
/** Image Gallery **/
.gallery-container {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
div.gallery {
margin-left: 100px;
margin-top: 100px;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
font-weight: bold;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

View File

@@ -14,7 +14,8 @@
<nav>
<img src="./images/TwisterOSLogo-Large-New3.png" />
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="download.html">DOWNLOADS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="faq.html">FAQ</a></li>

View File

@@ -15,6 +15,7 @@
<img src="./images/TwisterOSLogo-Large-New3.png" />
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="download.html">DOWNLOADS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="faq.html">FAQ</a></li>