Add: Basic web site
This commit is contained in:
+27
-4
@@ -1,17 +1,40 @@
|
||||
<html>
|
||||
<html>
|
||||
|
||||
|
||||
<head>
|
||||
|
||||
<title>마우스 타자 연습</title>
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" type="text/css" href="resources/css/homepage.css">
|
||||
<link rel="stylesheet" type="text/css" href="./src/web/css/module.css">
|
||||
<link rel="stylesheet" type="text/css" href="./src/web/css/color_button.css">
|
||||
|
||||
<script type="text/javascript" src="./resources/jquery/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#header").load("./src/web/module/header.html");
|
||||
$("#footer").load("./src/web/module/footer.html");
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body bgcolor="lightgrey">
|
||||
|
||||
<body bgcolor="white">
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="header">
|
||||
</header>
|
||||
|
||||
<section>
|
||||
section
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
footer
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
Vendored
+2
File diff suppressed because one or more lines are too long
@@ -0,0 +1,131 @@
|
||||
@charset "utf-8";
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body{font-family:Open Sans; color:#555555;}
|
||||
h1{font-size:24px; font-weight:normal; margin:0.4em 0;}
|
||||
|
||||
.container { width: 100%; margin: 0 auto; }
|
||||
.container .row { float: left; clear: both; width: 100%; }
|
||||
.container .col { float: left; margin: 0 0 1.2em; padding-right: 1.2em; padding-left: 1.2em; }
|
||||
.container .col.one, .container .col.two, .container .col.three, .container .col.four, .container .col.five, .container .col.six, .container .col.seven, .container .col.eight, .container .col.nine, .container .col.ten, .container .col.eleven, .container .col.twelve { width: 100%; }
|
||||
|
||||
|
||||
@media screen and (min-width: 767px) {
|
||||
.container{width: 100%; max-width: 1024px; margin: 0 auto;}
|
||||
.container .row{width:100%; float:left; clear:both;}
|
||||
.container .col{float: left; margin: 0 0 1em; padding-right: .5em; padding-left: .5em;}
|
||||
.container .col.one { width: 8.33%; }
|
||||
.container .col.two { width: 16.66%; }
|
||||
.container .col.three { width: 24.99%; }
|
||||
.container .col.four { width: 50%; }
|
||||
.container .col.five { width: 41.65%; }
|
||||
.container .col.six { width: 49.98%; }
|
||||
.container .col.seven { width: 58.31%; }
|
||||
.container .col.eight { width: 66.64%; }
|
||||
.container .col.nine { width: 74.97%; }
|
||||
.container .col.ten { width: 83.3%; }
|
||||
.container .col.eleven { width: 91.65%; }
|
||||
.container .col.tweleve { width: 100%; }
|
||||
}
|
||||
|
||||
/*All the button styles*/
|
||||
|
||||
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
|
||||
a{text-decoration:none;}
|
||||
|
||||
/********************
|
||||
GENERIC BUTTON STYLES
|
||||
********************/
|
||||
.btn {font-size: 18px; white-space:nowrap; width:100%; padding:.4em 1.5em; font-family: Open Sans, Helvetica,Arial,sans-serif; line-height:24px; display: inline-block;zoom: 1; color: #fff; text-align: center; position:relative; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s linear;}
|
||||
|
||||
/*SEA GREEN BUTTON STYLES*/
|
||||
.btn.btn-sea{background-color: #08bc9a; border-color: #08bc9a; -webkit-box-shadow: 0 3px 0 #088d74; box-shadow: 0 3px 0 #088d74;}
|
||||
.btn.btn-sea:hover{background-color:#01a183;}
|
||||
.btn.btn-sea:active{ top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/*DARK BLUE BUTTON STYLES*/
|
||||
.btn.btn-dark-blue{background-color: #237fbc; border-color: #237fbc; -webkit-box-shadow: 0 3px 0 #1a5c87; box-shadow: 0 3px 0 #1a5c87;}
|
||||
.btn.btn-dark-blue:hover{background-color:#166ea8;}
|
||||
.btn.btn-dark-blue:active{ top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/*RED/ROUGE BUTTON STYLES*/
|
||||
.btn.btn-rouge{background-color: #c0392b; border-color: #c0392b; -webkit-box-shadow: 0 3px 0 #8f2a1f; box-shadow: 0 3px 0 #8f2a1f;}
|
||||
.btn.btn-rouge:hover{background-color:#ac3420;}
|
||||
.btn.btn-rouge:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/*DARK BUTTON STYLES*/
|
||||
.btn.btn-dark{background-color: #2c3d51; border-color: #2c3d51; -webkit-box-shadow: 0 3px 0 #080c0f; box-shadow: 0 3px 0 #080c0f;}
|
||||
.btn.btn-dark:hover{background-color:#202d3d;}
|
||||
.btn.btn-dark:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/*DARK BUTTON STYLES*/
|
||||
.btn.btn-orange{color: #000; background-color: #f59e00; border-color: #f59e00; -webkit-box-shadow: 0 3px 0 #b37401; box-shadow: 0 3px 0 #b37401;}
|
||||
.btn.btn-orange:hover{background-color:#dd9003;}
|
||||
.btn.btn-orange:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/*SUNFLOWER BUTTON STYLES*/
|
||||
.btn.btn-sunflower{color: #000; background-color: #f2c500; border-color: #f2c500; -webkit-box-shadow: 0 3px 0 #b19001; box-shadow: 0 3px 0 #b19001;}
|
||||
.btn.btn-sunflower:hover{background-color:#e3ba02;}
|
||||
.btn.btn-sunflower:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/*RED BUTTON STYLES*/
|
||||
.btn.btn-red{background-color: #ea4f37; border-color: #ea4f37; -webkit-box-shadow: 0 3px 0 #b13825; box-shadow: 0 3px 0 #b13825;}
|
||||
.btn.btn-red:hover{background-color:#a53422;}
|
||||
.btn.btn-red:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/*CONCRETE BUTTON STYLES*/
|
||||
.btn.btn-concrete{background-color: #7e8c8d; border-color: #7e8c8d; -webkit-box-shadow: 0 3px 0 #4e5b5c; box-shadow: 0 3px 0 #4e5b5c;}
|
||||
.btn.btn-concrete:hover{background-color:#6a7879;}
|
||||
.btn.btn-concrete:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/********************
|
||||
SOCIAL BUTTON STYLES
|
||||
********************/
|
||||
|
||||
/*FACEBOOK*/
|
||||
.btn.btn-facebook{background-color: #2479b6; border-color: #2479b6; -webkit-box-shadow: 0 3px 0 #1c6394; box-shadow: 0 3px 0 #1c6394;}
|
||||
.btn.btn-facebook:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*TWITTER*/
|
||||
.btn.btn-twitter{background-color: #2a91db; border-color: #2a91db; -webkit-box-shadow: 0 3px 0 #1d6ea7; box-shadow: 0 3px 0 #1d6ea7;}
|
||||
.btn.btn-twitter:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*GOOGLE PLUS*/
|
||||
.btn.btn-google-plus{background-color: #be3b26; border-color: #be3b26; -webkit-box-shadow: 0 3px 0 #842719; box-shadow: 0 3px 0 #842719;}
|
||||
.btn.btn-google-plus:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*DRIBBBLE*/
|
||||
.btn.btn-dribbble{background-color: #f62d7e; border-color: #f62d7e; -webkit-box-shadow: 0 3px 0 #d3235a; box-shadow: 0 3px 0 #d3235a;}
|
||||
.btn.btn-dribbble:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*YOU TUBE*/
|
||||
.btn.btn-you-tube{background-color: #cf3728; border-color: #cf3728; -webkit-box-shadow: 0 3px 0 #9a1e1a; box-shadow: 0 3px 0 #9a1e1a;}
|
||||
.btn.btn-you-tube:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*LinkedIn*/
|
||||
.btn.btn-linkedin{background-color: #0074ba; border-color: #0074ba; -webkit-box-shadow: 0 3px 0 #00497b; box-shadow: 0 3px 0 #00497b;}
|
||||
.btn.btn-linkedin:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*Dropbox*/
|
||||
.btn.btn-dropbox{background-color: #0083e4; border-color: #0083e4; -webkit-box-shadow: 0 3px 0 #015593; box-shadow: 0 3px 0 #015593;}
|
||||
.btn.btn-dropbox:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*Wordpress*/
|
||||
.btn.btn-wordpress{background-color: #1d7794; border-color: #1d7794; -webkit-box-shadow: 0 3px 0 #114657; box-shadow: 0 3px 0 #114657;}
|
||||
.btn.btn-wordpress:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*Pinterest*/
|
||||
.btn.btn-pinterest{background-color: #c8232a; border-color: #c8232a; -webkit-box-shadow: 0 3px 0 #89171b; box-shadow: 0 3px 0 #89171b;}
|
||||
.btn.btn-pinterest:active{ top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*Skype*/
|
||||
.btn.btn-skype{background-color: #2eabde; border-color: #2eabde; -webkit-box-shadow: 0 3px 0 #1b6684; box-shadow: 0 3px 0 #1b6684;}
|
||||
.btn.btn-skype:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*Instagram*/
|
||||
.btn.btn-instagram{background-color: #5182aa; border-color: #5182aa; -webkit-box-shadow: 0 3px 0 #1f415d; box-shadow: 0 3px 0 #1f415d;}
|
||||
.btn.btn-instagram:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
/*RSS*/
|
||||
.btn.btn-rss{background-color: #f8a933; border-color: #f8a933; -webkit-box-shadow: 0 3px 0 #ab7422; box-shadow: 0 3px 0 #ab7422;}
|
||||
.btn.btn-rss:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
|
||||
|
||||
/**********
|
||||
Icon styles
|
||||
**********/
|
||||
.btn i {padding-right:0.8em; line-height:22px;}
|
||||
.icon-only{padding: 1em;}
|
||||
.icon-only i{padding-right:0; font-size:22px; line-height:22px; }
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
@charset "utf-8";
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html { }
|
||||
body { }
|
||||
|
||||
div#wrapper {
|
||||
width: 1024px;
|
||||
margin: 0 auto;
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
color: black;
|
||||
background-color: #007196;
|
||||
clear: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 70px;
|
||||
padding: 1em;
|
||||
color: black;
|
||||
background-color: #007196;
|
||||
clear: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#id {
|
||||
color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="container" style="line-height: 40px;">
|
||||
<span id="company" style="float: left;">
|
||||
JINAJU
|
||||
</span>
|
||||
|
||||
<span id="support_email" style="float: center;">
|
||||
문의 : support@jinaju.com
|
||||
</span>
|
||||
|
||||
<span class="col two" style="float: right;">
|
||||
<a href="#" id="faq" class="btn btn-sunflower">FAQ</a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="container">
|
||||
<span class="col two">
|
||||
<a href="#" id="home" class="btn btn-orange" style="padding: 1.1em;">첫 화면</a>
|
||||
</span>
|
||||
|
||||
<span class="col two" style="float: right;">
|
||||
<a href="#" id="login_player" class="btn btn-sunflower">플레이어<br/>로그인</a>
|
||||
</span>
|
||||
|
||||
<span class="col two" style="float: right;">
|
||||
<a href="#" id="login_maestro" class="btn btn-sunflower">마에스트로<br/>로그인</a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user