working on the new login concept.
Matan Rak
parent
f8a0805c8c
commit
caccf8db37
|
|
@ -0,0 +1,180 @@
|
|||
<<<<<<< HEAD
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/header.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/nav.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
.inner_div{
|
||||
width:100%;
|
||||
background-color: black;
|
||||
border: 5px solid #a02d2a;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div id="header_container">
|
||||
<div id="header_seal_container">
|
||||
<img id="header_seal" src="./assets/images/WesterosSealSquare.png"/>
|
||||
</div>
|
||||
<div id="header_img_container">
|
||||
<img id="header_img" src="./assets/images/WCTextCrop.png" />
|
||||
</div>
|
||||
<div id="header_social_container">
|
||||
<a href="http://facebook.com/westeroscraft" class="header_social_link">
|
||||
<img src="./assets/images/facebook.png" class="header_social_img" />
|
||||
</a>
|
||||
<a href="http://reddit.com/r/westeroscraft" class="header_social_link">
|
||||
<img src="./assets/images/reddit.png" class="header_social_img" />
|
||||
</a>
|
||||
<a href="http://twitter.com/westeroscraft" class="header_social_link">
|
||||
<img src="./assets/images/twitter.png" class="header_social_img" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-2 col-sm-2">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-3 col-sm-3">
|
||||
|
||||
<img class="player_icon" src="https://minotar.net/helm/pufferboss.png">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-9 col-sm-9">
|
||||
|
||||
<p class="input_text">Email</p>
|
||||
<input class="input" id="EMAIL">
|
||||
|
||||
<p class="input_text">Password</p>
|
||||
<input type="password" id="PASSWORD" class="input" />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-10 col-sm-10">
|
||||
|
||||
<ul>
|
||||
<li><a href="">NEWS</a></li>
|
||||
<li><a href="">MAP</a></li>
|
||||
<li><a href="">MODS</a></li>
|
||||
<li><a href="">FAQ</a></li>
|
||||
<li><a href="">LOG</a></li>
|
||||
<li><a href="">SETTINGS</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="inner_div">
|
||||
|
||||
<p class="title"> Post title </p>
|
||||
|
||||
<p class="subtite">Posted by: PERSON 23.4.17</p>
|
||||
|
||||
<pre style="text-align: left; word-break: break-all; overflow-wrap: break-word;"> Hello WesterosCraft Builders and Honored Guests! As you know,
|
||||
progress on Kingslanding had stalled, but no longer -- we want to finish this big, beautiful, city in style and
|
||||
are calling all builders to the capital!
|
||||
There has been a lot of progress with Kingslanding planning and we are happy to...
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
=======
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Westeroscraft Launcher</title>
|
||||
<script src="./assets/js/script.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="./assets/css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="header_container">
|
||||
<div id="header_seal_container">
|
||||
<img id="header_seal" src="./assets/images/WesterosSealSquare.png"/>
|
||||
</div>
|
||||
<div id="header_img_container">
|
||||
<img id="header_img" src="./assets/images/WCTextCrop.png" />
|
||||
</div>
|
||||
<div id="header_social_container">
|
||||
<a href="http://facebook.com/westeroscraft" class="header_social_link">
|
||||
<img src="./assets/images/facebook.png" class="header_social_img" />
|
||||
</a>
|
||||
<a href="http://reddit.com/r/westeroscraft" class="header_social_link">
|
||||
<img src="./assets/images/reddit.png" class="header_social_img" />
|
||||
</a>
|
||||
<a href="http://twitter.com/westeroscraft" class="header_social_link">
|
||||
<img src="./assets/images/twitter.png" class="header_social_img" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="body_left_container">
|
||||
|
||||
</div>
|
||||
<div id="body_right_container">
|
||||
<div id="main_toggle_group">
|
||||
<div><label><input type="radio" name="main_group" class="mtoggle_button"/>News</label></div>
|
||||
<div><label><input type="radio" name="main_group" class="mtoggle_button"/>Map</label></div>
|
||||
<div><label><input type="radio" name="main_group" class="mtoggle_button"/>Mods</label></div>
|
||||
<div><label><input type="radio" name="main_group" class="mtoggle_button"/>FAQ</label></div>
|
||||
<div><label><input type="radio" name="main_group" class="mtoggle_button"/>Log</label></div>
|
||||
<div><label><input type="radio" name="main_group" class="mtoggle_button"/>Settings</label></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
>>>>>>> refs/remotes/origin/master
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1012 KiB |
|
|
@ -0,0 +1,150 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/header.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/nav.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: inconsolata;
|
||||
src: url('assets/fonts/Inconsolata-Bold.ttf');
|
||||
}
|
||||
|
||||
.login-window {
|
||||
margin-left: 40%;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
width: 150px;
|
||||
align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: inconsolata;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-family: inconsolata;
|
||||
font-size: 15px;
|
||||
color: #bdc3c7;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
border: none;
|
||||
border-bottom: 2px solid white;
|
||||
font-size: 20px;
|
||||
outline: none;
|
||||
color: #95a5a6;
|
||||
background: none;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
background: url('assets/images/loginBackground.jpg') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.addon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.addon .glyphicon {
|
||||
position: absolute;
|
||||
padding-top: 4.9%;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
left: 47%;
|
||||
}
|
||||
|
||||
.inline-title-div {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title-inline {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title-inline:before,
|
||||
.title-inline:after {
|
||||
position: absolute;
|
||||
top: 51%;
|
||||
overflow: hidden;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
content: '\a0';
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.title-inline:before {
|
||||
margin-left: -50%;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="login-window" style="text-align: center;">
|
||||
|
||||
<img class="logo" src="assets/images/WesterosSealCircle.png">
|
||||
<p class="title"> MEMBER LOGIN </p>
|
||||
|
||||
<div class="addon">
|
||||
<i class="glyphicon glyphicon-user"></i>
|
||||
<input>
|
||||
</div>
|
||||
<p class="sub-title"> USERNAME </p>
|
||||
|
||||
|
||||
<div class="addon">
|
||||
<i class="glyphicon glyphicon-lock"></i>
|
||||
<input>
|
||||
</div>
|
||||
<p class="sub-title"> PASSWORD </p>
|
||||
|
||||
<div class="inline-title-div">
|
||||
<pre class="title title-inline"> REGISTER </pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue