Update homepage design

parent b02db5e0
......@@ -7,16 +7,27 @@
{% block title %}{{user.user_id}}{% endblock %}
{% block content %}
<nav class="topnav">
<a href="{% url 'homepage:indexHomepage' %}">Homepage</a>
<a href="{% url 'announcements:indexAnnouncements' %}">Announcements</a>
<a href="{% url 'forum:indexForum' %}">Forum</a>
<a href="{% url 'assignments:indexAssignments' %}">Assignments</a>
</nav>
<div class="flex-container">
<div class="user-card">
<h1>{{user.last_name}}, {{user.first_name}} {{user.middle_name}}</h1>
<div>
{% if user.image %}
<p style="text-align:center"><img src = "{{ user.image.url }}"></p><br>
<img class="user-image flex-item" src = "{{ user.image.url }}">
{% endif %}
<ul>
<ul class="flex-item">
<li>ID Number: {{user.id_num}}</li>
<li>Email Address: {{user.email}}</li>
<li>Department: {{user.department.dept_name}}</li>
<li>Home Unit: {{user.department.home_unit}}</li>
</ul>
</div>
</div>
</div>
{% endblock %}
\ No newline at end of file
......@@ -16,7 +16,7 @@
<h1 class="welcome">Welcome to Widget!</h1>
<div class="users">
<h2>Widget Users:</h3>
<h2>Widget Users:</h2>
{% if user_list %}
<ol>
{% for user in user_list %}
......
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
......@@ -31,7 +30,7 @@ body {
height: 100%;
width: 100%;
font-family: "Inter", sans-serif;
color:#161616;
color:white;
line-height: 2;
background-image: url(https://dailystocktips.co.in/wp-content/uploads/2020/12/gradient-background-02.jpg);
background-size: 100% 100%;
......@@ -41,6 +40,7 @@ body {
background-attachment: fixed;
-ms-overflow-style: none;
scrollbar-width: none;
background-color: #121212;
}
body::-webkit-scrollbar {
......@@ -51,13 +51,50 @@ body::-webkit-scrollbar {
display: block;
margin: auto;
width: 20%;
padding: 30px 40px;
padding: 30px 70px;
margin-bottom: 100px;
color: white;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.user-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
padding: 30px 50px;
color: white;
background-color: #121212;
border-radius: 25px;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.flex-container {
display: flex;
flex: 1 1 75%;
justify-content: center;
align-items: center;
}
.user-card > div {
display: flex;
flex-flow: row wrap;
margin: 10px 0;
}
.flex-item {
flex: 1 1 auto;
margin: auto 0;
}
.user-image {
width: 25%;
margin: 0 20px;
}
h1 {
display: block;
font-size: 40px;
......@@ -100,7 +137,7 @@ ol li:before {
width: 20px;
height: 20px;
background: rgb(16, 16, 16);
background: #121212;
}
li {
......@@ -142,9 +179,10 @@ a:hover {
}
h1.welcome {
font-size: 100px;
margin: 0px;
padding: 14vh 0 9vh 0;
font-size: 7vw;
margin: 14vh 0 9vh 0;
padding: 1vh 0 1vh 0;
color: white;
font-family: "Arimo";
font-family: "Inter";
background-color: #121212;
}
\ No newline at end of file
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