Commit 342fb7d9 authored by Brian Guadalupe's avatar Brian Guadalupe

Merge branch 'test' into 'master'

Added style to navbar and body text

See merge request brian/mymusiclist!2
parents 9ef16622 4588f611
No preview for this file type
.signup_form{ .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{ #nav_bar{
position:fixed; position:fixed;
width : 100vw; width : 100vw;
list-style-type: none; list-style-type: none;
background-color: grey; background-color: #282525;
overflow: hidden; overflow: hidden;
margin : -15px; margin : -15px;
margin-top: -70px; margin-top: -70px;
padding: 0px; padding: 0px;
height : 50px; height : 55px;
} }
#nav_bar_items { #nav_bar_items {
float: left; float: left;
display: block; display: block;
color: white; color: white;
font-size: 20; font-family: PalanquinDark;
padding: 8px 10px; letter-spacing: 2px;
letter-spacing: 3px; 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; text-decoration: none;
} }
li a:hover, .active{ li a:hover, .active{
background-color: black; background-color: #282544;
} }
body { body {
color: white; color: white;
font-family: helvetica;
margin: 15px; margin: 15px;
margin-top: 70px; margin-top: 70px;
background-image: url(/files/images/background.jpg); background-image: url(/files/images/background.jpg);
......
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
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
</ul> </ul>
{% else %} {% else %}
<ul id='nav_bar'> <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' class="home" 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' class="tab" 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="tab" href="{% url 'signup' %}">SIGN UP</a></li>
</ul> </ul>
{% endif %} {% endif %}
</header> </header>
......
...@@ -4,6 +4,41 @@ ...@@ -4,6 +4,41 @@
{% block content %} {% block content %}
<h2>Home</h2> <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 %} {% if user.is_authenticated %}
{% endif %} {% endif %}
{% endblock %} {% endblock %}
...@@ -3,8 +3,12 @@ ...@@ -3,8 +3,12 @@
{% block title %}See you!{% endblock %} {% block title %}See you!{% endblock %}
{% block content %} {% block content %}
<div class="logged_out centered">
<h2>Logged out</h2> <h2>Logged out</h2>
<p> <p>
You have been successfully logged out. <br> Please login again. You have been successfully logged out. <br> Please login again.
</p> </p>
</div>
{% endblock %} {% endblock %}
...@@ -3,10 +3,16 @@ ...@@ -3,10 +3,16 @@
{% block title %}Login{% endblock %} {% block title %}Login{% endblock %}
{% block content %} {% block content %}
<h2 id='login_login'>Login</h2>
<div class="login_form centered">
<h2 id='login_login'>Login</h2>
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
{{ form.as_p }} {{ form.as_p }}
<button type="submit" id='login_submit'>Login</button> <button type="submit" id='login_submit'>Login</button>
</form> </form>
</div>
{% endblock %} {% endblock %}
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
{% block title %}{{profile.username}}'s Profile{% endblock %} {% block title %}{{profile.username}}'s Profile{% endblock %}
{% block content %} {% block content %}
<div class="centered profile">
<h2>{{profile.username}}'s Profile</h2> <h2>{{profile.username}}'s Profile</h2>
<ul> <ul>
<li><strong>First Name:</strong> {{profile.first_name}}</li> <li><strong>First Name:</strong> {{profile.first_name}}</li>
...@@ -10,6 +12,8 @@ ...@@ -10,6 +12,8 @@
<li><strong>Email Address:</strong> {{profile.email}}</li> <li><strong>Email Address:</strong> {{profile.email}}</li>
</ul> </ul>
</div>
{% if profile.username == user.username and user.is_authenticated %} {% if profile.username == user.username and user.is_authenticated %}
<a href="#">Edit user profile</a> <a href="#">Edit user profile</a>
{% endif %} {% endif %}
......
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% 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"> <form method="post">
{% csrf_token %} {% csrf_token %}
{{ form.as_p }} {{ form.as_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