웹페이지
[html css js] 웹페이지 제작
코딩하는둥이
2023. 1. 8. 20:31
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>kerry-portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/font.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/ham.css">
<link rel="stylesheet" href="css/top.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/mediaquery.css">
<link rel="stylesheet" href="css/ham.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.gnb li:nth-child(1) a").addClass("current_gnb");
var po1=$("#title").offset().top;
var po2=Math.floor($("#about").offset().top);
var po3=Math.floor($("#portfolio").offset().top);
var po4=Math.floor($("#people").offset().top);
var po5=Math.floor($("#contact").offset().top);
var n;
po=[po1,po2,po3,po4,po5];
$(window).resize(
function(){s
po2=Math.floor($("#about").offset().top);
po3=Math.floor($("#portfolio").offset().top);
po4=Math.floor($("#people").offset().top);
po5=Math.floor($("#contact").offset().top);
po=[po1,po2,po3,po4,po5];
}
);
// 대메뉴클릭 페이지스크롤링
var n;
$("ul.gnb li a").click(
function(){
n=$(this).attr("data-n");
$("html,body").stop().animate({scrollTop:po[n]},1000);
return false;
}
);
// top버튼
$("button.top").click(
function(){
$("html,body").animate({scrollTop:0},2000);
}
);
po=[po1,po2,po3,po4,po5];
// 대메뉴클릭 페이지스크롤링
$("ul.gnb li a").click(
function(){
n=$(this).attr("data-n");
$("html,body").stop().animate({scrollTop:po[n]},1000);
return false;
}
);
// 스트롤이벤트
$(window).scroll(function(){
if($(window).scrollTop()>=po2){
$("header").addClass("header_bg");
}else{
$("header").removeClass("header_bg");
}
});
$(window).scroll(function(){
// 스크롤시 대메뉴 색상변경과 서비스에서 상단 바 생성 제거
if($(window).scrollTop()>=po1){
$("ul.gnb li:nth-child(1) a").addClass("current_gnb");
$("ul.gnb li a").not("ul.gnb li:nth-child(1) a").removeClass("current_gnb");
console.log(po1);
}
if($(window).scrollTop()>=po2){
$("ul.gnb li:nth-child(2) a").addClass("current_gnb");
$("ul.gnb li a").not("ul.gnb li:nth-child(2) a").removeClass("current_gnb");
$(".top").addClass("ani_attach");
}
if($(window).scrollTop()<po2){
$(".top").removeClass("ani_attach");
}
if($(window).scrollTop()>=po3){
$("ul.gnb li:nth-child(3) a").addClass("current_gnb");
$("ul.gnb li a").not("ul.gnb li:nth-child(3) a").removeClass("current_gnb");
}
if($(window).scrollTop()>=po4){
$("ul.gnb li:nth-child(4) a").addClass("current_gnb");
$("ul.gnb li a").not("ul.gnb li:nth-child(4) a").removeClass("current_gnb");
}
if($(window).scrollTop()>=po5){
$("ul.gnb li:nth-child(5) a").addClass("current_gnb");
$("ul.gnb li a").not("ul.gnb li:nth-child(5) a").removeClass("current_gnb");
}
});
//사이드메뉴 높이값 계산 변수
po2 = po2-$("header").height();
// 아래보기 버튼
$("#title p.down").click(function(){
$("html,body").animate({scrollTop:po2},1000);
});
// people 애니메이션
var cn=1;
$("section#people ul.control li").click(function(){
$(this).addClass("currentcl");
$(this).siblings().removeClass("currentcl");
cn=$(this).attr("data-cn");
$("section#people ul.list").stop().animate({"left":-100*cn+"%"},1500);
});
// clpeopleiwnt 자동플레이
var cn1=1
setInterval(function(){
if(cn<3){
if(cn==0){
cn1=cn1*-1;
}
$("section#people ul.list").stop().animate({"left":-100*cn+"%"},1500);
$("section#people ul.control li:nth-child("+(cn+1)+")").addClass("currentcl");
$("section#people ul.control li:nth-child("+(cn+1)+")").siblings().removeClass("currentcl");
// cn++ // ++ 증감연산자 값을 1씩 증가해라
//cn=cn+cn1;
cn=cn+cn1;
}else if(cn==3){
cn=2;
cn1=cn1*-1;
}
},3000);
// work 팝업이미지
// 스크롤바의 너비 구하기
var winw=window.innerWidth; // 창전체 너비(스크롤바포함)
var docw=document.documentElement.peopleWidth;//문서의 너비
var scrw=winw-docw;
$("#portfolio").append("<div class='popup_img'></div>");
$("#portfolio .popup_img").hide();
var current_popup_img;
var closeT;
var closeR;
// work 사진 클릭시 사진 확대
$("section#portfolio ul.list_img li").click(
function(){
$(this).fadeTo(100,0.2);
// 스크롤너비만큼 패딩주기
$("html").css({"overflow-y":"hidden","padding-right":scrw});
$("header div").css({"padding-right":scrw});
$(".ani_attach").css({"right":20+scrw});
$("#portfolio .popup_img").fadeIn();
current_popup_img=$(this).children("img").attr("src");
$("#portfolio .popup_img img").remove();
$("#portfolio .popup_img").append("<img src='' alt='' />");
$("#portfolio .popup_img img").attr("src",current_popup_img);
// 팝업이미지 닫기
closeT=$(window).height()-$("#portfolio .popup_img img").height();
console.log("top값:"+closeT);
closeT=closeT/2+10;
closeR=$(window).width()-$("#portfolio .popup_img img").width();
console.log("right값:"+closeR);
closeR=closeR/2+20;
$(".popup_img button.close").remove();
$(".popup_img").append("<button class='close'>x</button>");
$(".popup_img button.close").css({"top":closeT,"right":closeR});
//닫기 버튼에 이벤트 붙이기
$(".popup_img button.close").bind("click",function(){
// 스크롤너비만큼 여백빼기
$("html").css({"overflow-y":"auto","padding-right":0});
$("header div").css({"padding-right":0});
$(".ani_attach").css({"right":"20px"});
$(".popup_img").fadeOut();
});
});
//Works current
$("section#portfolio ul.list li:nth-child(1) a").addClass("current_work");
$("section#portfolio ul.list li a").click(
function(){
$(this).addClass("current_work");
$("section#portfolio ul.list li a").not(this).removeClass("current_work");
return false;
}
);
// work이미지 position으로 위치 지정 -----------------------------------
var portL;
var portT;
var ii=0;
var j=0;
var list_imgH=$("#portfolio ul.list_img li").height()*2+20*3; // 이미지ul높이
$("#portfolio ul.list_img").css("height",list_imgH); // 이미지ul높이
$("#portfolio ul.list_img li").each(function(){ //이미지위치값 지정
ii=ii%3;
portL=$(this).width()*ii+20*ii;
portT=$(this).height()*Math.floor(j/3)+20*Math.floor(j/3);
$(this).css({"position":"absolute","left":portL,"top":portT});
ii++;
j++;
});
// work리스트 클릭시 분류 -----------------------------------------------------
var po;
$("#portfolio ul.list li a").click(function(){
po=$(this).parent().attr("class");
if(po!=null){
$("#portfolio ul.list_img li."+po).show();
// 재배치 start --------------------------------------------
ii=0;
j=0;
$("#portfolio ul.list_img li."+po).each(function(){
ii=ii%3;
portL=$(this).width()*ii+20*ii;
portT=$(this).height()*Math.floor(j/3)+20*Math.floor(j/3);
$(this).css({"position":"absolute","left":portL,"top":portT});
ii++;
j++;
});
// 재배치 end--------------------------------------------------
$("section#portfolio ul.list_img li").not("section#portfolio ul.list_img li."+po).hide();
return false;
}else{
$("section#portfolio ul.list_img li").show();
ii=0;
j=0;
$("#portfolio ul.list_img li").each(function(){
ii=ii%3;
portL=$(this).width()*ii+20*ii;
portT=$(this).height()*Math.floor(j/3)+20*Math.floor(j/3);
$(this).css({"position":"absolute","left":portL,"top":portT});
ii++;
j++;
});
}
});
});
</script>
<body>
<!-- =================상단영역=============== -->
<header>
<div class="block_center flex_between">
<h1 class="logo"><a href="">jiho</a></h1>
<nav>
<ul class="gnb flex_between">
<li><a href="#title" data-n="0">Home</a></li>
<li><a href="#about" data-n="1">About</a></li>
<li><a href="#portfolio" data-n="2">Portfolio</a></li>
<li><a href="#people" data-n="3">people</a></li>
<li><a href="#contact" data-n="4">Contact</a></li>
</ul>
</nav>
<span class="ham"></span>
</div>
</header>
<!-- ===================타이틀영역================ -->
<div id="title" >
<h2><span>WELCOME</span><strong>I'm a future developer.</strong></h2>
<p>My dream is front-end, and I want to go further and
<span>become a developer who knows how to do back-end.</span></p>
<button>DOWNLOAD CV</button>
<p class="down"><span>아래보기</span></p>
</div>
<!-- ===================내용영역=============== -->
<main>
<!-- ===================about================ -->
<section id="about" >
<div class="block_center addabout flex_between">
<figure>
<img src="img/about.jpg" alt="">
</figure>
<div class="aboutright">
<h2 class="h2">About Me</h2>
<h3>Hello! <strong>I'M JiHo Seo .</strong></h3>
<p>I am a student at Induk University Department of Computer Software.</p>
<p>The reason why I became interested in front-end was because <br> I could get the results I invested my time without academic background or prejudice.</p>
<p>Coding every day and creating team projects, you'll become an excellent front-end later on.</p>
<ul class="sns">
<li><a href="https://github.com/Doongiho"><img src="img/git.png" alt="깃허브"></a></li>
<li><a href="https://luck131313.tistory.com/"><img src="img/blog.png" alt="블로그"></a></li>
<li><a href="https://www.notion.so/25a0ab64b8dd417e8d149abe3351036e"><img src="img/notion.png" alt="노션"></a></li>
</ul>
</div>
</div>
</section>
<!-- ===================portfolio=============== -->
<section id="portfolio" >
<h2 class="h2"><strong>My</strong> Works</h2>
<p>I have divided it into three parts that I can express myself.</p>
<ul class="list">
<li><a href="">ALL</a></li>
<li class="website"><a href="">WEBSITE</a></li>
<li class="hobby"><a href="">HOBBY</a></li>
<li class="circles"><a href="">CIRCLES</a></li>
</ul>
<ul class="list_img">
<li class=" website">
<h3 class="hide">홍루이젠<strong class="block">website</strong></h3>
<img src="img/hi.jpg" alt="">
</li>
<li class="website">
<h3 class="hide">삼화페인트<strong class="block">website</strong></h3>
<img src="img/4.jpg" alt="">
</li>
<li class="hobby">
<h3 class="hide">reading<strong class="block">a book</strong></h3>
<img src="img/5.jpg" alt="">
</li>
<li class=" hobby">
<h3 class="hide">collaboration movement<strong class="block">curling</strong></h3>
<img src="img/6.jpg" alt="">
</li>
<li class="circles">
<h3 class="hide">coding study<strong class="block">IFP</strong></h3>
<img src="img/7.jpg" alt="">
</li>
<li class=" circles">
<h3 class="hide">Collaborative Coding<strong class="block">모던애자일</strong></h3>
<img src="img/8.jpg" alt="">
</li>
</ul>
</section>
<!-- ===================people================ -->
<section id="people">
<div>
<h2 class="h2"><strong>favorite </strong>quote</h2>
<p>I try to keep the quote in mind.</p>
<ul class="list">
<li>
<fieldset>
<img src="img/8.png" alt="">
<img src="img/2.jpg" alt="">
</fieldset>
<p>"today is painful Tomorrow is more painful. <br>And tomorrow the sand will be beautiful."</p>
<p>Alibaba Group Founder and Chairman <strong>Mawon</strong> </p>
</li>
<li>
<fieldset>
<img src="img/8.png" alt="">
<img src="img/30.jpg" alt="">
</fieldset>
<p>"Failure is an option. if it doesn't fail. You can't innovate enough."</p>
<p>Tesla founder<strong>Elon Musk</strong> </p>
</li>
<li>
<fieldset>
<img src="img/8.png" alt="">
<img src="img/32.jpg" alt="">
</fieldset>
<p>"Move quickly and solve the problem. if you don't solve the problem. <br>You won't be able to move faster."</p>
<p>Facebook CEO <strong>Mark Zuckerberg</strong> </p>
</li>
</ul>
<ul class="control">
<li class="currentcl" data-cn="0"></li>
<li data-cn="1"></li>
<li data-cn="2"></li>
</ul>
</div>
</section>
<!-- ===================contact================ -->
<section id="contact">
<div class="contact1 w1200">
<h2 class="h2">Contact <strong>Us</strong></h2>
<p>It is a long established fact that a reader will be of a page when <br>established fact looking at its layout.</p>
<ul>
<li>
<h3><ion-icon name="phone-portrait-outline"></ion-icon>Call Us On</h3>
<p>전화번호</p>
</li>
<li>
<h3><ion-icon name="mail-outline"></ion-icon>Email Us At</h3>
<p>happyluck@gmail.com</p>
</li>
<li>
<h3><ion-icon name="location-outline"></ion-icon>Visit Office</h3>
<p>nohaelo 508</p>
</li>
</ul>
<form action="">
<fieldset>
<div class="text">
<label for="" class="hise"></label>
<input type="text" placeholder="Your Name*">
<label for="" class="hise"></label>
<input type="Email" placeholder="Your Email*">
<label for="" class="hise"></label>
<input type="text" placeholder="Your Subject...">
<label for="" class="hise"></label>
<textarea name="name" rows="8" cols="80" placeholder="Your message..."></textarea>
<div>
</fieldset>
</form>
<button type="button" name="button">SEND MESSAGE</button>
</div>
</section>
</main>
<!-- ===================하단영역=============== -->
<footer>
<p>Computer Software Department Contest</p>
</footer>
<button type="button" name="button" class="top"><span>Top</sapn></button>
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</body>
</html>// layout.css
@charset "UTF-8";
.block{
display: block;
}
.flex-center{
display: flex;
justify-content: center;
}
.block_center{
max-width:1200px;
margin:0 auto;
transition: all 1s;
padding: 4px 0;
display: flex;
justify-content: space-between;
}
.inline-block{
display: inline-block;
}
.h2{
font-size: 34px;
line-height: 1.6;
margin-bottom: 20px;
}
.h5{
font-size:21px;
}
.hide{
display: none;
}
input:focus{
outline:none;
}
.flex_between{
justify-content: space-between;
display: flex;
}
.current_gnb{
color: #e65f78 !important;
}
.header_bg{
background-color: #fff;
border-bottom: solid 0.5px #ccc;
display: block;
}
.header_bg h1 a{
color:#333;
}
.header_bg ul.gnb li a{
color:#333;
}
.current_work{
background-color: #d8576f;
display: block;
color: #fff;
padding: 8px 19px;
border-radius: 50px;
}
section{
margin:0 auto;
height:100% !important;
position: relative;
padding-top: 200px;
padding-bottom: 150px;
}
header{
width: 100%;
top: 0;
position: fixed;
color: #fff !important;
padding: 27px 0;
transition: all 0.5s;
z-index: 2;
}
header div{
/*! width: 1200px; */
margin: 0 auto;
}
header>h1:nth-child(1){
width: 40%;
}
header h1 a {
color: #fff; font-size: 35px; font-weight: bold;
}
header div ul.gnb{
width: 60%;
float: right;
display: flex;
}
header div ul li a{
color: #fff;
font-size: 20px;
padding: 12PX 23PX;
transition: all 0.5s ease-out;
}
header div ul li a:hover{
color: #e65f78 !important;
}
#portfolio{
background-color: #f8f9fa;
}
section#contact{
background-color: #f8f9fa;
}
.h2{
font-size: 40px;
font-weight: bold;
margin-bottom: 55px;
margin: 18px 0;
}
/* 타이틀-----------------------------------------*/
#title{
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-size: cover;
transition: all 1s;
background-color: rgba(0, 0, 0, 0.7);
background-blend-mode: multiply;
background-image: url(../img/title.jpg);
}
#title h2 span{
color: #fff;
display: block;
font-size: 20px;
}
#title h2 strong{
display: inline-block;
font-size: 40px;
animation-name: typing;
animation-duration: 2.5s;
animation-direction: normal;
animation-timing-function: steps(20,end);
overflow:hidden;
white-space: nowrap;
text-transform: uppercase;
text-align: justify;
color: #fff;
margin-top: 10px;
}
@keyframes typing{
0%{
width: 0%;
}
100%{
width: 100%;
}
}
#title h2::after{
content: "";
width: 2px;
height: 44%;
background-color: #fff;
display: inline-block;
animation-name: hide;
animation-direction: 3s;
animation-direction: normal;
margin-left: 2px;
}
@keyframes hide{
0%{
opacity: 1;
}
99%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#title p{
text-align: center;
line-height: 1.5;
font-size: 18px;
/*! width: 80%; */
color: rgb(159, 156, 155);
margin: 20px 0;
}
#title p span{
display: block;
color: rgb(159, 156, 155);
}
#title button{
margin:20px 0;
background-color: #f000;
border:1px solid #fff;
border-radius: 28px;
padding: 19px 30px;
color: #fff;
transition: all 0.5s ease-out;
}
#title button:hover{
background-color: #fff;
color: #212529;
}
#title p.down{
width: 40px;
height: 50px;
border-radius: 20px;
border: #fff 3px solid;
position: relative;
animation-name: aniDown;
animation-duration: 1s;
animation-play-state: initial;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes aniDown{
100%{
bottom:0px;
}
}
@keyframes aniDown2{
90%{
bottom:20px;
}
100%{
transform: rotate(100deg)
}
}
#title p span{
display: block;
}
#title p.down span{
display: block;
text-indent: -9999999999px;
width: 4px;
height: 34%;
background-color: #fff;
position: absolute;
bottom: 4px;
left: calc(50% - 2px);
}
/* 메인---------------------------------------- */
main{
position: relative;
}
section#about{
max-width: 1200px;
margin: 0 auto;
}
section#about img{
display: block;
float: left;
height: 400px;
margin-right: 20px;
}
section#about div.aboutright{
display: block;
float: right;
}
section#about h3{
font-size: 27px;
font-weight: bold;
margin: 18px 0;
}
section#about h3 strong{
color: #e65f78;
}
section#about p{
color: #6c757d;
line-height: 1.5;
padding: 10px 0;
}
section#about ul {
display: flex;
justify-content: space-between;
width: 193px;
margin-top: 20px;
}
section#about ul li{
display: block;
border: 1px solid #ccc;
border-radius: 50px;
width: 50px;
height: 50px;
position: relative;
transition: all 0.5s ease-out;
}
section#about ul li:hover{
color: #e65f78;
border-color: #e65f78;
}
section#about ul li a img{
width: 35px;
height: 35px;
margin-left: 8px;
margin-top: 7px;
}
section#about ul li ion-icon{
width: 30px;
height: 30px;
position: absolute;
left: 11px;
top: 10px;
}
section#service{
position: relative;
max-width: 100%;
background-color: #f8f9fa;
}
section#service h2{
text-align: center;
}
section#service h2 strong{
font-weight:normal;
}
section#service h2+p{
text-align: center;
margin-bottom: 40px;
color: #999;
}
section#service ul{
max-width: 1000px;
margin: 0 auto;
text-align: center;
flex-wrap: wrap;
gap: 20px;
}
section#service ul li{
width: 30%;
border: 1px solid #ccc;
transition: all 0.5s ease-out;
padding: 15px 0;
}
section#service ul li:hover{
border-color: white;
box-shadow: 0 0 4px #a2bef5;
background-color: #fff;;
}
section#service ul li h3{
padding: 10px;
}
section#service ul li h3::before{
content: "";
width: 50px;
height: 50px;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
margin-bottom: 10px;
}
section#service ul li:nth-child(1) h3:before{
background-image: url(../img/1.png);
}
section#service ul li:nth-child(2) h3::before{
background-image: url(../img/2.png);
}
section#service ul li:nth-child(3) h3::before{
background-image: url(../img/3.png);
}
section#service ul li:nth-child(4) h3::before{
background-image: url(../img/4.png);
}
section#service ul li:nth-child(5) h3::before{
background-image: url(../img/5.png);
}
section#service ul li:nth-child(6) h3::before{
background-image: url(../img/6.png);
}
section#service ul li h3::after{
content: "";
width: 50px;
height: 3px;
display: block;
background-color: #e65f78 !important;
margin: 0 auto;
margin-top: 10px;
transition:all 0.5s;
}
section#service ul li:hover h3::after{
width: 80px;
}
section#service ul li h3+p{
padding: 10px;
color: #666;
}
section#me{
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
section#me h2{
}
section#me button{
background-color: #efacb9;
border-color: #d8576f;
padding: 20px 42px;
border-radius: 5px;
transition: all 0.5s ease-out;
}
section#me button:hover{
background-color: #d8576f
}
section#me button a{
color: #fff;
}
section#people div{
max-width: 1200px;
margin: 0 auto;
text-align: center;
overflow: hidden;
position: relative;
}
section#people div p{
color: #6c757d;
line-height: 1.5;
padding: 19px 0;
margin-bottom: 300px;
}
section#people ul.list{
width: 300%;
display: flex;
position: absolute;
left: 0;
top:177px;
overflow:hidden;
height: 249px;
}
section#people ul.list li{
width: calc(100% / 3);
float: left;
height: 101px;
}
section#people ul li fieldset img+img{
border-radius: 50px;
width: 95px;
height: 95px;
margin-top: 20px;
}
section#people ul li fieldset img:nth-child(1){
background-size: cover;
background-repeat: no-repeat;
width: 50px;
height: 50px;
margin: 23px;
display: block;
margin: auto;
}
section#people ul.control{
display: flex;
justify-content: center;
}
section#people ul.control li{
width: 15px;
height: 5px;
background-color: #efacb9;
display: block;
border-radius: 20px;
margin: 0 10px;
transition: all 1s;
}
.currentcl{
background-color: rgb(230, 95, 120) !important;
display: block !important;
padding:0 10px 0 10px; !important;
}
/* portfolio */
section#portfolio{
text-align: center;
}
section#portfolio p{
color:#6c757d;
padding-bottom: 50px;
}
section#portfolio>ul.list{
display: flex;
justify-content: center;
gap:10px;
margin-top:20px;
margin-bottom: 20px;
}
section#portfolio ul.list li{
text-transform: uppercase;
}
section#portfolio ul.list li a{
display: block;
padding: 10px 15px;
transition: all 0.5s;
border-radius: 15px;
}
section#portfolio ul.list_img{
max-width: 1000px;
margin: 0 auto;
/*! display: flex; */
/*! flex-wrap: wrap; */
/*! gap:20px; */
position: relative;
justify-content: center;
height: 500px;
}
section#portfolio ul.list_img li{
width: 30%;
background-color: #ebebeb;
position: relative;
cursor: pointer;
position: absolute;
transition: all 1s ease-out;
}
section#portfolio ul.list_img li::before{
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
background-color: rgba(0,0,0,0.7);
transition: all 0.5s;
opacity: 0;
}
section#portfolio ul.list_img li img{
cursor: pointer;
max-width: 100%;
}
section#portfolio ul.list_img li:hover::before{
opacity: 1;
}
section#portfolio ul.list_img li h3{
position: absolute;
text-align: center;
top: calc( 70% - 10px);
width: 100%;
color: #fff;
transition: all 0.5s;
opacity: 0;
/*! z-index: 2; */
display: block;
}
section#portfolio ul.list_img li:hover h3{
top:calc(50% - 10px);
opacity: 1;
display: block;
}
section#portfolio ul.list_img li h3 strong{
color: #fff;
}
section#portfolio ul li img{
max-width: 100%;
}
.popup_img{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
left: 0;
top: 0;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.popup_img img{
width: auto;
}
button.close{
background-color: transparent;
font-size: 40px;
border-color: transparent;
position: absolute;
}
section#blog{
background-color: #f8f9fa;
}
section#blog div.blog1{
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
section#blog h2 strong{
font-weight: normal;
}
section#blog div.blog1>p{
line-height: 1.5;
color: #6c757d;
margin-bottom: 69px;
}
section#blog ul{
display: flex;
flex-direction: row;
justify-content: space-between;
}
section#blog ul li{
display: block;
width: 325px;
height: 400px;
background-color: #fff;
text-align: left;
padding:29px 24px;
}
section#blog ul li img{
width: 331px;
height: 200px;
margin-bottom: 20px;
}
section#blog ul li h3 a{
font-weight: bold;
font-size: 20px;
margin: ;
}
section#blog ul li p{
line-height: 1.5;
color: #6c757d;
margin: 20px 0;
}
section#blog ul li p strong{
color: #e65f78;
}
section#blog ul li a.more{
color: #6c757d;
}
section#contact{
/*! max-width: 1200px; */
margin: 0 auto;
position: relative;
padding-bottom: 144px;
}
section#contact div.contact1{
text-align: center;
}
section#contact div .text{
margin: 0 auto;
}
.w1200{
width: 1200px;
margin: 0 auto;
}
section#contact h2 strong{
font-weight: normal;
}
section#contact div>p{
color: #6c757d;
line-height: 1.5;
margin: 20px 0;
}
section#contact div ul{
display: flex;
flex-direction: row;
margin: 0 auto;
padding: 47px 0px;
justify-content: center;
}
section#contact div ul li{
line-height: 1.5;
margin: 0 20px;
}
section#contact div ul li h3{
font-weight: bold;
}
section#contact div ul li h3 ion-icon{
display: block;
color:rgb(230, 95, 120);
width: 210px;
height: 50px;
margin-bottom: 10px;
}
section#contact div ul li p {
color: #343434;
}
section#contact form fieldset div.text input{
width: 540px;
margin-right: 19px;
margin-bottom: 20px;
padding:12px 10px;
}
section#contact form fieldset div.text input{
border: 1px solid #ccc;
}
section#contact form fieldset div.text input:nth-child(6){
width: 94%;
}
section#contact form fieldset div.text textarea{
border: 1px solid #ccc;
padding: 5px 11px;
width: 95%;
}
section#contact button{
background-color: #efacb9;
border: none;
padding: 20px 42px;
color: #fff;
margin: 20px 0;
border-color: #d8576f;
border-radius: 5px;
transition: all 0.5s ease-out;
}
section#contact button:hover{
background-color: #d8576f;
}
/* 하단영역--------------------------------- */
footer{
width: 100%;
margin: 0 auto;
text-align: center;
background-color: #242424 !important;
}
footer p{
padding: 40px 0;
color: #6c757d;
}// top.css
@charset "UTF-8";
.top{
background-color: #e65f78;
color:#fff;
display: block;
width: 50px;
height: 50px;
position: fixed;
right: 39px;
bottom: 122px;
border-radius:8px;
cursor:pointer;
transition: all 0.5s;
animation-duration:0.7s;
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes top_ani{
100%{
bottom: 60px;
opacity: 1;
}
}
.ani_attach{
/* animation-name: top_ani; */
bottom: 60px;
opacity: 1;
}
.top:hover{
background-color: orange;
}
.top span{
display: none;
}
.top::before{
content: ">";
display: block;
transform: rotate(-90deg) scaleY(1.6) translate(2px ,-2px);
text-align: center;
font-weight: bold;
font-size: 30px;
}