티스토리 뷰

WEB/Html & Css

[Ellie] Youtube Clone

Harimad 2022. 4. 4. 10:27

강의, 자료 링크

 

My Finished Work From Github : https://harimad.github.io/-PF-youtube/

시작 참고 사항(선택해서 해보기)
1. 지금부터 스스로 만들어 본다. (1시간 내외)
2. 힌트까지 보고 스스로 만들어 본다. (2시간 내외)
3. 영상을 끝까지 보고 스스로. 만들어 본다. (2시간 내외)

 

Todo

1. Mobile version

 

2. DeskTop version ( Media query를 이용한 반응형 페이지 적용 )

시연 장면

 

 

HTML FILE

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>YOUTUBE CLONE</title>
	<script src="https://kit.fontawesome.com/fb38926c9b.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<!-- Header -->
	<header>
		<!-- logo -->
		<div class="logo">
			<i class="fa-brands fa-youtube"></i>
			<p>Youtube</p>
		</div>
		<!-- icons -->
		<div class="icons">
			<i class="fa-solid fa-magnifying-glass"></i>
			<i class="fa-solid fa-bars"></i>
		</div>
	</header>

	<!-- Player -->
	<section class="player">
		<video controls>
			<source src="pexels-gabby-k-5282128.mp4" type="video/mp4">c
		</video>
	</section>

	<!-- Info & upNext -->
	<div class="container">
		<secction class="info">
			<!-- metadata -->
			<div class="metadata">
				<div class="tags">
					<p>#DREAM CODING</p>
					<p>#POWER CODING</p>
					<p>#SENSATIONAL</p>
				</div>
				<div class="title">
					<p class="detail">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam soluta nihil dolores,
						porro perspiciatis sit repellat tempore dignissimos id fugit doloribus! Reprehenderit, maioLorem ipsum dolor
						sit amet consectetur adipisicing elit. Quibusdam soluta nihil dolores,
						porro perspiciatis sit repellat tempore dignissimos id fugit doloribus! Reprehenderit, maio</p>
					<button class="detail_btn"><i class="fa-solid fa-caret-down"></i></button>
				</div>
				<p class="view">1M views 1 month ago</p>
			</div>
			<!-- icons -->
			<div class="icons">
				<div class="item">
					<button><i class="fa-solid fa-thumbs-up active"></i></button>
					<p>1K</p>
				</div>
				<div class="item">
					<button><i class="fa-solid fa-thumbs-down"></i></button>
					<p>0</p>
				</div>
				<div class="item">
					<button><i class="fa-solid fa-share"></i></button>
					<p>Share</p>
				</div>
				<div class="item">
					<button><i class="fa-solid fa-plus"></i></button>
					<p>Save</p>
				</div>
				<div class="item">
					<button><i class="fa-solid fa-flag"></i></button>
					<p>Report</p>
				</div>
			</div>
			<!-- user -->
			<div class="user">
				<div class="profile">
					<img src="pexels-mermek-am-1573324.jpg" alt="profile Image">
					<div class="profile-detail">
						<p>DreamCoding by Ellie</p>
						<p>1M subscribers</p>
					</div>
				</div>
				<div class="subscribe">
					<p>subscribe</p>
				</div>
			</div>
		</secction>

		<!-- upNext -->
		<section class="upNext">
			<p>Up Next</p>
			<!-- more -->
			<div class="more">
				<div class="img">
					<img src="https://via.placeholder.com/300" alt="placeholder image">
				</div>
				<div class="more-title">
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, tenetur et veritatis quaerat nostrum
						sit eligendi quae velit ea maxime vitae asperiores</p>
					<p>DreamCoding by ELLIE</p>
					<p>82K views</p>
				</div>
				<button class="more-btn"><i class="fa-solid fa-ellipsis-vertical"></i></buttonc>
			</div>
			<!-- more -->
			<div class="more">
				<div class="img">
					<img src="https://via.placeholder.com/300" alt="placeholder image">
				</div>
				<div class="more-title">
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, tenetur et veritatis quaerat nostrum
						sit eligendi quae velit ea maxime vitae asperiores</p>
					<p>TIMLEE by TIM</p>
					<p>82K views</p>
				</div>
				<button class="more-btn"><i class="fa-solid fa-ellipsis-vertical"></i></buttonc>
			</div>
			<!-- more -->
			<div class="more">
				<div class="img">
					<img src="https://via.placeholder.com/300" alt="placeholder image">
				</div>
				<div class="more-title">
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, tenetur et veritatis quaerat nostrum
						sit eligendi quae velit ea maxime vitae asperiores</p>
					<p>HARIMAD by HARIMAD</p>
					<p>82K views</p>
				</div>
				<button class="more-btn"><i class="fa-solid fa-ellipsis-vertical"></i></buttonc>
			</div>
		</section>
		<script src="script.js"></script>
	</div>
</body>

</html>

CSS FILE

:root {
  /* Color */
  --white-color: #fff;
  --black-color: #140a00;
  --blue-color: #045fd4;
  --red-color: #ff0000;
  --grey-dark-color: #909090;
  --grey-light-color: #e0e0e0;

  /* Size */
  --spacing: 12px;
  --spacing-small: 6px;
  --avatar-size: 36px;

  /* Font Size */
  --font-large: 20px;
  --font-regular: 16px;
  --font-medium: 14px;
  --font-small: 12px;
  --font-micro: 10px;
}

/* initial setting */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

ul {
  list-style: none;
}

button,
button:focus {
  border: none;
  cursor: pointer;
  outline: none;
  background-color: transparent;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing);
  background-color: var(--black-color);
  color: var(--white-color);
  font-size: var(--font-large);
}
header .logo {
  display: flex;
  align-items: center;
}
header .logo i {
  margin: 0 var(--spacing);
  color: var(--red-color);
}
header .logo p {
  font-weight: bold;
}
header .icons i {
  margin-right: var(--spacing);
}
/* Player */
.player {
  text-align: center;
  background-color: var(--black-color);
}
.player video {
  width: 100%;
  height: 100%;
  max-width: 1000px;
}

/* Info & upNext */
/* Info - metadata */
.metadata {
  padding: var(--spacing-small);
}

.info .metadata .tags {
  display: flex;
}
.info .metadata .tags p {
  margin: var(--spacing-small);
  color: var(--blue-color);
  font-size: var(--font-small);
}
.info .metadata .title {
  display: flex;
  justify-content: space-between;
}
.info .metadata .title .detail {
  font-size: var(--font-medium);
}
.info .metadata .title .detail_btn {
  height: 100%;
  transition: transform 0.3s ease-in;
}
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.clicked {
  transform: rotate(180deg);
}
.metadata .view {
  font-size: var(--font-small);
  margin: var(--spacing-small) 0;
  color: var(--grey-dark-color);
}
/* Info - icons */
.info .icons {
  display: flex;
  justify-content: space-around;
  margin: var(--spacing) 0;
}
.info .icons .item {
  display: flex;
  flex-direction: column;
}
.active {
  color: var(--blue-color);
}
.info .icons .item button:hover {
  color: var(--blue-color);
}
/* Info - user */
.user {
  display: flex;
  justify-content: space-between;
  margin: var(--spacing) 0;
  border-top: 1px solid var(--grey-dark-color);
  border-bottom: 1px solid var(--grey-dark-color);
}
.user .profile {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user .profile img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  margin: var(--spacing-small);
}
.user .profile .profile-detail {
  margin: 0 var(--spacing-small);
}

.user .profile .profile-detail p:first-child {
  font-size: var(--font-medium);
  font-weight: 600;
}
.user .profile .profile-detail p:nth-child(2) {
  font-size: var(--font-small);
}

.user .subscribe {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: var(--font-medium);
  margin: 0 var(--spacing);
}

/* upNext */
.upNext {
  display: flex;
  flex-direction: column;
}

.upNext > p {
  margin-left: var(--spacing);
}

.upNext .more {
  display: flex;
  margin: var(--spacing);
}

.upNext .more .img {
  flex: 1 1 30%;
  margin-right: var(--spacing);
}
.upNext .more .img img {
  width: 100%;
}

.upNext .more .more-title {
  flex: 1 1 65%;
  display: flex;
  flex-direction: column;
}
.upNext .more .more-title p:first-child {
  font-size: var(--font-medium);
}
.upNext .more .more-title p:nth-child(2),
.upNext .more .more-title p:nth-child(3) {
  font-size: var(--font-small);
  color: var(--grey-dark-color);
}

.upNext .more .more-btn {
  flex: 1 1 5%;
}

.upNext .more .more-btn i {
  height: 100%;
}

@media screen and (min-width: 768px) {
  .container {
    display: flex;
  }
  .upNext > p {
    margin-top: var(--spacing);
  }
}

JS FILE

const moreBtn = document.querySelector('.detail_btn')
const detailTitle = document.querySelector('.title .detail')

moreBtn.addEventListener('click', () => {
  moreBtn.classList.toggle('clicked')
  detailTitle.classList.toggle('clamp')
})

 

저작자표시 비영리 변경금지 (새창열림)

'WEB > Html & Css' 카테고리의 다른 글

Element.scrollIntoView()  (0) 2022.04.07
[Interactive_web] CSS Template  (0) 2022.04.05
[Apple Interactive web] 2. 스크롤을 이용한 인터랙션 구현  (0) 2022.02.28
[Apple Interactive web] 01 - 웹페이지 골격 만들기  (0) 2022.02.27
[Apple Interactive web] 준비단계  (0) 2022.02.24
댓글
링크
다크모드
Document description javascript psychology
⬅
더보기 ,제목1 태그 호버