Skip to content
Snippets Groups Projects
Commit 9218afc6 authored by mohamedtimestwo's avatar mohamedtimestwo
Browse files

Loaded About Page

parent 1daaf254
No related branches found
No related tags found
No related merge requests found
main/website/about/CaptureX.PNG

200 KiB

main/website/about/Picture1.png

340 KiB

main/website/about/Picture2.png

346 KiB

main/website/about/Picture3.png

271 KiB

main/website/about/Picture4.png

35.5 KiB

main/website/about/Picture5.png

99.1 KiB

<html>
<head>
<meta name="metaport" content="width=device-width, initial-scale=1">
<title>Fantasmix | About</title>
<link rel="icon" href="CaptureX.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<ul>
<li><img src = "CaptureX.png" class = "logo"></li>
<li><a href="#home">Home</a></li>
<li><a href="#About">About Project</a></li>
<li><a href="#Generate">Generate Music</a></li>
<li><a href="#Login">Login</a></li>
</ul>
<br>
<div class="container-fluid">
<h1 class="animated fadeInUp">- About Project -</h1>
<hr>
<h2 class="animated fadeInUp">Our Mission</h2>
<p class="animated fadeInUp">Our mission is to generate music to inspire originality and provide those with unique exclusive tunes.</p>
<p class="animated fadeInUp"><strong>Enter the Fantasmix.<strong></p>
<hr>
<h2 class="animated fadeInUp">Features</h2>
<div class = "container text-center">
<div class = "col-md-4">
<i class = "far fa-hdd"></i>
<h4 class="animated fadeInUp">Save your tunes on your HDD.</h4>
</div>
<div class = "col-md-4">
<i class = "fab fa-searchengin"></i>
<h4 class="animated fadeInUp">Search from a ton of genres and users.</h4>
</div>
<div class = "col-md-4">
<i class = "fas fa-upload"></i>
<h4 class="animated fadeInUp">Upload your own creations.</h4>
</div>
<div class = "col-md-4 col-md-offset-2">
<i class = "fab fa-creative-commons"></i>
<h4 class="animated fadeInUp">Enjoy a select library of royalty-free music.</h4>
</div>
<div class = "col-md-4">
<i class = "fa fa-gears" style="font-size:55px"></i>
<h4 class="animated fadeInUp">Jump in to the intuitive music generator.</h4>
</div>
</div>
<hr class = "finalhr">
<h3 class="animated fadeInUp">Meet the Team!</h3>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href = "#" data-toggle="tooltip" title="Basketball star and the head honcho of Fantasmix. Anything need to know, ask him.">
<img src="Picture1.png" alt="Team1" style="width:100%">
</a>
<div class="caption">
<p class="animated fadeInUp">Jakob Au - Scrum Master/Front-end Developer</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#" data-toggle="tooltip" title="Professional League of Legends player and Bootstrap master. The one who gave Fantasmix its name.">
<img src="Picture2.png" alt="Team2" style="width:100%">
</a>
<div class="caption">
<p class="animated fadeInUp">Tyler Hooper - Business Manager/Front-end Developer</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#" data-toggle="tooltip" title="The brains behind the algorithm. The master of Python and various music modules. Also makes fire music generated mixtapes.">
<img src="Picture4.png" alt="Team3" style="width:100%">
</a>
<div class="caption">
<p class="animated fadeInUp">Stefano Arnone - Chief Technical Designer/Back-end Developer</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-offset-2">
<div class="thumbnail">
<a href="#" data-toggle="tooltip" title="The Hulk but human. Has a passion for bodybuilding. The one who oversees the meetings of the Fantasmix Order.">
<img src="Picture3.png" alt="Team4" style="width:100%">
</a>
<div class="caption">
<p class="animated fadeInUp">Mohammed Hassan - Operations Manager/Front-end Developer</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#" data-toggle="tooltip" title="Master of Memes. The man behind the very website you are reading.">
<img src="Picture5.png" alt="Team5" style="width:100%">
</a>
<div class="caption">
<p class="animated fadeInUp">Mohamed Mohamed - Aesthetic Developer/Front-end Developer</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron">
</div>
</body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>
body {
background-image: url("hpwallpaper.jpg");
background-repeat: no-repeat;
background-size: 5000px;
animation: breath 30s linear infinite
}
@keyframes breath {
0% { background-size: 120% auto; }
50% { background-size: 140% auto; }
100% { background-size: 120% auto; }
}
.logo {
width: 120px;
height: 100px;
margin-left: 250px;
text-decoration: none;
border-radius: 10px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
padding-bottom: 10px;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 80px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: black;
font-size: 20px;
text-decoration: none;
transition: 0.3s;
}
li a:hover{
color: black;
text-decoration: underline #00FFFF;
}
.container-fluid {
padding-top: 1px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
}
h1 {
text-align: center;
font-family: Roboto;
}
hr {
width: 50%;
color: #00FFFF;
}
.finalhr {
width: 100%;
}
i {
font-size: 55px;
transition: 0.3s;
}
i:hover {
color: #00FFFF;
}
h2 {
text-align: center;
font-family: Roboto;
}
p {
margin-top: 20px;
font-size: 20px;
text-align: center;
font-family: Roboto;
color: black;
}
h4 {
font-family: Roboto;
}
h3 {
text-align: center;
font-family: Roboto;
font-size: 30px;
}
.container {
margin-top: 20px;
text-align: center;
}
.caption{
font-family: Roboto;
}
.jumbotron {
margin-bottom: 0;
background-image: url("hpwallpaper.jpg");
background-size: 1500px;
animation: breath 30s linear infinite
}
main/website/about/hpwallpaper.jpg

97.6 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment