[해결중] 안녕하세요 죄송합니다. 인트로 페이지 관련 질문 드립니다.
꿈의세계
121.♡.197.166
2017-11-21 14:06
9,892
1
0
0
본문
안녕하세요
현제 인트로 페이지 디자인을 하고 있는데요
제가 어디서 수정을 해야 할지 잘 몰라서요
20인치 22인치 24인치 이 화면에서도 원형이 3개가 균일하게 가로로 배치가 되었으면 하는데 잘 되지 않아요
뭐가 잘 못 되었는지 모르겠습니다.
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>행복을 만들어가는 사회적협동조합 지심</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">
<style>
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
body *{font-family: 'Nanum Gothic', sans-serif !important;}
body {background: url(http://www.jisim.or.kr/theme/basic1/img/back02.jpg) no-repeat; background-size: cover; height: 100%; background-attachment: fixed; }
.main_intro_wrap{width:100%; height:100%; position:static; }
.main_intro_wrap h1{display:block; font-size:34px; font-weight:normal; color:#fff; text-shadow:0 0 3px rgba(0,0,0,0.4); text-align:center; position:absolute; top:10%; left:0; right:0; z-index:50; letter-spacing:-3px; animation-duration:0.7s; animation-name:intro_title; animation-fill-mode:both; animation-delay:0.2s;}
.main_intro_wrap h1 span{color:#ffc600; font-size:58px; font-weight:800;}
.main_intro_wrap h1:after{content:' '; display:block; font-size:20px; text-align:center; color:rgba(255,255,255,0.8); margin-top:10px; letter-spacing:-1px;}
.main_intro_wrap {width: 100%; height: 100%; position: relative; }
.main_intro_wrap .main_intro{width:50%; height:100%; float:left; position:relative;}
.main_intro_wrap .main_intro a{display:block; width:300px; height:300px; border:1px solid #fff; border-radius:50%; position:absolute; top:35%; left:50%; margin-left:-150px; text-align:center; transition:all 0.25s; animation-duration:1s; animation-name:intro_circle; animation-fill-mode:both; animation-delay:0.7s;}
.main_intro_wrap .main_intro a img{width:90px; margin-top:58px;}
.main_intro_wrap .main_intro a span{display:block; font-size:33px; position:absolute; top:55%; left:0; right:0; bottom:0; color:#fff; letter-spacing:-1px;}
.main_intro_wrap .main_intro p{font-size:16px; color:#fff; position:absolute; top:100%; left:0; right:0; text-align:center; text-shadow:0 0 3px rgba(0,0,0,0.3); transition:all 0.25s;}
.main_intro_wrap .container1 a:hover p{color:#06cfc4;}
.main_intro_wrap .container2 a:hover p{color:#ffd237;}
.main_intro_wrap .container3 {width:300px; position: absolute; top: 0; left: 50%; margin-left: -8%; }
.main_intro_wrap .container3 a:hover p{color:#ffd237;}
.main_intro_wrap .container1 a:hover{background:rgba(11,162,154,0.5); border-color:rgba(11,162,154,0.5);}
.main_intro_wrap .container2 a:hover{background:rgba(255,198,0,0.5); border-color:rgba(255,198,0,0.5);}
.main_intro_wrap .container3 a:hover{background:rgba(255,198,0,0.5); border-color:rgba(255,198,0,0.5);}
@keyframes intro_title{
from{opacity:0; visibility:hidden; top:5%;}
to{opacity:1; visibility:visible; top:10%;}
}
@keyframes intro_title2{
from{opacity:0; visibility:hidden; top:38%;}
to{opacity:1; visibility:visible; top:43%;}
}
@keyframes intro_circle{
from{opacity:0; visibility:hidden; top:30%;}
to{opacity:1; visibility:visible; top:35%;}
}
@media(max-width:767px){
.main_intro_wrap .main_intro{width:100%; height:50%; float:none;}
.main_intro_wrap h1{font-size:24px; top:38%; animation-duration:0.7s; animation-name:intro_title2; animation-fill-mode:both; animation-delay:0.2s;}
.main_intro_wrap h1 span{font-size:34px;}
.main_intro_wrap h1:after{content:''; display:none;}
.main_intro_wrap .main_intro a{margin:0; padding:0; width:200px; height:200px; border:1px solid #fff; border-radius:50%; position:absolute; top:0 left:0; margin-top:-13%; margin-left:-100px;text-align:center; transition:all 0.25s; animation-duration:1s; animation-name:intro_circle; animation-fill-mode:both; animation-delay:0.7s;}
.main_intro_wrap .main_intro a img{width:45px; margin-top:40px;}
.main_intro_wrap .main_intro a span{display:block; font-size:28px; position:absolute; top:48%; left:0; right:0; bottom:0; color:#fff; letter-spacing:-1px;}
.main_intro_wrap .main_intro p{display:none;}
.main_intro_wrap .container3 {position:relative !important;margin-left:0;top:0;left:0}
}
</style>
</head>
<body>
<div class="main_intro_wrap">
<h1>행복을 만들어 드리는 기업<br><span>고객을 먼저 생각하는 기업</span></h1>
<div class="main_intro container1">
<a href="http://jisim.or.kr/index.php">
<img src="http://www.jisim.or.kr/theme/basic1/img/btn01.png">
<span>사회적협동조합<br><b>지심</b></span>
<p>꿈과 희망이 있는 <br>행복한 공동체 </p>
</a>
</div>
<div class="main_intro container2">
<a href="http://jisim.or.kr/index.php">
<img src="http://www.jisim.or.kr/theme/basic1/img/btn01.png">
<span><br><b>지심퍼니처</b></span>
<p>가구제작 및 생산<br>직업재활서비스<br></p>
</a>
</div>
<div class="main_intro container3">
<a href="http://jisim.or.kr/index.php">
<img src="http://www.jisim.or.kr/theme/basic1/img/btn01.png">
<span><br><b>지심엘앤씨</b></span>
<p>조명기구사업<br>CCTV 사업<br></p>
</a>
</div>
</body>
</html>
0
0
로그인 후 추천 또는 비추천하실 수 있습니다.
꿈의세계
회원등급 : 지상계 / Level 10
포인트 75
경험치 9,843
[레벨 10] - 진행률
43%
가입일
2016-09-24 17:08:57
서명
모두들과 함께 다루는 웹
자기소개
저는 웹을 공부하고 싶어하는 사람
댓글목록1
이윰EGG님의 댓글
- 이윰EGG님의 홈
- 전체게시물
- 아이디로 검색
183.♡.68.56그리고 이윰에서 제작된 것이 아닌 직접 작업하는 코드를 분석해 달라는 것은 맞지 않는 것 같습니다.
이점 유념해 주시기 바라며 .main_intro_wrap .main_intro 의 width 값을 확인해 보기 바랍니다.
감사합니다.
축하합니다. 첫댓글 포인트 58포인트를 획득하였습니다.