master
/
solarai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
master
kmw 2 years ago
parent 9c620a3416
commit eaa467ba87
4 changed files with 248 additions and 13 deletions
Show Stats Download Patch File Download Diff File

84
public/css/app.css
Unescape Escape View File

@ -112,4 +112,88 @@ a {
padding-bottom: 40px; padding-bottom: 40px;
} }
.main-portfolio {
padding: 40px 0px;
}
.portfolio {
cursor: pointer;
position: relative;
}
.portfolio:hover .portfolio-img img {
transform: scale(1.2);
}
.portfolio:hover .portfolio-inner {
opacity: 1;
transition: all 0.7s ease-in-out;
}
.portfolio-inner {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 14%;
}
.portfolio-inner .portfolio-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
padding: 0px 20px;
}
.portfolio-inner .portfolio-box .portfolio-title {
width: 100%;
color: white;
font-size: 16px;
line-height: 130%;
letter-spacing: -0.5px;
}
.portfolio-inner .portfolio-box .portfolio-hr {
width: 18px;
height: 1px;
background: #999;
margin: 10px auto;
}
.portfolio-inner .portfolio-box .portfolio-desc {
font-size: 12px;
color: #999;
letter-spacing: -0.5px;
line-height: 130%;
}
.portfolio-img {
width: 100%;
padding-bottom: 100%;
position: relative;
display: block;
overflow: hidden;
}
.portfolio-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s;
}
.more-button {
font-size: 14px;
color: #212121;
border: 1px solid #c0c0c0;
border-radius: 100px;
padding: 11px 20px;
cursor: pointer;
display: inline-block;
margin-top: 20px;
}
/************ BreakPoints ************/ /************ BreakPoints ************/

BIN
public/images/testimg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 328 KiB

88
resources/sass/app.scss
Unescape Escape View File

@ -71,6 +71,94 @@ $font-sizes: 52;
.main-inquiry{ .main-inquiry{
padding-bottom:40px; padding-bottom:40px;
} }
.main-portfolio{
padding:40px 0px;
}
.portfolio{
cursor: pointer;
position:relative;
&:hover{
.portfolio-img{
img{
transform:scale(1.2)
}
}
.portfolio-inner{
opacity: 1;
transition: all .7s ease-in-out;
}
}
}
.portfolio-inner{
opacity: 0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:14%;
.portfolio-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:rgba(0, 0, 0, 0.8);
height:100%;
width:100%;
padding:0px 20px;
.portfolio-title{
width: 100%;
color:white;
font-size:16px;
line-height:130%;
letter-spacing: -0.5px;
}
.portfolio-hr{
width:18px;
height:1px;
background:#999;
margin:10px auto;
}
.portfolio-desc{
font-size:12px;
color:#999;
letter-spacing: -0.5px;
line-height: 130%;
}
}
}
.portfolio-img{
width: 100%;
padding-bottom: 100%;
position: relative;
display: block;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: transform .5s;
}
}
.more-button{
font-size:14px;
color:#212121;
border:1px solid #c0c0c0;
border-radius:100px;
padding : 11px 20px;
cursor:pointer;
display: inline-block;
margin-top:20px;
}
/************ BreakPoints ************/ /************ BreakPoints ************/
// Small devices (landscape phones, 576px and up) // Small devices (landscape phones, 576px and up)
@media (max-width: 576px) { @media (max-width: 576px) {

89
resources/views/pages/portfolio.blade.php
Unescape Escape View File

@ -1,32 +1,95 @@
<section class="main-portfolio" id="portfolio"> <section class="main-portfolio" id="portfolio">
<div class="container"> <div class="container text-center">
<div class="row"> <div class="row">
<div class="col-6 col-md-4 col-lg-3"> <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
<div> <div class="portfolio-img">
item <img src="/images/testimg.png"/>
</div>
<div class="portfolio-inner">
<div class="portfolio-box">
<div class="portfolio-title">
태양광 카포트
</div>
<div class="portfolio-hr"></div>
<div class="portfolio-desc">
태양광 발전량은 일조 시간이 중요해요!
</div>
</div>
</div> </div>
</div> </div>
<div class="col-6 col-md-4 col-lg-3"> <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
<div> <div class="portfolio-img">
item <img src="/images/testimg.png"/>
</div>
<div class="portfolio-inner">
<div class="portfolio-box">
<div class="portfolio-title">
태양광 카포트
</div>
<div class="portfolio-hr"></div>
<div class="portfolio-desc">
태양광 발전량은 일조 시간이 중요해요!
</div>
</div>
</div> </div>
</div> </div>
<div class="col-6 col-md-4 col-lg-3"> <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
<div> <div class="portfolio-img">
item <img src="/images/testimg.png"/>
</div>
<div class="portfolio-inner">
<div class="portfolio-box">
<div class="portfolio-title">
태양광 카포트
</div>
<div class="portfolio-hr"></div>
<div class="portfolio-desc">
태양광 발전량은 일조 시간이 중요해요!
</div>
</div>
</div> </div>
</div> </div>
<div class="col-6 col-md-4 col-lg-3"> <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
<div> <div class="portfolio-img">
item <img src="/images/testimg.png"/>
</div> </div>
<div class="portfolio-inner">
<div class="portfolio-box">
<div class="portfolio-title">
태양광 카포트
</div> </div>
<div class="portfolio-hr"></div>
<div class="portfolio-desc">
태양광 발전량은 일조 시간이 중요해요!
</div> </div>
</div> </div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
<div class="portfolio-img">
<img src="/images/testimg.png"/>
</div>
<div class="portfolio-inner">
<div class="portfolio-box">
<div class="portfolio-title">
태양광 카포트
</div>
<div class="portfolio-hr"></div>
<div class="portfolio-desc">
태양광 발전량은 일조 시간이 중요해요!
</div>
</div>
</div>
</div>
</div>
<div class="more-button">더보기 <span class="now-count">8</span> / <span class="max-count">24</span></div>
</div>
</section> </section>

Write Preview
Loading…
Cancel
Save