Skip to content

Commit

Permalink
Home, Login, Signup pages css completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@supsa-ak
supsa-ak committed Jan 5, 2022
1 parent 6676aee commit 5cc8531
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 85 deletions.
129 changes: 47 additions & 82 deletions frontend/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,14 @@ <h1>Delete Spending</h1>
</div>
</form>
</div>
<p class="footer-heart">
Made with <g-emoji class="g-emoji" alias="heart"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png">
<img class="emoji" alt="heart" height="20" width="20"
src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png">
</g-emoji> by <a href="https://github.com/supsa-ak" target="_blank">Sarthak Kalpande</a><i class="fab fa-github"
style="margin-left: 7px;"></i>
</p>
{% else %}
<!-- <h1>BudMan - BudMan is a web app that helps you track and adjust your spending so that you are in control of money.
</h1>
Expand All @@ -281,7 +289,7 @@ <h1>Delete Spending</h1>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<li class="nav-item"><a class="nav-link me-lg-3" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="#download">Download</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="#download">Use</a></li>
</ul>
<button class="btn btn-primary rounded-pill px-3 mb-2 mb-lg-0" style="width: auto;"
data-bs-toggle="modal">
Expand Down Expand Up @@ -340,27 +348,25 @@ <h2>Chart</br>
</aside>
<!-- App features section-->
<section id="features">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-8 order-lg-1 mb-5 mb-lg-0">
<div class="container">
<div class="row gx-3 align-items-center">
<div class="col-lg-8 order-lg-1 mb-0 mb-lg-0">
<div class="container-fluid px-5">
<div class="row gx-5">
<div class="row gx-0">
<div class="col-md-6 mb-5">
<!-- Feature item-->
<div class="text-center">
<i class="bi-phone icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Device Mockups</h3>
<p class="text-muted mb-0">Ready to use HTML/CSS device mockups, no Photoshop
required!</p>
<i class="bi-card-checklist icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Track Your Money</h3>
<p class="text-muted mb-0">Ready to use web app</p>
</div>
</div>
<div class="col-md-6 mb-5">
<!-- Feature item-->
<div class="text-center">
<i class="bi-camera icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Flexible Use</h3>
<p class="text-muted mb-0">Put an image, video, animation, or anything else in the
screen!</p>
<i class="bi-bar-chart icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Graphical Visualization</h3>
<p class="text-muted mb-0">Currently supports 3 types of charts</p>
</div>
</div>
</div>
Expand All @@ -370,7 +376,7 @@ <h3 class="font-alt">Flexible Use</h3>
<div class="text-center">
<i class="bi-gift icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Free to Use</h3>
<p class="text-muted mb-0">As always, this theme is free to download and use for any
<p class="text-muted mb-0">As always, this app is free to use for any
purpose!</p>
</div>
</div>
Expand All @@ -379,45 +385,23 @@ <h3 class="font-alt">Free to Use</h3>
<div class="text-center">
<i class="bi-patch-check icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Open Source</h3>
<p class="text-muted mb-0">Since this theme is MIT licensed, you can use it
<p class="text-muted mb-0">Since this app is MIT licensed, you can use it
commercially!</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 order-lg-0">
<!-- Features section device mockup-->
<div class="features-device-mockup">
<svg class="circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="circleGradient" gradientTransform="rotate(45)">
<stop class="gradient-start-color" offset="0%"></stop>
<stop class="gradient-end-color" offset="100%"></stop>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50"></circle>
</svg>
<svg class="shape-1 d-none d-sm-block" viewBox="0 0 240.83 240.83"
xmlns="http://www.w3.org/2000/svg">
<rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03"
transform="translate(120.42 -49.88) rotate(45)"></rect>
<rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03"
transform="translate(-49.88 120.42) rotate(-45)"></rect>
</svg><svg class="shape-2 d-none d-sm-block" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"></circle>
</svg>
<div class="device-wrapper">
<div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
<div class="screen bg-black">
<!-- PUT CONTENTS HERE:-->
<!-- * * This can be a video, image, or just about anything else.-->
<!-- * * Set the max width of your media to 100% and the height to-->
<!-- * * 100% like the demo example below.-->
<video muted="muted" autoplay="" loop="" style="max-width: 100%; height: 100%">
<source src="assets/img/demo-screen.mp4" type="video/mp4" />
</video>
<div class="col-lg-4 px-6">
<!-- Masthead device mockup feature-->
<div class="masthead-device-mockup my-3">
<div class="box">
<div class="imgBox">
<img src="{% static 'frontend/img/chart3.jpg' %}" style="width: 100%;" />
</div>
<div class="content">
<h2>Chart</br>
<span>Line Chart for Latest Spendings</span></h2>
</div>
</div>
</div>
Expand All @@ -427,59 +411,48 @@ <h3 class="font-alt">Open Source</h3>
</div>
</section>
<!-- Basic features section-->
<section class="bg-light">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
<div class="col-12 col-lg-5">
<h2 class="display-4 lh-1 mb-4">Enter a new age of web design</h2>
<p class="lead fw-normal text-muted mb-5 mb-lg-0">This section is perfect for featuring some
information about your application, why it was built, the problem it solves, or anything else!
There's plenty of space for text here, so don't worry about writing too much.</p>
</div>
<div class="col-sm-8 col-md-6">
<div class="px-5 px-sm-0"><img class="img-fluid rounded-circle"
src="https://source.unsplash.com/u8Jn2rzYIps/900x900" alt="..." /></div>
</div>
</div>
</div>
</section>

<!-- Call to action section-->
<section class="cta">
<div class="cta-content">
<div class="container px-5">
<h2 class="text-white display-1 lh-1 mb-4">
Stop waiting.
<br />
Start building.
Start managing.
</h2>
<a class="btn btn-outline-light py-3 px-4 rounded-pill" href="https://startbootstrap.com/theme/new-age"
target="_blank">Download for free</a>
</div>
</div>
</section>
<!-- App badge section-->
<section class="bg-gradient-primary-to-secondary" id="download">
<div class="container px-5">
<h2 class="text-center text-white font-alt mb-4">Get the app now!</h2>
</div>
<h2 class="text-center text-white font-alt mb-4">Use the app now!</h2>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-center">
<a class="me-lg-3 mb-4 mb-lg-0" href="#!"><img class="app-badge" src="assets/img/google-play-badge.svg"
alt="..." /></a>
<a href="#!"><img class="app-badge" src="assets/img/app-store-badge.svg" alt="..." /></a>
<a href="/signup">
<button type="button" class="btn btn-lg btn-primary">Sign Up</button>
</a>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-black text-center py-5">
<div class="container px-5">
<div class="text-white-50 small">
<div class="mb-2">&copy; Your Website 2021. All Rights Reserved.</div>
<div class="mb-2">&copy; BudMan 2022. All Rights Reserved.</div>
<a href="#!">Privacy</a>
<span class="mx-1">&middot;</span>
<a href="#!">Terms</a>
<span class="mx-1">&middot;</span>
<a href="#!">FAQ</a>
</div>
</div>
<p class="footer-heart">
Made with <g-emoji class="g-emoji" alias="heart"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png">
<img class="emoji" alt="heart" height="20" width="20"
src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png">
</g-emoji> by <a href="https://github.com/supsa-ak" target="_blank">Sarthak Kalpande</a><i class="fab fa-github"
style="margin-left: 7px;"></i>
</p>
</footer>
<!-- Feedback Modal-->

Expand All @@ -496,14 +469,6 @@ <h2 class="text-center text-white font-alt mb-4">Get the app now!</h2>

</div>
{% endif %}
<p class="footer-heart">
Made with <g-emoji class="g-emoji" alias="heart"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png">
<img class="emoji" alt="heart" height="20" width="20"
src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png">
</g-emoji> by <a href="https://github.com/supsa-ak" target="_blank">Sarthak Kalpande</a><i class="fab fa-github"
style="margin-left: 7px;"></i>
</p>
<script>
function getCookie(name) {
var cookieValue = null;
Expand Down
6 changes: 3 additions & 3 deletions frontend/templates/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="{% static 'frontend/css/login.css' %}">
<link rel="icon" type="image/x-icon" href="{% static 'frontend/img/black.png' %}" />
</head>

<body>
<a href="/">Home</a>
<!-- Login Form ************************************ -->
<div class="container">
<div class="forms-container">
<div class="signin-signup">
<div class="wrapper">
<div class="logo"> <img src="{% static 'frontend/img/white.png' %}" alt="logo">
<a href="/"><div class="logo"> <img src="{% static 'frontend/img/white.png' %}" alt="logo">
</div>
<div class="text-center mt-4 name"> BudMan </div>
<div class="text-center mt-4 name"> BudMan </div></a>
<form class="p-3 mt-3" method="POST">
{% csrf_token %}
<div class="form-field d-flex align-items-center"> <span class="far fa-user"></span>
Expand Down
4 changes: 4 additions & 0 deletions frontend/templates/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="{% static 'frontend/css/login.css' %}">
<link rel="icon" type="image/x-icon" href="{% static 'frontend/img/blue.png' %}" />

<title>Sign Up - BudMan</title>
</head>

Expand All @@ -23,6 +25,8 @@
{% csrf_token %}
<a class="btn solid mt-3" style="color: white; font-size: medium; display: inline; margin-bottom: 10px;" href="/">Home</a>
<a class="btn solid mt-3" style="color: white; font-size: medium; display: inline; margin-bottom: 10px;" href="/login">Login</a>

<a href="/"><img src="{% static 'frontend/img/white.png' %}" alt="logo" width="40px" style="margin-left: 14px;"></a>
<h2 class="title" style="margin-top: 20px;">Sign Up</h2>
{{ form|crispy }}
<input type="submit" name="form_type" class="btn btn-primary" value="Sign up" />
Expand Down
Binary file modified static/frontend/img/chart1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5cc8531

Please sign in to comment.