MichaelBarney · emperorbj · Feb 4, 2024
diff --git a/Templates/green-template/index.html b/Templates/green-template/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Green-template</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
+
+        <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
+        <div id="links">
+            <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
+            <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
+        </div>
+
+        <div class="footer">
+            Theme made by <a href="https://github.com/emperorbj" style="text-decoration: underline;">Opatola Bolaji</a>
+        </div>
+        <script src="" async defer></script>
+    </body>
+</html>
diff --git a/Templates/green-template/profile-pix.png b/Templates/green-template/profile-pix.png
diff --git a/Templates/green-template/readme.md b/Templates/green-template/readme.md
@@ -0,0 +1,36 @@
+# Green-template
+
+Made by [Bolaji](https://github.com/emperorbj)
+
+<img src="screenshot.png" alt="alt text" width="auto">
+
+## How to Use
+### index.html
+ 1. **Title**
+    This is the name that is given to the page.
+	   ```
+	   <title>Your Title Here</title>
+	   ```
+ 2. **(Optional) Favicon** 
+	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
+ 3. **Image**
+	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
+	```
+	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
+	```
+ 4. **Username**
+	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
+	```
+	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
+	```
+ 5. **Links**
+ To add your clickable links just substitute, delete or copy the "a" tags inside the "links" div with your desired hyperlinks.
+	```
+	<div  id="links">
+
+		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
+
+		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
+
+	</div>
+	```
diff --git a/Templates/green-template/screenshot-1.png b/Templates/green-template/screenshot-1.png
diff --git a/Templates/green-template/screenshot.png b/Templates/green-template/screenshot.png
diff --git a/Templates/green-template/style.css b/Templates/green-template/style.css
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Arvo:ital@1&family=Borel&family=Bree+Serif&family=DM+Sans:opsz,[email protected],300&family=Dancing+Script:wght@500&family=Josefin+Sans&family=PT+Sans+Narrow&family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Roboto&family=Source+Code+Pro:wght@300&display=swap');
+
+:root {
+    --bgColor: #edf7f6;
+    --accentColor: #59ce8f;
+    --font: 'Bree Serif', serif;
+}
+
+body{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    background-color: var(--bgColor);
+    color: var(--accentColor);
+    height: 80vh;
+}
+
+a{
+    color: var(--accentColor);
+    text-decoration: none;
+}
+
+#userPhoto{
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px solid var(--accentColor);
+}
+
+#userName{
+    font-size: 1.5rem;
+    line-height: 1.25;
+    font-family: var(--font);
+    width: 100%;
+    margin: 15px;
+    text-align: center;
+    font-style: italic;
+}
+
+#links{
+    max-width: 675px;
+    width: 100%;
+}
+.link{
+    display: block;
+    background-color: var(--bgColor);
+    font-family: var(--font);
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 13px;
+    text-transform: lowercase;
+    font-size: 1rem;
+    border: solid var(--accentColor) 2px;
+    border-radius: 5px;
+    transition: 0.3s;
+}
+
+.link:hover{
+    color: var(--bgColor);
+    background-color: var(--accentColor);
+    font-style: italic;
+}
+
+.footer{
+    position: fixed;
+    bottom: 10px;
+    font-size: 17px;
+}