├── image ├── 1.png ├── 2.png ├── 3.png └── avatar.png ├── demo ├── desktop.png └── mobile.png ├── video └── video.mp4 ├── main.js ├── README.md ├── index.html └── style.css /image/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/youtube-site/HEAD/image/1.png -------------------------------------------------------------------------------- /image/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/youtube-site/HEAD/image/2.png -------------------------------------------------------------------------------- /image/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/youtube-site/HEAD/image/3.png -------------------------------------------------------------------------------- /demo/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/youtube-site/HEAD/demo/desktop.png -------------------------------------------------------------------------------- /demo/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/youtube-site/HEAD/demo/mobile.png -------------------------------------------------------------------------------- /image/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/youtube-site/HEAD/image/avatar.png -------------------------------------------------------------------------------- /video/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dream-ellie/youtube-site/HEAD/video/video.mp4 -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const moreBtn = document.querySelector('.info .metadata .moreBtn'); 2 | const title = document.querySelector('.info .metadata .title'); 3 | 4 | moreBtn.addEventListener('click', () => { 5 | moreBtn.classList.toggle('clicked'); 6 | title.classList.toggle('clamp'); 7 | }); 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Youtube Site Clone Coding with HTML & CSS 2 | 3 | 이 튜토리얼 영상을 보시면서 따라해보세요: [여기를 클릭](https://youtu.be/67stn7Pu7s4) 4 | 5 | 유튜브 채널: [드림코딩 by 엘리](https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w) 6 | 7 | [Click here to try](https://dream-ellie.github.io/youtube-site/) 8 | 9 | ## Small Screen 10 | 11 | ![small](https://github.com/dream-ellie/youtube-site/blob/master/demo/mobile.png) 12 | 13 | ## Wide Screen 14 | 15 | ![wide](https://github.com/dream-ellie/youtube-site/blob/master/demo/desktop.png) 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | Youtube Mobile 12 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 | 35 |
36 | 37 | 38 |
39 | 40 |
41 | 42 |
43 |
    44 |
  • #DreamCoding
    • 45 |
  • #DreamCoders
    • 46 |
  • #Ellie
    • 47 |
48 |
49 | Clone Coding: Youtube Mobile Website 유튜브 모바일 웹사이트 따라 51 | 만들기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 52 | 드림코딩과 함께하는 프론트엔드 실전 입문편 53 | 54 | 57 |
58 | 1M views 1 month ago 59 |
60 | 61 | 82 | 83 |
84 |
85 | 86 |
87 | 드림코딩 by 엘리 88 | 1M subcribers 89 |
90 |
91 | 92 |
93 |
94 | 95 | 96 |
97 | Up next 98 | 137 |
138 |
139 | 140 | 141 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Color */ 3 | --white-color: #fff; 4 | --black-color: #140a00; 5 | --blue-color: #045fd4; 6 | --red-color: #ff0000; 7 | --grey-dark-color: #909090; 8 | --grey-light-color: #e0e0e0; 9 | 10 | /* Size */ 11 | --spacing: 12px; 12 | --spacing-small: 6px; 13 | --avatar-size: 36px; 14 | 15 | /* Font Size */ 16 | --font-large: 20px; 17 | --font-regular: 16px; 18 | --font-medium: 14px; 19 | --font-small: 12px; 20 | --font-micro: 10px; 21 | } 22 | 23 | * { 24 | padding: 0; 25 | margin: 0; 26 | box-sizing: border-box; 27 | } 28 | 29 | body { 30 | font-family: Roboto; 31 | } 32 | 33 | ul { 34 | list-style: none; 35 | } 36 | 37 | button, 38 | button:focus { 39 | border: none; 40 | cursor: pointer; 41 | outline: none; 42 | } 43 | 44 | /* Header */ 45 | header { 46 | display: flex; 47 | justify-content: space-between; 48 | padding: var(--spacing); 49 | background-color: var(--black-color); 50 | color: var(--white-color); 51 | } 52 | 53 | header .logo { 54 | font-size: var(--font-large); 55 | } 56 | 57 | header .logo i { 58 | color: var(--red-color); 59 | } 60 | 61 | header .icons .fa-search { 62 | margin-right: var(--spacing); 63 | } 64 | 65 | /* Video player */ 66 | .player { 67 | position: sticky; 68 | top: 0; 69 | text-align: center; 70 | background-color: var(--black-color); 71 | } 72 | 73 | .player video { 74 | width: 100%; 75 | height: 100%; 76 | max-width: 1000px; 77 | } 78 | 79 | /* Video info */ 80 | .infoAndUpNext .info { 81 | padding: var(--spacing); 82 | } 83 | 84 | /* Metadata */ 85 | .info .metadata .hashtags { 86 | display: flex; 87 | font-size: var(--font-small); 88 | color: var(--blue-color); 89 | } 90 | 91 | .info .metadata .hashtags li { 92 | margin-right: var(--spacing); 93 | } 94 | 95 | .info .metadata .titleAndButton { 96 | display: flex; 97 | } 98 | 99 | .info .metadata .titleAndButton .title { 100 | font-size: var(--font-medium); 101 | margin-right: var(--spacing); 102 | } 103 | 104 | .info .metadata .titleAndButton .title.clamp { 105 | display: -webkit-box; 106 | -webkit-box-orient: vertical; 107 | -webkit-line-clamp: 2; 108 | overflow: hidden; 109 | } 110 | 111 | .info .metadata .titleAndButton .moreBtn { 112 | height: 100%; 113 | transition: transform 300ms ease-in-out; 114 | } 115 | 116 | .info .metadata .titleAndButton .moreBtn.clicked { 117 | transform: rotate(180deg); 118 | } 119 | 120 | .info .metadata .views { 121 | font-size: var(--font-small); 122 | color: var(--grey-dark-color); 123 | } 124 | 125 | /* Action buttons */ 126 | .info .actions { 127 | display: flex; 128 | justify-content: space-around; 129 | margin: var(--spacing) 0; 130 | } 131 | 132 | .info .actions button { 133 | display: flex; 134 | flex-direction: column; 135 | font-size: var(--font-small); 136 | color: var(--grey-dark-color); 137 | } 138 | 139 | .info .actions button i { 140 | margin: 0 auto; 141 | margin-bottom: var(--spacing-small); 142 | font-size: var(--font-regular); 143 | } 144 | 145 | .info .actions button i.active { 146 | color: var(--blue-color); 147 | } 148 | 149 | /* Channel description */ 150 | .info .channel { 151 | display: flex; 152 | justify-content: space-between; 153 | border-top: 1px solid var(--grey-light-color); 154 | border-bottom: 1px solid var(--grey-light-color); 155 | } 156 | 157 | .info .channel .metadata { 158 | display: flex; 159 | align-items: center; 160 | padding: var(--spacing-small) 0; 161 | } 162 | 163 | .info .channel .metadata img { 164 | width: var(--avatar-size); 165 | height: var(--avatar-size); 166 | border-radius: 50%; 167 | margin-right: var(--spacing); 168 | } 169 | 170 | .info .channel .metadata .info { 171 | display: flex; 172 | flex-direction: column; 173 | } 174 | 175 | .info .channel .metadata .info .name { 176 | font-size: var(--font-medium); 177 | } 178 | 179 | .info .channel .metadata .info .subscribers { 180 | font-size: var(--font-small); 181 | color: var(--grey-dark-color); 182 | } 183 | 184 | .info .channel .subscribe { 185 | text-transform: uppercase; 186 | color: var(--red-color); 187 | font-size: var(--font-medium); 188 | } 189 | 190 | /* Up next */ 191 | .upNext { 192 | padding: 0 var(--spacing); 193 | } 194 | 195 | .upNext > .title { 196 | font-size: var(--font-medium); 197 | color: var(--grey-dark-color); 198 | margin-bottom: var(--spacing-small); 199 | } 200 | 201 | .upNext .item { 202 | display: flex; 203 | margin-top: var(--spacing); 204 | } 205 | 206 | .upNext .item .img { 207 | flex-basis: 35%; 208 | margin-right: var(--spacing); 209 | } 210 | 211 | .upNext .item .img img { 212 | width: 100%; 213 | } 214 | 215 | .upNext .item .itemInfo { 216 | flex-basis: 60%; 217 | display: flex; 218 | flex-direction: column; 219 | } 220 | 221 | .upNext .item .moreBtn { 222 | flex-basis: 5%; 223 | height: 100%; 224 | } 225 | 226 | .upNext .item .itemInfo .title { 227 | font-size: var(--font-small); 228 | } 229 | 230 | .upNext .item .itemInfo .name, 231 | .upNext .item .itemInfo .views { 232 | font-size: var(--font-micro); 233 | color: var(--grey-dark-color); 234 | } 235 | 236 | .infoAndUpNext { 237 | display: flex; 238 | flex-direction: column; 239 | } 240 | 241 | @media screen and (min-width: 768px) { 242 | .infoAndUpNext { 243 | flex-direction: row; 244 | } 245 | 246 | .upNext { 247 | padding: var(--spacing); 248 | } 249 | } 250 | --------------------------------------------------------------------------------