練習その2

HTML第2弾
更新が遅れましたが模写サイトをまた一つ作成しました

自分の中で少しづつですが前進しているのかなと感じています。
![cat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/2520c7d9-f4f1-a2f3-9ab6-21d1571ab203.png)
![Something went wrong]()
![photo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/e75a3df1-d4be-7f4e-bf2b-f0fcbe8919f5.png)
![turtle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/526596c1-db44-146f-6b4b-80dbae55f98c.png)
![dog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493692/a8674cfa-d854-8ad5-9949-02473dc7de83.png)

未熟ですがコードを載せておきます。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta name="description" content="ページの概要・内容などを記述します。">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="HandheldFriendly" content="True">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta property="〇〇" content="▲▲▲▲">
	<title>山田にゃん太のポートフォリオサイト</title>
	<meta name="description" content="山田にゃん太のポートフォリオサイト">
	<link rel="icon" href="./image/favicon.ico" type="image/png">
	<link rel="canonical" href="サイトURL">
	<link rel="stylesheet" href="./css/sanitize.css">
	<link rel="stylesheet" href="./css/style.css">
</head>

<body>
	<header class="wrapper">
		<img class="photo" src="./image/photo.png" alt="写真アイコン">
		<h1>山田にゃん太</h1>
		<p>ウェブデザイナー見習い</p>
	</header>
	
	<main>
	 <section class="myskills">
	 	<div class="wrapper">
	 		<h2>MY SKILLS</h2>
	 		<ul>
	 			<li class="skill_html5">HTML5</li>
	 			<li class="skill_css3">CSS3</li>
	 			<li class="skill_javascript">JavaScript</li>
	 		</ul>
	 	</div>
		</section>
		<section class="wrapper">
			<h2>WORKS</h2>
			<div class="works_box">
				<img class="works_image" src="image/cat.png" alt="猫のサイト">
				<h3>猫のサイト</h3>
				<p>テキストテキストテキストテキストテキストテキスト</p>
			</div>

			<div class="works_box">
				<img class="works_image" src="image/dog.png" alt="犬のサイト">
				<h3>犬のサイト</h3>
				<p>テキストテキストテキストテキストテキストテキスト</p>
			</div>

			<div class="works_box">
				<img class="works_image" src="image/turtle.png" alt="カメのサイト">
				<h3>カメのサイト</h3>
				<p>テキストテキストテキストテキストテキストテキスト</p>
			</div>
		</section>
	</main>
	<footer>
		<div class="wrapper">
		<p><small>&copy 2021 proglus.jp</small> </p>
		</div>
	</footer>
</body>

</html>

@charset "utf-8";

/*common*/
body {
	margin: 0;
}

img {
	vertical-align: bottom;
}

h1,h2,h3,p {
	margin: 0;
}

.wrapper {
	max-width: 600px;
	margin: 0 auto;
	padding: 30px 4%;
}

/*header*/
header {
	text-align: center;
}

.photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
}

/*main*/
h2 {
	text-align: center;
}
.myskills {
	background-color: #0FEBBA;
}

.myskills ul {
	margin-top: 30px;
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: space-around;
}

.skill_html5 {
	background-color: #F90606;
}

.skill_css3 {
	background-color: #0813F9;
}

.skill_javascript {
	background-color: #F7FA01;
}

.myskills ul li {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
}

/*main*/
.works_box {
	max-width: 450px;
	margin: 40px auto;
}

.works_image {
	width: 100%;
	height: auto;
}

.works_box h3 {
	margin-top: 10px;
}

.works_box p {
	margin-top: 7px;
}

/*footer*/
footer {
	background-color: #050000;
	color: #FFFFFF;
	text-align: center;
}