Skip to content

Commit 15b04cb

Browse files
gitpullpullgitpullpull
authored
Add initial HTML structure and styles
1 parent fec47d5 commit 15b04cb

File tree

1 file changed

+212
-0
lines changed

1 file changed

+212
-0
lines changed

‎index.html‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>gitpullpull - Links</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
16+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17+
min-height: 100vh;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
padding: 20px;
22+
}
23+
24+
.container {
25+
max-width: 600px;
26+
width: 100%;
27+
background: rgba(255, 255, 255, 0.95);
28+
backdrop-filter: blur(10px);
29+
border-radius: 24px;
30+
padding: 48px 40px;
31+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
32+
}
33+
34+
.profile {
35+
text-align: center;
36+
margin-bottom: 40px;
37+
}
38+
39+
.avatar {
40+
width: 120px;
41+
height: 120px;
42+
border-radius: 50%;
43+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
margin: 0 auto 20px;
48+
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
49+
overflow: hidden;
50+
}
51+
52+
.avatar img {
53+
width: 100%;
54+
height: 100%;
55+
object-fit: cover;
56+
}
57+
58+
h1 {
59+
font-size: 32px;
60+
color: #2d3748;
61+
margin-bottom: 8px;
62+
font-weight: 700;
63+
}
64+
65+
.subtitle {
66+
color: #718096;
67+
font-size: 16px;
68+
}
69+
70+
.links {
71+
display: flex;
72+
flex-direction: column;
73+
gap: 16px;
74+
}
75+
76+
.link-item {
77+
display: flex;
78+
align-items: center;
79+
padding: 20px 24px;
80+
background: white;
81+
border: 2px solid #e2e8f0;
82+
border-radius: 16px;
83+
text-decoration: none;
84+
color: #2d3748;
85+
transition: all 0.3s ease;
86+
position: relative;
87+
overflow: hidden;
88+
}
89+
90+
.link-item:hover {
91+
transform: translateY(-4px);
92+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
93+
border-color: #667eea;
94+
}
95+
96+
.link-item::before {
97+
content: '';
98+
position: absolute;
99+
top: 0;
100+
left: 0;
101+
width: 100%;
102+
height: 100%;
103+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
104+
opacity: 0;
105+
transition: opacity 0.3s ease;
106+
z-index: -1;
107+
}
108+
109+
.link-item:hover::before {
110+
opacity: 0.05;
111+
}
112+
113+
.icon {
114+
width: 32px;
115+
height: 32px;
116+
margin-right: 16px;
117+
flex-shrink: 0;
118+
}
119+
120+
.link-content {
121+
flex: 1;
122+
}
123+
124+
.link-title {
125+
font-size: 18px;
126+
font-weight: 600;
127+
margin-bottom: 4px;
128+
color: #2d3748;
129+
}
130+
131+
.link-description {
132+
font-size: 14px;
133+
color: #718096;
134+
}
135+
136+
.arrow {
137+
color: #cbd5e0;
138+
font-size: 20px;
139+
transition: transform 0.3s ease;
140+
}
141+
142+
.link-item:hover .arrow {
143+
transform: translateX(4px);
144+
color: #667eea;
145+
}
146+
147+
@media (max-width: 640px) {
148+
.container {
149+
padding: 32px 24px;
150+
}
151+
152+
h1 {
153+
font-size: 28px;
154+
}
155+
156+
.link-item {
157+
padding: 16px 20px;
158+
}
159+
160+
.link-title {
161+
font-size: 16px;
162+
}
163+
}
164+
</style>
165+
</head>
166+
<body>
167+
<div class="container">
168+
<div class="profile">
169+
<div class="avatar">
170+
<img src="icon-git.png" alt="gitpullpull">
171+
</div>
172+
<h1>gitpullpull</h1>
173+
<p class="subtitle">Developer • Creator</p>
174+
</div>
175+
176+
<div class="links">
177+
<a href="https://github.com/gitpullpull" class="link-item" target="_blank" rel="noopener noreferrer">
178+
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
179+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
180+
</svg>
181+
<div class="link-content">
182+
<div class="link-title">GitHub</div>
183+
<div class="link-description">@gitpullpull</div>
184+
</div>
185+
<span class="arrow">→</span>
186+
</a>
187+
188+
<a href="https://qiita.com/gitpullpull" class="link-item" target="_blank" rel="noopener noreferrer">
189+
<svg class="icon" viewBox="0 0 24 24" fill="#55C500">
190+
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm-1.5 5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm0 4c-.828 0-1.5.672-1.5 1.5v4c0 .828.672 1.5 1.5 1.5s1.5-.672 1.5-1.5v-4c0-.828-.672-1.5-1.5-1.5z"/>
191+
</svg>
192+
<div class="link-content">
193+
<div class="link-title">Qiita</div>
194+
<div class="link-description">@gitpullpull</div>
195+
</div>
196+
<span class="arrow">→</span>
197+
</a>
198+
199+
<a href="https://twitter.com/gitpullpull" class="link-item" target="_blank" rel="noopener noreferrer">
200+
<svg class="icon" viewBox="0 0 24 24" fill="#1DA1F2">
201+
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
202+
</svg>
203+
<div class="link-content">
204+
<div class="link-title">Twitter</div>
205+
<div class="link-description">@gitpullpull</div>
206+
</div>
207+
<span class="arrow">→</span>
208+
</a>
209+
</div>
210+
</div>
211+
</body>
212+
</html>

0 commit comments

Comments
 (0)