Skip to content

Commit 7a9ca99

Browse files
MattCSmithMattCSmith
authored
Merge pull request #2868 from annenuno/annenuno
added my css work
2 parents 64a0eea + f0c1b46 commit 7a9ca99

File tree

3 files changed

+117
-0
lines changed

3 files changed

+117
-0
lines changed

‎Art/annenuno-HeaderDesign/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Halloween Hacktoberfest</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container w-container">
13+
<h1 class="font-class">Happy Hacktoberfest!</h1>
14+
<p>I made this minimalistic yet sophisticated button</p>
15+
<a href="https://github.com/annenuno" target="_blank" class="cta">
16+
<span>Check my GitHub!</span>
17+
<svg width="15px" height="10px" viewBox="0 0 13 10">
18+
<path d="M1,5 L11,5"></path>
19+
<polyline points="8 1 12 5 8 9"></polyline>
20+
</svg>
21+
</a>
22+
23+
</div>
24+
</body>
25+
26+
</html>

‎Art/annenuno-HeaderDesign/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "HeaderDesign",
3+
"githubHandle": "annenuno"
4+
}

‎Art/annenuno-HeaderDesign/styles.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.container {
2+
position: relative;
3+
height: auto;
4+
max-width: 790px;
5+
padding-right: 0px;
6+
margin-top: auto;
7+
margin-bottom: auto;
8+
padding-top: 200px;
9+
}
10+
.w-container {
11+
margin-left: auto;
12+
margin-right: auto;
13+
}
14+
.font-class {
15+
font-family: "Ubuntu", sans-serif;
16+
font-weight: 700;
17+
letter-spacing: 0.05em;
18+
color: #234567;
19+
}
20+
p {
21+
font-family: "Ubuntu", sans-serif;
22+
/* padding-top: 10px; */
23+
padding-bottom: 50px;
24+
}
25+
.cta {
26+
position: relative;
27+
margin: auto;
28+
/* margin: 20px 20px; */
29+
padding: 12px 18px;
30+
padding-top: 15px;
31+
transition: all 0.2s ease;
32+
border: none;
33+
background: none;
34+
cursor: pointer;
35+
text-decoration-line: none;
36+
/* margin-top: 10px; */
37+
/* display: flex; */
38+
/* width: fit; */
39+
}
40+
41+
.cta:before {
42+
content: "";
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
display: block;
47+
border-radius: 50px;
48+
background: #b1dae7;
49+
width: 45px;
50+
height: 45px;
51+
transition: all 0.3s ease;
52+
}
53+
54+
.cta span {
55+
position: relative;
56+
font-family: "Ubuntu", sans-serif;
57+
font-size: 18px;
58+
font-weight: 700;
59+
letter-spacing: 0.05em;
60+
color: #234567;
61+
}
62+
63+
.cta svg {
64+
position: relative;
65+
top: 0;
66+
margin-left: 10px;
67+
fill: none;
68+
stroke-linecap: round;
69+
stroke-linejoin: round;
70+
stroke: #234567;
71+
stroke-width: 2;
72+
transform: translateX(-5px);
73+
transition: all 0.3s ease;
74+
}
75+
76+
.cta:hover:before {
77+
width: 100%;
78+
background: #b1dae7;
79+
}
80+
81+
.cta:hover svg {
82+
transform: translateX(0);
83+
}
84+
85+
.cta:active {
86+
transform: scale(0.95);
87+
}

0 commit comments

Comments
 (0)