Add link in bio
This commit is contained in:
Alex Hyett
parent
c863babe6d
commit
5723071110
15 changed files with 689 additions and 0 deletions
65
README.md
65
README.md
|
|
@ -1,2 +1,67 @@
|
||||||
# linkinbio
|
# linkinbio
|
||||||
|
|
||||||
Link In Bio Page for Instagram, Twitter, Tumblr etc
|
Link In Bio Page for Instagram, Twitter, Tumblr etc
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
As many of you will know, you can only have one link on your Instagram and Twitter Bios. To overcome this, many users use third party link in bio apps to show multiple links. However, the downside of this is your are distracting people from your brand by linking to another site rather than your own.
|
||||||
|
|
||||||
|
Some of these third party options allow for you to use a custom domain but that is usually a premium option you need to pay for.
|
||||||
|
|
||||||
|
Given that many of these third party link in bio pages are just a list of links I decided to roll my own.
|
||||||
|
|
||||||
|
You can see an example of what this looks like here: [https://alexhyett.com/links](https://alexhyett.com/links).
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
You first need to update the profile section by changing the `h1` tag to your own name as well as changing the location and bio information. You will also want to add in your own profile photo. Your profile photo should be square.
|
||||||
|
|
||||||
|
Next you need to add in links to all your profiles.
|
||||||
|
|
||||||
|
You can do this by copy and pasting one of the link blocks and updating the text and links.
|
||||||
|
|
||||||
|
```
|
||||||
|
<a href="https://instagram.com/alexhyettdev" class="block link">
|
||||||
|
<div class="image-float instagram">
|
||||||
|
<div class="beacon instagram"></div>
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/instagram.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Instagram</h2>
|
||||||
|
<div>@alexhyettdev</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Social Media Colors
|
||||||
|
|
||||||
|
The following CSS classes have been added which can be used to show the correct colors for the beacon and image shadow.
|
||||||
|
|
||||||
|
- `amazon`
|
||||||
|
- `dev`
|
||||||
|
- `facebook`
|
||||||
|
- `github`
|
||||||
|
- `google`
|
||||||
|
- `instagram`
|
||||||
|
- `linkedin`
|
||||||
|
- `medium`
|
||||||
|
- `paypal`
|
||||||
|
- `twitter`
|
||||||
|
- `youtube`
|
||||||
|
|
||||||
|
### Beacon
|
||||||
|
|
||||||
|
If you want one or more of the links to stand out you can apply the beacon div to just above the `image` div so that it will pulsate.
|
||||||
|
|
||||||
|
```
|
||||||
|
<div class="beacon instagram"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Images
|
||||||
|
|
||||||
|
I have included logos for all the sites mentioned above in the social media colors section.
|
||||||
|
|
|
||||||
31
images/amazon.svg
Normal file
31
images/amazon.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#252E3C;}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
.st2{fill:#FF9900;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
<path class="st1" d="M26.8,35.7c0-1.5,0.4-2.8,1.1-3.9s1.8-1.9,3-2.4c1.2-0.5,2.6-0.9,4.4-1.1c0.6-0.1,1.5-0.2,2.9-0.3v-0.6
|
||||||
|
c0-1.4-0.2-2.3-0.5-2.8c-0.5-0.7-1.2-1-2.2-1h-0.3c-0.7,0.1-1.3,0.3-1.9,0.7c-0.5,0.4-0.9,0.9-1,1.6c-0.1,0.4-0.3,0.7-0.7,0.8
|
||||||
|
L28,26.3c-0.4-0.1-0.6-0.3-0.6-0.6c0-0.1,0-0.1,0-0.2c0.4-1.9,1.3-3.4,2.7-4.3c1.5-0.9,3.1-1.5,5.1-1.6H36c2.5,0,4.4,0.6,5.8,1.9
|
||||||
|
c0.2,0.2,0.4,0.5,0.6,0.7c0.2,0.3,0.3,0.5,0.4,0.7c0.1,0.2,0.2,0.5,0.3,0.9s0.2,0.6,0.2,0.8c0,0.1,0.1,0.4,0.1,0.9s0,0.7,0,0.8v7.9
|
||||||
|
c0,0.6,0.1,1.1,0.2,1.6c0.2,0.5,0.3,0.8,0.5,1s0.4,0.5,0.8,1c0.1,0.2,0.2,0.4,0.2,0.5c0,0.2-0.1,0.3-0.3,0.5
|
||||||
|
c-1.8,1.6-2.8,2.4-2.9,2.6c-0.3,0.2-0.6,0.2-0.9,0.1c-0.3-0.3-0.6-0.5-0.8-0.8s-0.4-0.4-0.5-0.5s-0.3-0.3-0.5-0.6s-0.4-0.5-0.5-0.6
|
||||||
|
c-1.2,1.3-2.4,2.2-3.6,2.5c-0.7,0.2-1.7,0.3-2.7,0.3c-1.7,0-3.1-0.5-4.1-1.6S26.8,37.6,26.8,35.7z M32.4,35c0,0.9,0.2,1.5,0.6,2
|
||||||
|
c0.4,0.5,1,0.8,1.7,0.8c0.1,0,0.2,0,0.3,0s0.2,0,0.2,0c0.9-0.2,1.6-0.8,2.1-1.8c0.2-0.4,0.4-0.9,0.5-1.4s0.2-0.9,0.2-1.2
|
||||||
|
s0-0.8,0-1.5v-0.8c-1.3,0-2.2,0.1-2.9,0.3C33.3,31.9,32.4,33.2,32.4,35z"/>
|
||||||
|
<path class="st2" d="M18.1,45.1c0.1-0.2,0.3-0.2,0.5,0c5.5,3.2,11.4,4.7,17.8,4.7c4.3,0,8.5-0.8,12.7-2.4c0.1,0,0.3-0.1,0.5-0.2
|
||||||
|
C49.8,47.1,50,47,50,47c0.3-0.1,0.6-0.1,0.8,0.2s0.1,0.5-0.2,0.7c-0.4,0.3-0.9,0.6-1.5,1c-1.9,1.1-4,2-6.3,2.6s-4.6,0.9-6.8,0.9
|
||||||
|
c-3.4,0-6.6-0.6-9.7-1.8c-3-1.2-5.7-2.9-8.1-5c-0.1-0.1-0.2-0.2-0.2-0.3C18,45.2,18,45.1,18.1,45.1z M47.3,45.6
|
||||||
|
c0-0.1,0.1-0.2,0.2-0.3c0.5-0.4,1.1-0.6,1.6-0.8c0.8-0.2,1.6-0.3,2.4-0.4c0.2,0,0.4,0,0.6,0c1,0.1,1.6,0.3,1.8,0.5
|
||||||
|
c0.1,0.1,0.1,0.3,0.1,0.6v0.2c0,0.8-0.2,1.7-0.6,2.7c-0.4,1-1,1.9-1.7,2.5c-0.1,0.1-0.2,0.1-0.3,0.1h-0.1c-0.1-0.1-0.2-0.2-0.1-0.4
|
||||||
|
c0.8-1.9,1.2-3.2,1.2-4c0-0.2,0-0.4-0.1-0.5c-0.2-0.3-0.8-0.4-1.8-0.4c-0.4,0-0.8,0-1.3,0.1s-1,0.1-1.5,0.2c-0.1,0-0.2,0-0.3-0.1
|
||||||
|
C47.2,45.8,47.2,45.8,47.3,45.6C47.3,45.7,47.3,45.7,47.3,45.6z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
images/dev.png
Normal file
BIN
images/dev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
1
images/facebook.svg
Normal file
1
images/facebook.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path fill="#1877f2" d="M0 0h72v72H0z"/><path d="M54 36a17.99 17.99 0 10-36 0c0 9 6.6 16.5 15.2 17.8V41.2h-4.6V36h4.6v-4c0-4.5 2.7-7 6.8-7 2 0 4 .4 4 .4v4.4h-2.3c-2.2 0-2.9 1.4-2.9 2.8V36h5l-.8 5.2h-4.2v12.6C47.4 52.5 54 45 54 36z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 311 B |
20
images/github.svg
Normal file
20
images/github.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#211F1F;}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
<path class="st1" d="M36,18.2c-9.9,0-18,8.1-18,18c0,8.5,5.8,15.5,13.6,17.5c-0.1-0.2-0.1-0.5-0.1-0.9v-3.1h-2.3
|
||||||
|
c-1.2,0-2.3-0.5-2.8-1.5c-0.6-1.1-0.7-2.7-2.2-3.8c-0.5-0.4-0.1-0.7,0.4-0.7c0.9,0.3,1.7,0.9,2.4,1.8c0.7,0.9,1,1.2,2.4,1.2
|
||||||
|
c0.6,0,1.6,0,2.5-0.2c0.5-1.3,1.3-2.4,2.4-2.9c-6-0.7-8.9-3.7-8.9-7.7c0-1.8,0.8-3.4,2-4.9c-0.4-1.4-0.9-4.3,0.2-5.4
|
||||||
|
c2.7,0,4.3,1.8,4.7,2.2c1.3-0.5,2.8-0.7,4.4-0.7c1.6,0,3,0.3,4.4,0.7c0.4-0.5,2-2.2,4.7-2.2c1.1,1.1,0.6,4,0.1,5.4
|
||||||
|
c1.3,1.4,2,3.1,2,4.9c0,4.1-2.8,7-8.8,7.7c1.7,0.9,2.8,3.3,2.8,5.1v4.1c0,0.1,0,0.3,0,0.4c7-2.4,12.1-9.1,12.1-17
|
||||||
|
C54,26.3,45.9,18.2,36,18.2L36,18.2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
25
images/google.svg
Normal file
25
images/google.svg
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#FFFFFF;}
|
||||||
|
.st1{fill:#4285F4;}
|
||||||
|
.st2{fill:#34A853;}
|
||||||
|
.st3{fill:#FBBC05;}
|
||||||
|
.st4{fill:#EB4335;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
<path class="st1" d="M53.5,36.4c0-1.5-0.1-2.6-0.4-3.7H36.3v6.7h9.9c-0.2,1.7-1.3,4.1-3.7,5.8l0,0.2l5.3,4.1l0.4,0
|
||||||
|
C51.6,46.5,53.5,41.8,53.5,36.4"/>
|
||||||
|
<path class="st2" d="M36.3,53.9c4.8,0,8.9-1.6,11.9-4.3l-5.7-4.4C41,46.3,38.9,47,36.3,47c-4.7,0-8.8-3.1-10.2-7.5l-0.2,0l-5.5,4.3
|
||||||
|
L20.2,44C23.2,49.9,29.3,53.9,36.3,53.9"/>
|
||||||
|
<path class="st3" d="M26.1,39.5c-0.4-1.1-0.6-2.3-0.6-3.6c0-1.2,0.2-2.4,0.6-3.6l0-0.2l-5.6-4.4l-0.2,0.1c-1.2,2.4-1.9,5.2-1.9,8.1
|
||||||
|
s0.7,5.6,1.9,8.1L26.1,39.5"/>
|
||||||
|
<path class="st4" d="M36.3,25c3.4,0,5.6,1.5,6.9,2.7l5.1-4.9c-3.1-2.9-7.2-4.7-12-4.7c-7,0-13.1,4-16,9.9l5.8,4.5
|
||||||
|
C27.5,28.1,31.5,25,36.3,25"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
27
images/instagram.svg
Normal file
27
images/instagram.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:url(#SVGID_1_);}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.094947e-13" y1="72" x2="72" y2="7.105427e-13">
|
||||||
|
<stop offset="0" style="stop-color:#FEB811"/>
|
||||||
|
<stop offset="1" style="stop-color:#9E27AD"/>
|
||||||
|
</linearGradient>
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st1" d="M44.1,18H27.9c-5.5,0-9.9,4.5-9.9,9.9v16.1c0,5.5,4.5,9.9,9.9,9.9h16.1c5.5,0,9.9-4.5,9.9-9.9V27.9
|
||||||
|
C54,22.5,49.5,18,44.1,18z M50.8,44.1c0,3.7-3,6.7-6.7,6.7H27.9c-3.7,0-6.7-3-6.7-6.7V27.9c0-3.7,3-6.7,6.7-6.7h16.1
|
||||||
|
c3.7,0,6.7,3,6.7,6.7L50.8,44.1L50.8,44.1z"/>
|
||||||
|
<path class="st1" d="M36,26.7c-5.1,0-9.3,4.2-9.3,9.3c0,5.1,4.2,9.3,9.3,9.3s9.3-4.2,9.3-9.3C45.3,30.9,41.1,26.7,36,26.7z
|
||||||
|
M36,42.1c-3.4,0-6.1-2.7-6.1-6.1c0-3.4,2.7-6.1,6.1-6.1s6.1,2.7,6.1,6.1C42.1,39.4,39.4,42.1,36,42.1z"/>
|
||||||
|
<path class="st1" d="M45.7,24c-0.6,0-1.2,0.2-1.7,0.7c-0.4,0.4-0.7,1-0.7,1.7c0,0.6,0.3,1.2,0.7,1.7c0.4,0.4,1,0.7,1.7,0.7
|
||||||
|
c0.6,0,1.2-0.3,1.7-0.7c0.4-0.4,0.7-1,0.7-1.7c0-0.6-0.2-1.2-0.7-1.7C46.9,24.3,46.3,24,45.7,24z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
20
images/linkedin.svg
Normal file
20
images/linkedin.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#0077B5;}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path id="LinkedIn_3_" class="st1" d="M54,39.3v13.4h-7.8V40.2c0-3.2-1.1-5.3-3.9-5.3c-2.2,0-3.4,1.5-4,2.8
|
||||||
|
c-0.2,0.5-0.3,1.2-0.3,1.9v13.1h-7.8c0,0,0.1-21.2,0-23.4H38v3.3c0,0,0,0,0,0.1l0,0v-0.1c1-1.6,2.9-3.9,7-3.9
|
||||||
|
C50.2,28.8,54,32.1,54,39.3z M22,18c-2.7,0-4.4,1.7-4.4,4.1c0,2.2,1.7,4.1,4.3,4.1l0,0c2.7,0,4.4-1.8,4.4-4.1
|
||||||
|
C26.4,19.8,24.7,18,22,18z M18.1,52.8h7.8V29.3h-7.8C18.1,29.3,18.1,52.8,18.1,52.8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 932 B |
1
images/medium.svg
Normal file
1
images/medium.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72 72" xml:space="preserve"><style>.st1{fill:#fff}</style><path d="M0 0h72v72H0V0z" fill="#12100e"/><path class="st1" d="M38.3 36c0 5.65-4.54 10.22-10.15 10.22S18 41.65 18 36s4.55-10.22 10.15-10.22S38.31 30.35 38.31 36M49.44 36c0 5.31-2.27 9.62-5.07 9.62s-5.08-4.3-5.08-9.62 2.27-9.62 5.08-9.62 5.07 4.3 5.07 9.62M54 36c0 4.76-.8 8.62-1.79 8.62s-1.78-3.86-1.78-8.62.8-8.62 1.78-8.62c1 0 1.79 3.86 1.79 8.62"/></svg>
|
||||||
|
After Width: | Height: | Size: 507 B |
27
images/paypal.svg
Normal file
27
images/paypal.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#003087;}
|
||||||
|
.st1{opacity:0.68;fill:#FFFFFF;enable-background:new ;}
|
||||||
|
.st2{opacity:0.7;fill:#FFFFFF;enable-background:new ;}
|
||||||
|
.st3{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="st1" d="M48.7,27.1c0.4-2.8,0-4.7-1.5-6.4c-1.7-1.9-4.7-2.7-8.5-2.7H27.4c-0.8,0-1.5,0.6-1.6,1.4l-4.7,29.5
|
||||||
|
c-0.1,0.6,0.4,1.1,0.9,1.1h6.9l-0.5,3c-0.1,0.5,0.3,1,0.8,1h5.8c0.7,0,1.3-0.5,1.4-1.2l0.1-0.3l1.1-7l0.1-0.4
|
||||||
|
c0.1-0.7,0.7-1.2,1.4-1.2h0.9c5.6,0,10.1-2.3,11.3-8.9c0.5-2.8,0.3-5.1-1.2-6.7C49.8,27.9,49.3,27.5,48.7,27.1L48.7,27.1"/>
|
||||||
|
<path class="st2" d="M48.7,27.1c0.4-2.8,0-4.7-1.5-6.4c-1.7-1.9-4.7-2.7-8.5-2.7H27.4c-0.8,0-1.5,0.6-1.6,1.4l-4.7,29.5
|
||||||
|
c-0.1,0.6,0.4,1.1,0.9,1.1h6.9l1.7-11l-0.1,0.3c0.1-0.8,0.8-1.4,1.6-1.4h3.3c6.4,0,11.5-2.6,13-10.2C48.6,27.6,48.7,27.4,48.7,27.1
|
||||||
|
"/>
|
||||||
|
<path class="st3" d="M32.7,27.2c0.1-0.5,0.4-0.9,0.8-1C33.6,26,33.8,26,34,26h8.8c1,0,2,0.1,2.9,0.2c0.3,0,0.5,0.1,0.7,0.1
|
||||||
|
c0.2,0.1,0.5,0.1,0.7,0.2c0.1,0,0.2,0.1,0.3,0.1c0.4,0.1,0.8,0.3,1.2,0.5c0.4-2.8,0-4.7-1.5-6.4c-1.7-1.9-4.7-2.7-8.5-2.7H27.4
|
||||||
|
c-0.8,0-1.5,0.6-1.6,1.4l-4.7,29.5c-0.1,0.6,0.4,1.1,0.9,1.1h6.9l1.7-11L32.7,27.2z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
images/profile.jpg
Normal file
BIN
images/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
22
images/twitter.svg
Normal file
22
images/twitter.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#1DA1F2;}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="st1" d="M54,24.9c-1.3,0.6-2.7,1-4.2,1.2c1.5-0.9,2.7-2.4,3.2-4.1c-1.4,0.8-3,1.5-4.7,1.8c-1.3-1.4-3.3-2.3-5.4-2.3
|
||||||
|
c-4.1,0-7.4,3.3-7.4,7.4c0,0.6,0.1,1.1,0.2,1.7c-6.1-0.3-11.6-3.2-15.2-7.7c-0.6,1.1-1,2.4-1,3.7c0,2.6,1.3,4.8,3.3,6.1
|
||||||
|
c-1.2,0-2.3-0.4-3.3-0.9v0.1c0,3.6,2.5,6.6,5.9,7.2c-0.6,0.2-1.3,0.3-1.9,0.3c-0.5,0-0.9,0-1.4-0.1c0.9,2.9,3.7,5.1,6.9,5.1
|
||||||
|
c-2.5,2-5.7,3.2-9.2,3.2c-0.6,0-1.2,0-1.8-0.1c3.3,2.1,7.1,3.3,11.3,3.3c13.6,0,21-11.2,21-21l0-1C51.7,27.6,53,26.3,54,24.9z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1 KiB |
17
images/youtube.svg
Normal file
17
images/youtube.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#C4302B;}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
</style>
|
||||||
|
<g id="Twitter">
|
||||||
|
<rect class="st0" width="72" height="72"/>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
<path class="st1" d="M53.3,27.3c-0.4-1.5-1.6-2.8-3.2-3.2C47.3,23.4,36,23.4,36,23.4s-11.3,0-14.1,0.7c-1.5,0.4-2.8,1.7-3.2,3.2
|
||||||
|
C18,30.2,18,36,18,36s0,5.9,0.7,8.7c0.4,1.5,1.6,2.8,3.2,3.2c2.8,0.8,14.1,0.8,14.1,0.8s11.3,0,14.1-0.7c1.5-0.4,2.8-1.6,3.2-3.2
|
||||||
|
C54,41.9,54,36,54,36S54,30.2,53.3,27.3z M32.4,41.4V30.6l9.4,5.4L32.4,41.4z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 844 B |
132
index.html
Normal file
132
index.html
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
<title>Links</title>
|
||||||
|
<meta name="description" content="Links to useful pages for my followers" />
|
||||||
|
<script
|
||||||
|
src="https://kit.fontawesome.com/9b3bbb804d.js"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="outer">
|
||||||
|
<div class="content">
|
||||||
|
<div class="block">
|
||||||
|
<div class="profile">
|
||||||
|
<img src="images/profile.jpg" alt="profile photo" />
|
||||||
|
<h1>Alex Hyett | Developer</h1>
|
||||||
|
<div class="location">
|
||||||
|
<i class="fas fa-map-marker-alt"></i> London, United Kingdom
|
||||||
|
</div>
|
||||||
|
<div class="bio">
|
||||||
|
<div>💻 Sharing my developer journey & love of tech</div>
|
||||||
|
<div>👨🏻🔬 Physics Graduate & Tech Enthusiast</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="links">
|
||||||
|
<a href="mailto:hello@example.com" class="contactbutton">
|
||||||
|
<i class="fas fa-envelope-open"></i> Email
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://instagram.com/alexhyettdev" class="block link">
|
||||||
|
<div class="image-float instagram">
|
||||||
|
<div class="beacon instagram"></div>
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/instagram.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Instagram</h2>
|
||||||
|
<div>@alexhyettdev</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://twitter.com/alexhyettdev" class="block link">
|
||||||
|
<div class="image-float twitter">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/twitter.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Twitter</h2>
|
||||||
|
<div>@alexhyettdev</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://alexhyett.medium.com/" class="block link">
|
||||||
|
<div class="image-float medium">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/medium.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Medium</h2>
|
||||||
|
<div>alexhyett.medium.com</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://github.com/alexhyett/" class="block link">
|
||||||
|
<div class="image-float github">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/github.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>GitHub</h2>
|
||||||
|
<div>github.com/alexhyett</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://dev.to/alexhyettdev" class="block link">
|
||||||
|
<div class="image-float dev">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/dev.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>DEV</h2>
|
||||||
|
<div>dev.to/alexhyettdev</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://www.linkedin.com/in/alexhyett/" class="block link">
|
||||||
|
<div class="image-float linkedin">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/linkedin.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>LinkedIn</h2>
|
||||||
|
<div>linkedin.com/in/alexhyett</div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
301
styles.css
Normal file
301
styles.css
Normal file
|
|
@ -0,0 +1,301 @@
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
body,
|
||||||
|
dd,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
fieldset,
|
||||||
|
figure,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
hr,
|
||||||
|
html,
|
||||||
|
iframe,
|
||||||
|
legend,
|
||||||
|
li,
|
||||||
|
ol,
|
||||||
|
p,
|
||||||
|
pre,
|
||||||
|
textarea,
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #7f8d9e;
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.58;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
background-color: #191b21;
|
||||||
|
font-family: sans-serif;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #3273dc;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #3273dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 1000px;
|
||||||
|
min-height: 90vh;
|
||||||
|
margin: 56px auto;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
text-align: center;
|
||||||
|
background-color: #2d2f39;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
margin-top: -60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile h1 {
|
||||||
|
font-size: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .location {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .bio {
|
||||||
|
color: white;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links .contactbutton {
|
||||||
|
background-color: #2d2f39;
|
||||||
|
color: #7f8d9e;
|
||||||
|
border: #7f8d9e 1px solid;
|
||||||
|
cursor: pointer;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
padding-left: 0.75em;
|
||||||
|
padding-right: 0.75em;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links .contactbutton:hover {
|
||||||
|
color: white;
|
||||||
|
border: white 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 10px;
|
||||||
|
text-align: left;
|
||||||
|
padding: 20px;
|
||||||
|
padding-left: 70px;
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link h2 {
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin: 0px;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link .image-float {
|
||||||
|
position: absolute;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
left: -10px;
|
||||||
|
margin-top: -12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link .image-float .image img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link .arrow {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
right: 20px;
|
||||||
|
top: 0px;
|
||||||
|
padding-top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link > .arrow,
|
||||||
|
.link > .image-float {
|
||||||
|
-webkit-transition: transform 0.3s ease;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover .arrow {
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover .image-float {
|
||||||
|
transform: translateY(-5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.link {
|
||||||
|
color: #7f8d9e;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.link:hover {
|
||||||
|
color: #3273dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beacon {
|
||||||
|
position: absolute;
|
||||||
|
-webkit-animation: beacon 2s ease infinite, tr 2s ease-out infinite;
|
||||||
|
animation: beacon 2s ease infinite, tr 2s ease-out infinite;
|
||||||
|
opacity: 0.85;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes beacon {
|
||||||
|
from {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes beacon {
|
||||||
|
from {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes tr {
|
||||||
|
from {
|
||||||
|
transform: scaleX(1) scaleY(1);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scaleX(1.5) scaleY(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes tr {
|
||||||
|
from {
|
||||||
|
transform: scaleX(1) scaleY(1);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scaleX(1.5) scaleY(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadein {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.amazon {
|
||||||
|
background-color: #c13584;
|
||||||
|
box-shadow: 8px 8px 14px -8px #c13584;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev {
|
||||||
|
background-color: #000000;
|
||||||
|
box-shadow: 8px 8px 14px -8px #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.facebook {
|
||||||
|
background-color: #3b5998;
|
||||||
|
box-shadow: 8px 8px 14px -8px #3b5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github {
|
||||||
|
background-color: #2b3137;
|
||||||
|
box-shadow: 8px 8px 14px -8px #2b3137;
|
||||||
|
}
|
||||||
|
|
||||||
|
.google {
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 8px 8px 14px -8px #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram {
|
||||||
|
background-color: #c13584;
|
||||||
|
box-shadow: 8px 8px 14px -8px #c13584;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkedin {
|
||||||
|
background-color: #0077b5;
|
||||||
|
box-shadow: 8px 8px 14px -8px #0077b5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium {
|
||||||
|
background-color: #000000;
|
||||||
|
box-shadow: 8px 8px 14px -8px #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paypal {
|
||||||
|
background-color: #3b7bbf;
|
||||||
|
box-shadow: 8px 8px 14px -8px #3b7bbf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitter {
|
||||||
|
background-color: #1da1f2;
|
||||||
|
box-shadow: 8px 8px 14px -8px #1da1f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.youtube {
|
||||||
|
background-color: #ff0000;
|
||||||
|
box-shadow: 8px 8px 14px -8px #ff0000;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue