미니코딩 안내서Code Notes

<h1 class="main_title">Color Cosmetics
<ul class="cosmetics_list">
  <li class="lovely">
	<div class="images_wrap">
	  <img src="images/lovely.png">
	</div>
	<section class="detailed">
	  <h2>Lovely</h2>
	  <p>Lorem ipsum dolor sit amet, consectetuer
	  adipiscing elit.Aenean commodo ligula eget dolor.
	  Aenean massa. Cum sociis natoque penatibus et
	  magnis dis parturient montes,nascetur ridiculus
	  mus. Donec quam felis, ultricies nec,
	  pellentesque eu, pretium quis, sem. Nulla
	  consequat massa quis enim. Donec pede justo,
	  fringilla vel, aliquet nec, vulputate eget,arcu.
	  In enim justo, rhoncus ut, imperdiet a,
	  venenatis vitae, justo.</p>
	</section>
  </li>
  <li class="mystic">
	<div class="images_wrap">
	  <img src="images/mystic.png">
	</div<
	<section class="detailed">
	  <h2>Mystic</h2>
	  <p>Lorem ipsum dolor sit amet, consectetuer
	  adipiscing elit.Aenean commodo ligula eget dolor.
	  Aenean massa. Cum sociis natoque penatibus et
	  magnis dis parturient montes,nascetur ridiculus
	  mus. Donec quam felis, ultricies nec,
	  pellentesque eu, pretium quis, sem. Nulla
	  consequat massa quis enim. Donec pede justo,
	  fringilla vel, aliquet nec, vulputate eget,arcu.
	  In enim justo, rhoncus ut, imperdiet a,
	  venenatis vitae, justo.</p>
	</section>
  </li>
  <li class="flame">
	<div class="images_wrap">
	  <img src="images/flame.png">
	</div>
	<section class="detailed">
	  <h2>Flame</h2>
	  <p>Lorem ipsum dolor sit amet, consectetuer
	  adipiscing elit.Aenean commodo ligula eget dolor.
	  Aenean massa. Cum sociis natoque penatibus et
	  magnis dis parturient montes,nascetur ridiculus
	  mus. Donec quam felis, ultricies nec,
	  pellentesque eu, pretium quis, sem. Nulla
	  consequat massa quis enim. Donec pede justo,
	  fringilla vel, aliquet nec, vulputate eget,arcu.
	  In enim justo, rhoncus ut, imperdiet a,
	  venenatis vitae, justo.</p>
	</section>
  </li>
</ul>
<footer>
  <p class="copyright">Copyright 2021. (my own study) all rights reserved.</p>
</footer>





				

/* Web Fonts */
	Web Fonts 부분은 영상을 참고하여 직접 작성해 보세요!
	웹폰트 적용하는 방법에 익숙해집니다.

/* CSS Resets */
	CSS Resets 부분은 영상을 참고하여 직접 작성해 보세요!
	HTML 요소와 친밀해지는 시간입니다.
	
/* Desgin Areas */
body {
   font-size: 14px;
   color: #6e6e6e;
   background-color: #0e0e0f;
   font-family: 'Lexend', sans-serif;
}

.main_title {
   font-family: 'Carattere', cursive;
   text-align: center;
   background-color: #c18487;
   padding-top: 50px;
   font-size: 20vw;
   text-indent: -1.2vw;
   line-height: 1;
   color: #cf9699;
   position: relative;
   z-index: -1;
}

.cosmetics_list {
   width: 1000px;
   margin: -100px auto 0;
   background-color: #1d1d1f;
   padding: 60px 30px 30px 60px;
   border-radius: 5px 5px 0 0;
}

.cosmetics_list li {
   display: flex;
   flex-direction: row;
}

.cosmetics_list li:nth-child(2) {
   margin: 70px 0;
   flex-direction: row-reverse;
   text-align: right;
}

.cosmetics_list .images_wrap {
   width: 280px;
   height: 280px;
   border: 10px solid;
   margin-right: 30px;
}

.cosmetics_list .lovely .images_wrap {
   border-color: #f06751;
}

.cosmetics_list .mystic .images_wrap {
   border-color: #e62d96;
   margin-right: 0;
}

.cosmetics_list .flame .images_wrap {
   border-color: #f5354f;
}

.images_wrap img {
   background-color: #302f30;
   position: relative;
   right: 35px;
   bottom: 35px;
}

.cosmetics_list .mystic .detailed {
   padding-right: 55px;
}

.cosmetics_list h2 {
   font-family: 'Carattere', cursive;
   font-size: 80px;
}

.cosmetics_list .lovely h2 {
   color: #f06751;
}

.cosmetics_list .mystic h2 {
   color: #e62d96;
}

.cosmetics_list .flame h2 {
   color: #f5354f;
}

.cosmetics_list p {
   font-size: 18px;
   padding-right: 30px;
}

.cosmetics_list .mystic p {
   padding-right: 0;
}

footer {
   text-align: center;
   padding: 50px 0;
}