안녕하세요 죄송합니다. 인트로 페이지 관련 질문 드립니다. > 시즌3 질문과 답변

본문 바로가기

시즌3 질문과답변

[해결중] 안녕하세요 죄송합니다. 인트로 페이지 관련 질문 드립니다.

profile_image
꿈의세계 121.♡.197.166
2017-11-21 14:06 9,887 1 0 0
  • - 별점 : 평점
  • - [ 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
로그인 후 추천 또는 비추천하실 수 있습니다.
profile_image
꿈의세계 회원등급 : 지상계 / Level 10
포인트 75
경험치 9,843
[레벨 10] - 진행률 43%
가입일
2016-09-24 17:08:57
서명
모두들과 함께 다루는 웹
자기소개
저는 웹을 공부하고 싶어하는 사람

댓글목록1

이윰EGG님의 댓글

profile_image
이윰EGG 183.♡.68.56
2017-11-21 15:26
먼저 질문 사항에 대해 말씀드리자면 해당 코드를 직접 복사해 파일을 만들어 봐야하는 불편함이 있습니다.
그리고 이윰에서 제작된 것이 아닌 직접 작업하는 코드를 분석해 달라는 것은 맞지 않는 것 같습니다.
이점 유념해 주시기 바라며 .main_intro_wrap .main_intro 의 width 값을 확인해 보기 바랍니다.

감사합니다.

축하합니다. 첫댓글 포인트 58포인트를 획득하였습니다.

0 0
이윰빌더 시즌4 질문과 답변 게시판입니다.

질문과 답변 게시판에는 가능한 이윰 관리자가 답변을 드리지 않습니다. 회원간 활성화 될수 있도록 도움 부탁드리며, 질문자는 원하는 답변이 달릴경우 꼭 채택하여 주시기 바랍니다.

상품구매 및 유료상품 문의는 1:1문의 게시판을 이용해 주시기 바랍니다.

1:1문의 바로가기 : https://eyoom.net/bbs/qalist.php

전체 4 건 - 1 페이지
번호
제목
글쓴이
채택포인트
날짜
조회
추천
비추
별점
열람
해결중 안녕하세요 죄송합니다. 인트로 페이지 관련 질문 드립니다. 댓글 1개
꿈의세계
0
2017-11-21
9,888
0
0
꿈의세계
2017-11-21
3
해결중 이윰 기본 테마 메인에 대해서 질문 드립니다. 댓글 2개
꿈의세계
0
2017-11-16
12,890
0
0
꿈의세계
2017-11-16
2
해결중 안녕하세요 죄송합니다. 질문하나 드립니다. 댓글 4개
꿈의세계
0
2017-11-11
15,412
0
0
꿈의세계
2017-11-11
1
해결중 EB 슬라이더 관련 질문 드립니다. 댓글 1개
꿈의세계
0
2017-10-27
12,287
0
0
꿈의세계
2017-10-27
사이트 내 전체검색