-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
125 lines (108 loc) · 6.06 KB
/
contact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- /*!************************************************\
________ _______ ___ ___ ______ _ ____
| ____| | ___ | | | | | |_ _| | \ || / ____|
| | | | | | | | | | | | | \ || | (___
| | | | | | | | | | | | ||\ \ || \___ \
| |____ | |___| | | |____ | |____ | | || \ \|| ____) /
|______| |_______| |______| |______| |_____| || \_ | \_____/
Conception/Is being Used by zecollo https://github.com/zecollokaris
collo
\*************************************************/
/*************************************************\
\*************************************************/
/* ################################################################################################################# */ -->
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>COLLINS KARIUKI | Portfolio - Contact Me</title>
<link rel="shortcut icon" href="images/mylogos/collologobkc.png" type="image/x-icon">
<meta name="author" content="zecollokaris" />
<link rel="stylesheet" type="text/css" href="css/contact.css" />
<link rel="stylesheet" type="text/css" href="css/decolines2.css" />
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<!-- FONT AWESOME -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body class="demo-3">
<svg class="hidden">
<defs>
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-logo" viewBox="0 0 24 24">
<path d="M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</symbol>
</defs>
</svg>
<main>
<div class="dummy">
<div class="dummy__icon"><svg class="icon icon--logo"><use xlink:href="#icon-logo"></use></div>
<div class="dummy__icon"><svg class="icon icon--menu"><use xlink:href="#icon-logo"></use></div>
</div>
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="/index.html" title="Back Home"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
</div>
<h1 class="codrops-header__title">Contact Me!</h1>
<nav style="font-family: 'Abril Fatface', cursive;" class="codrops-demos">
<a href="#"><i style="color: red;" class="fa fa-envelope" aria-hidden="true"></i> collo.kariss@gmail.com</a>
<a href="#"><i style="color: red;" class="fa fa-linkedin" aria-hidden="true"></i> Collins Kariuki</a>
<a class="current-demo" href="#"><i style="color: red;" class="fa fa-github" aria-hidden="true"></i> zecollokaris</a>
<a href="#"><i style="color: red;" class="fa fa-instagram" aria-hidden="true"></i>ze_collo_karis</a>
<a href="#"><i style="color: red;" class="fa fa-medium" aria-hidden="true"></i> collins ink</a>
</nav>
<p style="font-family: 'Abril Fatface', cursive; text-align: center;" class="sponsor">Start the Conversation. Every beautiful relationship starts with a simple<a href="#" rel="nofollow" style="color:blue">"Hello!"</a>So let's chat. It might just be the start of something memorable</p>
</header>
</main>
<script src="js/anime3.min.js"></script>
<script src="js/contact.js"></script>
<script>
(function() {
var lineMaker = new LineMaker({
position: 'fixed',
lines: [
{top: '15%', left: 0, width: '100%', height: 2, color: '#ddd', hidden: true},
{top: '85%', left: 0, width: '100%', height: 2, color: '#ddd', hidden: true},
{top: 0, left: '90%', width: 2, height: '100%', color: '#ddd', hidden: true},
{top: 0, left: '10%', width: 2, height: '100%', color: '#ddd', hidden: true},
{top: '15%', left: 0, width: '100%', height: 2, color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 800, direction: 'LeftRight' }},
{top: '85%', left: 0, width: '100%', height: 2, color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 100, direction: 'RightLeft' }},
{top: 0, left: '90%', width: 2, height: '100%', color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 800, direction: 'BottomTop' }},
{top: 0, left: '10%', width: 2, height: '100%', color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 400, direction: 'TopBottom' }}
]
});
setTimeout(function() {
lineMaker.animateLineIn(4, {
complete: function() { lineMaker.showLine(0); }
});
lineMaker.animateLineIn(5, {
complete: function() { lineMaker.showLine(1); }
});
lineMaker.animateLineIn(6, {
complete: function() { lineMaker.showLine(2); }
});
lineMaker.animateLineIn(7, {
complete: function() { lineMaker.showLine(3); }
});
}, 100);
setTimeout(function() {
lineMaker.animateLineOut(4);
lineMaker.animateLineOut(5);
lineMaker.animateLineOut(6);
lineMaker.animateLineOut(7);
}, 2000);
setTimeout(function() {
lineMaker.createLine({top: '50vh', left: '21vw', width: '60vw', height: 16, color: '#E91E63', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 300, direction: 'LeftRight' }});
lineMaker.animateLineIn(8);
}, 2000);
})();
</script>
</body>
</html>