kazz12211/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>tsubaki guitars & leather</title>
</head>
<body>
    <div id="splash">
        <img src="img/logo.png" alt="" class="logo">
    </div>

    <div class="content">
        <header class="app-header">
            <div class="container">
                <img src="img/logo.png" alt="" class="logo"/>
                <input type="text" class="search" placeholder="Search...."/>
            </div>
        </header>

        <div class="subheader">
            <div>
                <p>ハンドメイドのギターとバッグ</p>
                <p>日々の活動はブログで発信しています <i class="fa fa-chevron-right"></i></p>
            </div>
            <img src="img/article.png" alt=""/>
        </div>

        <div class="grid container">
            <div class="item">
                <h4>ハンドメイド</h4>
                <p>材料の個性を活かすための手作りです</p>
                <img src="img/handmade.png" alt=""/>
            </div>
            <div class="item">
                <h4>製品</h4>
                <p>手頃な価格のハンドメイドギターやバッグ</p>
                <img src="img/product.png" alt=""/>
            </div>
            <div class="item">
                <h4>オーダーギター</h4>
                <p>材料や部品の選定からギターの形式までご要望をお応えします</p>
                <img src="img/guitar.png" alt=""/>
            </div>
            <div class="item">
                <h4>オーダー革・帆布製品</h4>
                <p>素材・色・形・使い勝手などをご要望にお応えします</p>
                <img src="img/to-to.png" alt=""/>
            </div>
            <div class="item">
                <h4>ギター製作講座</h4>
                <p>自分だけのギターを作ってみませんか？</p>
                <img src="img/makeguitar.png" alt=""/>
            </div>
            <div class="item">
                <h4>木で作った自転車</h4>
                <p>木製フレームのロードバイクを開発中です。</p>
                <img src="img/bike.png" alt=""/>
            </div>
       </div>
    </div>

    <footer class="app-footer">
        <ul>
            <li>
                <i class="fa fa-heart"></i>
                ホーム
            </li>
            <li>
                <i class="fa fa-barcode"></i>
                製品
            </li>
            <li>
                <i class="fa fa-user"></i>
                サービス
            </li>
            <li>
                <i class="fa fa-map-marker"></i>
                椿工藝舎
            </li>
        </ul>
    </footer>

    <script>
        setTimeout( () => {
            document.getElementById('splash').classList.toggle('fade');
        }, 2000);
    </script>
</body>
</html>

## style.css
:root {
    --primary-color: #444454;
    --secondary-color: #544444;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
}

.container {
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    overflow: none;
}

.app-header {
    background-color: var(--primary-color);
    box-shadow: 3px 3px 10px #888;
}

.app-header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
}
.app-header .logo {
    width: 300px;
    margin-bottom: 16px;
}

.app-header input[type='text'] {
    padding: 7px;
    width: 300px;
    border: 0;
    border-radius: 3px;
}

.subheader {
    background-color: var(--secondary-color);
    color: #fff;
    box-shadow: 3px 3px 10px #888;
    margin: 0 auto 16px auto;
    width: 90%;
    font-size: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.subheader p {
    margin: 4px;
}
.subheader img {
    width: 40px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.grid .item {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 3px;
    padding: 10px;
    box-shadow: 1px 1px 2px #ccc;
}

.grid .item h4 {
    margin-bottom: 5px;
}

.grid .item p {
    font-size: 12px;
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: 20px;
}
.grid .item img {
    width: 40px;
    align-self: flex-end;
}

.app-footer {
    flex-shrink: 0;
    background: var(--primary-color);
    color: #fff;
    padding: 10px;
    font-size: 14px;
    margin-top: 10px;
}

.app-footer ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

.app-footer ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-footer ul li i {
    font-size: 22px;
    margin-bottom: 10px;
}

#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--primary-color);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transform: all 1s;
}

#splash img {
    width: 300px;
}

#splash.fade {
    opacity: 0;
}

@media(min-width:768px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid .item p {
        font-size: 14px;
    }

    .grid .item img {
        width: 50px;
    }

}

@media(min-width:1024px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid .item p {
        font-size: 14px;
    }

    .grid .item img {
        width: 60px;
    }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Roboto\|Roboto+Mono&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<title>tsubaki guitars & leather</title>
	</head>
	<body>
	<div id="splash">
	<img src="img/logo.png" alt="" class="logo">
	</div>

	<div class="content">
	<header class="app-header">
	<div class="container">
	<img src="img/logo.png" alt="" class="logo"/>
	<input type="text" class="search" placeholder="Search...."/>
	</div>
	</header>

	<div class="subheader">
	<div>
	<p>ハンドメイドのギターとバッグ</p>
	<p>日々の活動はブログで発信しています <i class="fa fa-chevron-right"></i></p>
	</div>
	<img src="img/article.png" alt=""/>
	</div>

	<div class="grid container">
	<div class="item">
	<h4>ハンドメイド</h4>
	<p>材料の個性を活かすための手作りです</p>
	<img src="img/handmade.png" alt=""/>
	</div>
	<div class="item">
	<h4>製品</h4>
	<p>手頃な価格のハンドメイドギターやバッグ</p>
	<img src="img/product.png" alt=""/>
	</div>
	<div class="item">
	<h4>オーダーギター</h4>
	<p>材料や部品の選定からギターの形式までご要望をお応えします</p>
	<img src="img/guitar.png" alt=""/>
	</div>
	<div class="item">
	<h4>オーダー革・帆布製品</h4>
	<p>素材・色・形・使い勝手などをご要望にお応えします</p>
	<img src="img/to-to.png" alt=""/>
	</div>
	<div class="item">
	<h4>ギター製作講座</h4>
	<p>自分だけのギターを作ってみませんか？</p>
	<img src="img/makeguitar.png" alt=""/>
	</div>
	<div class="item">
	<h4>木で作った自転車</h4>
	<p>木製フレームのロードバイクを開発中です。</p>
	<img src="img/bike.png" alt=""/>
	</div>
	</div>
	</div>

	<footer class="app-footer">
	<ul>
	<li>
	<i class="fa fa-heart"></i>
	ホーム
	</li>
	<li>
	<i class="fa fa-barcode"></i>
	製品
	</li>
	<li>
	<i class="fa fa-user"></i>
	サービス
	</li>
	<li>
	<i class="fa fa-map-marker"></i>
	椿工藝舎
	</li>
	</ul>
	</footer>

	<script>
	setTimeout( () => {
	document.getElementById('splash').classList.toggle('fade');
	}, 2000);
	</script>
	</body>
	</html>
	:root {
	--primary-color: #444454;
	--secondary-color: #544444;
	}

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	html,
	body {
	height: 100%;
	}

	body {
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: column;
	}

	.content {
	flex: 1 0 auto;
	}

	.container {
	width: 90%;
	margin: 0 auto;
	padding: 10px;
	overflow: none;
	}

	.app-header {
	background-color: var(--primary-color);
	box-shadow: 3px 3px 10px #888;
	}

	.app-header .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 10px;
	}
	.app-header .logo {
	width: 300px;
	margin-bottom: 16px;
	}

	.app-header input[type='text'] {
	padding: 7px;
	width: 300px;
	border: 0;
	border-radius: 3px;
	}

	.subheader {
	background-color: var(--secondary-color);
	color: #fff;
	box-shadow: 3px 3px 10px #888;
	margin: 0 auto 16px auto;
	width: 90%;
	font-size: 14px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	.subheader p {
	margin: 4px;
	}
	.subheader img {
	width: 40px;
	}

	.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	}

	.grid .item {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: 3px;
	padding: 10px;
	box-shadow: 1px 1px 2px #ccc;
	}

	.grid .item h4 {
	margin-bottom: 5px;
	}

	.grid .item p {
	font-size: 12px;
	color: var(--secondary-color);
	font-weight: bold;
	margin-bottom: 20px;
	}
	.grid .item img {
	width: 40px;
	align-self: flex-end;
	}

	.app-footer {
	flex-shrink: 0;
	background: var(--primary-color);
	color: #fff;
	padding: 10px;
	font-size: 14px;
	margin-top: 10px;
	}

	.app-footer ul {
	display: flex;
	align-items: center;
	justify-content: space-around;
	list-style: none;
	}

	.app-footer ul li {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.app-footer ul li i {
	font-size: 22px;
	margin-bottom: 10px;
	}

	#splash {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--primary-color);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transform: all 1s;
	}

	#splash img {
	width: 300px;
	}

	#splash.fade {
	opacity: 0;
	}

	@media(min-width:768px) {
	.grid {
	grid-template-columns: repeat(3, 1fr);
	}

	.grid .item p {
	font-size: 14px;
	}

	.grid .item img {
	width: 50px;
	}

	}

	@media(min-width:1024px) {
	.grid {
	grid-template-columns: repeat(4, 1fr);
	}

	.grid .item p {
	font-size: 14px;
	}

	.grid .item img {
	width: 60px;
	}
	}