-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 766b217
Showing
5 changed files
with
138 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |