Skip to content

M
mymusiclist
Commit 3dce9bc5 authored by Deion Menor's avatar Deion Menor
Browse files
Options

Add links to all buttons and add hero image and cards for home template

parent c9184d58
Show whitespace changes
Inline Side-by-side
Showing with 116 additions and 228 deletions
files/css/mymusiclist.css
View file @ 3dce9bc5
...@@ -8,205 +8,19 @@ body { ...@@ -8,205 +8,19 @@ body {
font-family: helvetica; font-family: helvetica;
margin: 15px; margin: 15px;
margin-top: 70px; margin-top: 70px;
background: url(/files/images/background.jpg) no-repeat center fixed; /*background: url(/files/images/background.jpg) no-repeat center fixed;*/
background-color: black;
background-size: cover; background-size: cover;
} }
/* Main style is anything on the right side of the website.*/
.main {
float:right;
margin-bottom: 2vh;
text-align: left;
width: 74vw;
font-size: 15px;
}
.main h2{
color: white;
font-size: 3 0px;
text-align: center;
}
/*for dropdown thing */
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: blue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
/*searchbar*/
/*form {
width:500px;
margin:50px auto;
}*/
.search_nav{
padding: 15px;
}
.searchbar {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
color: white;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
}
/* Generic style for clickable shit*/
.buttoned{
font-family: PalanquinDark;
background-color: rgba(0,0,0,0);
color: white;
}
/* Generic style for wrapping stuff in a box*/
.boxified{
background-color: rgba(20,100,100,0.3);
border-radius: 10px;
padding: 3vw;
text-align:center;
}
.features{
background-color: rgba(0,0,0,0.6);
border-radius: 10px;
padding: 3vw;
max-width: 600px
width:100px;
text-align:center;
border: 1px solid #000;
}
/* Nav bar */
#nav_bar{
position:fixed;
width : 100vw;
list-style-type: none;
background-color: #000;
overflow: hidden;
margin : -15px;
margin-top: -70px;
padding: 0px;
height : 58px;
z-index: :0;
}
#nav_bar li, #nav_bar li a {
float: left;
display: block;
color: white;
font-family: PalanquinDark;
letter-spacing: 2px;
text-decoration: none;
}
.nav_bar_home{
background-color: #424949;
font-size: 30px;
letter-spacing: 5px;
padding:10px;
padding-top: 0px;
}
.nav_bar_tab{
float: left;
display:inline-block;
color: white;
font-size: 20px;
font-family: PalanquinDark;
padding: 12px 20px;
letter-spacing: 2px;
text-decoration: none;
}
.nav_bar_tab:hover, .nav_bar_tab:active{
background-color: blue;
}
/* Sidebar */
.sidebar{
float:left;
margin-left: 0;
width: 14vw;
text-align: center;
padding: 1vw;
}
.sidebar img{
width: 13vw;
height: 13vw;
margin-top: 2vh;
}
a, .link{
color: white;
}
@media (max-width:1280px){
.sidebar{
display:none;
}
.main{
width:100vw;
}
}
#first_name_id{
font-size: 100px;
}
@font-face { @font-face {
font-family: 'PalanquinDark'; font-family: 'PalanquinDark';
src: url('/files/fonts/palanquindark/PalanquinDark-Regular.ttf'); src: url('/files/fonts/palanquindark/PalanquinDark-Regular.ttf');
} }
#logo-nav{
font-family: 'PalanquinDark';
font-size: 1.2em
}
files/images/hero1.jpg 0 → 100644
View file @ 3dce9bc5
This diff is collapsed.
files/images/hero2.jpg 0 → 100644
View file @ 3dce9bc5
This diff is collapsed.
files/images/travis-yewell-273488.jpg deleted 100644 → 0
View file @ c9184d58
This diff is collapsed.
templates/base.html
View file @ 3dce9bc5
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>{% block title %}MyMusicList{% endblock %}</title> <title>{% block title %}MyMusicList{% endblock %}</title>
<!-- <link rel="stylesheet" href="/files/css/mymusiclist.css"> --> <link rel="stylesheet" href="/files/css/mymusiclist.css">
<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/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head> </head>
...@@ -13,18 +13,38 @@ ...@@ -13,18 +13,38 @@
<header> <header>
<div class = "w3-top"> <div class = "w3-top">
<div class="w3-bar w3-light-grey w3-xlarge"> <div class="w3-bar w3-black w3-large">
<a href="#" class="w3-bar-item w3-button">MyMusicList</a>
<a href="/" id="logo-nav" class="w3-bar-item w3-button w3-blue-gray">MyMusicList</a>
{% if request.user.is_authenticated %}
<a class="w3-bar-item w3-button" href="/profile/{{request.user.username}}"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Hi, {{request.user.username}}</a>
<a class="w3-bar-item w3-button" href="{% url 'logout' %}" style="float:right">>Logout</a>
{% else %}
<a href="{% url 'login' %}" class="w3-bar-item w3-button">Login</a> <a href="{% url 'login' %}" class="w3-bar-item w3-button">Login</a>
<a href="{% url 'signup' %}" class="w3-bar-item w3-button">Sign Up</a> <a href="{% url 'signup' %}" class="w3-bar-item w3-button">Sign Up</a>
{% endif %}
<form action="{% url 'search' %}" method="get">
<div class="wrap">
<div class="search">
<input type="text" class="w3-bar-item w3-input w3-black" name="search" placeholder="Search..">
<input id="searchbytype" type="hidden" name="searchtype" value="album">
<button class="w3-bar-item w3-button w3-green"> <i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
<div class="w3-dropdown-hover"> <div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button> <button class="w3-button">Search by.. <i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4"> <div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Album</a> <a href="#" class="w3-bar-item w3-button" onclick="mainA()" >Album</a>
<a href="#" class="w3-bar-item w3-button">Artist</a> <a href="#" class="w3-bar-item w3-button" onclick="mainB()">Artist</a>
<a href="#" class="w3-bar-item w3-button">Song</a> <a href="#" class="w3-bar-item w3-button" onclick="mainC()">Song</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
......
templates/home.html
View file @ 3dce9bc5
...@@ -3,6 +3,45 @@ ...@@ -3,6 +3,45 @@
{% block title %}MyMusicList{% endblock %} {% block title %}MyMusicList{% endblock %}
{% block content %} {% block content %}
<div class="w3-container">
<img class="mySlides" src="/files/images/hero1.jpg" style="width:100%">
<img class="mySlides" src="/files/images/hero2.jpg" style="width:100%">
<div class="w3-display-middle w3-large">
<div class="w3-panel w3-amber">
<h1 class="w3-text-white">
<b>Easily keep track of all your favorite artists in one convenient place</b></h1>
</div>
<a href="{% url 'signup' %}" class="w3-btn w3-white">Sign Up Now</a>
</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="boxified main"> <div class="boxified main">
<h2>What is MyMusicList?</h2> <h2>What is MyMusicList?</h2>
<p> <p>
...@@ -12,34 +51,47 @@ MyMusicList is the answer. ...@@ -12,34 +51,47 @@ MyMusicList is the answer.
</p> </p>
</div> </div>
<div class="boxified main">
<h2>Features</h2> <div class="w3-row-padding">
<p> <div class="w3-card-2 w3-col s4 " style="width:33%">
<div class="img-container">
<img src="/files/images/image2.png" /> <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"> <div class="w3-card-2 w3-col s4" style="width:33%">
<img src="/files/images/image4.png" />
<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:33%">
<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 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>
...@@ -47,8 +99,10 @@ MyMusicList is the answer. ...@@ -47,8 +99,10 @@ 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"> <footer class="w3-container w3-teal">
<h5>Footer</h5> <h5>Footer</h5>
<p>Footer information goes here</p> <p>Footer information goes here</p>
......
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