Merge pull request #2 from ShravanMeena/master

updating fork
ShravanMeena · Oct 23, 2019 · 76cd47c · 76cd47c
2 parents 472e7e1 + 7e4aa51
commit 76cd47c
Show file tree

Hide file tree

Showing 11 changed files with 450 additions and 0 deletions.
diff --git a/Basic Website Designs/Skewed Border/README.md b/Basic Website Designs/Skewed Border/README.md
@@ -0,0 +1,7 @@
+# Skewed Border
+
+A simple layout with some animation inspired by [this tutorial.](https://www.youtube.com/watch?v=-1U62fdmCk4)
+
+Created by [Jefferson227](https://github.com/Jefferson227).
+
+![demo](demo.gif)
diff --git a/Basic Website Designs/Skewed Border/demo.gif b/Basic Website Designs/Skewed Border/demo.gif
diff --git a/Basic Website Designs/Skewed Border/index.html b/Basic Website Designs/Skewed Border/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Skewed Border</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="container__box">
+        <h1>01</h1>
+        <h2>Service One</h2>
+        <p>
+          Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
+          elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
+          espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
+          elementis mé pra quem é amistosis quis leo
+        </p>
+        <a href="#">Read More</a>
+      </div>
+
+      <div class="container__box">
+        <h1>02</h1>
+        <h2>Service Two</h2>
+        <p>
+          Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
+          elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
+          espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
+          elementis mé pra quem é amistosis quis leo
+        </p>
+        <a href="#">Read More</a>
+      </div>
+
+      <div class="container__box">
+        <h1>03</h1>
+        <h2>Service Three</h2>
+        <p>
+          Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
+          elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
+          espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
+          elementis mé pra quem é amistosis quis leo
+        </p>
+        <a href="#">Read More</a>
+      </div>
+
+      <div class="container__box">
+        <h1>04</h1>
+        <h2>Service Four</h2>
+        <p>
+          Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings
+          elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis,
+          espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in
+          elementis mé pra quem é amistosis quis leo
+        </p>
+        <a href="#">Read More</a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Basic Website Designs/Skewed Border/style.css b/Basic Website Designs/Skewed Border/style.css
@@ -0,0 +1,88 @@
+@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700,800,900&display=swap");
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+  font-weight: 300;
+}
+
+body {
+  font-family: "Raleway", sans-serif;
+  background-color: #000;
+}
+
+.container {
+  width: 80%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  color: #ddd;
+}
+.container__box {
+  position: relative;
+  background-color: #000;
+  padding: 6rem 2.5rem;
+  margin: 3rem 0;
+}
+.container__box h1 {
+  position: absolute;
+  font-size: 15rem;
+  font-weight: 700;
+  top: 6rem;
+  right: 0;
+  transition: all 0.2s;
+  opacity: 0;
+}
+.container__box h2 {
+  font-size: 2.8rem;
+  margin-bottom: 1rem;
+}
+.container__box p {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+.container__box a:link,
+.container__box a:visited,
+.container__box a:active {
+  font-size: 1.5rem;
+  font-weight: 400;
+  text-decoration: none;
+  padding: 1rem 1rem;
+  border: 1px solid #ddd;
+  color: #ddd;
+  display: inline-block;
+  transform: translateY(-5rem);
+  transition: all 0.2s;
+  opacity: 0;
+}
+.container__box:not(:last-child) {
+  margin-right: 2rem;
+}
+.container__box::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  left: -2px;
+  right: -2px;
+  background-image: linear-gradient(to right bottom, #660066, #cc99cc);
+  z-index: -1;
+  transform: skew(2deg, 2deg);
+}
+.container__box:hover h1 {
+  transform: translateY(-10rem);
+  opacity: 0.15;
+}
+.container__box:hover a {
+  transform: translateY(0);
+  opacity: 1;
+}
+.container__box:hover::before {
+  background-image: linear-gradient(to right bottom, #cc99cc, #660066);
+}
diff --git a/Log In Form Designs/Login Form HTML,CSS/index.html b/Log In Form Designs/Login Form HTML,CSS/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>#Hacktoberfest2019 | Login Form</title>
+	<link rel="stylesheet" type="text/css" href="main.css">
+</head>
+<body>
+	<div class="container">
+		<div class="_box"><center>
+			<img src="https://hacktoberfest.digitalocean.com/assets/logo-hf19-full-10f3c000cea930c76acc1dedc516ea7118b95353220869a3051848e45ff1d656.svg" width="200px" height="200px">
+			<h4>Username</h4>
+			<input type="text" name="Username">
+			<h4>Password</h4>
+			<input type="password" name= "Password">
+			<button class="_login">Login</button>
+			<br><br>
+			<span><a href="#">Forget your password</a> | <a href="#">Create an Account</a></span>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/Log In Form Designs/Login Form HTML,CSS/main.css b/Log In Form Designs/Login Form HTML,CSS/main.css
@@ -0,0 +1,67 @@
+/* LOGIN FORM DESIGN
+#Hacktoberfest2019 */
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
+
+body {
+	background-color: #333;
+	font-family: 'Source Code Pro', monospace;
+}
+
+._box {
+	width: 400px;
+	height: 450px;
+	background-image: linear-gradient(to bottom right, transparent, transparent);
+	border: 3px solid #b326ff;
+	border-radius: 15px;
+	margin: 70px auto;
+}
+
+div h4 {
+	color: #ddd;
+	margin-bottom: 2px
+}
+
+input {
+	background-color: transparent;
+	display: block;
+	border-radius: 5px;
+	border: 1px solid #dddd00;
+	width: 250px;
+	height: 25px;
+	outline: none;
+}
+
+input:hover {
+	transition: 0.5s;
+	background-color: #888;
+	border-bottom: 5px solid #dddd00;
+}
+
+._login {
+	margin-top: 20px;
+	margin-left: 150px;
+	border: 1px solid;
+	width: 100px;
+	background-color: transparent;
+	color: white;
+	height: 30px;
+	border-radius: 10px;
+	outline: none;
+	font-family: 'Source Code Pro', monospace;
+}
+
+._login:hover {
+	background-color: #929200;
+	color: #333;
+	transition: 1s;
+}
+
+div span {
+	font-size: 12px;
+	color: white;
+}
+
+a {
+	color: #ddd;
+	text-decoration: none;
+}
diff --git a/Log In Form Designs/login-form-leeconnelly12/index.html b/Log In Form Designs/login-form-leeconnelly12/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Contact form</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+
+  <section class="contact-form">
+    <h1>Login Form</h1>
+    <fieldset>
+      <label for="first_name">Username:</label>
+      <input type="text" name="first_name" id="first_name">
+    </fieldset>
+    <fieldset>
+      <label for="password">Password:</label>
+      <input type="password" name="password" id="password">
+    </fieldset>
+    <fieldset>
+      <button type="submit">Login</button>
+    </fieldset>
+  </section>
+
+</body>
+
+</html>
diff --git a/Log In Form Designs/login-form-leeconnelly12/readme.md b/Log In Form Designs/login-form-leeconnelly12/readme.md
diff --git a/Log In Form Designs/login-form-leeconnelly12/style.css b/Log In Form Designs/login-form-leeconnelly12/style.css
@@ -0,0 +1,68 @@
+html,body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #2b2b2b;
+}
+
+.contact-form {
+  width: 100%;
+  max-width: 400px;
+  margin: auto;
+  background-color: #f7f7f7;
+  padding: 25px;
+}
+
+h1 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+fieldset {
+  border: 0;
+  padding-left: 0;
+}
+
+label {
+  display: block;
+  margin-bottom: 4px;
+}
+
+textarea {
+  resize: none;
+  height: 100px;
+  border-radius: 10px;
+}
+
+input {
+  height: 30px;
+  border-radius: 22px;
+}
+
+input,
+textarea {
+  width: 100%;
+  border: 1px solid #d7d7d7;
+}
+
+button {
+  border: 0;
+  background-color:#ff8f00;
+  color:white;
+  font-weight: bold;
+  text-transform: uppercase;
+  height: 40px;
+  max-width: 110px;
+  width: 100%;
+  border-radius: 20px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: block;
+  margin-left: auto;
+}
diff --git a/Sign Up Form Designs/sign-up-leeconnelly12/index.html b/Sign Up Form Designs/sign-up-leeconnelly12/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Contact form</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+
+  <section class="contact-form">
+    <h1>Sign up form</h1>
+    <fieldset>
+      <input type="text" name="first_name" id="first_name" placeholder="First name">
+    </fieldset>
+    <fieldset>
+      <input type="text" name="last_name" id="last_name" placeholder="Last name">
+    </fieldset>
+    <fieldset>
+      <input type="email" name="email" id="email" placeholder="Email">
+    </fieldset>
+    <fieldset>
+      <input type="password" name="password" id="password" placeholder="Password">
+    </fieldset>
+    <fieldset>
+      <button type="submit">Sign up</button>
+    </fieldset>
+  </section>
+
+</body>
+
+</html>