본문으로 바로가기

나에게 아직 연인이 없는 이유(html)

category 심리테스트 만들기(웹) 2020. 5. 27. 22:59

파일구성

html
사진 파일

진행과정

index.html  -> story.html -> light.html

                                  ->no_light.html

                                  ->tree.html

                                  ->no_tree.html

 

소스코드와 페이지화면

 

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>심리테스트</title>
	<link href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@500&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<style>
		* { margin: 0; padding: 0; }
		#wrap { width: 100%; }
		.box { width: 100%; height: 720px; background: white; background: url("./images/back color.jpg"); }
		.img { background: url("./images/back.jpg") no-repeat center center; width: 100%; height: 100%; margin: 0 auto; }
		.img h1 { display: flex; width: 600px; height: 60px; background: #f5e1c9; color: black; justify-content: center; align-items: center; margin: 0 auto; left: 44%;}
		
		h2 { font-family: 'Gothic A1', sans-serif; text-decoration: none;  color: black; justify-content: center; align-items: center; margin: 0 auto; margin }
	</style>
</head>
<body>
	<div id="wrap">
		<div class="box">
			<div class="img">
				<h1>나에게 아직 연인이 없는 이유는?</h1>
				<center>
				<button class="btn btn-default" style="margin-top: 550px;" onclick="location.href='story.html'">
					<h2 class="font-family"> START </h2>
				</button>
				</center>
			</div>
		</div>
	</div>
					
</body>
</html>

 

story.html

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>스토리</title>
	<style>
		* { margin: 0; padding: 0; }
		section { width: 100%; height: 100%; background: url("./images/back3.jpg"); text-align: center; }
		.img1, .img2, .img3, .img4 { width: 600px; height: 600px; background: url("./images/cloud.jpg") no-repeat center center; background-size: 100%; margin: 0 auto; text-indent: -9999px; }
		.img2 { background-image: url("./images/coffee.jpg"); }
		.img3 { background-image: url("./images/bed.jpg"); }
		.img4 { background-image: url("./images/sleep.jpg"); }
		h1 { color: #000; padding-top: 100px; }
		ul { width: 100%; height: 500px; display: flex; justify-content: space-between; }
		ul > li { width: 25%; height: 80%; list-style: none; background: url("./images/no_light.jpg") no-repeat center center; background-size: 80%;}
		ul > li:nth-child(2) { background-image: url("./images/light.jpg"); }
		ul > li:nth-child(3) { background-image: url("./images/tree.jpg"); }
		ul > li:last-child { background-image: url("./images/no_tree.jpg"); }
		ul > li > a { width: 325px; height: 400px; display: block; text-indent: -9999px; }
	</style>
</head>
<body>
	<div id="wrap">
		<div class="con">
			<section class="content1">
				<div class="con1_img">
					<h1>당신은 구름이 이쁜 하루를 맞이했습니다</h1>
					<p class="img1">1</p>
				</div>
			</section>
			<section class="content2">
				<h1>맛있는 커피를 마시며 휼륭한 디져트로 행복한 기분이 가득차있습니다.</h1>
				<p class="img2">2</p>
			</section>
			<section class="content3">
				<h1>이후 당신은 포근한 침대로 가서 낮잠을 자기 시작합니다.</h1>
				<p class="img3">3</p>
			</section>
			<section class="content4">
				<h1>낮잠을 자면서 당신은 서서히 꿈을 꾸기 시작합니다.</h1>
				<p class="img4">4</p>
			</section>
			<section class="content5">
				<h1>꿈속에서 당신은 정원 한가운데 서 있습니다 그 정원은 어떤 정원 일까요?</h1>
				<ul>
					<li>
						<a href="no_light.html">1</a>
						<span>나무들이 너무 울창해서 햇살조차 안드는 숲과 같은 정원.</span>
					</li>
					<li>
						<a href="light.html">2</a>
						<span>나무들은 울창하지만 햇살이 조금 스며드는 숲같은 정원.</span>
					</li>
					<li>
						<a href="tree.html">3</a>
						<span>커다란 나무 한 그루가 심어져 있는 정원.</span>
					</li>
					<li>
						<a href="no_tree.html">4</a>
						<span>아직 나무들이 크게 자라있지 않은 정원.</span>
					</li>
				</ul>
			</section>
		</div>
	</div>
</body>
</html>

 

 

no_light.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>나무들이 너무 울창해서 햇살조차 안드는 숲과 같은 정원</title>
	<style>
		* { margin: 0; padding: 0; background: url("./images/back color.jpg");  }
		.box { width: 60%; height: 600px; text-align: center; background: ivory; margin: 50px auto 0; border: 1px solid; background: }
		
		h2 { padding-top: 10px; background: #F2F5A9; }
		span { background: url("./images/puding.jpg") no-repeat center center; width: 300px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
		p { width: 75%; height: 130px;  margin: 50px auto 0; margin-bottom: 100px; background: #F2F5A9; }
		strong { width: 100%; height: 100px; display: block; line-height: 2.0; font-size: 13px; font-weight: normal; margin: 50px auto 0; background: #F2F5A9; }
		body { font-size: 15px; }
		.a { font-size: 1.7vh; }
	</style>
</head>
<body>
	<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
	<div id="wrap">
		<div class="box">
			<h2>당신은 기다리는 푸딩 같군요!</h2>
			<span>1</span>
			<p><strong class="a">첫눈에 반하는 사람을 기다리고 있는 당신. 즉 한번에 필이 통하고, 드라마처럼 운명적인 사랑이 찾아오길 기다리는 타 입이다. 그렇기 때문에 주위에 이성이 많은데도 그 사람들은 거들떠도 보지 않고 멀리서 반쪽을 기다리고 있는 셈이다. 또한 열가지가 맘에 들어도 한가지가 맘에 들지 않으면 두 번을 만나지 않는 당신. 이런 태도가 언제나 당신을 솔로로 만든다.</strong></p>
			<!-- SNS버튼 시작 --><div style="width: 160px; text-align: center; margin: 0 auto;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a>  <!-- SNS버튼 끝 -->
		</div>
	</div>
</body>
</html>

light.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>나무들은 울창하지만 햇살이 조금 스며드는 숲같은 정원.</title>
	<style>
		* { margin: 0; padding: 0; background: url("./images/back color.jpg");  }
		.box { width: 60%; height: 600px; text-align: center; background: ivory; margin: 50px auto 0; border: 1px solid; background: }
		
		h2 { padding-top: 10px; background: #F2F5A9; }
		span { background: url("./images/macalong.jpg") no-repeat center center; width: 300px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
		p { width: 75%; height: 130px;  margin: 50px auto 0; margin-bottom: 100px; background: #F2F5A9; }
		strong { width: 100%; height: 100px; display: block; line-height: 2.0; font-size: 13px; font-weight: normal; margin: 50px auto 0; background: #F2F5A9; }
		body { font-size: 15px; }
		.a { font-size: 1.7vh; }
	</style>
</head>
<body>
	<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
	<div id="wrap">
		<div class="box">
			<h2>당신은 누구에게나 친절한 마카롱 같군요!</h2>
			<span>1</span>
			<p><strong class="a">친하게 지내는 이성친구는 아주 많지만 이성들에게 너무 편하게 대하기 때문에 이성으로서의 매력을 느끼지 못하 고 있는건 아닌지 생각해 볼 필요가 있다. 즉 때론 이성 친구 앞에서 이성친구로서의 매력을 느낄 수 있는 행동을 한다면 결정적으로 당신의 마음을 사로잡을 수 있는 상대 가 나타난다. 자신에게 한번 기대해봐도 좋을 듯 싶다.</strong></p>
			<!-- SNS버튼 시작 --><div style="width: 160px; text-align: center; margin: 0 auto;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a>  <!-- SNS버튼 끝 -->
		</div>
			
	</div>
</body>
</html>

 

tree.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>커다란 나무 한 그루가 심어져 있는 정원..</title>
	<style>
		* { margin: 0; padding: 0; background: url("./images/back color.jpg");  }
		.box { width: 60%; height: 600px; text-align: center; background: ivory; margin: 50px auto 0; border: 1px solid; background: }
		
		h2 { padding-top: 10px; background: #F2F5A9; }
		span { background: url("./images/cupcake.jpg") no-repeat center center; width: 300px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
		p { width: 75%; height: 130px;  margin: 50px auto 0; margin-bottom: 100px; background: #F2F5A9; }
		strong { width: 100%; height: 100px; display: block; line-height: 2.0; font-size: 13px; font-weight: normal; margin: 50px auto 0; background: #F2F5A9; }
		body { font-size: 15px; }
		.a { font-size: 1.7vh; }
	</style>
</head>
<body>
	<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
	<div id="wrap">
		<div class="box">
			<h2>당신은 깐깐한 컵케이크 같군요!</h2>
			<span>1</span>
			<p><strong class="a">당신의 주위에 현재 당신 마음을 사로잡을 수 있는 사람이 있는 듯 하다. 하지만 번번이 그 사람에게 그 마음을 똑바 로 표현하지 못하고 반대로 그 사람을 싫어하는 것처럼 보 인다거나 그 사람을 피하고 있기 때문에 마음이 전해지지 못한다. 즉 연인이 될 기회를 놓치게 됩므로 좀더 용기있게 마음을 전하는 것이 필요할 듯 싶다.</strong></p>
			<!-- SNS버튼 시작 --><div style="width: 160px; text-align: center; margin: 0 auto;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a>  <!-- SNS버튼 끝 -->
		</div>
	</div>
</body>
</html>

no_tree.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>아직 나무들이 크게 자라있지 않은 정원.</title>
	
	<style>
		* { margin: 0; padding: 0; background: url("./images/back color.jpg");  }
		.box { width: 60%; height: 600px; text-align: center; background: ivory; margin: 50px auto 0; border: 1px solid; background: }
		
		h2 { padding-top: 10px; background: #F2F5A9; }
		span { background: url("./images/icecream.jpg") no-repeat center center; width: 200px; height: 300px; background-size: 100%; display: block; margin: 50px auto 0; text-indent: -9999px; }
		p { width: 75%; height: 130px;  margin: 50px auto 0; margin-bottom: 100px; background: #F2F5A9; }
		strong { width: 100%; height: 100px; display: block; line-height: 2.0; font-size: 13px; font-weight: normal; margin: 50px auto 0; background: #F2F5A9; }
		body { font-size: 15px; }
		.a { font-size: 2.1vh; }
	</style>
</head>
<body>
	<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
	<div id="wrap">
		<div class="box">
			<h2>당신은 순수한 아이스크림 같군요!</h2>
			<span>1</span>
			<p><strong class="a">
			아직 이성을 많이 사귀어 보지 않은 타입으로 아직 이성에 대해 잘 모르기 때문에 경험이 없고 미숙한 상태 이다. 그렇기 때문에 간절히 연애를 원하는 감정이 없는 지도 모른다. 자! 연인 만들기는 이제부터 시작이다.</strong></p>
			<!-- SNS버튼 시작 --><div style="width: 160px; text-align: center; margin: 0 auto;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/facebook.jpg" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twiter.jpg" title="트위터로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakaostory.jpg" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 32px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.jpg" title="네이버로 공유하기" class="sharebtn_custom" style="width: 32px;"></a>  <!-- SNS버튼 끝 -->
		</div>
	</div>
</body>
</html>

'심리테스트 만들기(웹)' 카테고리의 다른 글

무의식 테스트(html,php)  (0) 2020.05.28
내 사랑은 어떤 모습일까(html)  (0) 2020.05.27
댓글 , 엮인글
wpgur-security
블로그 이미지 우제혁 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바