Merge branch 'test' into 'master'

Added style to navbar and body text

See merge request brian/mymusiclist!2

files/css/mymusiclist.css

 .signup_form{
-	color: black;
+
+
+}
+.login_form{
+
+
+}
+
+
+.centered {
+    margin: 0 auto;
+    margin-bottom: 30px;
+    text-align: left;
+    width: 800px;
+
+    padding: 50px;
+    font-size: 15px;
+    background-color: rgba(0,0,0,0.90);
+    border-radius: 10px;
+}
+
+.centered h2{
+     color: white;
+     font-size: 3 0px;
+     text-align: center;
+}
+
+#first_name_id{
+     font-size: 100px;
 }
 
+@font-face {
+font-family: 'PalanquinDark';
+src: url('../fonts/PalanquinDark-Regular.ttf');
+}
+
+
 #nav_bar{
 	position:fixed;
 	width : 100vw;
 	list-style-type: none;
-	background-color: grey;
+	background-color: #282525;
 	overflow: hidden;
 	margin : -15px;
 	margin-top: -70px;
 	padding: 0px;
-	height : 50px;
+	height : 55px;
 }
 
 #nav_bar_items {
 	float: left;
 	display: block;
 	color: white;
-	font-size: 20;
-	padding: 8px 10px;
-	letter-spacing: 3px;
+	font-family: PalanquinDark;
+	letter-spacing: 2px;
+	text-decoration: none;
+}
+
+#nav_bar_items.home{
+	background-color: #424949;
+	font-size: 30px;
+	letter-spacing: 5px;
+     padding:10px;
+     padding-top: 0px;
+}
+
+#nav_bar_items.tab {
+	float: left;
+	display: block;
+	color: white;
+	font-size: 20px;
+	font-family: PalanquinDark;
+	padding: 12px 20px;
+	letter-spacing: 2px;
 	text-decoration: none;
 }
 
 li a:hover, .active{
-	background-color: black;
+	background-color: #282544;
+
 }
 
 body {
 	color: white;
+	font-family: helvetica;
 	margin: 15px;
 	margin-top: 70px;
 	background-image: url(/files/images/background.jpg);
 	background-position: left top;
 	background-size: cover;
-}
+}
\ No newline at end of file

files/fonts/earth_orbiter/earthorbiter.txt

+Earth Orbiter Truetype Font for Windows Version 1.0
+
+2016 Iconian Fonts - Daniel Zadorozny 
+
+http://www.iconian.com/
+
+This font comes with the following 33 versions: Regular, Italic, Semi-Italic, Super-Italic, Leftalic, Condensed, Condensed Italic, Expanded, Expanded Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, 3D, 3D Italic, Outline, Outline Italic, Deep 3D, Deep 3D Italic, Gradient, Gradient Italic, Halftone, Halftone Italic, Laser, Laser Italic, Title, Title Ita;ic, Academy, Acadmey Italic, Punch, Punch Italic, Engraved and Engraved Italic. 
+
+This font may be freely distributed and is free for all non-commercial uses.  Use of the fonts are at your own risk. 
+
+For commercial use of the font please visit http://iconian.com/commercial.html for additional information.
+
+or e-mail me at iconian@aol.com  

templates/base.html

@@ -17,9 +17,9 @@
       </ul>
     {% else %}
       <ul id='nav_bar'>
-        <li id='nav_bar_items'><a id='nav_bar_items' href="/">MyMusicList</a></li>
-        <li id='nav_bar_items'><a id='nav_bar_items' href="{% url 'login' %}">Login</a></li>
-        <li id='nav_bar_items'><a id='nav_bar_items' href="{% url 'signup' %}">Sign Up</a></li>
+        <li id='nav_bar_items'><a id='nav_bar_items'  class="home" href="/">MyMusicList</a></li>
+        <li id='nav_bar_items'><a id='nav_bar_items' class="tab" href="{% url 'login' %}">LOGIN</a></li>
+        <li id='nav_bar_items'><a id='nav_bar_items' class="tab" href="{% url 'signup' %}">SIGN UP</a></li>
       </ul>
     {% endif %}
   </header>

templates/home.html

@@ -4,6 +4,41 @@
 
 {% block content %}
   <h2>Home</h2>
+  <div >
+
+
+  <div id="about" class="centered">
+       <h2>What is MyMusicList?</h2>
+       <p>
+            MyMusicList is the solution to all your music catalog needs. 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. 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.
+       </p>
+  </div>
+  <div id="features" class="centered">
+       <h2>Features</h2>
+       <p>
+          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. 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.
+     </p>
+  </div>
+  <div id="team" class="centered">
+       <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. 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.
+  </div>
+
+   </div>
+
   {% if user.is_authenticated %}
   {% endif %}
 {% endblock %}

templates/logged_out.html

@@ -3,8 +3,12 @@
 {% block title %}See you!{% endblock %}
 
 {% block content %}
+<div class="logged_out centered">
+
   <h2>Logged out</h2>
   <p>
   	You have been successfully logged out. <br> Please login again.
   </p>
+
+ </div>
 {% endblock %}

templates/login.html

@@ -3,10 +3,16 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
-  <h2 id='login_login'>Login</h2>
+
+  <div class="login_form centered">
+
+<h2 id='login_login'>Login</h2>
+
+
   <form method="post">
     {% csrf_token %}
     {{ form.as_p }}
     <button type="submit" id='login_submit'>Login</button>
   </form>
+  </div>
 {% endblock %}

templates/profile.html

@@ -3,6 +3,8 @@
 {% block title %}{{profile.username}}'s Profile{% endblock %}
 
 {% block content %}
+     <div class="centered profile">
+
   <h2>{{profile.username}}'s Profile</h2>
   <ul>
       <li><strong>First Name:</strong> {{profile.first_name}}</li>
@@ -10,6 +12,8 @@
       <li><strong>Email Address:</strong> {{profile.email}}</li>
   </ul>
 
+  </div>
+
   {% if profile.username == user.username and user.is_authenticated %}
   <a href="#">Edit user profile</a>
   {% endif %}

templates/signup.html

 {% extends 'base.html' %}
 
 {% block content %}
-  <h2>Sign up</h2>
-  <div class='signup_form'>
+
+  <div class='signup_form centered'>
+       <h2>Create your account</h2>
+       <p>
+          Sign up now to start building your music collection with us.  <br/> Already have an account? <a href="{% url 'login' %}">Log in</a>
+       </p>
   <form method="post">
     {% csrf_token %}
     {{ form.as_p }}