homilia/sample.html at main · DigitalMalayaliStudio/homilia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Chapter - Homilia</title>
    <meta name="description"
        content="Homilia is a zero-JS, open-source book promotion website template licensed under MIT.">
    <link rel="icon" href="assets/images/favicon.svg" type="image/svg+xml">
    <link rel="preload" href="assets/fonts/LibreBaskerville-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/LibreBaskerville-Bold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/LibreBaskerville-Italic.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">

        <!-- Navigation -->

        <header>
            <nav>
                <div class="logo">
                    <a class="color-primary" href="index.html">
                        <h1 class="text-center">HOMILIA<br>Open-source<br>Web Template</h1>
                    </a>
                </div>
                <ul class="menu bold">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html#about">About</a></li>
                    <li><a href="index.html#reviews">Reviews</a></li>
                    <li><a href="index.html#gallery">Gallery</a></li>
                    <li><a href="index.html#contact">Contact</a></li>
                </ul>
            </nav>
        </header>

        <!-- Sample Chapter -->

        <main>
            <section id="chapter">
                <div class="section-title">
                    <hr>
                    <h2>
                        Sample Chapter
                    </h2>
                    <hr>
                </div>
                <div class="sample-container">
                    <h3 class="text-center">John Doe</h3>
                    <p class="text-center">Officiis praesentium nulla architecto modi dolor sit amet consectetur,
                        adipisicing elit. Odit tempora expedita quasi doloremque quam quas porro libero?
                    </p>
                    <div class="sample">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, vitae asperiores voluptate
                            rem sequi blanditiis! Quaerat illo, reprehenderit ad corrupti facilis suscipit, numquam sunt
                            blanditiis quidem eaque dignissimos obcaecati itaque?
                            Modi, deserunt illo nihil ullam quaerat facilis, vero unde, possimus harum saepe dolorum
                            corrupti! Illum laboriosam itaque nobis consequuntur nulla doloremque, in deleniti possimus
                            asperiores. Ut exercitationem cupiditate aperiam odio?
                        </p>
                        <p>Debitis consequuntur adipisci aliquam provident temporibus ad molestias, quaerat molestiae
                            deserunt quae ratione itaque doloremque rerum, assumenda vitae reprehenderit fuga libero
                            magnam.
                            Voluptates consequuntur voluptas suscipit dolores tempora laboriosam aspernatur commodi fuga
                            et, doloribus ab praesentium culpa, quas vero, veritatis corrupti atque voluptatibus.
                            Praesentium dignissimos nesciunt perspiciatis, hic quibusdam incidunt earum ullam.
                            Pariatur nostrum eius sapiente molestiae earum ipsam voluptate iure. Accusantium distinctio
                            sapiente itaque, iste recusandae autem nostrum veniam quae, dolorum in possimus? Nisi quis,
                            perspiciatis alias inventore quisquam in ipsa?
                        </p>
                        <p>Quia velit magnam quasi minus enim quam minima numquam neque quis totam fuga doloremque nisi
                            cupiditate, corrupti laudantium consequuntur quo ratione aperiam.
                            Ad aliquam beatae repudiandae vel molestias placeat corrupti, facere, cupiditate soluta
                            reprehenderit sit minima natus commodi! Cumque sed, odio eius ratione possimus ipsum commodi
                            libero, voluptatum blanditiis delectus quis quo.
                            A suscipit odit quam facilis, beatae autem iusto, veniam architecto, voluptate culpa eaque
                            laborum! Labore iste est, deleniti ullam doloremque officiis eum odit iusto voluptatem
                            delectus impedit eius aliquid vel!
                        </p>
                        <p>Enim quibusdam, optio voluptates neque a perspiciatis molestiae ipsum dicta quo inventore ab,
                            recusandae quisquam architecto delectus illo reprehenderit, provident beatae maiores ea
                            placeat pariatur! Et architecto sint voluptatum, eveniet animi illo, quas explicabo tenetur
                            nobis, saepe voluptas aperiam dolor dolorem ea eligendi repellat consectetur molestias quasi
                            inventore laboriosam ipsa! Consequuntur blanditiis ratione nihil quod asperiores rerum
                            explicabo eaque officiis illum dignissimos tempore delectus hic, corporis ab id, assumenda
                            pariatur, quos in accusantium eligendi? Possimus libero aliquid a amet vel ullam, aut
                            molestias vero sed, quos, perferendis nesciunt. Impedit, cupiditate. Sint, architecto.</p>
                        <p>Eius delectus numquam dolores maxime consectetur iusto quod eligendi. Quia, accusamus
                            voluptates? Quas corrupti odit, dignissimos repudiandae rem illo. Unde eos id molestias
                            veritatis excepturi saepe maxime ipsa ab omnis cum soluta itaque reiciendis corrupti rem,
                            quas, sit nam! Repudiandae, impedit! Natus laborum neque sunt earum beatae vitae dolorem quo
                            provident porro velit minus distinctio deleniti omnis, sapiente fugiat ut perspiciatis odit
                            labore reiciendis cumque nam perferendis amet officia voluptatum. Exercitationem ipsa, amet
                            eveniet nesciunt cumque ducimus, saepe accusantium totam minima dicta aut cupiditate placeat
                            soluta provident aliquam est? Delectus obcaecati, eaque illo odio nisi dolore ab debitis sit
                            et?</p>
                        <h4 class="text-center">Footnote</h4>
                        <p class="italic text-center">Distinctio, soluta consequatur dicta nemo libero repellendus
                            repellat quasi dolor. Cum tenetur unde perferendis laudantium officiis praesentium nulla
                            earum architecto modi accusamus.
                            Itaque corporis quidem sit temporibus ut, ducimus dolorem non qui dolorum adipisci modi
                            ratione explicabo quasi architecto ipsam, aperiam asperiores tempore. Totam enim facere
                            officia dicta unde voluptas, similique quisquam?
                            Aliquid officia quam optio blanditiis, illum aut ex quis mollitia sed explicabo id
                            exercitationem excepturi!
                        </p>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- Footer Navigation -->

    <footer>
        <div class="footer-container color-secondary">
            <div class="footer-logo">
                <a class="color-secondary" href="index.html">
                    <h4>HOMILIA<br>Open-source<br>Web Template</h4>
                </a>
                <p class="small">Homilia is a zero-JavaScript, HTML-and-CSS-only, open-source book promotion
                    website template licensed under MIT.</p>
                    <ul class="social-media">
                        <li><a href="#" target="_blank" aria-label="Instagram"><svg xmlns="http://www.w3.org/2000/svg"
                                    width="20" height="20" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3" />
                                </svg></a></li>
                        <li><a href="#" target="_blank" aria-label="Facebook"><svg xmlns="http://www.w3.org/2000/svg"
                                    width="20" height="20" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95" />
                                </svg></a></li>
                        <li><a href="#" target="_blank" aria-label="X"><svg xmlns="http://www.w3.org/2000/svg" width="20"
                                    height="20" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z" />
                                </svg></a></li>
                        <li><a href="#" target="_blank" aria-label="Goodreads"><svg xmlns="http://www.w3.org/2000/svg"
                                    width="20" height="20" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M6.167 17.768h1.645c.032 0 .129-.032.129.097c.258 1.354 1.193 2.128 2.45 2.515c1.032.323 2.129.323 3.193.032c1.322-.258 2.192-1.096 2.644-2.354c.322-.87.419-1.74.451-2.58v-2.03h-.032c-.032.031-.032.128-.097.193c-.87 1.677-2.418 2.644-4.127 2.676c-4.063.097-6.675-2.257-6.772-6.9c-.032-.968.032-1.87.323-2.741C6.747 3.87 8.844 2.032 11.97 2c2.387 0 3.967 1.516 4.547 2.773c.032.032.032.097.097.032V2.42h1.741v12.963c0 3.031-1.032 5.643-4.03 6.353c-2.677.644-6.192.193-7.643-2.226a3.76 3.76 0 0 1-.516-1.74m5.74-14.35C9.874 3.389 7.617 5 7.391 8.645c-.129 2.321.58 4.772 2.773 5.804c1.097.516 2.903.58 4.225-.355c1.87-1.322 2.45-3.773 2.128-6.062c-.355-2.709-1.838-4.611-4.611-4.611" />
                                </svg></a></li>
                    </ul>
            </div>
            <ul class="footer menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html#about">About</a></li>
                <li><a href="index.html#reviews">Reviews</a></li>
                <li><a href="index.html#gallery">Gallery</a></li>
                <li><a href="index.html#contact">Contact</a></li>
            </ul>
            <div class="copyright color-secondary">
                <p class="small">© <span id="year"></span>
                    <script>document.getElementById("year").innerHTML = new Date().getFullYear();
                    </script> Homilia.<br>All Rights Reserved
                </p>
                <p class="tiny">Powered by <a href="https://github.com/digitalmalayalistudio/homilia"
                        class="footer link" target="_blank">Homilia</a> <br>Developed by <a
                        href="https://studio.digitalmalayali.in" class="footer link" target="_blank">Digital Malayali
                        Studio</a></p>
            </div>
        </div>
    </footer>
    <div class="scroll-container"><a id="scroll-to-top" class="text-center bold" href="#">↑</a></div>
</body>

</html>