2021.08. 24 CSS실습(3-4)🌴

twitch.css ✍

.video-section .btn-more {
	position: absolute;

	width: 100px;
	height: 30px;
	background-color: #0e0e10;

	text-align: center;
	line-height: 30px;

	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
}




.category-section {
	padding-top: 60px;
	padding-bottom: 40px;
}

.category-section .title-wrap {
	padding-bottom: 10px;
}

.category-section .title-wrap h2 {
	font-size: 20px;

}

.category-section .category-wrap {
	
}

.category-section .category-wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.category-section .category-wrap li {
	width: 152px;
}

.category-section .category-wrap img {
	width: 152px;
	height: 203px;
	margin-bottom: 10px;
}

.category-section .category-wrap .txt-wrap {
	
}

.category-section .category-wrap .txt-wrap .count {
	font-size: 14px;
	color: grey;
}

footer {
	width: 100%;
	padding: 80px 0 150px;
}

footer .txt-wrap {
	text-align: center;
}

footer .footer-bottom {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: stretch;

	margin-top: 20px;
}

footer .txt-wrap p {
	font-size: 14px;
}

footer ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
}

footer ul li {

}


footer ul li a {
	color: grey;
	font-size: 14px;
}

footer ul li a:after {
	content: '';
	display: inline-block;

	width: 1px;
	height: 12px;
	background-color: grey;

	margin: 0 8px;

	position: relative;
	top: 1px;
}

footer ul li:last-child a:after {
	content: none;
}

결과물 🚀