devsforge · shorodilov · Jul 10, 2023 · Jun 16, 2023 · Jun 16, 2023 · Jun 16, 2023
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,12 @@
 # node modules
 /node_modules/
 
+# bootstrap source may be required for autocomplite,
+# but they aren't part of current repository content
+/css/bootstrap-*.*
+/css/bootstrap.*
+/js/bootstrap.*
+
 # emacs caches and backup files
 \#*\#
 *~

diff --git a/README.md b/README.md
@@ -0,0 +1,37 @@
+DJANGO BLOG - BOOTSTRAP TEMPLATES
+=================================
+
+This repo contains Bootstrap5 templates for the main training project, and
+itself is a supporting subproject.
+
+[Live preview](https://edu-python-course.github.io/blog-bootstrap/)
+
+Contents
+--------
+
+index.html
+:   This is the main blog page. It contains a list of blog posts.
+Each entity is a link to detailed blog post page.
+
+detail.html
+:   This is a detailed blog post page. It contains the full blog post's
+content. Comments related to a single blog post are also present here.
+
+profile.html
+:   User's personal page. This page is supposed to be public for all.
+In case current user visiting their own profile page, this page will
+include forms to change user data or set a new password. All blog posts
+authored by a certain user is listed here in the form, similar to main
+page view.
+
+login.html
+:   User login form.
+
+registration.html
+:   New user registration form.
+
+References
+----------
+
+- [Bootstrap v5.3](https://getbootstrap.com/docs/5.3/)
+- [Main project](https://github.com/edu-python-course/blog)
diff --git a/README.rst b/README.rst
diff --git a/about.html b/about.html
@@ -0,0 +1,191 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Python training course - Django blog project">
+  <title>About | Django Blog</title>
+  <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/blog/">
+  <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+  <link rel="icon" type="image/png" href="img/favicon.png">
+  <!--suppress JSUnresolvedLibraryURL-->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+  <!--suppress JSUnresolvedLibraryURL -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="css/blog.min.css">
+</head>
+<body>
+
+<div class="container">
+  <header class="lh-1 py-3">
+    <div class="row d-flex justify-content-between align-items-center text-center">
+      <div class="col-2 col-md-3 col-lg-4">
+        <img src="img/logo.svg" alt="Site logo" class="logo" id="headerLogoLeft">
+      </div>
+      <div class="col">
+        <a href="index.html" class="site-title text-dark">Django Blog</a>
+      </div>
+      <div class="col-2 col-sm-2 col-md-3 col-lg-4">
+        <img src="img/logo.svg" alt="Site logo" class="logo" id="headerLogoRight">
+      </div>
+    </div>
+  </header>
+  <div class="nav-scroller py-1">
+    <nav class="nav d-flex justify-content-between">
+      <a href="" class="nav-item nav-link link-body-emphasis">Technology Trends</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">Web Development</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">Data Science</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">Cybersecurity</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">Mobile App Development</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">Cloud Computing</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">UX/UI Design</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">DevOps</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">Agile Methodology</a>
+      <a href="" class="nav-item nav-link link-body-emphasis">Internet of Things (IoT)</a>
+    </nav>
+  </div>
+</div>
+<main class="container">
+  <div class="row">
+    <section class="col-md-9" role="main">
+      <div class="row row-cols-1 px-2">
+        <div class="col">
+          <h1 class="h1 text-center">About Our Website</h1>
+          <p class="text-body">
+            Welcome to our website! We are a passionate team of web developers, data scientists, and cybersecurity
+            experts dedicated to creating exceptional digital experiences. Our goal is to provide you with valuable
+            insights, secure web solutions, and a seamless user experience.
+          </p>
+        </div>
+      </div>
+      <div class="row row-cols-sm-1 row-cols-md-2 px-2">
+        <div class="col">
+          <h2>Who We Are:</h2>
+          <p class="text-body">
+            We are a dynamic team of professionals with expertise in web development, data science, and cybersecurity.
+            Our diverse backgrounds and skill sets enable us to tackle complex challenges and deliver innovative
+            solutions tailored to your specific needs. We are committed to staying up-to-date with the latest industry
+            trends and technologies to ensure that we provide you with cutting-edge solutions.
+          </p>
+          <h2>Our Commitment:</h2>
+          <p class="text-body">
+            We are committed to providing you with exceptional service and solutions that exceed your expectations. We
+            believe in building long-term partnerships with our clients, collaborating closely to understand your unique
+            requirements and deliver customized solutions that address your specific challenges.
+          </p>
+          <p class="text-body">
+            Our team is dedicated to delivering projects on time and within budget, without compromising on quality. We
+            strive for excellence in every aspect of our work, ensuring that our web solutions are visually appealing,
+            user-friendly, and aligned with your business objectives.
+          </p>
+        </div>
+        <div class="col">
+          <h2>What We Do:</h2>
+          <p class="text-body">
+            At our core, we specialize in web development, creating dynamic and user-friendly websites that captivate
+            audiences and drive results. Whether you need a simple informative website or a complex web application, we
+            have the skills and expertise to bring your vision to life. Our focus is on delivering websites that not
+            only look visually stunning but also provide a seamless and intuitive user experience.
+          </p>
+          <p class="text-body">
+            In addition to web development, we are passionate about data science. We leverage advanced analytics
+            techniques to extract insights from data, empowering you to make informed decisions and unlock the hidden
+            potential in your data. From predictive analytics to personalized recommendations, we help you harness the
+            power of data to drive growth and optimize your business strategies.
+          </p>
+          <p class="text-body">
+            As cybersecurity is a top priority in today's digital landscape, we also prioritize the security of our web
+            solutions. We implement robust security measures to protect your data and ensure the integrity of your web
+            applications. From secure authentication to encrypted communication, we employ industry best practices to
+            safeguard your information and provide a secure browsing experience.
+          </p>
+        </div>
+      </div>
+      <div class="row row-cols-1 px-2">
+        <div class="col">
+          <h2>Get in Touch:</h2>
+          <p class="text-body">
+            We would love to hear from you and discuss how we can help you achieve your web development, data science,
+            or cybersecurity goals. Feel free to reach out to us through the contact information provided on our
+            website. Our friendly team is here to answer your questions and guide you through the process of creating an
+            exceptional web presence.
+          </p>
+          <p>
+            Thank you for visiting our website. We look forward to partnering with you and helping you
+            succeed in the digital world.
+          </p>
+        </div>
+      </div>
+    </section>
+    <section class="col-md-3" aria-label="Sidebar">
+      <div class="position-sticky">
+        <div class="ps-4">
+          <h4 class="fst-italic">Account</h4>
+          <div class="row row-cols-1 justify-content-center">
+            <div class="col d-flex justify-content-center">
+              <img src="https://i.pravatar.cc/350?u=2054e2c9" alt="avatar" class="avatar rounded-circle p-2">
+            </div>
+            <div class="col text-center">
+              <a href="./profile.html" class="h5 fst-italic">Amaranth Burrowes</a>
+            </div>
+            <div class="col btn-group-vertical" role="group">
+              <a href="form.html" class="btn btn-outline-dark">create article</a>
+            </div>
+          </div>
+        </div>
+        <div class="ps-4">
+          <h4 class="fst-italic">Archives</h4>
+          <div class="row row-cols-sm-1 row-cols-md-2">
+            <a href="index.html" class="link-secondary text-capitalize">january 2023</a>
+            <a href="index.html" class="link-secondary text-capitalize">december 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">november 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">october 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">september 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">august 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">july 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">june 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">may 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">april 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">march 2022</a>
+            <a href="index.html" class="link-secondary text-capitalize">february 2022</a>
+          </div>
+        </div>
+        <div class="ps-4">
+          <h4 class="fst-italic">About</h4>
+          <p class="text-body">
+            Our goal is to provide you with valuable insights, secure web solutions, and a seamless
+            user experience. <a href="./about.html" class="link-body-emphasis">See more...</a>
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</main>
+
+<footer class="text-center text-body-secondary bg-body-tertiary">
+  <h5 class="fst-italic">Our social media</h5>
+  <ul class="list-unstyled d-flex flex-row justify-content-center">
+    <li><a href=""><i class="social bi bi-reddit"></i></a></li>
+    <li><a href=""><i class="social bi bi-facebook"></i></a></li>
+    <li><a href=""><i class="social bi bi-twitter"></i></a></li>
+    <li><a href=""><i class="social bi bi-github"></i></a></li>
+    <li><a href=""><i class="social bi bi-instagram"></i></a></li>
+  </ul>
+  <div class="disclaimer">
+    This template is prepared for the training project. All content is generated by
+    <a href="https://chat.openai.com/share/d659854e-460f-4862-b1ae-9e4894469ea1">ChatGPT</a>,
+    a language model developed by OpenAI.
+  </div>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
+        integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
+        crossorigin="anonymous" async></script>
+</body>
+</html>