-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
166 lines (158 loc) · 8.92 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Nunito:wght@200;300;400;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style/style.css">
<script defer src="js/main.js"></script>
<script defer src="js/animation.js"></script>
<title>Buddha</title>
</head>
<body>
<header>
<div id="nav-menu" class="container">
<a href="index.html">
<svg class="logo" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48.45 38.83">
<defs>
<style>
.cls-1 {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5px;
}
.cls-1 {
stroke: #e6955c;
}
.cls-2 {
fill: #e6955c;
stroke-miterlimit: 10;
fill-rule: evenodd;
}
.cls-3,
.cls-4,
.cls-5 {
isolation: isolate;
}
.cls-4,
.cls-5 {
font-size: 11px;
fill: #fff;
font-family: Nunito-Regular, Nunito;
}
.cls-5 {
letter-spacing: -0.08em;
}
</style>
</defs>
<g>
<path id="Path_414" data-name="Path 414" class="cls-1" d="M15.18,6.74H.75V23.92H15.18"
transform="translate(0 -0.03)" />
<path id="Path_415" data-name="Path 415" class="cls-1" d="M33.15,23.92H47.7V6.74H33.15"
transform="translate(0 -0.03)" />
<path id="Path_416" data-name="Path 416" class="cls-2"
d="M15.53,13.08a12.13,12.13,0,0,1,6.24,3.49,8.34,8.34,0,0,1,1.73,8.35,6.66,6.66,0,0,1-4.67-2.1C15.67,19.71,15.58,16,15.53,13.08Z"
transform="translate(0 -0.03)" />
<path id="Path_417" data-name="Path 417" class="cls-2"
d="M32.93,9.15a12.16,12.16,0,0,0-6.24,3.49A8.34,8.34,0,0,0,25,21a6.74,6.74,0,0,0,4.67-2.08C32.78,15.81,32.87,12.14,32.93,9.15Z"
transform="translate(0 -0.03)" />
<path id="Path_418" data-name="Path 418" class="cls-2"
d="M22.19.83a12,12,0,0,0-2.76,6.6,8.34,8.34,0,0,0,3.8,7.65,6.76,6.76,0,0,0,2.4-4.52C26.18,6.15,24,3.21,22.19.83Z"
transform="translate(0 -0.03)" />
</g>
<g id="NATURE" class="cls-3">
<text class="cls-4" transform="translate(2.64 35.81)">N</text>
<text class="cls-5" transform="translate(10.77 35.81)">A</text>
<text class="cls-4" transform="translate(17.89 35.81)">TURE</text>
</g>
</svg></a>
<div id="menu" class="menu"><svg id="Capa_1" enable-background="new 0 0 512 512" height="512"
viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m135 308.5h377v-105h-377zm30-75h317v45h-317z" />
<path
d="m52.5 203.5c-28.949 0-52.5 23.551-52.5 52.5s23.551 52.5 52.5 52.5 52.5-23.551 52.5-52.5-23.551-52.5-52.5-52.5zm0 75c-12.407 0-22.5-10.093-22.5-22.5s10.093-22.5 22.5-22.5 22.5 10.093 22.5 22.5-10.093 22.5-22.5 22.5z" />
<path d="m135 443.5h377v-105h-377zm30-75h317v45h-317z" />
<path
d="m52.5 338.5c-28.949 0-52.5 23.551-52.5 52.5s23.551 52.5 52.5 52.5 52.5-23.551 52.5-52.5-23.551-52.5-52.5-52.5zm0 75c-12.407 0-22.5-10.093-22.5-22.5s10.093-22.5 22.5-22.5 22.5 10.093 22.5 22.5-10.093 22.5-22.5 22.5z" />
<path d="m135 68.5v105h377v-105zm347 75h-317v-45h317z" />
<path
d="m52.5 68.5c-28.949 0-52.5 23.551-52.5 52.5s23.551 52.5 52.5 52.5 52.5-23.551 52.5-52.5-23.551-52.5-52.5-52.5zm0 75c-12.407 0-22.5-10.093-22.5-22.5s10.093-22.5 22.5-22.5 22.5 10.093 22.5 22.5-10.093 22.5-22.5 22.5z" />
</g>
</svg>
</div>
<nav id="navigation" class="nav2">
<ul class="luactive">
<li><a href="#">ARTIST</a></li>
<li><a href="#">EXHIBITION</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">VISIT US</a></li>
</ul>
</nav>
</div>
</header>
<section class="main">
<div class="container">
<div class="images">
<img class="image1" src="pictures/buddha.svg" alt="">
<img class="image2" src="pictures/chakra.svg" alt="">
</div>
<div class="para">
<div class="imputcontainer">
<input type="text" name="search" id="search" placeholder="search">
<svg xmlns="http://www.w3.org/2000/svg" width="24.414" height="24.414" viewBox="0 0 24.414 24.414">
<g id="Group_2" data-name="Group 2" transform="translate(-175 -313)">
<g id="Ellipse_5" data-name="Ellipse 5" transform="translate(175 313)" fill="none"
stroke="#e6955c" stroke-linecap="round" stroke-width="2">
<circle cx="9" cy="9" r="9" stroke="none" />
<circle cx="9" cy="9" r="8" fill="none" />
</g>
<line id="Line_2" data-name="Line 2" x2="8" y2="8" transform="translate(190 328)"
fill="none" stroke="#e6955c" stroke-linecap="round" stroke-width="2" />
</g>
</svg>
</div>
<div class="line"></div>
<h1>Every artist write his own autobiography</h1>
<p id="paragraph" class="active">
Every child is an artist. The problem is how to remain an artist once he grows up. It is good to
love many things, for therein lies the true strength, and whosoever loves much performs much, and
can
accomplish much, and what is done in love is well done. Art is the lie that enables us to realize
the truth.
</p>
<p id="paragraph">
The best programs are written so that computing machines can perform them quickly and so that human
beings can understand them clearly. A programmer is ideally an essayist who works with traditional
aesthetic and literary forms as well as mathematical concepts, to communicate the way that an
algorithm
works and to convince a reader that the results will be correct.
</p>
<p id="paragraph">
Punishments include such things as flashbacks, flooding of unbearable emotions, painful body
memories,
flooding of memories in which the survivor perpetrated against others, self-harm, and suicide
attempts.
</p>
<p id="paragraph">
The computer programmer is a creator of universes for which he alone is the lawgiver. No playwright,
no
stage director, no emperor, however powerful, has ever exercised such absolute authority to arrange
a
stage or field of battle and to command such unswervingly dutiful actors or troops.
</p>
<div class="bubble">
<button id="c0" class="circle c-active " onclick="clk(this.id)"></button>
<button id="c1" class="circle" onclick="clk(this.id)"></button>
<button id="c2" class="circle" onclick="clk(this.id)"></button>
<button id="c3" class="circle" onclick="clk(this.id)"></button>
</div>
</div>
</div>
</section>
</body>
</html>