일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- #뉴스
- #홈페이지제작
- #해피CGI
- #image
- javascript
- happycgi
- #동영상
- php
- 홈페이지제작
- CSS
- #웹솔루션
- 웹솔루션
- #쇼핑몰
- 게시판
- 해피씨지아이
- 사이트제작
- CGIMALL
- 쇼핑몰
- 홈페이지
- 솔루션
- #업종별
- #jQuery
- #홈페이지
- #happycgi
- jquery
- #cgimall
- 해피CGI
- #이미지
- #솔루션
- #CSS
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Creative HTML Cards 본문
마우스 오버시 배경색이 들어가고 해당 링크로 갈 수 있는 버튼이 생기게 됩니다.
간단한 정보 소개하는 페이지에 유용할거 같습니다.
자세한 내용은 데모를 확인해 주시기 바랍니다.
HTML
<section class="creative-cards style-one">
<div class="container">
<div class="row">
<div class="card-column">
<div class="card-details">
<div class="card-icons">
</div>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
</div>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
</div>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
</div>
</div>
</div>
</div>
</section>
|
CSS
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');
body{
font-size: 17px;
line-height: 30px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
word-break: break-word;
-webkit-font-smoothing: antialiased;
font-family: "Epilogue", sans-serif;
margin: 0;
background: #fff;
}
* {
box-sizing: border-box;
}
.creative-cards{
padding: 120px 0;
position: relative;
}
.creative-cards .container {
max-width: 1320px;
width: 100%;
padding-right: .75rem;
padding-left: .75rem;
margin-right: auto;
margin-left: auto;
}
.creative-cards .container .row{
display: flex;
flex-wrap: wrap;
}
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 33.33333333%;
text-align: center;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.card-details {
width: 80%;
margin: auto;
position: relative;
transition: .3s ease-in-out;
}
.card-details:before {
content: "";
width: 190px;
height: 380px;
background: #f7f6f2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skew(-20deg, 0deg);
z-index: -1;
transition: .3s ease-in-out;
}
.card-details:hover:before{
background-color: #fffab3;
}
.card-icons {
width: 140px;
height: 150px;
position: relative;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.card-icons:before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 1px solid;
width: 100%;
height: 100%;
transform: skew(-20deg, 0deg);
background: #fff;
border-color: #ffee02;
transition: .3s ease-in-out;
}
.card-details:hover .card-icons:before{
background-color: #ffee02;
}
.card-icons img{
position: relative;
width: 70px;
height: 70px;
}
.card-details h3{
margin-bottom: 15px;
margin-top: 50px;
font-weight: 700;
font-size: 1.75rem;
line-height: 1.2;
}
.card-details h3 a{
color: #000;
text-decoration: none;
}
.card-details p{
font-size: 16px;
line-height: 30px;
color: #444;
font-weight: 400;
margin-bottom: 30px;
}
.read-more-btn {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 100%;
margin: auto;
background: #fff;
transform: translateX(-10px);
opacity: 0;
visibility: hidden;
border-color: #ffee02;
transition: .3s ease-in-out;
text-decoration: none;
}
.read-more-btn i{
color: #000;
font-size: 12px;
}
.card-details:hover .read-more-btn{
transform: translateX(0);
opacity: 1;
visibility: visible;
}
/* ============= Responsive Ipad ==================== */
@media (max-width: 992px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 50%;
margin-bottom: 40px;
}
}
/* ============= Responsive Iphone ==================== */
@media (max-width: 480px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 100%;
margin-bottom: 20px;
}
.card-details{
width: 100%;
}
.read-more-btn{
transform: translateX(0px);
opacity: 1;
visibility: visible;
}
}
|
'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글
[해피CGI][cgimall] CSS 그리드를 사용한 레이아웃 템플릿 (0) | 2024.12.24 |
---|---|
[해피CGI][cgimall] 이미지 파일을 base64로 인코딩해주는 base64 Image Encoder (0) | 2024.12.18 |
[해피CGI][cgimall] 간단한 프롬프트 입력으로 만드는 음악 작곡, 생성 인공지능(AI) SUNO (0) | 2024.12.12 |
[해피CGI][cgimall] 인공지능(AI) 검색 엔진 perplexity (0) | 2024.12.09 |
[해피CGI][cgimall] Gemini 가 효율적으로 노트를 정리해주는 - Nookbook LM google (0) | 2024.11.06 |
Comments