Skip to content

M
mymusiclist
Commit 4588f611 authored by Deion Menor's avatar Deion Menor
Browse files
Options

Added style to navbar and body text

parent dd56a2a7
Show whitespace changes
Inline Side-by-side
Showing with 134 additions and 14 deletions
db.sqlite3
View file @ 4588f611
No preview for this file type
files/css/mymusiclist.css
View file @ 4588f611
.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);
......
files/fonts/earth_orbiter/earthorbiter.txt 0 → 100644
View file @ 4588f611
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
View file @ 4588f611
......@@ -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
View file @ 4588f611
......@@ -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
View file @ 4588f611
......@@ -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
View file @ 4588f611
......@@ -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
View file @ 4588f611
......@@ -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
View file @ 4588f611
{% 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 }}
......
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