forked from Star-Academy/Summer1400-FE-Team6
-
Notifications
You must be signed in to change notification settings - Fork 0
/
song.html
141 lines (137 loc) · 8.04 KB
/
song.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
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<title>زلف</title>
<meta name="description" content="Music player app">
<meta name="keywords" content="MUSIC, MUSIC PLAYER, APP, CODE-STAR, HTML, CSS, JavaScript, SCSS, Angular">
<meta name="author" content="SALEH, HESAM">
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="Style/css/global.css">
<link rel="stylesheet" href="Style/css/song.css">
</head>
<body>
<header class="main-header">
<a href="index.html" class="home">
<img src="assets/pic/logo.png" alt="logo" class="logo">
</a> <nav class="nav-bar">
<ul>
<li>
<a href="login.html">ورود</a>
</li>
<li>
<a href="signup.html">ثبت نام کنید</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="song-item">
<h2 class="title">
</h2>
<img src="assets/pic/album-cover.jpeg" alt="music cover picture" class="cover">
<h2 class="song-name">زلف</h2>
<h3 class="artist">محسن نامجو</h3>
<h4 class="album">ترنج</h4>
<h4 class="release-date">۱۳۸۶</h4>
<div class="control">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</main>
</body>
<footer>
<div class="copyright">تمام حقوق سایت محفوظ است.</div>
<div class="social">
<div class="socialMediaIcons">
<a href="https://twitter.com" target="_blank">
<svg width="100%" height="100%" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<path class="svgSocialMedia" id="outer_circle_tw"
d="M480.724,250.138C480.724,377.163 377.749,480.138 250.724,480.138C123.698,480.138 20.724,377.163 20.724,250.138C20.724,123.113 123.698,20.138 250.724,20.138C377.749,20.138 480.724,123.113 480.724,250.138"
fill="#7CA8C8"/>
</g>
<g id="twitter_logo">
<path d="M150.215,160.239C150.215,160.239 183.705,207.153 248.11,209.916C248.234,209.921 237.038,158.012 292.419,151.66C303.559,150.383 318.953,156.409 329.579,166.485C346.392,162.902 359.797,154.968 359.446,155.147C356.651,164.484 348.627,176.805 339.366,181.053C349.251,180.751 360.543,176.461 365.813,173.954C361.916,182.613 349.841,192.349 342.518,198.466C346.805,294.869 243.179,382.576 134.002,318.821C131.171,317.168 165.41,327.712 204.176,299.06C172.237,297.229 160.595,269.826 160.016,266.001C168.2,267.16 178.492,266.631 180.809,265.2C148.786,256.001 143.291,229.796 143.298,218.097C151.61,222.233 156.889,223.845 164.565,223.762C138.871,205.694 140.83,174.231 150.189,160.249"
style="fill:#fff;"/>
</g>
</svg>
</a>
</div>
<div class="socialMediaIcons">
<a href="http://www.instagram.com" target="_blank">
<svg class="gradient" width="100%" height="100%" viewBox="0 0 500 500" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<defs>
<radialGradient id="gradient" cx="0.5" cy="0.6" r="0.8" fx="0.1" fy="1.25">
<stop class="one" offset="10%" stop-color="#E1CFA3"/>
<stop class="two" offset="20%" stop-color="#D0AA7A"/>
<stop class="three" offset="30%" stop-color="#C9896D"/>
<stop class="four" offset="40%" stop-color="#C97E71"/>
<stop class="five" offset="50%" stop-color="#C5575B"/>
<stop class="six" offset="60%" stop-color="#B55E7B"/>
<stop class="seven" offset="70%" stop-color="#9E5A80"/>
<stop class="eight" offset="80%" stop-color="#7D5B95"/>
<stop class="nine" offset="90%" stop-color="#7776B8"/>
<stop class="ten" offset="100%" stop-color="#6979BB"/>
</radialGradient>
</defs>
<g class="instagram_logo">
<path class="instagram_logo"
d="M480.724,250.138C480.724,377.163 377.749,480.138 250.724,480.138C123.698,480.138 20.724,377.163 20.724,250.138C20.724,123.113 123.698,20.138 250.724,20.138C377.749,20.138 480.724,123.113 480.724,250.138"
fill="url(#gradient)"/>
</g>
<g>
<circle cx="325.614" cy="175.339" r="16.429" style="fill:#fff;"/>
<circle cx="249.883" cy="250.918" r="59.767" style="fill:none;stroke:#fff;stroke-width:25px;"/>
<path d="M377.145,187.547C377.145,152.546 348.729,124.131 313.729,124.131L186.898,124.131C151.897,124.131 123.482,152.546 123.482,187.547L123.482,314.564C123.482,349.564 151.897,377.98 186.898,377.98L313.729,377.98C348.729,377.98 377.145,349.564 377.145,314.564L377.145,187.547Z"
style="fill:none;stroke:#fff;stroke-width:25px;"/>
</g>
</svg>
</a>
</div>
<div class="socialMediaIcons">
<a href="https://ca.linkedin.com" target="_blank">
<svg width="100%" height="100%" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<path id="outer_circle_li" class="svgSocialMedia"
d="M480.724,250.138C480.724,377.163 377.749,480.138 250.724,480.138C123.698,480.138 20.724,377.163 20.724,250.138C20.724,123.113 123.698,20.138 250.724,20.138C377.749,20.138 480.724,123.113 480.724,250.138"
fill="#488EAC"/>
</g>
<rect x="150.478" y="201.652" width="28.482" height="154.18" style="fill:#fff;"/>
<circle id="letter_i_dot" cx="164.396" cy="158.224" r="17.751" style="fill:#fff;"/>
<path class="linked_in_logo" id="letter_n"
d="M223.866,201.617L248.74,201.617C248.74,201.617 250.288,227.091 250.295,227.129C250.302,227.167 250.932,227.129 250.932,227.129C250.932,227.129 263.354,199.552 299.245,198.209C332.299,196.972 356.222,219.678 356.361,263.567C356.39,272.854 356.361,355.818 356.361,355.818L328.331,355.818L328.331,263.682C328.331,263.682 329.268,222.907 293.824,221.388C268.473,220.302 253.18,245.013 253.151,262.802C253.131,275.672 253.151,355.823 253.151,355.823L225.118,355.823L225.118,231.788C225.118,231.788 223.953,202.175 223.866,201.617"
style="fill:#fff;"/>
</svg>
</a>
</div>
</div>
<div class="links">
<ul>
<li>
<a href="#" class="contact">ارتباط با ما</a>
</li>
<li>
<a href="#" class="about">درباره ما</a>
</li>
<li>
<a href="#" class="privacy">حریم شخصی</a>
</li>
</ul>
</div>
</footer>
</html>