-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
188 lines (167 loc) · 7.04 KB
/
Copy pathindex.html
File metadata and controls
188 lines (167 loc) · 7.04 KB
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Yuto Urushima</title>
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Poiret+One&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="responsive.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<header>
<div class="top">
<div class="header-left">
<h1 id="site-title"><a href="#">Yuto Urushima</a></h1>
</div>
<div class="header-right">
<!-- responsive jQuery menu dealing -->
<span class="fa fa-bars" id="hidden-switch"></span>
<ul class="hidden-menu" id="hidden-menu">
<i class="fas fa-times" id="close"></i>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- responsive end -->
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div class="slideshow">
<img src="images/back-image.png" alt="">
<img src="images/back-image2.png" alt="">
<img src="images/back-image3.png" alt="">
</div>
</header>
<main>
<div class="about" id="about">
<h2 class="title">About</h2>
<div class="about-container">
<div class="content">
<img src="images/about1.png" width="550" class="about-left">
<div class="about-right show-contents">
<h3>自分の生い立ちと半生について</h3>
<p>福岡県北九州市出身。<br>
九州大学工学部建築学科卒。<br>
幼稚園から水泳、小学校6年生からサッカーを始めている。<br>
大学では2つのフットサルサークルの代表を経験。<br>
また、世界の国と地域6つを旅した経験アリ。<br>
180cm o型 いて座。
</p>
</div>
<div class="clear"></div>
</div>
<div class="content">
<img src="images/about2.png" width="550" class="about-right">
<div class="about-left show-contents">
<h3>プログラミング学習の「経緯」</h3>
<p>大学3年生の夏にTwitterで"Progate"の存在を知り、<br>
早速プログラミングに挑戦。<br>
その後、興味が広がり、色々な言語を広く浅く触る。<br>
大学卒業までの2年間弱の間、大学のカリキュラムを縫って<br>
プログラミングを独学する。<br>
大学4年生時の研究配属において、第一希望の研究室に落ちたことを<br>
キッカケにIT業界を志した。</p>
</div>
<div class="clear"></div>
</div>
<div class="content">
<img src="images/about3.png" width="550" class="about-left">
<div class="about-right show-contents">
<h3>人生の目標と理想</h3>
<p>人生100年時代の「ライフモデル」を探せるサービスの開発が<br>
エンジニアとしての1つの目標。<br>
その他、エンジニアとしての技能をある程度、身に付けたら<br>
挑戦してみたいサービスの構想はたくさんアリ。<br>
人生の目標はフルスタックエンジニアになること。<br>
もし、一人で仕事を取れるようになったら、世界中を旅しながら<br>
働きたい。<br>
そうやって、世界中の色んな国を回るのが現在の夢。</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="portfolio" id="portfolio">
<h2 class="title">Portfolio</h2>
<div class="portfolio-container">
<div class="works">
<a href="http://crack-fukuoka.site/" alt=""><img src="images/crack.png" height=250px id="works-image"></a>
<h3>フットサルサークルCRACK</h3>
<p>フットサルサークルCRACKのホームページを制作</p>
</div>
<div class="works">
<div class="box">
<h3 class="other-work">Coming soon!!</h3>
</div>
</div>
<div class="works">
<div class="box">
<h3 class="other-work">Coming soon!!</h3>
</div>
</div>
</div>
</div>
<div class="Blog" id="blog">
<h2 class="title">Blog</h2>
<div class="container">
<a href="https://lucy-travel.com/"><img src="images/lucytravel.png" class="blog-img"></a>
<h2>旅行系ブログ "Lucy Travel"</h2>
<p>"Lucy Travel"を運営中。<br>
このブログを主に、旅行系のコンテンツを発信。<br>
また、テクノロジーや学生生活のコンテンツも併せて発信中。<br>
<div class="link"><i class="fas fa-external-link-alt"></i><a href="https://lucy-travel.com/">Lucy-travel.com</a></div>
</p>
</div>
</div>
<div class="contact" id="contact">
<h2 class="title">Conrtact</h2>
<h5>お問い合わせは下記のフォームよりお願いいたします。</h5>
<div class="contact-container">
<label for="name">お名前</label>
<input id="name" type="text" name="yourname" placeholder="このフォームはまだ稼働していないので">
<label for="sex">性別</label>
<select name="sex">
<option value="male">男</option>
<option value="female">女</option>
<option value="others">その他</option>
</select>
<label for="mail">メールアドレス</label>
<input id="mail" type="email" name="mail" placeholder="本当に御用のある方は">
<label for="comment">お問い合わせ内容</label>
<textarea>yuto259233@gmail.com まで連絡をお願いいたします。
</textarea>
<input id="comment" type="submit" value="送信" class="btn">
</div>
</div>
<h1 class="thankyou">Thank you for viewing my Website!!</h1>
<p>※jQuery導入中です。</p>
<p>※レスポンシブ対応実装中です</p>
</main>
<footer>
<div class="footer-left">
<a href="#"><h3 id="footer-title">Yuto Urushima</h3></a>
</div>
<div class="footer-right">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="clear"></div>
<small>Copyright©2020 @Yuto Urushima All Rights Reserved</small>
</footer>
<script src="script.js"></script>
</body>
</html>
<!-- <span id="show-message">CRACK HPを見てみる</span> -->