BlogFor BusinessTalk to a counsellor
CoursesIIT ProgramsPlacementsLog in
BlogFor Business
Talk to a counsellor
Challenge

Project 1

SSuraj Gulhane6 May 2022
CSS
<main class="container">
<!-- Left Column / Headphones Image -->
<div class="left-column">
<img data-image="black" src="images/black.png" alt="">
<img data-image="blue" src="images/blue.png" alt="">
<img data-image="red" class="active" src="images/red.png" alt="">
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Headphones</span>
<h1>Beats EP</h1>
<p>The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance</p>
</div>
<!-- Product Configuration -->
<div class="product-configuration">
<!-- Product Color -->
<div class="product-color">
<span>Color</span>
<div class="color-choose">
<div>
<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label>
</div>
<div>
<input data-image="blue" type="radio" id="blue" name="color" value="blue">
<label for="blue"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
</div>
<!-- Cable Configuration -->
<div class="cable-config">
<span>Cable configuration</span>
<div class="cable-choose">
<button>Straight</button>
<button>Coiled</button>
<button>Long-coiled</button>
</div>
<a href="#">How to configurate your headphones</a>
</div>
</div>
<!-- Product Pricing -->
<div class="product-price">
<span>148$</span>
<a href="#" class="cart-btn">Add to cart</a>
</div>
</div>
</main>
/* Basic Styling */
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
}
/* Columns */
.left-column {
width: 65%;
position: relative;
}
.right-column {
width: 35%;
margin-top: 60px;
}
/* Left Column */
.left-column img {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.3s ease;
}
.left-column img.active {
opacity: 1;
}
.product-description {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
.product-description span {
font-size: 12px;
color: #358ED7;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}
.product-description h1 {
font-weight: 300;
font-size: 52px;
color: #43484D;
letter-spacing: -2px;
}
.product-description p {
font-size: 16px;
font-weight: 300;
color: #86939E;
line-height: 24px;
}
product-color {
margin-bottom: 30px;
}
.color-choose div {
display: inline-block;
}
.color-choose input[type=&amp;quot;radio&amp;quot;] {
display: none;
}
.color-choose input[type=&amp;quot;radio&amp;quot;] + label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.color-choose input[type=&amp;quot;radio&amp;quot;] + label span {
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
.color-choose input[type=&amp;quot;radio&amp;quot;]#red + label span {
background-color: #C91524;
}
.color-choose input[type=&amp;quot;radio&amp;quot;]#blue + label span {
background-color: #314780;
}
.color-choose input[type=&amp;quot;radio&amp;quot;]#black + label span {
background-color: #323232;
}
.color-choose input[type=&amp;quot;radio&amp;quot;]:checked + label span {
background-image: url(images/check-icn.svg);
background-repeat: no-repeat;
background-position: center;
}
.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #86939E;
outline: none;
}
.cable-config {
border-bottom: 1px solid #E1E8EE;
margin-bottom: 20px;
}
.cable-config a {
color: #358ED7;
text-decoration: none;
font-size: 12px;
position: relative;
margin: 10px 0;
display: inline-block;
}
.cable-config a:before {
content: &amp;quot;?&amp;quot;;
height: 15px;
width: 15px;
border-radius: 50%;
border: 2px solid rgba(53, 142, 215, 0.5);
display: inline-block;
text-align: center;
line-height: 16px;
opacity: 0.5;
margin-right: 5px;
}
.product-price {
display: flex;
align-items: center;
}
.product-price span {
font-size: 26px;
font-weight: 300;
color: #43474D;
margin-right: 20px;
}
.cart-btn {
display: inline-block;
background-color: #7DC855;
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
padding: 12px 30px;
transition: all .5s;
}
.cart-btn:hover {
background-color: #64af;
}
@media (max-width: 940px) {
.container {
flex-direction: column;
margin-top: 60px;
}
.left-column,
.right-column {
width: 100%;
}
.left-column img {
width: 300px;
right: 0;
top: -65px;
left: initial;
}
}
@media (max-width: 535px) {
.left-column img {
width: 220px;
top: -85px;
}
}
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var headphonesColor = $(this).attr('data-image');
$('.active').removeClass('active');
$('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
$(this).addClass('active');
});
});
 {% extends "dating_app/base.html" %}

<title>Profile</title>

<!DOCTYPE html>
{% block head %}
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


</head>

{% endblock %}
{% block content %}
<title>Profile</title>

<div class="container">    
                  <div class="row">
                      <div class="panel panel-default">
                      <div class="panel-heading">  <h4 style="color:#CB2603  "   >My Profile</h4></div>
                       <div class="panel-body">
                      <div class="col-md-4 col-xs-12 col-sm-6 col-lg-4">
                       <img alt="User Pic" src="{{  profile.photo.url  }}"  id="profile-image1" class="img-circle img-responsive"> 


                      </div>
                      <div class="col-md-8 col-xs-12 col-sm-6 col-lg-8" >
                          <div class="container" >
                            <h2>{{ profile }}</h2>



                          </div>
                           <hr>
                          <ul class="container details" >
                            <h3   >About me</h3>
                                <p><span  style="width:50px;margin:50px"></span>{{ profile.description }}</p>

                          </ul>
                          <hr>
                        {% if user.id == profile.id %}
                            <p><a style="color:#CB2603 " href="{% url 'dating_app:update_account' profile.id %}">edit profile</a></p>
                        {% endif %}

                      </div>
                </div>
            </div>
        </div>


{% endblock content %}



{% load bootstrap4 %}
{% load static %}

{% load unread_messages_counter %}

<!-- Navbar is located in this file -->


<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>



    {% block head %}
    <title>Base</title>
    {% endblock %}

    <link rel="stylesheet"  href="{% static 'css/style.css' %}"/>
    <link rel="stylesheet"  href="{% static  'css/notification.css' %}" type="text/css" class = "notification"/>
    <style>
    <!-- Add this tag -->
    {% block styles %}

    {% endblock %}
    </style>
</head>
<body>
    <!-- Navigation -->
      <nav class="navbar navbar-custom navbar-expand-md">
      <div class="container-fluid">
        <a class= 'navbar-brand'  href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
        <button class= "navbar-toggler" type="button" data-toggle="collapse" 
        data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div  class="collapse navbar-collapse"  >
          <ul class ="navbar-nav ml-auto" >


            {% if user.is_authenticated %}


                {% unread_messages request.user as user_unread_messages %}
                {% if user_unread_messages > 0 %}


                    <li class="nav-item"  >
                        <a class=  "notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css" > 
                        <span>Inbox</span>
                        <span class="badge">{% unread_messages request.user %}</span>
                        </a>
                    </li>

                {% else %}

                    <li class="nav-item">

                        <a style="color:brown"  href="{% url 'dating_app:conversations' user.id %}">    
                            <span>Inbox</span>
                        </a>
                    </li>
                {% endif %}

                <li class="nav-item">
                    <a style="color:brown"  href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
                </li>

                <li class="nav-item">
                    <a style="color:brown"  href="{% url 'dating_app:mingle' %}">Mingle</a>
                </li>

                <li class="nav-item">
                    <a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
                </li>

                <li class="nav-item">
                    <a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
                </li>
            {% else %}

                <li class="nav-item">
                  <a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
                </li>
                <li class="nav-item">
                  <a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
                </li>

            {% endif %}
          </ul>
        </div>
    </div>

    </nav>

<!-- HEADER END -->


<!--Below is individual page will html will be rendered -->

{% block content %}

{% endblock %}

<hr class="my-4">

<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
     <div class="col-12">
        <h2>Connect</h2>
     </div>
     <div class="col-12 social padding">
        <a href="http://www.facebook.com/"><i class="fab fa-facebook"></i></a>
        <a href="http://www.twitter.com/"><i class="fab fa-twitter"></i></a>
        <a href="http://www.instagram.com/"><i class="fab fa-instagram"></i></a>
        <a href="http://www.google.com/"><i class="fab fa-google-plus-g"></i></a>
        <a href="http://www.youtube.com/"><i class="fab fa-youtube"></i></a>
    </div>
</div>
</div>

<!-- FOOTER AREA BEGINS BELOW-->

<footer>
<div class="container-fluid padding">
<div class="row text-center">
    <div class="col-md-4">
        <img src="{% static 'images/cupids_corner_logo.jpg' %}">
        <hr class="light">
        <p>703-309-9572</p>
        <p>[email protected]</p>
        <p>100 Street Name</p>
        <p>City, State, 000</p>
    </div>
    <div class="col-md-4">
        <hr class="light">
        <h5>Our hours</h5>
        <hr class="light">
        <p>Monday: 9am-5pm</p>
        <p>Saturday: 10am-4pm</p>
        <p>Sunday: closed(like Chick-fil-A)</p>
    </div>
    <div class="col-md-4">
        <hr class="light">
        <h5>Our satellite offices</h5>
        <hr class="light">
        <p>City, State, 00000</p>
        <p>City, State, 00000</p>
        <p>City, State, 00000</p>
    </div>
    <div class="col-12">
        <hr class="light-100">
        <h5>&copy;CupidsCorner.com</h5>
    </div>


</footer>

    <!-- Bootstrap core JavaScript
      ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->

      <script src="../../assets/js/vendor/popper.min.js"></script>
      <script src="../../dist/js/bootstrap.min.js"></script>

</body>
</html>
Your portfolio, next

Ship work like this
in your own course.

Talk to a career counsellor

Free 20-minute call. We'll map the right course to where you want to work.

By submitting you agree to our Terms and Privacy Policy.

Talk to a career counsellor

Free 20-minute call. We'll map the right course to where you want to work.

By submitting you agree to our Terms and Privacy Policy.