Youtube-Clone-Coding/index.html at master · jiseonk/Youtube-Clone-Coding · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Youtube Mobile</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/975cb3a275.js"
      crossorigin="anonymous"
    ></script>
    <script src="main.js" defer></script>
  </head>
  <body>
    <!---Header-->
    <header>
      <div class="logo">
        <i class="fab fa-youtube"></i>
        <span class="title">YouTube</span>
      </div>
      <div class="icons">
        <i class="fas fa-search"></i>
        <i class="fas fa-ellipsis-v"></i>
      </div>
    </header>

    <!---Video Player-->
    <section class="player">
      <video controls autoplay src="video/video.mp4"></video>
    </section>

    <!---Video info & Up next -->
    <div class="infoAndUpNext">
      <!---Video Info-->
      <section class="info">
        <!---Metadata-->
        <div class="metadata">
          <ul class="hashtags">
            <li>#Hot Air Balloon</li>
            <li>#World Travel</li>
            <li>#Turkey</li>
          </ul>
          <div class="titleAndButton">
            <span class="title clamp">
              🌍World Travel🌍 : Icredible Hot Air Balloon Festival🎵 - Amazing
              Places in Turkey
            </span>
            <button class="moreBtn">
              <i class="fas fa-caret-down"></i>
            </button>
          </div>
          <div class="views">
            <span class="views">1M views 1 month ago</span>
          </div>
        </div>
        <!--Actions-->
        <ul class="actions">
          <li>
            <button>
              <i class="active fas fa-thumbs-up"></i><span>1K</span>
            </button>
          </li>
          <li>
            <button><i class="fas fa-thumbs-down"></i><span>0</span></button>
          </li>
          <li>
            <button><i class="fas fa-share-alt"></i><span>Share</span></button>
          </li>
          <li>
            <button><i class="fas fa-plus"></i><span>Save</span></button>
          </li>
          <li>
            <button>
              <i class="fab fa-font-awesome-flag"></i><span>Report</span>
            </button>
          </li>
        </ul>
        <!---Channel Description-->
        <div class="channel">
          <div class="metadata">
            <img src="image/image01.jpeg" alt="" />
            <div class="info">
              <span class="name">World Traveler</span>
              <span class="subscribers">1M subscribers</span>
            </div>
          </div>
          <button class="subscribe">subscribe</button>
        </div>
      </section>

      <!--upNext-->
      <section class="upNext">
        <span class="title">Up next</span>
        <ul>
          <li class="item">
            <div class="img"><img src="image/image02.jpg" alt="" /></div>
            <div class="itemInfo">
              <span class="title">Travel Around the World ✈️🌍</span>
              <span class="name">World Traveler</span>
              <span class="views">50K views</span>
            </div>
            <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
          </li>
          <li class="item">
            <div class="img"><img src="image/image03.jpg" alt="" /></div>
            <div class="itemInfo">
              <span class="title">Traveling the World for 2 years!</span>
              <span class="name">World Traveler</span>
              <span class="views">1M views</span>
            </div>
            <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
          </li>
          <li class="item">
            <div class="img"><img src="image/image04.jpg" alt="" /></div>
            <div class="itemInfo">
              <span class="title">Santorini 🇬🇷 : Most Beautiful Isalnd✨</span>
              <span class="name">World Traveler</span>
              <span class="views">99K views</span>
            </div>
            <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
          </li>
        </ul>
      </section>
    </div>
  </body>
</html>