Skip to content

Commit

Permalink
Add "Screenshots" and "How to set up" sections (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gomzyakov
gomzyakov authored Nov 23, 2024
1 parent 61d1936 commit e7c45ff
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 8 deletions.
Binary file added assets/img/screenshot-admin-panel.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 screenshot-main-page.png → assets/img/screenshot-main-page.png
View file
File renamed without changes
96 changes: 88 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>LaraJournal &mdash; open-source blog app on Laravel</title>
<meta name="description" content="The goal of this project is to showcase good PHP and Laravel development practices with a simple
blog application.">
<title>LaraJournal &mdash; simple blog app on Laravel</title>

<link rel="canonical" href="https://larajournal.github.io/">

Expand All @@ -16,6 +16,8 @@
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">

<!-- Favicons -->
<!-- <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">-->
Expand Down Expand Up @@ -74,15 +76,16 @@
</li>
</ul>
<div class="d-lg-flex col-lg-3 justify-content-lg-end">
<a class="btn btn-primary" href="https://github.com/gomzyakov/larajournal" target="_blank">Star us on GitHub</a>
<a class="btn btn-primary" href="https://github.com/gomzyakov/larajournal" target="_blank">Star us on
GitHub</a>
</div>
</div>
</div>
</nav>

<div class="text-bg-primary pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="col-lg-6 mx-lg-auto my-3 pt-4">
<h2 class="display-5 fw-semibold">Simple blog app on Laravel</h2>
<div class="col-lg-7 mx-lg-auto my-3 pt-4">
<h2 class="display-5 fw-semibold">Open-source blog app on&nbsp;Laravel</h2>
</div>
<div class="col-lg-6 mx-lg-auto mb-5 pb-4">
<!-- Если вы ищите "блог на ларавель" то... -->
Expand All @@ -91,7 +94,7 @@ <h2 class="display-5 fw-semibold">Simple blog app on Laravel</h2>
</div>
<div class="bg-body-tertiary shadow-sm mx-auto"
style="width: 60%; height: 420px; border-radius: 21px 21px 0 0;">
<img src="screenshot-main-page.png" style="max-width: 100%; border-radius: 8px 8px 0 0;" alt="ddd">
<img src="assets/img/screenshot-main-page.png" style="max-width: 100%; border-radius: 8px 8px 0 0;" alt="ddd">
</div>
</div>

Expand Down Expand Up @@ -179,27 +182,104 @@ <h4 class="fw-semibold mb-0 text-body-emphasis">Post`s visual editor</h4>
</div>
</div>

<!-- Screenshots -->
<div class="container px-4 py-5">
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 pb-5">
<div class="col-lg-8 d-flex flex-column align-items-start gap-2">
<h2 class="fw-bold text-body-emphasis">Screenshots</h2>
<p class="text-body-secondary">
Choosing the right blogging platform is crucial for the success and functionality of your blog.
LaraJournal has everything you need in a blogging app.
</p>
</div>
</div>
<div class="row row-cols-1">
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/screenshot-main-page.png" class="d-block w-100"
alt="Main page of blog app on Laravel">
</div>
<div class="carousel-item">
<img src="assets/img/screenshot-admin-panel.png" class="d-block w-100"
alt="Main page of blog app on Laravel">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
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="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!-- / Screenshots -->

<!-- How to set up? -->
<div class="container px-4 py-5">
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 pb-5">
<div class="col-lg-8 d-flex flex-column align-items-start gap-2">
<h2 class="fw-bold text-body-emphasis">How to set up?</h2>
<!-- <p class="text-body-secondary">-->
<!-- Choosing the right blogging platform is crucial for the success and functionality of your blog.-->
<!-- LaraJournal has everything you need in a blogging app.-->
<!-- </p>-->
</div>
</div>

<div class="row row-cols-1">
<div class="col d-flex flex-column align-items-start gap-2">
<p class="mb-1">Just clone the project via git-command:</p>
<pre class="w-100 my-0 py-0">
<code class="language-bash">git clone git@github.com:gomzyakov/larajournal.git</code>
</pre>
<p>And follow the instructions from <a href="https://github.com/gomzyakov/larajournal">https://github.com/gomzyakov/larajournal</a>
</p>
</div>
</div>
</div>
<!-- / How to set up? -->

<div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3">
<h3 class="h1 text-body-emphasis fw-semibold">Need GitHub stars!</h3>
<p class="lead pb-4">
We need your support, please go to the GitHub repository and give us a star.
</p>
<div class="d-grid gap-2 col-lg-4 mx-auto">
<a class="btn btn-primary" href="https://github.com/gomzyakov/larajournal" target="_blank">Go to repository</a>
<a class="btn btn-primary" href="https://github.com/gomzyakov/larajournal" target="_blank">Go to
repository</a>
</div>
</div>
</div>

<div class="container my-5">
<footer class="pt-5 my-5 text-body-secondary border-top">
<p>LaraJournal &mdash; Simple blog app on Laravel.</p>
<p>Made with &hearts; by <a href="https://github.com/gomzyakov" target="_blank">Alexander Gomzyakov</a> & <a href="https://github.com/gomzyakov/larajournal/graphs/contributors" target="_blank">contributors</a>.</p>
<p>Made with &hearts; by <a href="https://github.com/gomzyakov" target="_blank">Alexander Gomzyakov</a> & <a
href="https://github.com/gomzyakov/larajournal/graphs/contributors" target="_blank">contributors</a>.
</p>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

<!-- highlight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

</body>
</html>

0 comments on commit e7c45ff

Please sign in to comment.