-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
200 lines (183 loc) · 9.49 KB
/
portfolio.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نمونه کار های ما</title>
<link rel="stylesheet" href="src/styles/main.css">
<link rel="stylesheet" href="src/styles/responsive.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="src/styles/portfolio.css">
<link rel="stylesheet" href="src/styles/portfoliopricing.css">
</head>
<body>
<header>
<nav>
<ul class="animate__animated animate__fadeInDownBig desktop sidebar">
<div class="img__header">
<a href="index.html">
<img id="logo__header" src="public/images/logo.png" alt="logo__header" loading="lazy" width="100px">
</a>
</div>
<li ><a href="#"><img id="hamberger__menu" class="hamberger__show" loading="lazy" src="public/images/icon_hamberger.png"
alt="hamberger__menu"></a></li>
<!-- <li><a id="hide__link" class="active__link" href="time.html">رزرو وقت</a></li> -->
<li><a class="non__active" href="index.html">خانه </a></li>
<!-- <li><a class="non__active" href="portfolio.html"> پکیج ها</a></li> -->
<!-- <li><a class="non__active" href="#">نمونه کار های ما</a></li> -->
<li><a class="non__active" href="contactus.html">ارتباط با ما</a></li>
<li><a class="non__active" href="#">مراحل عقد قرارداد</a></li>
<li><a class="non__active" href="blog.html">مقالات</a></li>
<li><a class="non__active" href="team.html">تیم ما</a></li>
<div class="wrapper__btn__header">
<a href="#">
<div class="btn__ header__btn">
<a href="login.html">
<button id="show_modal" class="button is-dark bg__color color__txt left__position">ورود
</button>
</a>
</div>
</a>
</div>
</ul>
<aside id="menu" class="sidebar__mobile animate__animated animate__fadeInRight">
<ul class="mobile__list">
<div class="close_icon">
<img id="close_side_right" class="close_icon" src="public/images/close_icon.png" alt="close_icon">
<img id="logo_tatri" src="public/images/alireza tatari studio Logo (1).jpg" alt="logo__sidebar">
<img class="indicator_links" src="src/styles/indicator.svg" alt="indicator">
</div>
<li><a class="gray__link" href="index.html">خانه </a></li>
<li><a class="gray__link" href="team.html">تیم ما </a></li>
<li><a class="gray__link" href="location.html"> لوکیشن ها</a></li>
<li><a class="gray__link" href="blog.html">بلاگ ما</a></li>
<li><a class="gray__link" href="contactus.html">ارتباط با ما</a></li>
<!-- <li><a class="gray__link" href="portfolio.html">پکیج ها</a></li> -->
<a href="login.html"> <button class="signup">ورود</button></a>
</ul>
</aside>
</nav>
</header>
<main class="pricing__header">
<svg class="absolute top-0 right-0 h-full" xmlns="http://www.w3.org/2000/svg" width"375" height"658">
<g fill="none" fill-rule="evenodd" stroke="#D0D5F6" stroke-width="2">
<path d="M172.71-101C70.623-79.38 17.478-39.688 13.273 18.074c-6.307 86.643 231.598 17.186 136.358 198-95.241 180.813-181.318 185.29-136.358 298C58.233 626.784 178.96 685.954 319.21 641.2c93.501-29.836 144.652-140.545 153.453-332.126" />
<path d="M214.7-101C134.617-82.012 92.926-47.154 89.628 3.575c-4.948 76.093 181.679 15.094 106.966 173.89C121.882 336.262 54.36 340.192 89.628 439.18c35.269 98.986 129.974 150.95 239.995 111.646C402.97 524.622 443.096 427.395 450 259.141" />
<path d="M250.935-103c-60.604 16.56-92.153 46.963-94.65 91.208-3.743 66.367 137.488 13.165 80.949 151.664-56.54 138.5-107.638 141.927-80.948 228.261 26.69 86.335 98.359 131.656 181.618 97.376C393.41 442.655 423.775 357.855 429 211.108" />
</g>
</svg>
<h1 class="text-center font-bold text-5xl mt-8 tracking-wide relative">سرویس های ما</h1>
<div class="flex flex-row justify-center my-4 text-sm tracking-tight font-medium text-gray-700">
<p class="mx-3">سالانه</p>
<!-- Toggle Button -->
<label for="toggle" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- hidden input -->
<input id="toggle" type="checkbox" class="hidden" onclick="myFunction()" />
<!-- line -->
<div class="w-10 h-3 bg-gray-400 rounded-full shadow-inner"></div>
<!-- dot -->
<div class="toggle_dot absolute w-5 h-5 bg-white rounded-full shadow inset-y-0 left-0"></div>
</div>
</label>
<p class="mx-3">ماهانه</p>
</div>
<div class="flex flex-col md:flex-row md:transform md:scale-75 lg:scale-100 justify-center">
<div class="border rounded-lg md:rounded-r-none text-center p-5 mx-auto md:mx-0 my-2 md:my-6 bg-gray-100 font-medium z-10 shadow-lg">
<div class="">مقدماتی</div>
<div id="month" class="font-bold text-6xl month hidden">200 تومان</div>
<div id="annual" class="font-bold text-6xl annual">300 تومان</div>
<hr>
<div class="text-sm my-3">عکاسی </div>
<hr>
<div class="text-sm my-3">فیلمبرداری</div>
<hr>
<div class="text-sm my-3">دسترسی محدود</div>
<hr>
<a href="index.html" target="_blank ">
<div class="bg-gradient-base border border-blue-600 hover:bg-white text-white hover:text-blue-600 font-bold uppercase text-xs mt-5 py-2 px-4 rounded cursor-pointer">خانه</div>
</a>
</div>
<div class="border-transparent rounded-lg text-center p-5 mx-auto md:mx-0 my-2 bg-gradient text-white font-medium z-10 shadow-lg">
<div class="py-4">پیشرفته
<div id="month" class="font-bold text-6xl month hidden">400 تومن</div>
<div id="annual" class="font-bold text-6xl annual">500 تومن</div>
<hr>
<div class="text-sm my-3">فیلمبرداری</div>
<hr>
<div class="text-sm my-3">عکاسی</div>
<hr>
<div class="text-sm my-3">دسترسی کامل</div>
<hr>
<a href="index.html" target="_blank">
<div class="bg-white border border-white hover:bg-transparent text-blue-600 hover:text-white font-bold uppercase text-xs mt-5 py-2 mpx-4 rounded cursor-pointer">خانه</div>
</a>
</div>
</div>
<div class="border rounded-lg md:rounded-l-none text-center p-5 mx-auto md:mx-0 my-2 md:my-6 bg-gray-100 font-medium z-10 shadow-lg">
<div class="">متوسط</div>
<div id="month" class="font-bold text-6xl month hidden">300 تومن</div>
<div id="annual" class="font-bold text-6xl annual">298تومن</div>
<hr>
<div class="text-sm my-3">عکاسی</div>
<hr>
<div class="text-sm my-3">فیلمبرداری عروسی</div>
<hr>
<div class="text-sm my-3">دسترسی محدود</div>
<hr>
<a href="index" target="_blank">
<div class="bg-gradient-base border border-blue-600 hover:bg-transparent text-white hover:text-blue-600 font-bold uppercase text-xs mt-5 py-2 px-4 rounded cursor-pointer">خانه</div>
</a>
</div>
</div>
</main>
<script>
function myFunction() {
var x = document.querySelectorAll('.annual');
var y = document.querySelectorAll('.month');
for (var i = 0; i < x.length; i++) {
if (document.getElementById("toggle").checked == true) {
x[i].classList.add('hidden');
y[i].classList.remove('hidden');
} else {
x[i].classList.remove('hidden');
y[i].classList.add('hidden');
}
}
}
</script>
<script>
const btnFrist = document.querySelector(".photography__btn")
const btnSecond = document.querySelector(".photo__camera")
const port1 = document.getElementById("port1")
const port2 = document.getElementById("port2")
const port3 = document.getElementById("port3")
const port4 = document.getElementById("port4")
const port12 = document.getElementById("port12")
const port11 = document.getElementById("port11")
const port10 = document.getElementById("port10")
const port9 = document.getElementById("port9")
const port8 = document.getElementById("port8")
btnFrist.addEventListener('click' , () => {
port1.classList.toggle("default__hidden")
port2.classList.toggle("default__hidden")
port3.classList.toggle("default__hidden")
port4.classList.toggle("default__hidden")
})
btnSecond.addEventListener('click' , () =>{
port12.classList.toggle("visible");
port11.classList.toggle("visible");
port10.classList.toggle("visible");
port9.classList.toggle("visible");
port8.classList.toggle("visible");
})
const close__icon = document.getElementById("close_side_right");
const sidebar = document.getElementById("menu");
close__icon.onclick = () =>{
sidebar.style.display = "none"
}
</script>
<script src="src/script/portfolio.js"></script>
</body>
</html>