0% found this document useful (0 votes)

13 views

ABOUT

The document provides information about an online learning platform, including details about its 60+ UX courses, expert instructors, lifetime access, techniques for engaging with students, and ability to learn with millions of others online.

Uploaded by

princethakurp222

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

13 views

ABOUT

Uploaded by

princethakurp222

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 67

ABOUT

{% extends 'app9/base.html' %}
{% load static %}
{% block content %}
<main>

<section class="slider-area slider-area2">
<div class="slider-active">

<div class="single-slider slider-height2">
<div class="container">
<div class="row">
<div class="col-xl-8 col-lg-11 col-md-12">
<div class="hero__caption hero__caption2">
<h1 data-animation="bounceIn" data-
delay="0.2s">About us</h1>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="index.html">Home</a></li>
<li class="breadcrumb-item"><a
href="#">about</a></li>
</ol>
</nav>

</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="services-area services-area2 section-padding40">
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon1.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>60+ UX courses</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon2.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>Expert instructors</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon3.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>Life time access</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
</div>
</div>
</div>

<section class="about-area1 fix pt-10">
<div class="support-wrapper align-items-center">
<div class="left-content1">
<div class="about-icon">
<img src="{% static "app9/assets/img/icon/about.svg"
%}" alt="">
</div>

<div class="section-tittle section-tittle2 mb-55">
<div class="front-text">
<h2 class="">Learn new skills online with top
educators</h2>
<p>The automated process all your website tasks.
Discover tools and
techniques to engage effectively with
vulnerable children and young
people.</p>
</div>
</div>
<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Techniques to engage effectively with
vulnerable children and young people.</p>
</div>
</div>
<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Join millions of people from around the world
learning together.</p>
</div>
</div>

<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Join millions of people from around the world
learning together. Online learning is as easy and natural.</p>
</div>
</div>
</div>
<div class="right-content1">

<div class="right-img">
<img src="{% static
"app9/assets/img/gallery/about.png" %}" alt="">

<div class="video-icon" >

<a class="popup-video btn-icon"
href="https://www.youtube.com/watch?v=up68UAfH0d0"><i class="fas fa-
play"></i></a>
</div>
</div>
</div>
</div>
</section>


<div class="topic-area section-padding40">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8">
<div class="section-tittle text-center mb-55">
<h2>Explore top subjects</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic1.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic2.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic3.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic4.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic5.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic6.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic7.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic8.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-12">
<div class="section-tittle text-center mt-20">
<a href="courses.html" class="border-btn">View
More Subjects</a>
</div>
</div>
</div>
</div>
</div>


<section class="about-area3 fix">
<div class="support-wrapper align-items-center">
<div class="right-content3">

<div class="right-img">
<img src="{% static
"app9/assets/img/gallery/about3.png" %}" alt="">
</div>
</div>
<div class="left-content3">

<div class="section-tittle section-tittle2 mb-20">
<div class="front-text">
<h2 class="">Learner outcomes on courses you will
take</h2>
</div>
</div>
<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Techniques to engage effectively with
vulnerable children and young people.</p>
</div>
</div>
<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Join millions of people from around the world
learning together.</p>
</div>
</div>
<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Join millions of people from around the world
learning together.
Online learning is as easy and natural.</p>
</div>
</div>
</div>
</div>
</section>


<section class="team-area section-padding40 fix">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8">
<div class="section-tittle text-center mb-55">
<h2>Community experts</h2>
</div>
</div>
</div>

<div class="team-active">
{% for x in TeamData %}
<div class="single-cat text-center">
<div class="cat-icon">
<img src="{{x.img.url}}" alt="">
</div>
<div class="cat-cap">
<h5><a href="services.html">{{x.name}}</a></h5>
<p>{{x.work}}</p>
</div>
</div>
{% endfor %}




































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

</main>
{%endblock%}

BASE CLASS
{% extends 'app9/base.html' %}
{% load static %}
{% block content %}
<main>

<section class="slider-area slider-area2">
<div class="slider-active">

<div class="single-slider slider-height2">
<div class="container">
<div class="row">
<div class="col-xl-8 col-lg-11 col-md-12">
<div class="hero__caption hero__caption2">
<h1 data-animation="bounceIn" data-
delay="0.2s">About us</h1>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="index.html">Home</a></li>
<li class="breadcrumb-item"><a
href="#">about</a></li>
</ol>
</nav>

</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="services-area services-area2 section-padding40">
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon1.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>60+ UX courses</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon2.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>Expert instructors</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon3.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>Life time access</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
</div>
</div>
</div>

<section class="about-area1 fix pt-10">
<div class="support-wrapper align-items-center">
<div class="left-content1">
<div class="about-icon">
<img src="{% static "app9/assets/img/icon/about.svg"
%}" alt="">
</div>

<div class="section-tittle section-tittle2 mb-55">
<div class="front-text">
<h2 class="">Learn new skills online with top
educators</h2>
<p>The automated process all your website tasks.
Discover tools and
techniques to engage effectively with
vulnerable children and young
people.</p>
</div>
</div>
<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Techniques to engage effectively with
vulnerable children and young people.</p>
</div>
</div>
<div class="single-features">
<div class="features-icon">
<img src="{% static "app9/assets/img/icon/right-
icon.svg" %}" alt="">
</div>
<div class="features-caption">
<p>Join millions of people from around the world
learning together.</p>
</div>
</div>

<div class="video-icon" >

</div>
</section>

</main>
{%endblock%}

CONTACT
{% extends 'app9/base.html' %}
{% load static %}
{%load crispy_forms_tags %}
{% block content %}
<main>

<section class="slider-area slider-area2">
<div class="slider-active">

<div class="single-slider slider-height2">
<div class="container">
<div class="row">
<div class="col-xl-8 col-lg-11 col-md-12">
<div class="hero__caption hero__caption2">
<h1 data-animation="bounceIn" data-
delay="0.2s">Contact us</h1>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="index.html">Home</a></li>
<li class="breadcrumb-item"><a
href="#">Contact</a></li>
</ol>
</nav>

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

<section class="contact-section">
<div class="container">

</script>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58072.16630992816!
2d78.03993664540859!3d27.896286310673876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f1
3.1!3m3!1m2!1s0x3974a48686459c8b%3A0x95d967276d323613!2sAligarh%2C%20Uttar%20
Pradesh!5e0!3m2!1sen!2sin!4v1715066771273!5m2!1sen!2sin" width="100%"
height="500px" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</script>

</div>
<div class="row">
<div class="col-12">
<h2 class="contact-title">Get in Touch</h2>
</div>
<div class="col-lg-8">
<form action="" method="post">
{% csrf_token %}
{% if messages %}
{% for x in messages %}{{ x }}{% endfor %}
{% endif %}

<!-- <form class="form-contact contact_form"

action="contact_process.php" method="post" id="contactForm"
novalidate="novalidate">-->
<div class="row">
<div class="col-12">
<div class="form-group">
{% csrf_token %}
{{ form|crispy }}

</div>
</div>
<div class="row g-3" style="margin:10px;">
<div class="col-sm-12">
<button class="btn btn-primary rounded-
pill py-3 px-5" type="submit">Send</button>
</div>
</div>
</div>
</form>



















</div>
<div class="col-lg-3 offset-lg-1">
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-
home"></i></span>
<div class="media-body">
<h3>Prince colony.</h3>
<p>Melrose bye pass Aligarh 202001</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-
tablet"></i></span>
<div class="media-body">
<h3>91 6396312475</h3>
<p>Mon to Fri 9am to 6pm</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-
email"></i></span>
<div class="media-body">
<h3>[email protected]</h3>
<p>Send us your query anytime!</p>
</div>
</div>
</div>
</div>
</div>
</section>

</main>
{% endblock %}

BLOG
{% extends 'app9/base.html' %}
{% load static %}
{% block content %}

<main>

<section class="slider-area slider-area2">
<div class="slider-active">

<div class="single-slider slider-height2">
<div class="container">
<div class="row">
<div class="col-xl-8 col-lg-11 col-md-12">
<div class="hero__caption hero__caption2">
<h1 data-animation="bounceIn" data-
delay="0.2s">Company insights</h1>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="index.html">Home</a></li>
<li class="breadcrumb-item"><a
href="#">Blog</a></li>
</ol>
</nav>

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

<section class="blog_area section-padding">
<div class="container">
<div class="row">
<div class="col-lg-8 mb-5 mb-lg-0">
{% for x in BlogData %}
<div class="blog_left_sidebar">

<article class="blog_item">
<div class="blog_item_img">
<img class="card-img rounded-0"
src="{{x.img.url}}" alt="">
<a href="#" class="blog_item_date">
<h3>15</h3>
<p>Jan</p>
</a>
</div>
<div class="blog_details">
<a class="d-inline-block"
href="blog_details.html">
<h2 class="blog-head" style="color:
#2d2d2d;">{{x.title}}</h2>
</a>
<p>{{x.despription}}</p>
<ul class="blog-info-link">
<li><a href="#"><i class="fa fa-
user"></i> Travel, Lifestyle</a></li>
<li><a href="#"><i class="fa fa-
comments"></i> 03 Comments</a></li>
</ul>
</div>
</article>

<nav class="blog-pagination justify-content-
center d-flex">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-
label="Previous">
<i class="ti-angle-left"></i>
</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item active">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link" aria-
label="Next">
<i class="ti-angle-right"></i>
</a>
</li>
</ul>
</nav>
</div>
{% endfor %}
</div>
<div class="col-lg-4">
<div class="blog_right_sidebar">
<aside class="single_sidebar_widget
search_widget">
<form action="#">
<div class="form-group">
<div class="input-group mb-3">
<input type="text" class="form-
control" placeholder='Search Keyword'
onfocus="this.placeholder = ''"
onblur="this.placeholder =
'Search Keyword'">
<div class="input-group-append">
<button class="btns"
type="button"><i class="ti-search"></i></button>
</div>
</div>
</div>
<button class="button rounded-0 primary-
bg text-white w-100 btn_1 boxed-btn"
type="submit">Search</button>
</form>
</aside>
<aside class="single_sidebar_widget
post_category_widget">
<h4 class="widget_title" style="color:
#2d2d2d;">Category</h4>
<ul class="list cat-list">
<li>
<a href="#" class="d-flex">
<p>Resaurant food</p>
<p>(37)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Travel news</p>
<p>(10)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Modern technology</p>
<p>(03)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Product</p>
<p>(11)</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Inspiration</p>
<p>21</p>
</a>
</li>
<li>
<a href="#" class="d-flex">
<p>Health Care (21)</p>
<p>09</p>
</a>
</li>
</ul>
</aside>
<aside class="single_sidebar_widget
popular_post_widget">
<h3 class="widget_title" style="color:
#2d2d2d;">Recent Post</h3>
<div class="media post_item">
<img src="{% static
"app9/assets/img/post/post_1.png" %}" alt="post">
<div class="media-body">
<a href="blog_details.html">
<h3 style="color: #2d2d2d;">From
life was you fish...</h3>
</a>
<p>January 12, 2019</p>
</div>
</div>
<div class="media post_item">
<img src="{% static
"app9/assets/img/post/post_2.png" %}" alt="post">
<div class="media-body">
<a href="blog_details.html">
<h3 style="color: #2d2d2d;">The
Amazing Hubble</h3>
</a>
<p>02 Hours ago</p>
</div>
</div>
<div class="media post_item">
<img src="{% static
"app9/assets/img/post/post_3.png" %}" alt="post">
<div class="media-body">
<a href="blog_details.html">
<h3 style="color:
#2d2d2d;">Astronomy Or Astrology</h3>
</a>
<p>03 Hours ago</p>
</div>
</div>
<div class="media post_item">
<img src="{% static
"app9/assets/img/post/post_4.png" %}" alt="post">
<div class="media-body">
<a href="blog_details.html">
<h3 style="color:
#2d2d2d;">Asteroids telescope</h3>
</a>
<p>01 Hours ago</p>
</div>
</div>
</aside>
<aside class="single_sidebar_widget
tag_cloud_widget">
<h4 class="widget_title" style="color:
#2d2d2d;">Tag Clouds</h4>
<ul class="list">
<li>
<a href="#">project</a>
</li>
<li>
<a href="#">love</a>
</li>
<li>
<a href="#">technology</a>
</li>
<li>
<a href="#">travel</a>
</li>
<li>
<a href="#">restaurant</a>
</li>
<li>
<a href="#">life style</a>
</li>
<li>
<a href="#">design</a>
</li>
<li>
<a href="#">illustration</a>
</li>
</ul>
</aside>

<aside class="single_sidebar_widget
instagram_feeds">
<h4 class="widget_title" style="color:
#2d2d2d;">Instagram Feeds</h4>
<ul class="instagram_row flex-wrap">
<li>
<a href="#">
<img class="img-fluid" src="{%
static "app9/assets/img/post/post_5.png" %}" alt="">
</a>
</li>
<li>
<a href="#">
<img class="img-fluid" src="{%
static "app9/assets/img/post/post_6.png" %}" alt="">
</a>
</li>
<li>
<a href="#">
<img class="img-fluid" src="{%
static "app9/assets/img/post/post_7.png" %}" alt="">
</a>
</li>
<li>
<a href="#">
<img class="img-fluid" src="{%
static "app9/assets/img/post/post_8.png" %}" alt="">
</a>
</li>
<li>
<a href="#">
<img class="img-fluid" src="{%
static "app9/assets/img/post/post_9.png" %}" alt="">
</a>
</li>
<li>
<a href="#">
<img class="img-fluid" src="{%
static "app9/assets/img/post/post_10.png" %}" alt="">
</a>
</li>
</ul>
</aside>
<aside class="single_sidebar_widget
newsletter_widget">
<h4 class="widget_title" style="color:
#2d2d2d;">Newsletter</h4>
<form action="#">
<div class="form-group">
<input type="email" class="form-
control" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Enter
email'" placeholder='Enter email' required>
</div>
<button class="button rounded-0 primary-
bg text-white w-100 btn_1 boxed-btn"
type="submit">Subscribe</button>
</form>
</aside>
</div>
</div>
</div>
</div>
</section>

</main>
{%endblock%}

COURSES
{% extends 'app9/base.html' %}
{% load static %}
{% block content %}
<main>

<section class="slider-area slider-area2">
<div class="slider-active">

<div class="single-slider slider-height2">
<div class="container">
<div class="row">
<div class="col-xl-8 col-lg-11 col-md-12">
<div class="hero__caption hero__caption2">
<h1 data-animation="bounceIn" data-
delay="0.2s">Our courses</h1>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="index.html">Home</a></li>
<li class="breadcrumb-item"><a
href="#">Services</a></li>
</ol>
</nav>

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

<div class="courses-area section-padding40 fix">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8">
<div class="section-tittle text-center mb-55">
<h2>Our featured courses</h2>
</div>
</div>
</div>
<div class="row">

{% for x in CourseData %}
<div class="col-lg-4">
<div class="properties properties2 mb-30">
<div class="properties__card">
<div class="properties__img overlay1">
<a href="#"><img src="{{ x.img.url }}"
alt=""></a>
</div>
<div class="properties__caption">
<p>User Experience</p>
<h3><a href="#">{{x.title}}</a></h3>
<p> {{x.despription}}

</p>
<div class="properties__footer d-flex
justify-content-between align-items-center">
<div class="restaurant-name">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-
half"></i>
</div>
<p><span>(4.5)</span> based on
120</p>
</div>
<div class="price">
<span>${{x.price}}</span>
</div>
</div>
<a href="#" class="border-btn border-
btn2">Find out more</a>
</div>

</div>
</div>
</div>
{% endfor %}

<div class="topic-area">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8">
<div class="section-tittle text-center mb-55">
<h2>Explore top subjects</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img style=" opacity: 1;" src="{% static
"app9/assets/img/gallery/topic1.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Python
Programing</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic2.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Web
development</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic3.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Full stack</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic4.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Django</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic5.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Html&Css</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic6.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">Javascript</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic7.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">React js</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-topic text-center mb-30">
<div class="topic-img">
<img src="{% static
"app9/assets/img/gallery/topic8.png" %}" alt="">
<div class="topic-content-box">
<div class="topic-content">
<h3><a href="#">DATABASE</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-12">
<div class="section-tittle text-center mt-20">
<a href="courses.html" class="border-btn">View
More Subjects</a>
</div>
</div>
</div>
</div>
</div>


<div class="services-area services-area2 section-padding40">
<div class="container">
<div class="row justify-content-sm-center">
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon1.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>60+ UX courses</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon2.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>Expert instructors</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8">
<div class="single-services mb-30">
<div class="features-icon">
<img src="{% static
"app9/assets/img/icon/icon3.svg" %}" alt="">
</div>
<div class="features-caption">
<h3>Life time access</h3>
<p>The automated process all your website
tasks.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
{% if user.is_authenticated %}
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {

var url = "{% url 'erp_index' %}";

$(location).attr('href',url);

});
</script>
{% endif %}
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins');
/* BASIC */

html {
background-color: #56baed;
}

body {
font-family: "Poppins", sans-serif;
height: 100vh;
}

a {
color: #92badd;
display:inline-block;
text-decoration: none;
font-weight: 400;
}

h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
color: #cccccc;
}

/* STRUCTURE */
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}

#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
width: 90%;
max-width: 450px;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}

#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}

/* TABS */

h2.inactive {
color: #cccccc;
}

h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}

/* FORM TYPOGRAPHY*/

input[type=button], input[type=submit], input[type=reset] {

background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover

{
background-color: #39ace7;
}

input[type=button]:active, input[type=submit]:active,
input[type=reset]:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}

input[type=text] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}

input[type=text]:placeholder {
color: #cccccc;
}

input[type=password] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

input[type=password]:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}

input[type=password]:placeholder {
color: #cccccc;
}

/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */

.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

/* Simple CSS3 Fade-in Animation */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}

.fadeIn.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.fadeIn.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.fadeIn.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}

.fadeIn.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
display: block;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background-color: #56baed;
content: "";
transition: width 0.2s;
}

.underlineHover:hover {
color: #0d0d0d;
}

.underlineHover:hover:after{
width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
*, *:before, *:after {
box-sizing: border-box;
}

body {
min-height: 100vh;
font-family: "Raleway", sans-serif;
}

.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.container:hover .top:before, .container:hover .top:after, .container:hover
.bottom:before, .container:hover .bottom:after, .container:active
.top:before, .container:active .top:after, .container:active .bottom:before,
.container:active .bottom:after {
margin-left: 200px;
transform-origin: -200px 50%;
transition-delay: 0s;
}
.container:hover .center, .container:active .center {
opacity: 1;
transition-delay: 0.2s;
}
.top:before, .top:after, .bottom:before, .bottom:after {
content: "";
display: block;
position: absolute;
width: 200vmax;
height: 200vmax;
top: 50%;
left: 50%;
margin-top: -100vmax;
transform-origin: 0 50%;
transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
z-index: 10;
opacity: 0.65;
transition-delay: 0.2s;
}

.top:before {
transform: rotate(45deg);
background: #e46569;
}
.top:after {
transform: rotate(135deg);
background: #ecaf81;
}

.bottom:before {
transform: rotate(-45deg);
background: #60b8d4;
}
.bottom:after {
transform: rotate(-135deg);
background: #3745b5;
}

.center {
position: absolute;
width: 400px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
transition-delay: 0s;
color: #333;
}
.center input {
width: 70%;
padding: 15px;
margin: 12px;
border-radius: 35px;
border: 1px solid #ccc;
font-family: inherit;
}

.button-23 {
background-color: #FFFFFF;
border: 1px solid #222222;
border-radius: 8px;
box-sizing: border-box;
color: #222222;
cursor: pointer;
display: inline-block;
font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica
Neue",sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
margin: 0;
outline: none;
padding: 13px 23px;
position: relative;
text-align: center;
text-decoration: none;
touch-action: manipulation;
transition: box-shadow .2s,-ms-transform .1s,-webkit-transform
.1s,transform .1s;
user-select: none;
-webkit-user-select: none;
width: auto;
}

.button-23:focus-visible {
box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
transition: box-shadow .2s;
}

.button-23:active {
background-color: #F7F7F7;
border-color: #000000;
transform: scale(.96);
}

.button-23:disabled {
border-color: #DDDDDD;
color: #DDDDDD;
cursor: not-allowed;
opacity: 1;
}
}
</style>
<body>

<div class="container" onclick="onclick">

<div class="top"></div>
<div class="bottom"></div>
<div class="center">
<h2>Please Sign In</h2>


<form method="post">
{% csrf_token %}
{{ form }}
<input style=" margin-left: 31px;" type="submit" class="fadeIn fourth"
value="Log In">
</form>

</body>
</html>

REGISTERATION
<!DOCTYPE html>
<html lang="en">

var url = "{% url 'erp_index' %}";

$(location).attr('href',url);

});
</scriptz>
{% endif %}
<style>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}

ol,
ul {
list-style: none;
margin: 0px;
padding: 0px;
}

blockquote,
q {
quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/-- start editing from here --/

a {
text-decoration: none;
}
.txt-rt {
text-align: right;
}

/* text align right */

.txt-lt {
text-align: left;
}

/* text align left */

.txt-center {
text-align: center;
}

/* text align center */

.float-rt {
float: right;
}

/* float right */
.float-lt {
float: left;
}

/* float left */
.clear {
clear: both;
}

/* clear float */
.pos-relative {
position: relative;
}

/* Position Relative */
.pos-absolute {
position: absolute;
}

/* Position Absolute */
.vertical-base {
vertical-align: baseline;
}

/* vertical align baseline */

.vertical-top {
vertical-align: top;
}

/* vertical align top */

nav.vertical ul li {
display: block;
}

/* vertical menu */
nav.horizontal ul li {
display: inline-block;
}

/* horizontal menu */
img {
max-width: 100%;
}

/-- end reset --/

body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #76b852, #8dc26f);
background: -moz-linear-gradient(to top, #76b852, #8dc26f);
background: -o-linear-gradient(to top, #76b852, #8dc26f);
background: linear-gradient(to top, #76b852, #8dc26f);
background-size: cover;
background-attachment: fixed;
font-family: "Roboto", sans-serif;
}

h1 {
font-size: 3em;
text-align: center;
color: #fff;
font-weight: 100;
text-transform: capitalize;
letter-spacing: 4px;
font-family: "Roboto", sans-serif;
}

/-- main --/

.main-w3layouts {
padding: 3em 0 1em;
}

.main-agileinfo {
width: 35%;
margin: 3em auto;
background: rgba(0, 0, 0, 0.18);
background-size: cover;
}

.agileits-top {
padding: 3em;
}

input[type="text"],
input[type="email"],
input[type="password"] {
font-size: 0.9em;
color: #fff;
font-weight: 100;
width: 94.5%;
display: block;
border: none;
padding: 0.8em;
border: solid 1px rgba(255, 255, 255, 0.37);
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff
4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff
4%);
background-position: -800px 0;
background-size: 100%;
background-repeat: no-repeat;
color: #fff;
font-family: "Roboto", sans-serif;
}

input.email,
input.text.w3lpass {
margin: 2em 0;
}

.text:focus,
.text:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}

.text:focus::-webkit-input-placeholder,
.text:valid::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9em;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-o-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
visibility: visible !important;
}

::-webkit-input-placeholder {
color: #fff;
font-weight: 100;
}

:-moz-placeholder {
/* Firefox 18- */
color: #fff;
}

::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}

:-ms-input-placeholder {
color: #fff;
}
input[type="submit"] {
font-size: 0.9em;
color: #fff;
background: #76b852;
outline: none;
border: 1px solid #76b852;
cursor: pointer;
padding: 0.9em;
-webkit-appearance: none;
width: 100%;
margin: 2em 0;
letter-spacing: 4px;
}

input[type="submit"]:hover {
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
transition: 0.5s all;
background: #8dc26f;
}

.agileits-top p {
font-size: 1em;
color: #fff;
text-align: center;
letter-spacing: 1px;
font-weight: 300;
}

.agileits-top p a {
color: #fff;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
transition: 0.5s all;
font-weight: 400;
}

.agileits-top p a:hover {
color: #76b852;
}

/-- //main --/

/*-- checkbox --*/
.wthree-text label {
font-size: 0.9em;
color: #fff;
font-weight: 200;
cursor: pointer;
position: relative;
}

input.checkbox {
background: #8dc26f;
cursor: pointer;
width: 1.2em;
height: 1.2em;
}

input.checkbox:before {
content: "";
position: absolute;
width: 1.2em;
height: 1.2em;
background: inherit;
cursor: pointer;
}

input.checkbox:after {
content: "";
position: absolute;
top: 0px;
left: 0;
z-index: 1;
width: 1.2em;
height: 1.2em;
border: 1px solid #fff;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}

input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: 0.5rem;
border-color: #fff;
border-top-color: transparent;
border-right-color: transparent;
}

.anim input.checkbox:checked:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: 0.5rem;
border-color: transparent;
border-right-color: transparent;
animation: 0.4s rippling 0.4s ease;
animation-fill-mode: forwards;
}

@keyframes rippling {
50% {
border-left-color: #fff;
}
100% {
border-bottom-color: #fff;
border-left-color: #fff;
}
}

/-- //checkbox --/

/*-- copyright --*/
.colorlibcopy-agile {
margin: 2em 0 1em;
text-align: center;
}

.colorlibcopy-agile p {
font-size: 0.9em;
color: #fff;
line-height: 1.8em;
letter-spacing: 1px;
font-weight: 100;
}

.colorlibcopy-agile p a {
color: #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}

.colorlibcopy-agile p a:hover {
color: #000;
}

/-- //copyright --/

.wrapper {
position: relative;
overflow: hidden;
}

.colorlib-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.colorlib-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 20s infinite;
-moz-animation: square 250s infinite;
-o-animation: square 20s infinite;
-ms-animation: square 20s infinite;
animation: square 20s infinite;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}

.colorlib-bubbles li:nth-child(1) {
left: 10%;
}

.colorlib-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
-moz-animation-duration: 17s;
-o-animation-duration: 17s;
animation-duration: 17s;
}

.colorlib-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}

.colorlib-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
-moz-animation-duration: 22s;
-o-animation-duration: 22s;
-ms-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.colorlib-bubbles li:nth-child(5) {
left: 70%;
}

.colorlib-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}

.colorlib-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}

.colorlib-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
-moz-animation-duration: 40s;
animation-duration: 40s;
}

.colorlib-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}

.colorlib-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

100% {
-webkit-transform: translateY(-700px) rotate(600deg);
-moz-transform: translateY(-700px) rotate(600deg);
-o-transform: translateY(-700px) rotate(600deg);
-ms-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}

@keyframes square {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

/-- responsive-design --/

@media (max-width: 1440px) {
input[type="text"],
input[type="email"],
input[type="password"] {
width: 94%;
}
}

@media (max-width: 1366px) {

h1 {
font-size: 2.6em;
}

.agileits-top {
padding: 2.5em;
}

.main-agileinfo {
margin: 2em auto;
}

.main-agileinfo {
width: 36%;
}
}

@media (max-width: 1280px) {

.main-agileinfo {
width: 40%;
}
}

@media (max-width: 1080px) {

.main-agileinfo {
width: 46%;
}
}

@media (max-width: 1024px) {

.main-agileinfo {
width: 49%;
}
}

@media (max-width: 991px) {

h1 {
font-size: 2.4em;
}

.main-w3layouts {
padding: 2em 0 1em;
}
}

@media (max-width: 900px) {

.main-agileinfo {
width: 58%;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 93%;
}
}

@media (max-width: 800px) {

h1 {
font-size: 2.2em;
}
}

@media (max-width: 736px) {

.main-agileinfo {
width: 62%;
}
}

@media (max-width: 667px) {

.main-agileinfo {
width: 67%;
}
}

@media (max-width: 600px) {

.agileits-top {
padding: 2.2em;
}

input.email,
input.text.w3lpass {
margin: 1.5em 0;
}

input[type="submit"] {
margin: 2em 0;
}

h1 {
font-size: 2em;
letter-spacing: 3px;
}
}

@media (max-width: 568px) {

.main-agileinfo {
width: 75%;
}

.colorlibcopy-agile p {
padding: 0 2em;
}
}

@media (max-width: 480px) {

h1 {
font-size: 1.8em;
letter-spacing: 3px;
}

.agileits-top {
padding: 1.8em;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 91%;
}

.agileits-top p {
font-size: 0.9em;
}
}

@media (max-width: 414px) {

h1 {
font-size: 1.8em;
letter-spacing: 2px;
}

.main-agileinfo {
width: 85%;
margin: 1.5em auto;
}

.text:focus,
.text:valid {
background-position: 0 0px;
}

.wthree-text ul li,
.wthree-text ul li:nth-child(2) {
display: block;
float: none;
}

.wthree-text ul li:nth-child(2) {
margin-top: 1.5em;
}

input[type="submit"] {
margin: 2em 0 1.5em;
letter-spacing: 3px;
}

input[type="submit"] {
margin: 2em 0 1.5em;
}

.colorlibcopy-agile {
margin: 1em 0 1em;
}
}

@media (max-width: 384px) {

.main-agileinfo {
width: 88%;
}

.colorlibcopy-agile p {
padding: 0 1em;
}
}

@media (max-width: 375px) {

.agileits-top p {
letter-spacing: 0px;
}
}
@media (max-width: 320px) {
.main-w3layouts {
padding: 1.5em 0 0;
}

.agileits-top {
padding: 1.2em;
}

.colorlibcopy-agile {
margin: 0 0 1em;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 89.5%;
font-size: 0.85em;
}

h1 {
font-size: 1.7em;
letter-spacing: 0px;
}

.main-agileinfo {
width: 92%;
margin: 1em auto;
}

.text:focus,
.text:valid {
background-position: 0 0px;
}

input[type="submit"] {
margin: 1.5em 0;
padding: 0.8em;
font-size: 0.85em;
}

.colorlibcopy-agile p {
font-size: 0.85em;
}

.wthree-text label {
font-size: 0.85em;
}

.main-w3layouts {
padding: 1em 0 0;
}
}
</style>
<body>

<div class="main-w3layouts wrapper">
<h1>Creative SignUp Form</h1>
<div class="main-agileinfo">
<div class="agileits-top">

<form method="post">
{% csrf_token %}
{{ form }}
<input style=" margin-left: 31px;" type="submit" class="fadeIn fourth"
value="Log In">
</form>















</div>
</div>





<ul class="colorlib-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

</body>
</html>

Rationale Statement Lesson Plan
No ratings yet
Rationale Statement Lesson Plan
2 pages
BCAEd - Course Description
No ratings yet
BCAEd - Course Description
13 pages
WLL LS6
100% (1)
WLL LS6
4 pages
Index Page
No ratings yet
Index Page
16 pages
Assessment 2 Web
No ratings yet
Assessment 2 Web
30 pages
About Us - HTML
No ratings yet
About Us - HTML
28 pages
PHP PHP
No ratings yet
PHP PHP
7 pages
Codsoft
No ratings yet
Codsoft
23 pages
hml
No ratings yet
hml
9 pages
Help Menu
No ratings yet
Help Menu
31 pages
EXPERIMENT 10
No ratings yet
EXPERIMENT 10
33 pages
Interface
No ratings yet
Interface
18 pages
Sounak Portfolio Website
No ratings yet
Sounak Portfolio Website
16 pages
WEB[1]
No ratings yet
WEB[1]
26 pages
FSWD
No ratings yet
FSWD
16 pages
web_final[1]
No ratings yet
web_final[1]
26 pages
Web Page Source Code PDF
No ratings yet
Web Page Source Code PDF
26 pages
gtfdyhgytfyuh
No ratings yet
gtfdyhgytfyuh
4 pages
GitHub Repo
No ratings yet
GitHub Repo
6 pages
Sear Vices
No ratings yet
Sear Vices
5 pages
Second Option
No ratings yet
Second Option
7 pages
Academy
No ratings yet
Academy
4 pages
project
No ratings yet
project
3 pages
Computer Project Class 12
No ratings yet
Computer Project Class 12
85 pages
Lab File WT 1 To 3
No ratings yet
Lab File WT 1 To 3
24 pages
About
No ratings yet
About
4 pages
Web Tech File
No ratings yet
Web Tech File
19 pages
3
No ratings yet
3
7 pages
HTML Head Meta Meta Meta Meta Meta Title Title: Inicio
No ratings yet
HTML Head Meta Meta Meta Meta Meta Title Title: Inicio
6 pages
React Portfolio App Development: Increase your online presence and create your personal brand
From Everand
React Portfolio App Development: Increase your online presence and create your personal brand
Abdelfattah Ragab
No ratings yet
Asptilsand Darshan
No ratings yet
Asptilsand Darshan
47 pages
Set Your Saving Goal
No ratings yet
Set Your Saving Goal
4 pages
Green University of Bangladesh Department of Computer Science and Engineering (CSE)
No ratings yet
Green University of Bangladesh Department of Computer Science and Engineering (CSE)
13 pages
!Doctype HTML
No ratings yet
!Doctype HTML
3 pages
Home For Student
No ratings yet
Home For Student
76 pages
wt (1)
No ratings yet
wt (1)
33 pages
Web Design Record
No ratings yet
Web Design Record
88 pages
Contact
No ratings yet
Contact
5 pages
IAT I III YEAR
No ratings yet
IAT I III YEAR
19 pages
Ca 2 HTML
No ratings yet
Ca 2 HTML
8 pages
Internshala
No ratings yet
Internshala
28 pages
overview
No ratings yet
overview
5 pages
Internship Project Code
No ratings yet
Internship Project Code
100 pages
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
From Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
No ratings yet
Acs221029 Wad
No ratings yet
Acs221029 Wad
7 pages
It3511 - Full Stack Web Development Lab Manual Final 14112023
No ratings yet
It3511 - Full Stack Web Development Lab Manual Final 14112023
81 pages
Mayur
No ratings yet
Mayur
4 pages
My File
No ratings yet
My File
5 pages
WEB Assignment 2
No ratings yet
WEB Assignment 2
10 pages
DOCTYPE ttttttthtml-WPS Office
No ratings yet
DOCTYPE ttttttthtml-WPS Office
6 pages
indexxxx
No ratings yet
indexxxx
16 pages
hi
No ratings yet
hi
3 pages
Wa0015.
No ratings yet
Wa0015.
61 pages
Code Part4
No ratings yet
Code Part4
15 pages
Project 1
No ratings yet
Project 1
26 pages
!DOCTYPE html
No ratings yet
!DOCTYPE html
3 pages
Message
No ratings yet
Message
3 pages
Website Draft
No ratings yet
Website Draft
12 pages
Message
No ratings yet
Message
13 pages
HTML Lang: !doctype HTML Head Meta Meta Link Title Title
No ratings yet
HTML Lang: !doctype HTML Head Meta Meta Link Title Title
12 pages
Testimonial
No ratings yet
Testimonial
6 pages
hom1
No ratings yet
hom1
5 pages
Aboutus
No ratings yet
Aboutus
2 pages
HRM Module 2
No ratings yet
HRM Module 2
31 pages
College of Development Education: Central Bicol State University of Agriculture
No ratings yet
College of Development Education: Central Bicol State University of Agriculture
4 pages
Neust Edu f007 Ratingform
No ratings yet
Neust Edu f007 Ratingform
1 page
Electrical Charges (Week 10 Day 1)
100% (2)
Electrical Charges (Week 10 Day 1)
2 pages
Reflection PLLP
No ratings yet
Reflection PLLP
1 page
HW Article
No ratings yet
HW Article
13 pages
Edpuzzle Quizziz Rubric
No ratings yet
Edpuzzle Quizziz Rubric
2 pages
G3 BoSY CRLA Scoresheets and Administration Guides
No ratings yet
G3 BoSY CRLA Scoresheets and Administration Guides
7 pages
Principles of Outcome Based Education
No ratings yet
Principles of Outcome Based Education
1 page
Multigrade Lesson Plan
100% (1)
Multigrade Lesson Plan
6 pages
Action Plan Template
No ratings yet
Action Plan Template
5 pages
Springfield College - Daily Lesson Plan
No ratings yet
Springfield College - Daily Lesson Plan
2 pages
Peer Teaching Reflection
No ratings yet
Peer Teaching Reflection
2 pages
Mapeh 9 Music 2nd Quarter
100% (2)
Mapeh 9 Music 2nd Quarter
3 pages
Working in Groups: That Because
No ratings yet
Working in Groups: That Because
5 pages
Orientation PPT 2024
No ratings yet
Orientation PPT 2024
46 pages
GG Resume
No ratings yet
GG Resume
1 page
DLL in ORAL COMMUNICATION
No ratings yet
DLL in ORAL COMMUNICATION
3 pages
DLL Jan.29 Feb.3 2023 New
No ratings yet
DLL Jan.29 Feb.3 2023 New
2 pages
Get Multicultural Books for PreK-Grade Three Xiufang Chen PDF ebook with Full Chapters Now
100% (4)
Get Multicultural Books for PreK-Grade Three Xiufang Chen PDF ebook with Full Chapters Now
66 pages
Art Integration Lesson Plan Template: (Please Circle)
No ratings yet
Art Integration Lesson Plan Template: (Please Circle)
6 pages
Learning Episode 14 (FS 2)
No ratings yet
Learning Episode 14 (FS 2)
2 pages
Lesson Plan Guess Who
No ratings yet
Lesson Plan Guess Who
7 pages
Daily Lesson Plan in MTB 3 2022
No ratings yet
Daily Lesson Plan in MTB 3 2022
3 pages
Professional Growth Plan
No ratings yet
Professional Growth Plan
2 pages
launchpad & auto alu
No ratings yet
launchpad & auto alu
8 pages
(Ebook) Games-To-Teach or Games-To-Learn: Unlocking the Power of Digital Game-Based Learning Through Performance by Yam San Chee ISBN 9789812875174, 9789812875181, 9812875174, 9812875182 all chapter instant download
100% (14)
(Ebook) Games-To-Teach or Games-To-Learn: Unlocking the Power of Digital Game-Based Learning Through Performance by Yam San Chee ISBN 9789812875174, 9789812875181, 9812875174, 9812875182 all chapter instant download
65 pages

ABOUT

Uploaded by

ABOUT

Uploaded by

ABOUT

<div class="video-icon" >

<div class="video-icon" >

<!-- <form class="form-contact contact_form"

var url = "{% url 'erp_index' %}";

input[type=button], input[type=submit], input[type=reset] {

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover

/* Simple CSS3 Fade-in-down Animation */

/* Simple CSS3 Fade-in Animation */

<div class="container" onclick="onclick">

var url = "{% url 'erp_index' %}";

/*-- start editing from here --*/

/* text align right */

/* text align left */

/* text align center */

/* vertical align baseline */

/* vertical align top */

/*-- end reset --*/

/*-- main --*/

/*-- //main --*/

/*-- //checkbox --*/

/*-- //copyright --*/

/*-- responsive-design --*/

@media (max-width: 1366px) {

@media (max-width: 1280px) {

@media (max-width: 1080px) {

@media (max-width: 1024px) {

@media (max-width: 991px) {

@media (max-width: 900px) {

@media (max-width: 800px) {

@media (max-width: 736px) {

@media (max-width: 667px) {

@media (max-width: 600px) {

@media (max-width: 568px) {

@media (max-width: 480px) {

@media (max-width: 414px) {

@media (max-width: 384px) {

@media (max-width: 375px) {

You might also like

/-- start editing from here --/

/-- end reset --/

/-- main --/

/-- //main --/

/-- //checkbox --/

/-- //copyright --/

/-- responsive-design --/