Commit 78b05098 authored by Imran Hussain's avatar Imran Hussain
Browse files

Put a plaster over the sucs website. 

New landing page that makes the soc/site not look like it's from 2003.

This is only a temp fix of the problem of the website looking old
parent a80ce238

htdocs/index.html

0 → 100644
+360 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">



<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->



	<title>Swansea University Computer Society</title>



	<!-- Google font -->

	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CVarela+Round" rel="stylesheet">



	<!-- Bootstrap -->

	<link type="text/css" rel="stylesheet" href="plaster-files/css/bootstrap.min.css" />



	<!-- Owl Carousel -->

	<link type="text/css" rel="stylesheet" href="plaster-files/css/owl.carousel.css" />

	<link type="text/css" rel="stylesheet" href="plaster-files/css/owl.theme.default.css" />



	<!-- Magnific Popup -->

	<link type="text/css" rel="stylesheet" href="plaster-files/css/magnific-popup.css" />



	<!-- Font Awesome Icon -->

	<link rel="stylesheet" href="plaster-files/css/font-awesome.min.css">



	<!-- Custom stlylesheet -->

	<link type="text/css" rel="stylesheet" href="plaster-files/css/style.css" />



	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

	<!--[if lt IE 9]>

		<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

	<![endif]-->

</head>



<body>

	<!-- Header -->

	<header id="home">

		<!-- Background Image -->

		<div class="bg-img" style="background-image: url('./plaster-files/img/background1.jpg');">

			<div class="overlay"></div>

		</div>

		<!-- /Background Image -->



		<!-- Nav -->

		<nav id="nav" class="navbar nav-transparent">

			<div class="container">



				<div class="navbar-header">

					<!-- Logo -->

					<div class="navbar-brand">

						<a href="index.html">

							<img class="logo" src="plaster-files/img/sucslogo_trans.svg" alt="logo">

							<img class="logo-alt" src="plaster-files/img/sucslogo_trans.svg" alt="logo">

						</a>

					</div>

					<!-- /Logo -->



					<!-- Collapse nav button -->

					<div class="nav-collapse">

						<span></span>

					</div>

					<!-- /Collapse nav button -->

				</div>



				<!--  Main navigation  -->

				<ul class="main-nav nav navbar-nav navbar-right">

					<li><a href="#home">Home</a></li>

					<li><a href="#about">About</a></li>

					<li><a href="#service">Services</a></li>

					<li><a href="#contact">Contact</a></li>

					<li><a href=https://sucs.org/index.php>Main Site</a></li>

				</ul>

				<!-- /Main navigation -->



			</div>

		</nav>

		<!-- /Nav -->



		<!-- home wrapper -->

		<div class="home-wrapper">

			<div class="container">

				<div class="row">



					<!-- home content -->

					<div class="col-md-10 col-md-offset-1">

						<div class="home-content">

							<h1 class="white-text">Swansea University Computer Society</h1>

							<p class="white-text">SUCS is one of the university's longest-running and largest societies. In addition to providing members with a range of IT services, we hold regular events and socials throughout the year.

							</p>

							<button class="white-btn"><a href=https://sucs.org/join>Join Now!</a></button>

							<button class="main-btn"><a href=#about>Learn more</a></button>

						</div>

					</div>

					<!-- /home content -->



				</div>

			</div>

		</div>

		<!-- /home wrapper -->



	</header>

	<!-- /Header -->



	<!-- About -->

	<div id="about" class="section md-padding">



		<!-- Container -->

		<div class="container">



			<!-- Row -->

			<div class="row">



				<!-- Section header -->

				<div class="section-header text-center">

					<h2 class="title">A little about us...</h2>

				</div>

				<!-- /Section header -->



				<!-- about -->

				<div class="col-md-6">

					<!--<div class="section-header">

						<h2 class="title">Breif Outline</h2>

					</div>-->

					<p>Established in 1988 we are a community of people that enjoy technology and being creative. We also offer a wide variety of services that our members greatly benefit from.</p>

					<div class="feature">

						<i class="fa fa-check"></i>

						<p>Hold regular events both technical and non-technical.</p>

					</div>

					<div class="feature">

						<i class="fa fa-check"></i>

						<p>Have several active projects going on that any member can join in on.</p>

					</div>

					<div class="feature">

						<i class="fa fa-check"></i>

						<p>Offer our members a dedicated 24/7 space.</p>

					</div>

					<div class="feature">

						<i class="fa fa-check"></i>

						<p>Active alumni network with members working at RedHat, Google, Microsoft etc...</p>

					</div>

				</div>



				<div class="col-md-6">

					<p>

						Come chat with us on one of the oldest Bulletin Board Systems in the UK, Milliways!. Exisiting members can log in by SSH'ing into silver (ssh sucs.org) and running the command 'mw'. Non-members can join by SSH'ing in as the user BBS with the password 'bbs' (ssh bbs@sucs.org). There is a quick guide on <a href="https://sucs.org/Knowledge/Help/SUCS%20Services/Using%20Milliways">Using MW</a> that is recommended.

					</p>

					<p>

						We also run a Discord server that is more easily accessible on a wider variety of platforms.

					</p>

				</div>





				<!-- /about -->



			</div>

			<!-- /Row -->



		</div>

		<!-- /Container -->



	</div>

	<!-- /About -->



	<!-- Service -->

	<div id="service" class="section md-padding">



		<!-- Container -->

		<div class="container">



			<!-- Row -->

			<div class="row">



				<!-- Section header -->

				<div class="section-header text-center">

					<h2 class="title">What we offer</h2>

				</div>

				<!-- /Section header -->



				<!-- service -->

				<div class="col-md-4 col-sm-6">

					<div class="service">

						<i class="fa fa-calendar"></i>

						<h3>Regular Events</h3>

						<p>We run regular technical and non-technical events.</p>

					</div>

				</div>

				<!-- /service -->



				<!-- service -->

				<div class="col-md-4 col-sm-6">

					<div class="service">

						<i class="fa fa-building"></i>

						<h3>Dedicated Lab</h3>

						<p>We run our own dedicated lab that's accessible 24/7.</p>

					</div>

				</div>

				<!-- /service -->



				<!-- service -->

				<div class="col-md-4 col-sm-6">

					<div class="service">

						<i class="fa fa-users"></i>

						<h3>Community</h3>

						<p>With over 100 members from all manner of backgrounds SUCS has a rich diverse community.</p>

					</div>

				</div>

				<!-- /service -->



				<!-- service -->

				<div class="col-md-4 col-sm-6">

					<div class="service">

						<i class="fa fa-laptop"></i>

						<h3>Virtual Machines</h3>

						<p>Members can request virtual machines for use for projects or prototyping.</p>

					</div>

				</div>

				<!-- /service -->



				<!-- service -->

				<div class="col-md-4 col-sm-6">

					<div class="service">

						<i class="fa fa-server"></i>

						<h3>Web Hosting</h3>

						<p>Members can take advantage of our web-hosting faculties to showcase their work or ideas.</p>

					</div>

				</div>

				<!-- /service -->



				<!-- service -->

				<div class="col-md-4 col-sm-6">

					<div class="service">

						<i class="fa fa-code"></i>

						<h3>Projects</h3>

						<p>We run numerous projects that people can jump in and out. Support for hosting your own projects is possible with our own Gitlab server</p>

					</div>

				</div>

				<!-- /service -->



			</div>

			<!-- /Row -->



		</div>

		<!-- /Container -->



	</div>

	<!-- /Service -->



	<!-- Contact -->

	<div id="contact" class="section md-padding">



		<!-- Container -->

		<div class="container">



			<!-- Row -->

			<div class="row">



				<!-- Section-header -->

				<div class="section-header text-center">

					<h2 class="title">Get in touch</h2>

				</div>

				<!-- /Section-header -->



				<!-- contact -->

				<div class="col-sm-4">

					<div class="contact">

						<i class="fa fa-facebook"></i>

						<h3><a href="https://sucs.org/fb">Facebook</a></h3>

					</div>

				</div>

				<!-- /contact -->





				<!-- contact -->

				<div class="col-sm-4">

					<div class="contact">

						<i class="fa fa-envelope"></i>

						<h3><a href="mailto:joinus@sucs.org?Subject=Hello">Email</a></h3>

						<p>joinus@sucs.org</p>

					</div>

				</div>

				<!-- /contact -->



				<!-- contact -->

				<div class="col-sm-4">

					<div class="contact">

						<i class="fa fa-twitter"></i>

						<h3><a href="https://twitter.com/sucsexec">Twitter</a></h3>

					</div>

				</div>

				<!-- /contact -->





			</div>

			<!-- /Row -->



		</div>

		<!-- /Container -->



	</div>

	<!-- /Contact -->





	<!-- Footer -->

	<footer id="footer" class="sm-padding bg-dark">



		<!-- Container -->

		<div class="container">



			<!-- Row -->

			<div class="row">



				<div class="col-md-12">





					<!-- footer copyright -->

					<div class="footer-copyright">

						<p>Designed stolen from <a href="https://colorlib.com" target="_blank">Colorlib</a> (with permission)</p>

					</div>

					<!-- /footer copyright -->



				</div>



			</div>

			<!-- /Row -->



		</div>

		<!-- /Container -->



	</footer>

	<!-- /Footer -->



	<!-- Back to top -->

	<div id="back-to-top"></div>

	<!-- /Back to top -->



	<!-- Preloader -->

	<div id="preloader">

		<div class="preloader">

			<span></span>

			<span></span>

			<span></span>

			<span></span>

		</div>

	</div>

	<!-- /Preloader -->



	<!-- jQuery Plugins -->

	<script type="text/javascript" src="plaster-files/js/jquery.min.js"></script>

	<script type="text/javascript" src="plaster-files/js/bootstrap.min.js"></script>

	<script type="text/javascript" src="plaster-files/js/owl.carousel.min.js"></script>

	<script type="text/javascript" src="plaster-files/js/jquery.magnific-popup.js"></script>

	<script type="text/javascript" src="plaster-files/js/main.js"></script>



</body>



</html>

htdocs/plaster-files/css/bootstrap.min.css

0 → 100644
+6 −0

File added.

Preview size limit exceeded, changes collapsed.

htdocs/plaster-files/css/font-awesome.min.css

0 → 100644
+4 −0

File added.

Preview size limit exceeded, changes collapsed.

htdocs/plaster-files/css/magnific-popup.css

0 → 100644
+351 −0
Original line number Diff line number Diff line 
/* Magnific Popup CSS */

.mfp-bg {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1042;

  overflow: hidden;

  position: fixed;

  background: #0b0b0b;

  opacity: 0.8; }



.mfp-wrap {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1043;

  position: fixed;

  outline: none !important;

  -webkit-backface-visibility: hidden; }



.mfp-container {

  text-align: center;

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  padding: 0 8px;

  box-sizing: border-box; }



.mfp-container:before {

  content: '';

  display: inline-block;

  height: 100%;

  vertical-align: middle; }



.mfp-align-top .mfp-container:before {

  display: none; }



.mfp-content {

  position: relative;

  display: inline-block;

  vertical-align: middle;

  margin: 0 auto;

  text-align: left;

  z-index: 1045; }



.mfp-inline-holder .mfp-content,

.mfp-ajax-holder .mfp-content {

  width: 100%;

  cursor: auto; }



.mfp-ajax-cur {

  cursor: progress; }



.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {

  cursor: -moz-zoom-out;

  cursor: -webkit-zoom-out;

  cursor: zoom-out; }



.mfp-zoom {

  cursor: pointer;

  cursor: -webkit-zoom-in;

  cursor: -moz-zoom-in;

  cursor: zoom-in; }



.mfp-auto-cursor .mfp-content {

  cursor: auto; }



.mfp-close,

.mfp-arrow,

.mfp-preloader,

.mfp-counter {

  -webkit-user-select: none;

  -moz-user-select: none;

  user-select: none; }



.mfp-loading.mfp-figure {

  display: none; }



.mfp-hide {

  display: none !important; }



.mfp-preloader {

  color: #CCC;

  position: absolute;

  top: 50%;

  width: auto;

  text-align: center;

  margin-top: -0.8em;

  left: 8px;

  right: 8px;

  z-index: 1044; }

  .mfp-preloader a {

    color: #CCC; }

    .mfp-preloader a:hover {

      color: #FFF; }



.mfp-s-ready .mfp-preloader {

  display: none; }



.mfp-s-error .mfp-content {

  display: none; }



button.mfp-close,

button.mfp-arrow {

  overflow: visible;

  cursor: pointer;

  background: transparent;

  border: 0;

  -webkit-appearance: none;

  display: block;

  outline: none;

  padding: 0;

  z-index: 1046;

  box-shadow: none;

  touch-action: manipulation; }



button::-moz-focus-inner {

  padding: 0;

  border: 0; }



.mfp-close {

  width: 44px;

  height: 44px;

  line-height: 44px;

  position: absolute;

  right: 0;

  top: 0;

  text-decoration: none;

  text-align: center;

  opacity: 0.65;

  padding: 0 0 18px 10px;

  color: #FFF;

  font-style: normal;

  font-size: 28px;

  font-family: Arial, Baskerville, monospace; }

  .mfp-close:hover,

  .mfp-close:focus {

    opacity: 1; }

  .mfp-close:active {

    top: 1px; }



.mfp-close-btn-in .mfp-close {

  color: #333; }



.mfp-image-holder .mfp-close,

.mfp-iframe-holder .mfp-close {

  color: #FFF;

  right: -6px;

  text-align: right;

  padding-right: 6px;

  width: 100%; }



.mfp-counter {

  position: absolute;

  top: 0;

  right: 0;

  color: #CCC;

  font-size: 12px;

  line-height: 18px;

  white-space: nowrap; }



.mfp-arrow {

  position: absolute;

  opacity: 0.65;

  margin: 0;

  top: 50%;

  margin-top: -55px;

  padding: 0;

  width: 90px;

  height: 110px;

  -webkit-tap-highlight-color: transparent; }

  .mfp-arrow:active {

    margin-top: -54px; }

  .mfp-arrow:hover,

  .mfp-arrow:focus {

    opacity: 1; }

  .mfp-arrow:before,

  .mfp-arrow:after {

    content: '';

    display: block;

    width: 0;

    height: 0;

    position: absolute;

    left: 0;

    top: 0;

    margin-top: 35px;

    margin-left: 35px;

    border: medium inset transparent; }

  .mfp-arrow:after {

    border-top-width: 13px;

    border-bottom-width: 13px;

    top: 8px; }

  .mfp-arrow:before {

    border-top-width: 21px;

    border-bottom-width: 21px;

    opacity: 0.7; }



.mfp-arrow-left {

  left: 0; }

  .mfp-arrow-left:after {

    border-right: 17px solid #FFF;

    margin-left: 31px; }

  .mfp-arrow-left:before {

    margin-left: 25px;

    border-right: 27px solid #3F3F3F; }



.mfp-arrow-right {

  right: 0; }

  .mfp-arrow-right:after {

    border-left: 17px solid #FFF;

    margin-left: 39px; }

  .mfp-arrow-right:before {

    border-left: 27px solid #3F3F3F; }



.mfp-iframe-holder {

  padding-top: 40px;

  padding-bottom: 40px; }

  .mfp-iframe-holder .mfp-content {

    line-height: 0;

    width: 100%;

    max-width: 900px; }

  .mfp-iframe-holder .mfp-close {

    top: -40px; }



.mfp-iframe-scaler {

  width: 100%;

  height: 0;

  overflow: hidden;

  padding-top: 56.25%; }

  .mfp-iframe-scaler iframe {

    position: absolute;

    display: block;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);

    background: #000; }



/* Main image in popup */

img.mfp-img {

  width: auto;

  max-width: 100%;

  height: auto;

  display: block;

  line-height: 0;

  box-sizing: border-box;

  padding: 40px 0 40px;

  margin: 0 auto; }



/* The shadow behind the image */

.mfp-figure {

  line-height: 0; }

  .mfp-figure:after {

    content: '';

    position: absolute;

    left: 0;

    top: 40px;

    bottom: 40px;

    display: block;

    right: 0;

    width: auto;

    height: auto;

    z-index: -1;

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);

    background: #444; }

  .mfp-figure small {

    color: #BDBDBD;

    display: block;

    font-size: 12px;

    line-height: 14px; }

  .mfp-figure figure {

    margin: 0; }



.mfp-bottom-bar {

  margin-top: -36px;

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  cursor: auto; }



.mfp-title {

  text-align: left;

  line-height: 18px;

  color: #F3F3F3;

  word-wrap: break-word;

  padding-right: 36px; }



.mfp-image-holder .mfp-content {

  max-width: 100%; }



.mfp-gallery .mfp-image-holder .mfp-figure {

  cursor: pointer; }



@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {

  /**

       * Remove all paddings around the image on small screen

       */

  .mfp-img-mobile .mfp-image-holder {

    padding-left: 0;

    padding-right: 0; }

  .mfp-img-mobile img.mfp-img {

    padding: 0; }

  .mfp-img-mobile .mfp-figure:after {

    top: 0;

    bottom: 0; }

  .mfp-img-mobile .mfp-figure small {

    display: inline;

    margin-left: 5px; }

  .mfp-img-mobile .mfp-bottom-bar {

    background: rgba(0, 0, 0, 0.6);

    bottom: 0;

    margin: 0;

    top: auto;

    padding: 3px 5px;

    position: fixed;

    box-sizing: border-box; }

    .mfp-img-mobile .mfp-bottom-bar:empty {

      padding: 0; }

  .mfp-img-mobile .mfp-counter {

    right: 5px;

    top: 3px; }

  .mfp-img-mobile .mfp-close {

    top: 0;

    right: 0;

    width: 35px;

    height: 35px;

    line-height: 35px;

    background: rgba(0, 0, 0, 0.6);

    position: fixed;

    text-align: center;

    padding: 0; } }



@media all and (max-width: 900px) {

  .mfp-arrow {

    -webkit-transform: scale(0.75);

    transform: scale(0.75); }

  .mfp-arrow-left {

    -webkit-transform-origin: 0;

    transform-origin: 0; }

  .mfp-arrow-right {

    -webkit-transform-origin: 100%;

    transform-origin: 100%; }

  .mfp-container {

    padding-left: 6px;

    padding-right: 6px; } }

htdocs/plaster-files/css/owl.carousel.css

0 → 100644
+170 −0
Original line number Diff line number Diff line 
/**

 * Owl Carousel v2.2.1

 * Copyright 2013-2017 David Deutsch

 * Licensed under  ()

 */

/*

 *  Owl Carousel - Core

 */

.owl-carousel {

  display: none;

  width: 100%;

  -webkit-tap-highlight-color: transparent;

  /* position relative and z-index fix webkit rendering fonts issue */

  position: relative;

  z-index: 1; }

  .owl-carousel .owl-stage {

    position: relative;

    -ms-touch-action: pan-Y;

    -moz-backface-visibility: hidden;

    /* fix firefox animation glitch */ }

  .owl-carousel .owl-stage:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0; }

  .owl-carousel .owl-stage-outer {

    position: relative;

    overflow: hidden;

    /* fix for flashing background */

    -webkit-transform: translate3d(0px, 0px, 0px); }

  .owl-carousel .owl-wrapper,

  .owl-carousel .owl-item {

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0); }

  .owl-carousel .owl-item {

    position: relative;

    min-height: 1px;

    float: left;

    -webkit-backface-visibility: hidden;

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none; }

  .owl-carousel .owl-item img {

    display: block;

    width: 100%; }

  .owl-carousel .owl-nav.disabled,

  .owl-carousel .owl-dots.disabled {

    display: none; }

  .owl-carousel .owl-nav .owl-prev,

  .owl-carousel .owl-nav .owl-next,

  .owl-carousel .owl-dot {

    cursor: pointer;

    cursor: hand;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none; }

  .owl-carousel.owl-loaded {

    display: block; }

  .owl-carousel.owl-loading {

    opacity: 0;

    display: block; }

  .owl-carousel.owl-hidden {

    opacity: 0; }

  .owl-carousel.owl-refresh .owl-item {

    visibility: hidden; }

  .owl-carousel.owl-drag .owl-item {

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none; }

  .owl-carousel.owl-grab {

    cursor: move;

    cursor: grab; }

  .owl-carousel.owl-rtl {

    direction: rtl; }

  .owl-carousel.owl-rtl .owl-item {

    float: right; }



/* No Js */

.no-js .owl-carousel {

  display: block; }



/*

 *  Owl Carousel - Animate Plugin

 */

.owl-carousel .animated {

  animation-duration: 1000ms;

  animation-fill-mode: both; }



.owl-carousel .owl-animated-in {

  z-index: 0; }



.owl-carousel .owl-animated-out {

  z-index: 1; }



.owl-carousel .fadeOut {

  animation-name: fadeOut; }



@keyframes fadeOut {

  0% {

    opacity: 1; }

  100% {

    opacity: 0; } }



/*

 * 	Owl Carousel - Auto Height Plugin

 */

.owl-height {

  transition: height 500ms ease-in-out; }



/*

 * 	Owl Carousel - Lazy Load Plugin

 */

.owl-carousel .owl-item .owl-lazy {

  opacity: 0;

  transition: opacity 400ms ease; }



.owl-carousel .owl-item img.owl-lazy {

  transform-style: preserve-3d; }



/*

 * 	Owl Carousel - Video Plugin

 */

.owl-carousel .owl-video-wrapper {

  position: relative;

  height: 100%;

  background: #000; }



.owl-carousel .owl-video-play-icon {

  position: absolute;

  height: 80px;

  width: 80px;

  left: 50%;

  top: 50%;

  margin-left: -40px;

  margin-top: -40px;

  background: url("owl.video.play.png") no-repeat;

  cursor: pointer;

  z-index: 1;

  -webkit-backface-visibility: hidden;

  transition: transform 100ms ease; }



.owl-carousel .owl-video-play-icon:hover {

  -ms-transform: scale(1.3, 1.3);

      transform: scale(1.3, 1.3); }



.owl-carousel .owl-video-playing .owl-video-tn,

.owl-carousel .owl-video-playing .owl-video-play-icon {

  display: none; }



.owl-carousel .owl-video-tn {

  opacity: 0;

  height: 100%;

  background-position: center center;

  background-repeat: no-repeat;

  background-size: contain;

  transition: opacity 400ms ease; }



.owl-carousel .owl-video-frame {

  position: relative;

  z-index: 1;

  height: 100%;

  width: 100%; }