780 lines
34 KiB
HTML
780 lines
34 KiB
HTML
{% extends "snippets/main.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<section class="hero-section hero-section-full-height">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-12 p-0">
|
|
<div id="hero-slide" class="carousel carousel-fade slide" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img src="{% static 'images/slide/volunteer-helping-with-donation-box.jpg' %}" class="carousel-image img-fluid" alt="...">
|
|
<div class="carousel-caption d-flex flex-column justify-content-end">
|
|
<h1>Social</h1>
|
|
<p>Social learning experience mencakup</br>budaya, interaksi, dan komunikasi sosial.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="{% static 'images/slide/volunteer-selecting-organizing-clothes-donations-charity.jpg' %}" class="carousel-image img-fluid" alt="...">
|
|
<div class="carousel-caption d-flex flex-column justify-content-end">
|
|
<h1>Ecological</h1>
|
|
<p>Ecological learning experience mencerminkan</br>keseimbangan sumber daya dan ekosistem dalam </br>kegiatan Anindhaloka.</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="{% static 'images/slide/medium-shot-people-collecting-donations.jpg' %}" class="carousel-image img-fluid" alt="...">
|
|
<div class="carousel-caption d-flex flex-column justify-content-end">
|
|
<h1>Spiritual</h1>
|
|
<p>Spiritual learning experience menyeimbangkan</br>keyakinan, pikiran, dan pemahaman diri.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item">
|
|
<img src="{% static 'images/slide/medium-shot-people-collecting-donations.jpg' %}" class="carousel-image img-fluid" alt="...">
|
|
<div class="carousel-caption d-flex flex-column justify-content-end">
|
|
<h1>Technological</h1>
|
|
<p>Technological learning menggambarkan</br>solusi, kemodernan, dan dampak teknologi Anindhaloka.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#hero-slide" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#hero-slide" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-10 col-12 text-center mx-auto">
|
|
<h2 class="mb-5">Welcome to Anindhaloka</h2>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0 mb-md-4">
|
|
<div class="featured-block d-flex justify-content-center align-items-center">
|
|
<a href="donate.html" class="d-block">
|
|
<img src="{% static 'images/icons/heart.png' %}" class="featured-block-image img-fluid" alt="">
|
|
<p class="featured-block-text"><strong>Caring</strong> Earth</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
|
|
<div class="featured-block d-flex justify-content-center align-items-center">
|
|
<a href="donate.html" class="d-block">
|
|
<img src="{% static 'images/icons/scholarship.png' %}" class="featured-block-image img-fluid" alt="">
|
|
|
|
<p class="featured-block-text"><strong>Join a</strong> Program</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
|
|
<div class="featured-block d-flex justify-content-center align-items-center">
|
|
<a href="donate.html" class="d-block">
|
|
<img src="{% static 'images/icons/hands.png' %}" class="featured-block-image img-fluid" alt="">
|
|
|
|
<p class="featured-block-text">Become a <strong>volunteer</strong></p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0 mb-md-4">
|
|
<div class="featured-block d-flex justify-content-center align-items-center">
|
|
<a href="donate.html" class="d-block">
|
|
<img src="{% static 'images/icons/receive.png' %}" class="featured-block-image img-fluid" alt="">
|
|
|
|
<p class="featured-block-text">Be a<strong>Support</strong></p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding section-bg" id="section_2">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6 col-12 mb-5 mb-lg-0">
|
|
<img src="{% static 'images/ours.jpg' %}" class="custom-text-box-image img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-12">
|
|
<div class="custom-text-box">
|
|
<h2 class="mb-2">Our Story</h2>
|
|
|
|
<h5 class="mb-3">Anindhaloka, Rumah Gotong Royong</h5>
|
|
|
|
<p class="mb-0">Rumah terpercaya dan kesayangan yang menghubungkan pikiran-hati-tindakan Pemelajar
|
|
Bahagia untuk melahirkan mahakarya bagi kemanusiaan, kelestarian alam, dan kebijaksanaan
|
|
spiritualitas melalui kerja Gotong Royong.</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<div class="custom-text-box mb-lg-0">
|
|
<h5 class="mb-3">Our Mission</h5>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
|
|
<ul class="custom-list mt-2">
|
|
<li class="custom-list-item d-flex">
|
|
<i class="bi-check custom-text-box-icon me-2"></i>
|
|
Charity Theme
|
|
</li>
|
|
|
|
<li class="custom-list-item d-flex">
|
|
<i class="bi-check custom-text-box-icon me-2"></i>
|
|
Semantic HTML
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<div class="custom-text-box d-flex flex-wrap d-lg-block mb-lg-0">
|
|
<div class="counter-thumb">
|
|
<div class="d-flex">
|
|
<span class="counter-number" data-from="1" data-to="2009" data-speed="1000"></span>
|
|
<span class="counter-number-text"></span>
|
|
</div>
|
|
|
|
<span class="counter-text">Founded</span>
|
|
</div>
|
|
|
|
<div class="counter-thumb mt-4">
|
|
<div class="d-flex">
|
|
<span class="counter-number" data-from="1" data-to="120" data-speed="1000"></span>
|
|
<span class="counter-number-text">B</span>
|
|
</div>
|
|
|
|
<span class="counter-text">Donations</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="about-section section-padding">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6 col-md-5 col-12">
|
|
<img src="{% static 'images/founder.jpg' %}" class="about-image ms-lg-auto bg-light shadow-lg img-fluid" alt="">
|
|
</div>
|
|
|
|
<div class="col-lg-5 col-md-7 col-12">
|
|
<div class="custom-text-block">
|
|
<h2 class="mb-0">Cokorda Istri Dewi</h2>
|
|
|
|
<p class="text-muted mb-lg-4 mb-md-4">Founder Anindhaloka</p>
|
|
|
|
<p>Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito Professional charity theme based</p>
|
|
|
|
<p>You are not allowed to redistribute this template ZIP file on any other template collection website. Please contact TemplateMo for more information.</p>
|
|
|
|
<ul class="social-icon mt-4">
|
|
<li class="social-icon-item">
|
|
<a href="#" class="social-icon-link bi-twitter"></a>
|
|
</li>
|
|
|
|
<li class="social-icon-item">
|
|
<a href="#" class="social-icon-link bi-facebook"></a>
|
|
</li>
|
|
|
|
<li class="social-icon-item">
|
|
<a href="#" class="social-icon-link bi-instagram"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-section section-padding section-bg">
|
|
<div class="container">
|
|
<div class="row justify-content-center align-items-center">
|
|
|
|
<div class="col-lg-5 col-12 ms-auto">
|
|
<h2 class="mb-0">Make an impact. <br> Save lives.</h2>
|
|
</div>
|
|
|
|
<div class="col-lg-5 col-12">
|
|
<a href="#" class="me-4">Make a donation</a>
|
|
|
|
<a href="#section_4" class="custom-btn btn smoothscroll">Become a volunteer</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="section-padding" id="section_3">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-12 col-12 text-center mb-4">
|
|
<h2>Our Program / Event</h2>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
|
|
<div class="custom-block-wrap">
|
|
<img src="{% static 'images/causes/group-african-kids-paying-attention-class.jpg' %}" class="custom-block-image img-fluid" alt="">
|
|
|
|
<div class="custom-block">
|
|
<div class="custom-block-body">
|
|
<h5 class="mb-3">Pencil x Nature</h5>
|
|
|
|
<p>Kelas interaktif anak-anak untuk belajar ilustrasi, cat air, dan menggambar kreatif.</p>
|
|
|
|
<div class="progress mt-4">
|
|
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center my-2">
|
|
<p class="mb-0">
|
|
<strong>Raised:</strong>
|
|
$18,500
|
|
</p>
|
|
|
|
<p class="ms-auto mb-0">
|
|
<strong>Goal:</strong>
|
|
$32,000
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="donate.html" class="custom-btn btn">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
|
|
<div class="custom-block-wrap">
|
|
<img src="{% static 'images/causes/poor-child-landfill-looks-forward-with-hope.jpg' %}" class="custom-block-image img-fluid" alt="">
|
|
|
|
<div class="custom-block">
|
|
<div class="custom-block-body">
|
|
<h5 class="mb-3">Pasar Bahagia</h5>
|
|
|
|
<p>Menghadirkan kreator untuk Indonesia yang lebih bahagia dan berkelanjutan.</p>
|
|
|
|
<div class="progress mt-4">
|
|
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center my-2">
|
|
<p class="mb-0">
|
|
<strong>Raised:</strong>
|
|
$27,600
|
|
</p>
|
|
|
|
<p class="ms-auto mb-0">
|
|
<strong>Goal:</strong>
|
|
$60,000
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="donate.html" class="custom-btn btn">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 col-12">
|
|
<div class="custom-block-wrap">
|
|
<img src="{% static 'images/causes/african-woman-pouring-water-recipient-outdoors.jpg' %}" class="custom-block-image img-fluid" alt="">
|
|
|
|
<div class="custom-block">
|
|
<div class="custom-block-body">
|
|
<h5 class="mb-3">Kelas Unik</h5>
|
|
|
|
<p>Kelas Seni Unik x Nin hadir untuk mengasah kreativitas dan ekspresi melalui berbagai seni.</p>
|
|
|
|
<div class="progress mt-4">
|
|
<div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center my-2">
|
|
<p class="mb-0">
|
|
<strong>Raised:</strong>
|
|
$84,600
|
|
</p>
|
|
|
|
<p class="ms-auto mb-0">
|
|
<strong>Goal:</strong>
|
|
$100,000
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="donate.html" class="custom-btn btn">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="volunteer-section section-padding" id="section_4">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6 col-12">
|
|
<h2 class="text-white mb-4">Volunteer</h2>
|
|
|
|
<form class="custom-form volunteer-form mb-5 mb-lg-0" action="#" method="post" role="form">
|
|
<h3 class="mb-4">Become a volunteer today</h3>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 col-12">
|
|
<input type="text" name="volunteer-name" id="volunteer-name" class="form-control" placeholder="Jack Doe" required>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-12">
|
|
<input type="email" name="volunteer-email" id="volunteer-email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Jackdoe@gmail.com" required>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-12">
|
|
<input type="text" name="volunteer-subject" id="volunteer-subject" class="form-control" placeholder="Subject" required>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-12">
|
|
<div class="input-group input-group-file">
|
|
<input type="file" class="form-control" id="inputGroupFile02">
|
|
|
|
<label class="input-group-text" for="inputGroupFile02">Upload your CV</label>
|
|
|
|
<i class="bi-cloud-arrow-up ms-auto"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<textarea name="volunteer-message" rows="3" class="form-control" id="volunteer-message" placeholder="Comment (Optional)"></textarea>
|
|
|
|
<button type="submit" class="form-control">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-12">
|
|
<img src="{% static 'images/smiling-casual-woman-dressed-volunteer-t-shirt-with-badge.jpg' %}" class="volunteer-image img-fluid" alt="">
|
|
|
|
<div class="custom-block-body text-center">
|
|
<h4 class="text-white mt-lg-3 mb-lg-3">About Volunteering</h4>
|
|
|
|
<p class="text-white">Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito Professional charity theme based</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="news-section section-padding" id="section_5">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-12 col-12 mb-5">
|
|
<h2>Latest News</h2>
|
|
</div>
|
|
|
|
<div class="col-lg-7 col-12">
|
|
<div class="news-block">
|
|
<div class="news-block-top">
|
|
<a href="news-detail.html">
|
|
<img src="{% static 'images/news/medium-shot-volunteers-with-clothing-donations.jpg' %}" class="news-image img-fluid" alt="">
|
|
</a>
|
|
|
|
<div class="news-category-block">
|
|
<a href="#" class="category-block-link">
|
|
Lifestyle,
|
|
</a>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Clothing Donation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news-block-info">
|
|
<div class="d-flex mt-2">
|
|
<div class="news-block-date">
|
|
<p>
|
|
<i class="bi-calendar4 custom-icon me-1"></i>
|
|
October 12, 2036
|
|
</p>
|
|
</div>
|
|
|
|
<div class="news-block-author mx-5">
|
|
<p>
|
|
<i class="bi-person custom-icon me-1"></i>
|
|
By Admin
|
|
</p>
|
|
</div>
|
|
|
|
<div class="news-block-comment">
|
|
<p>
|
|
<i class="bi-chat-left custom-icon me-1"></i>
|
|
32 Comments
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news-block-title mb-2">
|
|
<h4><a href="news-detail.html" class="news-block-title-link">Clothing donation to urban area</a></h4>
|
|
</div>
|
|
|
|
<div class="news-block-body">
|
|
<p>Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito Professional charity theme based on Bootstrap</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news-block mt-3">
|
|
<div class="news-block-top">
|
|
<a href="news-detail.html">
|
|
<img src="{% static 'images/news/medium-shot-people-collecting-foodstuff.jpg' %}" class="news-image img-fluid" alt="">
|
|
</a>
|
|
|
|
<div class="news-category-block">
|
|
<a href="#" class="category-block-link">
|
|
Food,
|
|
</a>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Donation,
|
|
</a>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Caring
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news-block-info">
|
|
<div class="d-flex mt-2">
|
|
<div class="news-block-date">
|
|
<p>
|
|
<i class="bi-calendar4 custom-icon me-1"></i>
|
|
October 20, 2036
|
|
</p>
|
|
</div>
|
|
|
|
<div class="news-block-author mx-5">
|
|
<p>
|
|
<i class="bi-person custom-icon me-1"></i>
|
|
By Admin
|
|
</p>
|
|
</div>
|
|
|
|
<div class="news-block-comment">
|
|
<p>
|
|
<i class="bi-chat-left custom-icon me-1"></i>
|
|
35 Comments
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news-block-title mb-2">
|
|
<h4><a href="news-detail.html" class="news-block-title-link">Food donation area</a></h4>
|
|
</div>
|
|
|
|
<div class="news-block-body">
|
|
<p>Sed leo nisl, posuere at molestie ac, suscipit auctor mauris. Etiam quis metus elementum, tempor risus vel, condimentum orci</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-12 mx-auto">
|
|
<form class="custom-form search-form" action="#" method="get" role="form">
|
|
<input name="search" type="search" class="form-control" id="search" placeholder="Search" aria-label="Search">
|
|
|
|
<button type="submit" class="form-control">
|
|
<i class="bi-search"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<h5 class="mt-5 mb-3">Recent news</h5>
|
|
|
|
<div class="news-block news-block-two-col d-flex mt-4">
|
|
<div class="news-block-two-col-image-wrap">
|
|
<a href="news-detail.html">
|
|
<img src="{% static 'images/news/africa-humanitarian-aid-doctor.jpg' %}" class="news-image img-fluid" alt="">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="news-block-two-col-info">
|
|
<div class="news-block-title mb-2">
|
|
<h6><a href="news-detail.html" class="news-block-title-link">Food donation area</a></h6>
|
|
</div>
|
|
|
|
<div class="news-block-date">
|
|
<p>
|
|
<i class="bi-calendar4 custom-icon me-1"></i>
|
|
October 16, 2036
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news-block news-block-two-col d-flex mt-4">
|
|
<div class="news-block-two-col-image-wrap">
|
|
<a href="news-detail.html">
|
|
<img src="{% static 'images/news/close-up-happy-people-working-together.jpg' %}" class="news-image img-fluid" alt="">
|
|
</a>
|
|
</div>
|
|
|
|
<div class="news-block-two-col-info">
|
|
<div class="news-block-title mb-2">
|
|
<h6><a href="news-detail.html" class="news-block-title-link">Volunteering Clean</a></h6>
|
|
</div>
|
|
|
|
<div class="news-block-date">
|
|
<p>
|
|
<i class="bi-calendar4 custom-icon me-1"></i>
|
|
October 24, 2036
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="category-block d-flex flex-column">
|
|
<h5 class="mb-3">Categories</h5>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Drinking water
|
|
<span class="badge">20</span>
|
|
</a>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Food Donation
|
|
<span class="badge">30</span>
|
|
</a>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Children Education
|
|
<span class="badge">10</span>
|
|
</a>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Poverty Development
|
|
<span class="badge">15</span>
|
|
</a>
|
|
|
|
<a href="#" class="category-block-link">
|
|
Clothing Donation
|
|
<span class="badge">20</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="tags-block">
|
|
<h5 class="mb-3">Tags</h5>
|
|
|
|
<a href="#" class="tags-block-link">
|
|
Donation
|
|
</a>
|
|
|
|
<a href="#" class="tags-block-link">
|
|
Clothing
|
|
</a>
|
|
|
|
<a href="#" class="tags-block-link">
|
|
Food
|
|
</a>
|
|
|
|
<a href="#" class="tags-block-link">
|
|
Children
|
|
</a>
|
|
|
|
<a href="#" class="tags-block-link">
|
|
Education
|
|
</a>
|
|
|
|
<a href="#" class="tags-block-link">
|
|
Poverty
|
|
</a>
|
|
|
|
<a href="#" class="tags-block-link">
|
|
Clean Water
|
|
</a>
|
|
</div>
|
|
|
|
<form class="custom-form subscribe-form" action="#" method="get" role="form">
|
|
<h5 class="mb-4">Newsletter Form</h5>
|
|
|
|
<input type="email" name="subscribe-email" id="subscribe-email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Email Address" required>
|
|
|
|
<div class="col-lg-12 col-12">
|
|
<button type="submit" class="form-control">Subscribe</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="testimonial-section section-padding section-bg">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-8 col-12 mx-auto">
|
|
<h2 class="mb-lg-3">Happy Partners</h2>
|
|
|
|
<div id="testimonial-carousel" class="carousel carousel-fade slide" data-bs-ride="carousel">
|
|
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<div class="carousel-caption">
|
|
<h4 class="carousel-title">Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito charity theme</h4>
|
|
|
|
<small class="carousel-name"><span class="carousel-name-title">Maria</span>, Boss</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item">
|
|
<div class="carousel-caption">
|
|
<h4 class="carousel-title">Sed leo nisl, posuere at molestie ac, suscipit auctor mauris quis metus tempor orci</h4>
|
|
|
|
<small class="carousel-name"><span class="carousel-name-title">Thomas</span>, Partner</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item">
|
|
<div class="carousel-caption">
|
|
<h4 class="carousel-title">Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito charity theme</h4>
|
|
|
|
<small class="carousel-name"><span class="carousel-name-title">Jane</span>, Advisor</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item">
|
|
<div class="carousel-caption">
|
|
<h4 class="carousel-title">Sed leo nisl, posuere at molestie ac, suscipit auctor mauris quis metus tempor orci</h4>
|
|
|
|
<small class="carousel-name"><span class="carousel-name-title">Bob</span>, Entreprenuer</small>
|
|
</div>
|
|
</div>
|
|
|
|
<ol class="carousel-indicators">
|
|
<li data-bs-target="#testimonial-carousel" data-bs-slide-to="0" class="active">
|
|
<img src="{% static 'images/avatar/portrait-beautiful-young-woman-standing-grey-wall.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
|
|
</li>
|
|
|
|
<li data-bs-target="#testimonial-carousel" data-bs-slide-to="1" class="">
|
|
<img src="{% static 'images/avatar/portrait-young-redhead-bearded-male.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
|
|
</li>
|
|
|
|
<li data-bs-target="#testimonial-carousel" data-bs-slide-to="2" class="">
|
|
<img src="{% static 'images/avatar/pretty-blonde-woman-wearing-white-t-shirt.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
|
|
</li>
|
|
|
|
<li data-bs-target="#testimonial-carousel" data-bs-slide-to="3" class="">
|
|
<img src="{% static 'images/avatar/studio-portrait-emotional-happy-funny.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
|
|
</li>
|
|
</ol>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="contact-section section-padding" id="section_6">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-4 col-12 ms-auto mb-5 mb-lg-0">
|
|
<div class="contact-info-wrap">
|
|
<h2>Get in touch</h2>
|
|
|
|
<div class="contact-image-wrap d-flex flex-wrap">
|
|
<img src="{% static 'images/avatar/pretty-blonde-woman-wearing-white-t-shirt.jpg' %}" class="img-fluid avatar-image" alt="">
|
|
|
|
<div class="d-flex flex-column justify-content-center ms-3">
|
|
<p class="mb-0">Tri Wahyuning Rahayu</p>
|
|
<p class="mb-0"><strong>HR & Office Manager</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<h5 class="mb-3">Contact Infomation</h5>
|
|
|
|
<p class="d-flex mb-2">
|
|
<i class="bi-geo-alt me-2"></i>
|
|
Bintaro, Jakarta, Indonesia
|
|
</p>
|
|
|
|
<p class="d-flex mb-2">
|
|
<i class="bi-telephone me-2"></i>
|
|
|
|
<a href="tel: 120-240-9600">
|
|
120-240-9600
|
|
</a>
|
|
</p>
|
|
|
|
<p class="d-flex">
|
|
<i class="bi-envelope me-2"></i>
|
|
|
|
<a href="mailto:info@yourgmail.com">
|
|
donate@charity.org
|
|
</a>
|
|
</p>
|
|
|
|
<a href="#" class="custom-btn btn mt-3">Get Direction</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-5 col-12 mx-auto">
|
|
<form class="custom-form contact-form" action="#" method="post" role="form">
|
|
<h2>Contact form</h2>
|
|
|
|
<p class="mb-4">Or, you can just send an email:
|
|
<a href="#">info@charity.org</a>
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<input type="text" name="first-name" id="first-name" class="form-control" placeholder="Jack" required>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<input type="text" name="last-name" id="last-name" class="form-control" placeholder="Doe" required>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Jackdoe@gmail.com" required>
|
|
|
|
<textarea name="message" rows="5" class="form-control" id="message" placeholder="What can we help you?"></textarea>
|
|
|
|
<button type="submit" class="form-control">Send Message</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %} |