diff --git a/Templates/green-template/index.html b/Templates/green-template/index.html new file mode 100644 index 0000000..ced3c2b --- /dev/null +++ b/Templates/green-template/index.html @@ -0,0 +1,26 @@ + + + + + + + Green-template + + + + + + User Photo + + @thesimpsons + + +
+ Theme made by Opatola Bolaji +
+ + + diff --git a/Templates/green-template/profile-pix.png b/Templates/green-template/profile-pix.png new file mode 100644 index 0000000..86e332b Binary files /dev/null and b/Templates/green-template/profile-pix.png differ diff --git a/Templates/green-template/readme.md b/Templates/green-template/readme.md new file mode 100644 index 0000000..c6080c3 --- /dev/null +++ b/Templates/green-template/readme.md @@ -0,0 +1,36 @@ +# Green-template + +Made by [Bolaji](https://github.com/emperorbj) + +alt text + +## How to Use +### index.html + 1. **Title** + This is the name that is given to the page. + ``` + Your Title Here + ``` + 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/). + ``` + User Photo + ``` + 4. **Username** + Your Instagram username. Change the "href" property with its url and add substitute the text with your @. + ``` + @thesimpsons + ``` + 5. **Links** + To add your clickable links just substitute, delete or copy the "a" tags inside the "links" div with your desired hyperlinks. + ``` + + ``` \ No newline at end of file diff --git a/Templates/green-template/screenshot-1.png b/Templates/green-template/screenshot-1.png new file mode 100644 index 0000000..c2e75a8 Binary files /dev/null and b/Templates/green-template/screenshot-1.png differ diff --git a/Templates/green-template/screenshot.png b/Templates/green-template/screenshot.png new file mode 100644 index 0000000..c2e75a8 Binary files /dev/null and b/Templates/green-template/screenshot.png differ diff --git a/Templates/green-template/style.css b/Templates/green-template/style.css new file mode 100644 index 0000000..e7cc049 --- /dev/null +++ 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,wght@9..40,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; +} \ No newline at end of file