Skip to content

Commit

Permalink
add template
Browse files Browse the repository at this point in the history
  • Loading branch information
samuelteixeiras committed Oct 12, 2021
0 parents commit 766b217
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 0 deletions.
Binary file added favicon.ico
Binary file not shown.
25 changes: 25 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Homer Simpson</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
</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>

<!-- Javascript -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="index.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
$( document ).ready(function() {
// Add here commands to run on page loaded
});

$( ".link" ).click(function() {
// Add here commands to run on link click
});
50 changes: 50 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Standard Template

[Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)

<img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">

## 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>
```
### style.css
6. **Colors**
Substitute the background and accent colors with your desired pallete.
```
--bgColor: white;
--accentColor: #39e09b;
```
7. **Fonts**
You can import the font from a website like [Google Fonts](https://fonts.google.com/) and substitute the "--font" variable with its implementation.
```
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
--font: 'Karla', sans-serif;
```
56 changes: 56 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/* Style Settings */
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
:root {
--bgColor: white;
--accentColor: #39e09b;
--font: 'Karla', sans-serif;
}

body{
background-color: var(--bgColor);
}

#userPhoto{
width: 96px;
height: 96px;
display: block;
margin: 35px auto 20px;
border-radius: 50%;
}

#userName{
color: #bbb;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
display: block;
font-family: var(--font);
width: 100%;
text-align: center;
text-decoration: none;
}

#links{
max-width: 675px;
width: auto;
display: block;
margin: 27px auto;
}
.link{
display: block;
background-color: var(--accentColor);
color: var(--bgColor);
font-family: var(--font);
text-align: center;
margin-bottom: 20px;
padding: 17px;
text-decoration: none;
font-size: 1rem;
transition: all .25s cubic-bezier(.08,.59,.29,.99);
border: solid var(--accentColor) 2px;
}

.link:hover{
background-color: var(--bgColor);
color: var(--accentColor);
}

0 comments on commit 766b217

Please sign in to comment.