olivianism/index.html at master · cshjsc/olivianism · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Olivianism - The Path of the Olive</title>
    <link rel="stylesheet" href="dist/output.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
    <header class="min-h-screen bg-olive-100 relative overflow-hidden bg-[url('../assets/olive_tree_background.png')] bg-cover bg-center">
        <div class="absolute inset-0 bg-black/10"></div>
        <nav class="absolute top-0 left-0 right-0 z-10 py-4">
            <div class="container flex flex-col md:flex-row justify-center md:justify-between items-center gap-4 md:gap-0">
                <div class="text-2xl font-playfair text-olive-800 flex items-center gap-0.5">
                    <img src="O.svg" alt="O" width="45" height="45" />
                    <span class="text-white">livianism</span>
                </div>
                <ul class="flex space-x-8">
                    <li><a href="#about" class="nav-link text-white">About</a></li>
                    <li><a href="#commandments" class="nav-link text-white">Commandments</a></li>
                    <li><a href="#join" class="nav-link text-white">Join Us</a></li>
                </ul>
            </div>
        </nav>
        <div class="container h-screen flex flex-col justify-start items-center md:items-end text-center md:text-right pl-0 md:pl-[28rem] pt-72">
            <h1 class="text-5xl md:text-7xl font-playfair text-olive-800 mb-6 flex items-center justify-center gap-1">
                <img src="O.svg" alt="O" class="h-[1em] w-auto" />
                <span class="text-white">livianism</span>
            </h1>
            <p class="text-xl md:text-2xl text-white text-center md:text-right">Where the Olive Symbolizes the Eternal Circle of Life</p>
        </div>
    </header>

    <section id="about" class="py-20 bg-white">
        <div class="container">
            <h2 class="text-4xl font-playfair text-olive-800 mb-8 text-center">The Path of the Olive</h2>
            <p class="text-lg text-olive-700 max-w-3xl mx-auto text-center">
                Olivianism is a spiritual journey that embraces the olive as a sacred symbol of life's eternal cycle.
                Through its branches, leaves, and fruit, we find wisdom, peace, and the interconnectedness of all things.
            </p>
        </div>
    </section>

    <section id="commandments" class="py-20 bg-olive-50">
        <div class="container max-w-4xl">
            <h2 class="text-4xl font-playfair text-olive-800 mb-12 text-center">The Sacred Commandments</h2>
            <div class="space-y-8">
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">I</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Value all life, for all living things are part of the same cycle.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">II</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Respect your harvest and the harvest of others, for no fruit grows without labor.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">III</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Care for the land, for it sustains you as a mother sustains her child.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">IV</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Honor your elders, for their wisdom is the root of your strength.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">V</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Do not waste, for what is given to you must be used with gratitude.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">VI</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Speak truthfully, and let your word be as clear as pressed oil.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">VII</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Resolve conflict with peace, as storms destroy but calm brings growth.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">VIII</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Be patient in hardship, as the olive tree bears fruit only in its season.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">IX</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Welcome the stranger, for all walk the same earth.</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="text-8xl font-playfair text-olive-600 w-[12rem] text-right pr-8">X</div>
                    <div class="border-l-2 border-olive-200 pl-8 py-4 min-h-[6rem] flex-1">
                        <p class="text-xl text-olive-800">Observe rest and reflection, for stillness nourishes the soul like rain to soil.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="join" class="py-20 bg-olive-800 text-white">
        <div class="container text-center">
            <h2 class="text-4xl font-playfair mb-6">Join Our Community</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">
                Become part of our growing community of olive worshippers and seekers of wisdom.
            </p>
            <button class="btn btn-primary">Begin Your Journey</button>
        </div>
    </section>

    <footer class="py-8 bg-olive-900 text-white">
        <div class="container text-center">
            <p>&copy; 2025 Olivianism. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>