Skip to content

Commit 76cd47c

Browse files
mojtabazare1995mojtabazare1995
authored
Merge pull request #2 from ShravanMeena/master
updating fork
2 parents 472e7e1 + 7e4aa51 commit 76cd47c

File tree

11 files changed

+450
-0
lines changed

11 files changed

+450
-0
lines changed

‎Basic Website Designs/Skewed Border/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Skewed Border
2+
3+
A simple layout with some animation inspired by [this tutorial.](https://www.youtube.com/watch?v=-1U62fdmCk4)
4+
5+
Created by [Jefferson227](https://github.com/Jefferson227).
6+
7+
![demo](demo.gif)

‎Basic Website Designs/Skewed Border/demo.gif

351 KB
Loading

‎Basic Website Designs/Skewed Border/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Skewed Border</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="container__box">
13+
<h1>01</h1>
14+
<h2>Service One</h2>
15+
<p>
16+
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
17+
elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
18+
espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
19+
elementis mé pra quem é amistosis quis leo
20+
</p>
21+
<a href="#">Read More</a>
22+
</div>
23+
24+
<div class="container__box">
25+
<h1>02</h1>
26+
<h2>Service Two</h2>
27+
<p>
28+
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
29+
elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
30+
espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
31+
elementis mé pra quem é amistosis quis leo
32+
</p>
33+
<a href="#">Read More</a>
34+
</div>
35+
36+
<div class="container__box">
37+
<h1>03</h1>
38+
<h2>Service Three</h2>
39+
<p>
40+
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
41+
elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
42+
espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
43+
elementis mé pra quem é amistosis quis leo
44+
</p>
45+
<a href="#">Read More</a>
46+
</div>
47+
48+
<div class="container__box">
49+
<h1>04</h1>
50+
<h2>Service Four</h2>
51+
<p>
52+
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
53+
elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
54+
espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
55+
elementis mé pra quem é amistosis quis leo
56+
</p>
57+
<a href="#">Read More</a>
58+
</div>
59+
</div>
60+
</body>
61+
</html>

‎Basic Website Designs/Skewed Border/style.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700,800,900&display=swap");
2+
*,
3+
*::before,
4+
*::after {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
html {
11+
font-size: 62.5%;
12+
font-weight: 300;
13+
}
14+
15+
body {
16+
font-family: "Raleway", sans-serif;
17+
background-color: #000;
18+
}
19+
20+
.container {
21+
width: 80%;
22+
margin: 0 auto;
23+
display: flex;
24+
justify-content: space-between;
25+
color: #ddd;
26+
}
27+
.container__box {
28+
position: relative;
29+
background-color: #000;
30+
padding: 6rem 2.5rem;
31+
margin: 3rem 0;
32+
}
33+
.container__box h1 {
34+
position: absolute;
35+
font-size: 15rem;
36+
font-weight: 700;
37+
top: 6rem;
38+
right: 0;
39+
transition: all 0.2s;
40+
opacity: 0;
41+
}
42+
.container__box h2 {
43+
font-size: 2.8rem;
44+
margin-bottom: 1rem;
45+
}
46+
.container__box p {
47+
font-size: 1.5rem;
48+
margin-bottom: 2rem;
49+
}
50+
.container__box a:link,
51+
.container__box a:visited,
52+
.container__box a:active {
53+
font-size: 1.5rem;
54+
font-weight: 400;
55+
text-decoration: none;
56+
padding: 1rem 1rem;
57+
border: 1px solid #ddd;
58+
color: #ddd;
59+
display: inline-block;
60+
transform: translateY(-5rem);
61+
transition: all 0.2s;
62+
opacity: 0;
63+
}
64+
.container__box:not(:last-child) {
65+
margin-right: 2rem;
66+
}
67+
.container__box::before {
68+
content: "";
69+
position: absolute;
70+
top: -2px;
71+
bottom: -2px;
72+
left: -2px;
73+
right: -2px;
74+
background-image: linear-gradient(to right bottom, #660066, #cc99cc);
75+
z-index: -1;
76+
transform: skew(2deg, 2deg);
77+
}
78+
.container__box:hover h1 {
79+
transform: translateY(-10rem);
80+
opacity: 0.15;
81+
}
82+
.container__box:hover a {
83+
transform: translateY(0);
84+
opacity: 1;
85+
}
86+
.container__box:hover::before {
87+
background-image: linear-gradient(to right bottom, #cc99cc, #660066);
88+
}

‎Log In Form Designs/Login Form HTML,CSS/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>#Hacktoberfest2019 | Login Form</title>
5+
<link rel="stylesheet" type="text/css" href="main.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<div class="_box"><center>
10+
<img src="https://hacktoberfest.digitalocean.com/assets/logo-hf19-full-10f3c000cea930c76acc1dedc516ea7118b95353220869a3051848e45ff1d656.svg" width="200px" height="200px">
11+
<h4>Username</h4>
12+
<input type="text" name="Username">
13+
<h4>Password</h4>
14+
<input type="password" name= "Password">
15+
<button class="_login">Login</button>
16+
<br><br>
17+
<span><a href="#">Forget your password</a> | <a href="#">Create an Account</a></span>
18+
</div>
19+
</div>
20+
</body>
21+
</html>

‎Log In Form Designs/Login Form HTML,CSS/main.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* LOGIN FORM DESIGN
2+
#Hacktoberfest2019 */
3+
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
4+
5+
body {
6+
background-color: #333;
7+
font-family: 'Source Code Pro', monospace;
8+
}
9+
10+
._box {
11+
width: 400px;
12+
height: 450px;
13+
background-image: linear-gradient(to bottom right, transparent, transparent);
14+
border: 3px solid #b326ff;
15+
border-radius: 15px;
16+
margin: 70px auto;
17+
}
18+
19+
div h4 {
20+
color: #ddd;
21+
margin-bottom: 2px
22+
}
23+
24+
input {
25+
background-color: transparent;
26+
display: block;
27+
border-radius: 5px;
28+
border: 1px solid #dddd00;
29+
width: 250px;
30+
height: 25px;
31+
outline: none;
32+
}
33+
34+
input:hover {
35+
transition: 0.5s;
36+
background-color: #888;
37+
border-bottom: 5px solid #dddd00;
38+
}
39+
40+
._login {
41+
margin-top: 20px;
42+
margin-left: 150px;
43+
border: 1px solid;
44+
width: 100px;
45+
background-color: transparent;
46+
color: white;
47+
height: 30px;
48+
border-radius: 10px;
49+
outline: none;
50+
font-family: 'Source Code Pro', monospace;
51+
}
52+
53+
._login:hover {
54+
background-color: #929200;
55+
color: #333;
56+
transition: 1s;
57+
}
58+
59+
div span {
60+
font-size: 12px;
61+
color: white;
62+
}
63+
64+
a {
65+
color: #ddd;
66+
text-decoration: none;
67+
}

‎Log In Form Designs/login-form-leeconnelly12/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Contact form</title>
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
12+
<body>
13+
14+
<section class="contact-form">
15+
<h1>Login Form</h1>
16+
<fieldset>
17+
<label for="first_name">Username:</label>
18+
<input type="text" name="first_name" id="first_name">
19+
</fieldset>
20+
<fieldset>
21+
<label for="password">Password:</label>
22+
<input type="password" name="password" id="password">
23+
</fieldset>
24+
<fieldset>
25+
<button type="submit">Login</button>
26+
</fieldset>
27+
</section>
28+
29+
</body>
30+
31+
</html>

‎Log In Form Designs/login-form-leeconnelly12/readme.md

Whitespace-only changes.

‎Log In Form Designs/login-form-leeconnelly12/style.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
html,body {
2+
height: 100%;
3+
}
4+
5+
body {
6+
margin: 0;
7+
font-family: sans-serif;
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
color: #2b2b2b;
12+
}
13+
14+
.contact-form {
15+
width: 100%;
16+
max-width: 400px;
17+
margin: auto;
18+
background-color: #f7f7f7;
19+
padding: 25px;
20+
}
21+
22+
h1 {
23+
margin-top: 0;
24+
margin-bottom: 20px;
25+
}
26+
27+
fieldset {
28+
border: 0;
29+
padding-left: 0;
30+
}
31+
32+
label {
33+
display: block;
34+
margin-bottom: 4px;
35+
}
36+
37+
textarea {
38+
resize: none;
39+
height: 100px;
40+
border-radius: 10px;
41+
}
42+
43+
input {
44+
height: 30px;
45+
border-radius: 22px;
46+
}
47+
48+
input,
49+
textarea {
50+
width: 100%;
51+
border: 1px solid #d7d7d7;
52+
}
53+
54+
button {
55+
border: 0;
56+
background-color:#ff8f00;
57+
color:white;
58+
font-weight: bold;
59+
text-transform: uppercase;
60+
height: 40px;
61+
max-width: 110px;
62+
width: 100%;
63+
border-radius: 20px;
64+
text-transform: uppercase;
65+
letter-spacing: 1px;
66+
display: block;
67+
margin-left: auto;
68+
}

‎Sign Up Form Designs/sign-up-leeconnelly12/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Contact form</title>
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
12+
<body>
13+
14+
<section class="contact-form">
15+
<h1>Sign up form</h1>
16+
<fieldset>
17+
<input type="text" name="first_name" id="first_name" placeholder="First name">
18+
</fieldset>
19+
<fieldset>
20+
<input type="text" name="last_name" id="last_name" placeholder="Last name">
21+
</fieldset>
22+
<fieldset>
23+
<input type="email" name="email" id="email" placeholder="Email">
24+
</fieldset>
25+
<fieldset>
26+
<input type="password" name="password" id="password" placeholder="Password">
27+
</fieldset>
28+
<fieldset>
29+
<button type="submit">Sign up</button>
30+
</fieldset>
31+
</section>
32+
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)