Site layout updated with image slider showing the various themes available
phoenixbyrd
36
css/main.css
Normal file
@@ -0,0 +1,36 @@
|
||||
.twister {
|
||||
background-color: #2D2C8A;
|
||||
}
|
||||
|
||||
|
||||
ul.navbar-nav li a, ul.navbar-nav li a:visited {
|
||||
color: #FACF46 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.navbar-nav li a:hover, ul.navbar-nav li a:active {
|
||||
color: #FACF46 !important;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul.navbar-nav li.active a {
|
||||
color: #FACF46 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img.change {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
img.smaller {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
BIN
images/Box86Logo.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/CPiTitle.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/HowDoYouPi.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
images/PiLabs.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
images/TwisterOSLogo.png
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
images/iraspbian-dark.png
Normal file
|
After Width: | Height: | Size: 555 KiB |
BIN
images/iraspbian.png
Normal file
|
After Width: | Height: | Size: 603 KiB |
BIN
images/nighthawk.png
Normal file
|
After Width: | Height: | Size: 592 KiB |
BIN
images/raspbian95.png
Normal file
|
After Width: | Height: | Size: 504 KiB |
BIN
images/raspbianx.png
Normal file
|
After Width: | Height: | Size: 648 KiB |
BIN
images/raspbianxp.png
Normal file
|
After Width: | Height: | Size: 669 KiB |
BIN
images/twisteros.png
Normal file
|
After Width: | Height: | Size: 89 KiB |
98
index.html
@@ -5,20 +5,108 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
||||
<!-- Main CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||
|
||||
|
||||
<title>Twister OS</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="twister">
|
||||
|
||||
<div class="jumbotron text-center">
|
||||
<h1>Twister OS</h1>
|
||||
<nav class="navbar navbar-expand-lg navbar-light twister center">
|
||||
<!--<a class="navbar-brand" href="#">Twister OS</a>-->
|
||||
|
||||
<img src="images/TwisterOSLogo.png" alt="Twister OS Logo">
|
||||
|
||||
<div class="collapse navbar-collapse center" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Downloads</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Howto</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">FAQ</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<br>
|
||||
<!-- Carousel Slider Begins -->
|
||||
|
||||
<div id="myCarousel" class="carousel slide center" data-ride="carousel">
|
||||
<!-- Carousel indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="3"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="4"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="5"></li>
|
||||
<li data-target="#myCarousel" data-slide-to="6"></li>
|
||||
</ol>
|
||||
<!-- Wrapper for carousel items -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/twisteros.png" alt="Twister OS Theme" class="smaller center">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/raspbian95.png" alt="Raspbian 95 Theme" class="smaller center">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/raspbianxp.png" alt="Raspbian XP Theme" class="smaller center">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/raspbianx.png" alt="Raspbian X Theme" class="smaller center">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/nighthawk.png" alt="Nighthawk Theme" class="smaller center">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/iraspbian.png" alt="iRaspbian - Light Theme" class="smaller center">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/iraspbian-dark.png" alt="iRaspbian - Dark Theme" class="smaller center">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Carousel controls -->
|
||||
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon"></span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
|
||||
<span class="carousel-control-next-icon"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Carousel Slider Ends -->
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<img src="images/Box86Logo.png" alt="Bos86 Logo">
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<img src="images/PiLabs.png" alt="PiLabs Logo">
|
||||
</div>
|
||||
<div class=col-sm-4">
|
||||
<img src="images/CPiTitle.png" alt="Commander PI Logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</html>
|
||||
|
||||