Skip to content

Commit

Permalink
popup fin master
Browse files Browse the repository at this point in the history
  • Loading branch information
@valentynilinov
valentynilinov committed Dec 21, 2015
1 parent b72c381 commit 2bbe503
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 63 deletions.
9 changes: 1 addition & 8 deletions style2.css → form.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,6 @@
margin: 0;
}

#registration{
display: none;
position: fixed;
top: 00px;
background: #fff;
border-radius: 5px;
}

form a{
color: #9682c2;
}
Expand All @@ -32,6 +24,7 @@ form{
bottom: 0:;
margin: auto;
padding: 10px;

}

h3{
Expand Down
121 changes: 71 additions & 50 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,27 @@
<html>
<head>
<title>Invoicer</title>
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="form.css">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<script type="text/javascript">
function showPopup(){
$("#popup").show();
return false;
}
function hidePopup(){
$("#popup").hide();
return false;
}
function showPopup(){
document.getElementById("popup").style.display = "block";
return false;
}
function hidePopup(){
document.getElementById("popup").style.display = "none";
return false;
}
</script>
</head>
<body>
<div class="header-block">
Expand All @@ -19,7 +37,7 @@
<a href="#">About us</a>
<a href="#">Faq</a>
<a href="#">Tutorials</a>
<a href="#" class="transparent-button" onclick="document.getElementById('registration').style.display = 'block';">Sign up</a>
<a href="#" class="transparent-button" onclick="showPopup()">Sign up</a>
</nav>
</header>

Expand All @@ -39,7 +57,7 @@ <h1>Easiest invoices</h1>

<div id="our_features">
<h2>Our features</h2>
<div class="text right">
<div class="text right clearfix">
<div class="description">
<img src="img/book.png">
<h3>Easy invoices that save time</h3>
Expand Down Expand Up @@ -117,58 +135,61 @@ <h2>Don't forget to sign up</h2>
</footer>
</div>

<form id="registration" method="post">
<h3>Sign up</h3><hr color="#B1BBD8">
<div class="name">
<div>Username<input type="text" name="Username"></div>
<div>Email<input type="email" name="E-mail"></div>
<div class="double pas">
<div>Password
<input type="password" name="Password" required>
</div>
<div>Confirm password
<input type="password" name="C_password" required>
<div class="popup" id="popup">
<form id="registration" method="post">
<a style="float:right; font-size:20px; text-decoration:none;" onclick="hidePopup()" href="#">x</a>

This comment has been minimized.

Sign in to view

Copy link
@lespavl

lespavl Dec 21, 2015

кто-то поленился вынести в style.css :)
<h3>Sign up</h3><hr color="#B1BBD8">
<div class="name">
<div>Username<input type="text" name="Username" max-length="50" required></div>
<div>Email<input type="email" name="E-mail" max-length="50"></div>
<div class="double pas">
<div>Password
<input type="password" name="Password" max-length="50" required>

This comment has been minimized.

Sign in to view

Copy link
@lespavl

lespavl Dec 21, 2015

привыкай все писать в lowercase, названия полей в том числе
</div>
<div>Confirm password
<input type="password" name="C_password" max-length="50" required>
</div>
</div>
</div>
</div><hr color="#eeeeee">
</div><hr color="#eeeeee">

<div class="data">
<div class="double name">
<div>First name<input type="text" name="F_name"></div>
<div>Last name<input type="text" name="L_name"></div>
</div>

<div>Sex<br>
<div class="double sex">
<div>
<input type="radio" name="gender" checked>
<label for="man">Male</label>
</div>
<div>
<input type="radio" name="gender">
<label for="woman">Female</label>
<div class="data">
<div class="double name">
<div>First name<input type="text" name="F_name" max-length="50" required></div>
<div>Last name<input type="text" name="L_name" max-length="50" required></div>
</div>

<div>Sex<br>
<div class="double sex">
<div>
<input type="radio" name="gender" checked>
<label for="man">Male</label>
</div>
<div>
<input type="radio" name="gender">
<label for="woman">Female</label>
</div>
</div>
</div>
</div>

<div>City
<select name="city">
<option value="odessa">Одесса</option>
<option value="kiev">Киев</option>
<option value="lviv">Львов</option>
<option value="sumy">Сумы</option>
<option value="rivne">Ровно</option>
</select><br>
</div>

<textarea name="comment" placeholder="Few words about me" rows="25"></textarea>
</div><hr color="#eeeeee">

<div>City
<select name="city">
<option value="odessa">Одесса</option>
<option value="kiev">Киев</option>
<option value="lviv">Львов</option>
<option value="sumy">Сумы</option>
<option value="rivne">Ровно</option>
</select><br>
<input type="checkbox" name="agree" value="agree" required>I agree with <a href="/">Terms and conditions</a>
<div class="bottom">
<input type="submit" value="Register">
<input type="reset" value="Clear">
</div>

<textarea name="comment" placeholder="Few words about me" rows="25"></textarea>
</div><hr color="#eeeeee">

<input type="checkbox" name="agree" value="agree" required>I agree with <a href="/">Terms and conditions</a>
<div class="bottom">
<input type="submit" value="Register">
<input type="reset" value="Clear">
</div>
</form>
</form>
</div>
</body>
</html>
34 changes: 29 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,35 @@
url(font/Apercu/apercu_regular-webfont.ttf) format("truetype");
}

a,
body {
font-family: "Apercu", Arial, sans-serif;
color: #827e86;
}

a{
text-decoration: none;
color: #fff;
color: inherit;
}

.popup {
width: 100%;
min-height: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
position: fixed;
top: 0px;
display: none;
}

/* Header block style*/
#registration{
position: fixed;
top: 00px;
background: #fff;
border-radius: 5px;
}

/******* Header block style *******/

.header-block {
height: 100vh;
Expand Down Expand Up @@ -85,11 +103,12 @@ header nav {
.header-controls{
position: absolute;
width: 500px;
height: 200px;
left:0;
top: 0;
right: 0;
bottom: 0;
margin: 230px auto;
margin: auto;
}

.header-controls>h1{
Expand Down Expand Up @@ -137,7 +156,7 @@ header nav {
right: 0;
}

/* Main block style*/
/******* Main block style *******/

#our_features h2{
text-align: center;
Expand Down Expand Up @@ -200,7 +219,7 @@ header nav {
color: #fff;
}

/* Footer block style*/
/******* Footer block style *******/

.users_reviews{
text-align: center;
Expand Down Expand Up @@ -308,8 +327,13 @@ footer li{
margin: 10px 10px;
}

.clearfix,
footer::after {
content: "";
display: block;
clear: both;
}

.description{

}

0 comments on commit 2bbe503

Please sign in to comment.