<결과화면>
<modal-in-slider.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./01-modal-in-silder.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>modal in slider</title>
</head>
<body>
<!-- modal Button -->
<input type="checkbox" id="modal-btn">
<label for="modal-btn">show</label>
<!-- modal -->
<div class="modal-container">
<!-- modal Box -->
<div class="modal-box">
<label for="modal-btn">x</label>
<!-- sliderContainer -->
<div class="slider-container">
<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<div class="slider-view">
<div class="slider-list">
<div class="slider-item">
<h1>my skill set</h1>
<div class="slider-description">
<i class="fab fa-html5 slider_gold"></i>
<h2>html5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
<div class="slider-item">
<h1>my skill set</h1>
<div class="slider-description">
<i class="fab fa-css3-alt slider_dodgerblue"></i>
<h2>css3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
<div class="slider-item">
<h1>my skill set</h1>
<div class="slider-description">
<i class="fab fa-js-square slider_yellowgreen"></i>
<h2>javascript</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="tab-btn-box">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</div>
<!-- overlay -->
<label for="modal-btn">X</label>
</div>
</div>
</body>
</html>'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_64] float란? (0) | 2021.05.04 |
|---|---|
| [코딩 공부_63] fullscreen-slider 만들기 (0) | 2021.05.04 |
| [코딩 공부_61] modal, slider 만들기 (0) | 2021.05.01 |
| [코딩 공부_60] 메인 페이지 실습하기 (0) | 2021.05.01 |
| [코딩 공부_59] the space project-2, 코딩하기 (0) | 2021.04.27 |
댓글