Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@fdgh134
fdgh134 committed Jul 17, 2024
1 parent 777fadb commit 7296299
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 24 deletions.
67 changes: 46 additions & 21 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,11 +256,11 @@ h3{
overflow: hidden;
margin: 0 auto;
}
.content2_info_big_text > p{
.content2_info_big_text > p, .content3_info_big_text > p{
color: #fff;
font-size: 60px;
}
.content2_info_long_text{
.content2_info_long_text, .content3_info_long_text{
display: inline-block;
color: #fff;
font-weight: 400;
Expand All @@ -270,29 +270,29 @@ h3{

/* right side */

.content2_list_inner{
.content2_list_inner, .content3_list_inner{
padding: 0 calc(1vh + 1vw + 1rem);
width: 100%;
}
.content2_list_link{
.content2_list_link, .content3_list_link{
text-decoration: none;
display: flex;
gap: 30px;
align-items: center;
}
.content2_list_thum{
.content2_list_thum, .content3_list_thum{
border: 1px solid #fff;
border-radius: 3px;
flex-shrink: 0;
height: 18rem;
width: 18rem;
overflow: hidden;
}
.content2_list_thum > img{
.content2_list_thum > img, .content3_list_thum > img{
width: 100%;
height: 100%;
}
.content2_list_itemtext{
.content2_list_itemtext, .content3_list_itemtext{
display: flex;
flex-direction: column;
width: 100%;
Expand Down Expand Up @@ -327,6 +327,28 @@ h3{
width: 100%;
}

/* content3 */

.content3_inner{
display: flex;
position: relative;
left: 0;
top: 0;
right: 0;
margin: 0 auto;
width: 100%;
}
.content3_inner > .content3_info{
display: flex;
width: 40%;
z-index: 1;
align-items: center;
flex-direction: column;
flex-shrink: 0;
padding-left: clamp(24px, 4vw, 60px);
}


/* bottom section */

.contact{
Expand Down Expand Up @@ -425,24 +447,25 @@ h3{
.grid {
grid-template-columns: repeat(3,300px);
}
.content2_info{
.content2_info, .content3_info{
position: sticky;
top: 0;
justify-content: center;
min-height: 57rem;
max-height: 100vh;
}
.content2_list{
.content2_list, .content3_list{
overflow-x: hidden;
position: relative;
width: 60%;
z-index: 1;
padding: calc(2vh + 3vw + 2rem) 0;
}
.content2_list_inner > .content2_list_item:nth-child(even) > .content2_list_link{
.content2_list_inner > .content2_list_item:nth-child(even) > .content2_list_link,
.content3_list_inner > .content3_list_item:nth-child(even) > .content3_list_link{
flex-direction: row-reverse;
}
.content2_info_inner{
.content2_info_inner, .content3_info_inner{
display: inline-flex;
align-items: flex-start;
flex-direction: column;
Expand All @@ -463,6 +486,7 @@ h3{
margin-top: -8vw;
position: relative;
}

}

/* 태블릿 */
Expand Down Expand Up @@ -491,10 +515,10 @@ h3{
.empty2{
display: none;
}
.content2_inner{
.content2_inner, .content3_inner{
flex-direction: column;
}
.content2_info{
.content2_info, .content3_info{
display: flex;
flex-direction: column;
width: 100%;
Expand All @@ -503,21 +527,22 @@ h3{
padding: 0 clamp(24px,4vw,60px);
margin-top: 10vh;
}
.content2_list{
.content2_list, .content3_list{
overflow-x: hidden;
position: relative;
width: 100%;
z-index: 1;
}
.content2_list_inner{
.content2_list_inner, .content3_list_inner{
width: 70%;
padding: 3vw 3vh 6vh 3vh;
margin: 0 auto;
}
.content2_list_inner > .content2_list_item:nth-child(even) > .content2_list_link{
.content2_list_inner > .content2_list_item:nth-child(even) > .content2_list_link,
.content3_list_inner > .content3_list_item:nth-child(even) > .content3_list_link{
flex-direction: row-reverse;
}
.content2_info_inner{
.content2_info_inner, .content3_info_inner{
display: inline-flex;
align-items: flex-start;
flex-direction: column;
Expand Down Expand Up @@ -606,10 +631,10 @@ h3{
padding: 12px 24px;
}

.content2_inner{
.content2_inner, .content2_inner{
flex-direction: column;
}
.content2_info{
.content2_info, .content3_info{
display: flex;
flex-direction: column;
width: 100%;
Expand All @@ -618,14 +643,14 @@ h3{
padding: 0 clamp(24px,4vw,60px);
margin-top: 10vh;
}
.content2_list{
.content2_list, .content3_list{
overflow-x: hidden;
position: relative;
width: 100%;
z-index: 1;
padding: calc(2vh + 3vw + 2rem) 0 0 0;
}
.content2_list_link{
.content2_list_link, .content3_list_link{
flex-direction: column;
gap: 15px;
}
Expand Down
Binary file added img/me.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/me_bw.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/uiux/Fredit_thum.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,6 +542,78 @@ <h4 class="item_title">AbuGarcia Fantasista 낚싯대 상세페이지</h4>
</div>
</div>
</div>

<div class="content3 none">
<div class="content3_inner none">
<div class="content3_info">
<div class="content3_info_inner">
<div>
<p class="content3_info_inner_p">Simple Is Best</p>
<div class="content3_info_inner_div">
<div class="content3_info_big_text big_text1">
<p>UI/UX Design</p>
</div>
</div>
</div>
<div>
<p class="content3_info_long_text">
개인적으로 작업한 UI/UX 디자인 입니다. <br>
피그마, 포토샵, 일러스트 위주로 작업하며 정보전달이 명확하고 깔끔한 디자인을 추구합니다.<br>
</p>
</div>
</div>
</div>
<div class="content3_list">
<div class="content3_list_inner">
<div class="content3_list_item">
<a href="javascript:;" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/joid-thum.png" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. Jul</span>
<h4 class="item_title">조이디 어플리케이션</h4>
<p class="item_dis">발달이 느린 아이들을 위한 치료지원 플랫폼</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content3_list_item">
<a href="javascript:;" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/aim-thum.jpg" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. Jun</span>
<h4 class="item_title">에임위드 웹페이지</h4>
<p class="item_dis">인공지능 기반 데이터 거래 모니터링 플랫폼</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content3_list_item">
<a href="javascript:;" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/nail-thum.png" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. Jun</span>
<h4 class="item_title">네일샵 어플리케이션</h4>
<p class="item_dis">네일샵 예약 플랫폼</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content3_list_item">
<a href="javascript:;" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/Fredit_thum.png" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. May</span>
<h4 class="item_title">프레딧 웹페이지 리뉴얼</h4>
<p class="item_dis">프레딧 야쿠르트 웹페이지 리뉴얼 디자인</p>
</div>
</a>
<div class="item_line"></div>
</div>
</div>
</div>
</div>
</div>

<div class="contact animate__animated animate__slow none">
<div class="contact_inner">
<div><p>CONTACT</p></div>
Expand Down
6 changes: 3 additions & 3 deletions js/javascript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,10 @@ $(function(){
$('.btnframe').removeClass("none").addClass("animate__animated").addClass("animate__delay-1s").addClass("animate__fadeInDown");
$('.line').addClass("lineafter").addClass("linebefore");
$('body').removeClass("body_overflow");
$('.content, .grid, .content2_inner').removeClass("none");
$('.content2, .contact').removeClass("none");
$('.content, .grid, .content2_inner, .content3_inner').removeClass("none");
$('.content2, .content3, .contact').removeClass("none");
}
}.bind(this), index * 300);
}.bind(this), index * 170);
});

$('.introduce svg').mouseenter(function(){
Expand Down

0 comments on commit 7296299

Please sign in to comment.