Merge pull request MichaelBarney#53 from Rajni2002/master

New Tempelate added - Abstract
Marincor · Oct 3, 2021 · 82a0b00 · 82a0b00
2 parents a49d71d + 2ff2251
commit 82a0b00
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Templates/.DS_Store b/Templates/.DS_Store
diff --git a/Templates/Abstract/.DS_Store b/Templates/Abstract/.DS_Store
diff --git a/Templates/Abstract/Doubs.png b/Templates/Abstract/Doubs.png
diff --git a/Templates/Abstract/Profile.jpeg b/Templates/Abstract/Profile.jpeg
diff --git a/Templates/Abstract/README.md b/Templates/Abstract/README.md
@@ -0,0 +1,7 @@
+# Abstract Theme
+Made by [Rajnikant dash](http://github.com/Rajni2002/ "Rajni2002").
+
+![Preview](https://github.com/Rajni2002/LinkFree/blob/master/Templates/Abstract/preview.png "Preview")
+
+#### Demo
+https://michaelbarney.github.io/LinkFree/Templates/Abstract/
diff --git a/Templates/Abstract/index.html b/Templates/Abstract/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Abstract</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <main>
+        <div class="profile">
+            <img src="Profile.jpeg" alt="profile-image">
+            <h1>Hello Everybody!</h1>
+        </div>
+        <a href="https://github.com/Rajni2002" target="blank">
+            <div class="github">
+                <img src="https://img.icons8.com/fluency/48/000000/github.png" alt="Github-icon" />
+                <p>Collaborate <span>with me on Github</span></p>
+            </div>
+        </a>
+        <a href="https://twitter.com/rajni2k2" target="blank">
+            <div class="Twitter">
+                <img src="https://img.icons8.com/fluency/48/000000/twitter.png" alt="Twitter-icon" />
+                <p>Read <span>my threads Twitter</span></p>
+            </div>
+        </a>
+        <a href="https://www.linkedin.com/in/rajnikant-dash-2k2/" target="blank">
+            <div class="Linkedin">
+                <img src="https://img.icons8.com/fluency/48/000000/linkedin.png" alt="Linked-icon" />
+                <p>Connect <span>with me on Linkedin</span></p>
+            </div>
+        </a>
+    </main>
+</body>
+
+</html>
diff --git a/Templates/Abstract/preview.png b/Templates/Abstract/preview.png
diff --git a/Templates/Abstract/style.css b/Templates/Abstract/style.css
@@ -0,0 +1,134 @@
+@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@500&display=swap");
+
+html {
+  font-family: "Work Sans", sans-serif;
+  font-weight: 500;
+  text-align: center;
+}
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url(Doubs.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+main {
+  background-color: rgb(255, 255, 255);
+  padding: 3rem;
+  border-radius: 8px;
+  box-shadow: 10px 10px rgb(118, 172, 241);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all .5s ease;
+}
+
+main:hover {
+  transform: translate(10px, 10px);
+  box-shadow: 0px 0px rgb(118, 172, 241);
+}
+
+main div {
+  margin-bottom: 2rem;
+  width: 30vw;
+}
+
+main .profile img {
+  width: 40%;
+  border-radius: 50%;
+  box-shadow: 10px 6px rgba(97, 126, 240, 0.671);
+  transition: all .5s ease;
+}
+
+main .profile img:hover {
+  cursor: pointer;
+  transform: translate(10px, 10px);
+  box-shadow: 0px 0px rgba(97, 126, 240, 0.671);
+}
+
+main .profile h1 {
+  font-size: 2rem;
+  font-weight: bolder;
+}
+
+a {
+  text-decoration: none;
+}
+
+a div {
+  background-color: rgb(183, 124, 238);
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 10px 10px rgb(255, 187, 109);
+  text-align: center;
+}
+
+a div:hover {
+  background-color: rgb(255, 187, 109);
+  box-shadow: 10px 10px rgb(183, 124, 238);
+}
+
+a div:hover p {
+  color: black;
+}
+
+a div img {
+  width: 2rem;
+}
+
+a div p {
+  display: inline;
+  color: white;
+  text-align: center;
+  position: relative;
+  top: -0.5rem;
+}
+
+a div:active {
+  transform: translate(10px, 10px);
+  box-shadow: 0px 0px rgb(183, 124, 238);
+}
+
+@media (max-width: 900px) {
+  main {
+    width: 80%;
+    padding: 1.5rem;
+    box-shadow: none;
+  }
+
+  main:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  main .profile h1 {
+    font-size: 1.5rem;
+    margin-top: 2rem;
+  }
+
+  main .profile img {
+    width: 60%;
+  }
+
+  main .profile img:hover {
+    transform: none;
+    box-shadow: 10px 6px rgba(97, 126, 240, 0.671);
+  }
+
+  main div {
+    width: 70vw;
+  }
+}
+
+@media (max-width: 400px) {
+  main a div p span {
+    display: none;
+  }
+}
diff --git a/Templates/README.md b/Templates/README.md
@@ -1,5 +1,6 @@
 ## 💻 Template Preview
 - [Cherry-Blossm](https://sunilswain.github.io/Cherry-Bloosm/)
+- [Abstract](https://michaelbarney.github.io/LinkFree/Templates/Abstract/)
 - [3D Theme](https://michaelbarney.github.io/LinkFree/Templates/3D%20Theme/)
 - [CasualBlue](https://michaelbarney.github.io/LinkFree/Templates/CasualBlue/)
 - [DarkMode](https://michaelbarney.github.io/LinkFree/Templates/DarkMode/)