Commit f4fcba5e authored by Deion Menor's avatar Deion Menor

Try out new approach to homepage design

parent e9545099
This diff is collapsed.
This diff is collapsed.
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
<link rel="stylesheet" href="/files/css/mymusiclist.css"> <link rel="stylesheet" href="/files/css/mymusiclist.css">
<link rel="stylesheet" href="/files/css/w3.css"> <link rel="stylesheet" href="/files/css/w3.css">
<link rel="stylesheet" href="/files/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/files/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head> </head>
<body> <body>
<header> <header>
......
...@@ -2,42 +2,114 @@ ...@@ -2,42 +2,114 @@
{% block title %}MyMusicList{% endblock %} {% block title %}MyMusicList{% endblock %}
{% block sidebar %}
{% endblock %}
{% block content %} {% block content %}
<div class="boxified main">
<div class="w3-display-container" style="width:100em; height:50em;overflow:hidden;">
<div class="hero">
<img class="mySlides w3-animate-fade" src="/files/images/hero1.jpg" style="width:100%">
<img class="mySlides w3-animate-fade" src="/files/images/hero2.jpg" style="width:100%">
</div>
<div class="w3-display-middle w3-display-container w3-large">
<div class="w3-panel w3-green w3-padding">
<h1 class="w3-text-white">
<b>Easily keep track of all your favorite artists in one convenient place</b></h1>
</div>
<div class="w3-display-bottom">
<a href="{% url 'signup' %}" class="w3-btn w3-white w3-padding-up ">Sign Up Now</a>
</div>
</div>
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 2 seconds
}
</script>
<div class="w3-panel w3-display-container w3-white w3-center" style="height:50em">
<div class="w3-margin w3-display-middle">
<h2>What is MyMusicList?</h2> <h2>What is MyMusicList?</h2>
<p> <div class="w3-display-container" style="height:10em;">
<img src="/files/images/logo.jpg" /> </br> </br> <img src="/files/images/logo.jpg"class="w3-display-middle"style="height:10em"/>
Do you want to see music like you’ve never before? Do you want to make a playlist without it feeling lifeless and a hassle? Do you want to show off your hip-and-cool music with your friends?
MyMusicList is the answer. </div>
<p class="text_home">
Do you want to see music like you’ve never before? Do you want to make a playlist without it
feeling lifeless and a hassle? Do you want to show off your hip-and-cool music with your friends?
MyMusicList is the answer.
</p> </p>
</div> </div>
<div class="boxified main"> </div>
<h2>Features</h2> <div class="main">
<p>
<div class="img-container">
<img src="/files/images/image2.png" /> <div class="w3-row-padding w3-blue">
<div class="w3-card-2 w3-col-s4 " style="width:30%">
<img src="/files/images/image2.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center">
<p> <p>
“Playlist Manager”</br> “Playlist Manager”</br>
MyMusicList features a simplistic playlist manager that is created for the user’s convenience but still allows a lot of features without overwhelming the user. With MyMusicList’s playlist manager, one can manage multiple playlists, organize music entries, and so much more. MyMusicList features a simplistic playlist manager that is created for the user’s convenience but still allows a lot of features without overwhelming the user. With MyMusicList’s playlist manager, one can manage multiple playlists, organize music entries, and so much more.
</p> </p>
</div> </div>
<div class="img-container">
<img src="/files/images/image3.png" />
<p>“Customizable Tags”</br>
MyMusicList features customizable tags that you can attach to any music entry. It makes making playlists more personal and makes organizing music easier.
</p>
</div> </div>
<div class="img-container">
<img src="/files/images/image4.png" />
<div class="w3-card-2 w3-col-s4" style="width:30%">
<img src="/files/images/image4.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center">
<p>“S.S. Integration”</br> <p>“S.S. Integration”</br>
Your MyMusicList account can be integrated with your selected social media accounts, so you can share your playlists with your friends and followers. You don’t have to leave the site to listen to your playlist because MyMusicList is integrated with your preferred music streaming service. Your MyMusicList account can be integrated with your selected social media accounts, so you can share your playlists with your friends and followers. You don’t have to leave the site to listen to your playlist because MyMusicList is integrated with your preferred music streaming service.
</p> </p>
</div> </div>
</div>
<div class="w3-card-2 w3-col-s4 " style="width:30%">
<img src="/files/images/image3.png" alt="playlist" style="width:100%">
<div class="w3-container w3-center">
<p>“Customizable Tags”</br>
MyMusicList features customizable tags that you can attach to any music entry. It makes making playlists more personal and makes organizing music easier.
</p> </p>
</div> </div>
<div class="boxified main"> </div>
</div>
</div>
<div class="w3-panel w3-teal">
<h2>Meet The Team</h2> <h2>Meet The Team</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus magna eros. Nulla non mauris non mi ornare mattis vel vel diam. Suspendisse malesuada lacus at venenatis sollicitudin. Sed et ultrices ex. Praesent feugiat bibendum nibh. Sed commodo elementum turpis. Morbi faucibus nunc sagittis, rutrum nisl quis, fermentum orci.</br></br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus magna eros. Nulla non mauris non mi ornare mattis vel vel diam. Suspendisse malesuada lacus at venenatis sollicitudin. Sed et ultrices ex. Praesent feugiat bibendum nibh. Sed commodo elementum turpis. Morbi faucibus nunc sagittis, rutrum nisl quis, fermentum orci.</br></br>
...@@ -45,8 +117,15 @@ MyMusicList is the answer. ...@@ -45,8 +117,15 @@ MyMusicList is the answer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tristique risus. Cras molestie pretium urna, a lobortis diam dictum aliquet. Pellentesque non fermentum dolor, sed aliquet dolor. Etiam mauris ex, congue vehicula eleifend vel, hendrerit fermentum velit. In ac tempus justo. Aliquam nec rutrum nibh. Sed pulvinar ex sed ex tincidunt tempor. Praesent tristique semper mauris, vel pretium sapien congue a.</br></br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel tristique risus. Cras molestie pretium urna, a lobortis diam dictum aliquet. Pellentesque non fermentum dolor, sed aliquet dolor. Etiam mauris ex, congue vehicula eleifend vel, hendrerit fermentum velit. In ac tempus justo. Aliquam nec rutrum nibh. Sed pulvinar ex sed ex tincidunt tempor. Praesent tristique semper mauris, vel pretium sapien congue a.</br></br>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris suscipit nec velit non egestas. Quisque auctor viverra urna, at euismod turpis ornare id. Aliquam pharetra purus quis dui blandit tincidunt. Quisque massa ligula, malesuada vel leo eu, accumsan vulputate nulla. Integer faucibus malesuada pharetra. Duis varius sapien sit amet justo malesuada fringilla. Integer eget ex sed urna auctor vestibulum. Aliquam sit amet molestie velit, a pretium ligula. Mauris gravida turpis vitae scelerisque finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris suscipit nec velit non egestas. Quisque auctor viverra urna, at euismod turpis ornare id. Aliquam pharetra purus quis dui blandit tincidunt. Quisque massa ligula, malesuada vel leo eu, accumsan vulputate nulla. Integer faucibus malesuada pharetra. Duis varius sapien sit amet justo malesuada fringilla. Integer eget ex sed urna auctor vestibulum. Aliquam sit amet molestie velit, a pretium ligula. Mauris gravida turpis vitae scelerisque finibus.
</div> </div>
<!--
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer> -->
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
{% endif %} {% endif %}
{% endblock %} {% endblock %}
...@@ -8,8 +8,12 @@ ...@@ -8,8 +8,12 @@
You searched for '{{term}}' <br> You searched for '{{term}}' <br>
Found {{results.count}} results <br> Found {{results.count}} results <br>
Source: Local</p> Source: Local</p>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% for i in results %} {% for i in results %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment