Developer Page Template Designed

accounts/static/accounts/css/team.css

@@ -0,0 +1,52 @@
+ /* Three columns side by side */
+.column {
+    float: left;
+    width: 33.3%;
+    margin-bottom: 16px;
+    padding: 0 8px;
+}
+
+/* Display the columns below each other instead of side by side on small screens */
+@media screen and (max-width: 650px) {
+    .column {
+        width: 100%;
+        display: block;
+    }
+}
+
+/* Add some shadows to create a card effect */
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* Some left and right padding inside the container */
+.container {
+    padding: 0 16px;
+}
+
+/* Clear floats */
+.container::after, .row::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+.title {
+    color: grey;
+}
+
+.button {
+    border: none;
+    outline: 0;
+    display: inline-block;
+    padding: 8px;
+    color: white;
+    background-color: #000;
+    text-align: center;
+    cursor: pointer;
+    width: 100%;
+}
+
+.button:hover {
+    background-color: #555;
+}

accounts/templates/accounts/profile.html

@@ -10,7 +10,6 @@
 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
 <!-- Add icon library -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-{% load static %}
 <link rel="stylesheet" href="{% static 'accounts/css/profiles.css' %}">
 {% endblock %}
 {% block body %}
@@ -19,10 +18,6 @@
    <h1>{{ user.first_name }} {{ user.last_name }}</h1>
    <p class="title">Hey, {{ user.username }}</p>
    <p>{% ratings user read_only %}</p>
-   <a href="#"><i class="fa fa-dribbble"></i></a>
-   <a href="#"><i class="fa fa-twitter"></i></a>
-   <a href="#"><i class="fa fa-linkedin"></i></a>
-   <a href="#"><i class="fa fa-facebook"></i></a>
    <p><button class="btn btn-success">Add Skill</button></p>
 </div>
 </div>

accounts/templates/accounts/profile_friend.html

@@ -23,10 +23,6 @@ <h1>{{ user.first_name }} {{ user.last_name }}</h1>
    {% else %}
    <p>{% ratings user read_only %}</p>
    {% endif %}
-   <a href="#"><i class="fa fa-dribbble"></i></a>
-   <a href="#"><i class="fa fa-twitter"></i></a>
-   <a href="#"><i class="fa fa-linkedin"></i></a>
-   <a href="#"><i class="fa fa-facebook"></i></a>
    <p><button class="btn btn-success">Add Friend</button></p>
 </div>
 </div>

accounts/templates/accounts/team.html

@@ -0,0 +1,53 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block head %}
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
+<!-- Add icon library -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="{% static 'accounts/css/team.css' %}">
+{% endblock %}
+{% block body %}
+<div class="container">
+   <div class="row">
+      <div class="column">
+         <div class="card">
+            <img src="{% static 'accounts/img/img1.png' %}" alt="Rishi Banerjee">
+            <div class="container">
+               <h2>Rishi Banerjee</h2>
+               <p class="title">Backend/Frontend Developer - Admin</p>
+               <p>Knows how to copy paste code</p>
+               <p>[email protected]</p>
+            </div>
+         </div>
+      </div>
+      <div class="column">
+         <div class="card">
+            <img src="{% static 'accounts/img/img1.png' %}" alt="Pratik Jain">
+            <div class="container">
+               <h2>Pratik Jain</h2>
+               <p class="title">Backend/Frontend Developer - Admin</p>
+               <p>Wanted to make this in Node.js, well Django it is</p>
+               <p>[email protected]</p>
+            </div>
+         </div>
+      </div>
+      <div class="column">
+         <div class="card">
+            <img src="{% static 'accounts/img/img1.png' %}" alt="Prachal Goyal">
+            <div class="container">
+               <h2>Prachal Goyal</h2>
+               <p class="title">Front-End Developer/Designer</p>
+               <p>Took me 2 minutes to download this stolen front-end template.</p>
+               <p>Just Follow me on Instagram</p>
+            </div>
+         </div>
+      </div>
+   </div>
+</div>
+{% endblock %}
+

accounts/templates/base.html

@@ -212,6 +212,9 @@ <h2 class="mb-4">Ready to do a project? Sign up now!</h2>
               <li class="list-inline-item">&sdot;</li>
               <li class="list-inline-item">
                 <a href="#">Terms of Use</a>
+              </li>
+               <li class="list-inline-item">
+                <a href="{% url 'developers' %}">Developers</a>
               </li>
               </li>
             </ul>

accounts/urls.py

@@ -35,6 +35,7 @@
     re_path('reset-password/confirm/(?P<uidb64>[0-9A-Za-z]+)-(?P<token>.+)/', password_reset_confirm, name='password_reset_confirm'),
     path('reset-password/complete/', password_reset_complete, name='password_reset_complete'),
     path('profile/addskill/', views.AddSkillView, name='addskill'),
+    path('developers/', views.DevelopersView, name='developers')
 ]
 
 # setting up a local mail server for testing and debugging

accounts/views.py

@@ -105,23 +105,22 @@ def PeopleView(request):
 def FriendProfileView(request, username):
     try:
         user = User.objects.get(username=username)
-
     except:
         raise Http404
 
     # Flag that determines if we should show editable elements
     editable = False
-
     context = locals()
     template = 'accounts/profile_friend.html'
 
     args = {'user': user, 'viewer': request.user}
-
     return render(request, template, args)
 
 
 #return render(request, 'accounts/profile_friend.html', args)
 
+def DevelopersView(request):
+    return render(request, 'accounts/team.html')
 
 def AboutView(request):
     return HttpResponse("<h1>About Us</h1>")