2月17日の作業データ（Furniture-store）

natsu

2023-02-20


webサイト制作

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Furniture-store</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Furniture-store</h1>
<p id="ham-btn"><span></span></p>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<nav id="g-nav-sp">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<div class="content-wrapper">
<div class="content-box">
<div class="content-img">
<img src="img/main-01.jpg" alt="">
</div><!-- /.content-img -->
<div class="content-txt">
<h2>Lorem, ipsum dolor</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut asperiores tenetur consequuntur ullam non vel!</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
</div><!-- /.content-box -->

<div class="content-box">
<div class="content-img">
<img src="img/main-02.jpg" alt="">
</div><!-- /.content-img -->
<div class="content-txt">
<h2>Lorem, ipsum dolor</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut asperiores tenetur consequuntur ullam non vel!</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
</div><!-- /.content-box -->

<div class="content-box">
<div class="content-img">
<img src="img/main-03.jpg" alt="">
</div><!-- /.content-img -->
<div class="content-txt">
<h2>Lorem, ipsum dolor</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut asperiores tenetur consequuntur ullam non vel!</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
</div><!-- /.content-box -->
</div><!-- /.content-wrapper -->


<div class="col-1">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo perspiciatis laboriosam repudiandae.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus amet blanditiis possimus! Veniam, cumque reiciendis.</p>
</div><!-- /.col-1 -->

<div class="col-3-wrapper">
<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-1.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor</h2>
<p class="icon"><img src="img/icon-01.svg" alt=""></p>
<p class="more-btn"><a href="#">view more</a></p>
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-2.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor</h2>
<p class="icon"><img src="img/icon-02.svg" alt=""></p>
<p class="more-btn"><a href="#">view more</a></p>
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-3.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor</h2>
<p class="icon"><img src="img/icon-03.svg" alt=""></p>
<p class="more-btn"><a href="#">view more</a></p>
</div>
</div><!-- /.col-3-box -->
</div><!-- /.col-3-wrapper -->
<footer>
<p><small>&copy; 2010-2023 Furniture-store All rights received</small></p>
</footer>
<div id="curtain">
<p id="logo">
<svg version="1.1" id="text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 596 58" style="enable-background:new 0 0 596 58;" xml:space="preserve">
<g id="XMLID_2_">
	<path id="XMLID_3_" d="M7.2,49c0.2-3.2,0.2-16,0.2-17.5v-8c0-1-0.1-15.4-0.2-17.2c4.9,0,20-0.7,26.3-0.9l0.2,9.9l-13.2,0.3v9.2
		c1.3,0,5.3-0.4,12.1-0.5l0.2,9.5l-12.2-0.1v5.1c0,1,0.1,9.3,0.1,10.1H7.2z"/>
	<path id="XMLID_5_" d="M55.1,25.4c0,8.2,0.4,11.6,2.5,13.9c1.1,1.2,2.5,1.7,4.2,1.7c1.9,0,3.4-0.8,4.4-2.2c1.5-2.1,1.6-4,1.6-15.6
		v-1.9c0-3.5-0.2-7.1-0.3-8.9h13.2c0,1.1,0.1,5,0.1,9v2.4c0,9.8-0.7,15.7-4.7,20.4c-3.3,3.8-8.9,5.8-14.9,5.8
		c-4.4,0-11.4-0.7-15.5-6.4c-2.6-3.7-3.7-7.5-3.7-19.9v-2.8c0-2.3,0.1-6.6,0.1-7.7h13.4c-0.2,1.3-0.3,4.2-0.3,8.9V25.4z"/>
	<path id="XMLID_7_" d="M104,33.4c0,1.9,0.1,14.8,0.2,15.6H91.3c0.2-1.2,0.2-13.3,0.2-14.3v-8.3c0-1.6-0.1-12.6-0.2-13.6
		c7.7,0,15.3-0.1,20.5,0.6c8,1,12.4,4.1,12.4,8.8c0,4.3-2.5,7.5-6.8,10.2c1.6,1.7,9.5,9.1,11,10.7l-10.7,7.7
		c-1.3-1.9-11.2-16.3-12.7-18.5c2.8-1.4,6-3.9,6-7.7c0-2.4-1.6-4.4-7-4.4V33.4z"/>
	<path id="XMLID_9_" d="M132.9,49c0.4-3.6,1.7-29.8,2.2-36.5l1-0.3c7.7,5,24.4,16.7,25.6,17.9c0-2.8-0.1-15.3-0.1-17.5l11.8,0.2
		c-0.4,4-0.9,11.6-1.3,19.1c-0.4,7.4-0.8,14.6-1,17.9l-1,0.2c-5.5-3.3-23.2-16.1-25.4-17.9c0,2.6,0,15.8,0.1,17.3L132.9,49z"/>
	<path id="XMLID_11_" d="M196.7,33.6c0,5.1,0.2,14.2,0.2,15.4h-13.3c0.1-2.2,0.1-14.2,0.1-15.5V28c0-0.9-0.1-14-0.1-15.2H197
		c-0.1,1-0.2,9.2-0.2,15.3V33.6z"/>
	<path id="XMLID_13_" d="M214.9,49c0.1-1.3,0.1-8.6,0.1-14.1V22c-2.2,0-10,0.2-11.7,0.3v-9.4c2.5,0.2,15.4,0.4,16,0.4h4.7
		c1,0,13-0.2,15.6-0.4v9.4c-1-0.1-11.1-0.3-11.6-0.3v13.7c0,5.3,0.1,12.3,0.2,13.3H214.9z"/>
	<path id="XMLID_15_" d="M257.7,25.4c0,8.2,0.4,11.6,2.5,13.9c1.1,1.2,2.5,1.7,4.2,1.7c1.9,0,3.4-0.8,4.4-2.2
		c1.5-2.1,1.6-4,1.6-15.6v-1.9c0-3.5-0.2-7.1-0.3-8.9h13.2c0,1.1,0.1,5,0.1,9v2.4c0,9.8-0.7,15.7-4.7,20.4
		c-3.3,3.8-8.9,5.8-14.9,5.8c-4.4,0-11.4-0.7-15.5-6.4c-2.6-3.7-3.7-7.5-3.7-19.9v-2.8c0-2.3,0.1-6.6,0.1-7.7H258
		c-0.2,1.3-0.3,4.2-0.3,8.9V25.4z"/>
	<path id="XMLID_17_" d="M306.5,33.4c0,1.9,0.1,14.8,0.2,15.6h-12.9c0.2-1.2,0.2-13.3,0.2-14.3v-8.3c0-1.6-0.1-12.6-0.2-13.6
		c7.7,0,15.3-0.1,20.5,0.6c8,1,12.4,4.1,12.4,8.8c0,4.3-2.5,7.5-6.8,10.2c1.6,1.7,9.5,9.1,11,10.7l-10.7,7.7
		c-1.3-1.9-11.2-16.3-12.7-18.5c2.8-1.4,6-3.9,6-7.7c0-2.4-1.6-4.4-7-4.4V33.4z"/>
	<path id="XMLID_19_" d="M362.4,49.5c-2.2,0-21.9-0.5-25.1-0.5c0.1-2.7,0.1-13.6,0.1-14.8v-6.8c0-0.8-0.1-13.1-0.1-14.6
		c3.4,0,21.7-0.7,24-0.9l0.2,8.8c-2,0-10.6,0.3-11.6,0.3v6.2c1.1,0,7.4-0.2,9.8-0.5l0.1,8.5c-1.4,0-8.7-0.2-9.9-0.2v5.5
		c1.4,0,9.7,0.1,12.2-0.1L362.4,49.5z"/>
	<path id="XMLID_21_" d="M369.5,22.9c3.1,0.1,16.9,0.2,20.3,0.1l0.2,8.5c-3.4-0.1-17.9,0.5-20.2,0.7L369.5,22.9z"/>
	<path id="XMLID_23_" d="M396.8,40.9c5.9,0.1,12.1-0.8,12.1-3.3c0-1.1-1.1-1.9-5.6-3.8c-3.5-1.6-8-4-8-8.8c0-6.3,8.8-12.5,23.3-13.3
		l1.4,9.2c-7.4,0-11.2,0.5-11.2,2.6c0,1.3,2,2,5.5,3.4c2.9,1.1,8.2,3.3,8.2,8.4c0,6.2-7.1,13.3-24.3,14.6L396.8,40.9z"/>
	<path id="XMLID_25_" d="M436.7,49c0.1-1.3,0.1-8.6,0.1-14.1V22c-2.2,0-10,0.2-11.7,0.3v-9.4c2.5,0.2,15.4,0.4,16,0.4h4.7
		c1,0,13-0.2,15.6-0.4v9.4c-1-0.1-11.1-0.3-11.6-0.3v13.7c0,5.3,0.1,12.3,0.2,13.3H436.7z"/>
	<path id="XMLID_27_" d="M464.9,32.4c0-9.8,7.6-20.4,23.8-20.4c13.1,0,21.1,6.7,21.1,17.9c0,7.7-5.4,19.9-23.8,19.9
		C471.3,49.8,464.9,40.5,464.9,32.4z M495.8,30.3c0-6.5-2.9-10-7.9-10c-5.9,0-9.1,5.2-9.1,11.3c0,6.7,3.5,10,7.7,10
		C492.2,41.6,495.8,37.8,495.8,30.3z"/>
	<path id="XMLID_30_" d="M531.5,33.4c0,1.9,0.1,14.8,0.2,15.6h-12.9c0.2-1.2,0.2-13.3,0.2-14.3v-8.3c0-1.6-0.1-12.6-0.2-13.6
		c7.7,0,15.3-0.1,20.5,0.6c8,1,12.4,4.1,12.4,8.8c0,4.3-2.5,7.5-6.8,10.2c1.6,1.7,9.5,9.1,11,10.7l-10.7,7.7
		c-1.3-1.9-11.2-16.3-12.7-18.5c2.8-1.4,6-3.9,6-7.7c0-2.4-1.6-4.4-7-4.4V33.4z"/>
	<path id="XMLID_32_" d="M587.4,49.5c-2.2,0-21.9-0.5-25.1-0.5c0.1-2.7,0.1-13.6,0.1-14.8v-6.8c0-0.8-0.1-13.1-0.1-14.6
		c3.4,0,21.7-0.7,24-0.9l0.2,8.8c-2,0-10.6,0.3-11.6,0.3v6.2c1.1,0,7.4-0.2,9.8-0.5l0.1,8.5c-1.4,0-8.7-0.2-9.9-0.2v5.5
		c1.4,0,9.7,0.1,12.2-0.1L587.4,49.5z"/>
</g>
</svg>
</p>
</div>




<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'></script>
<script>
$(function(){
//ハンバーガーメニュー
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');

});

//ローディングアニメーション
$('#curtain').delay(1800).fadeOut(1000);

});
</script>
</body>
</html>


style.css

@charset "utf-8";
:root{
--color_1:#c5eed7;
--color_2:#e6eec5;
--color_3:#eed7c5;
}

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search][type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}img{max-width: 100%;}

/* spレイアウト */
header{
width: 100%;
height: 60px;
background-color: var(--color_1);
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
h1{
width: 240px;
height: 50px;
background: url(../img/logo.svg) no-repeat center center/contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
} #ham -btn{
width: 44px;
height: 44px;
background-color: #FFF ;
position: relative;
} #ham -btn>span{
display: block;
width: 26px;
height: 3px;
background-color: #222 ;
position: absolute;
top: -14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
} #ham -btn>span::after{
display: block;
content: "";
width: 26px;
height: 3px;
background-color: #222 ;
position: absolute;
top: 14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
} #ham -btn.is-active>span{
transform: rotate(495deg);
top: 0;
} #ham -btn.is-active>span::after{
transform: rotate(-450deg);
top: 0;
}



/* ナビゲーション */ #g -nav{
display: none;
} #g -nav-sp{
display: none;
width: 100%;
height: calc(100vh - 60px);
background-color: var(--color_2);
position: fixed;
top: 60px;
left: 0;
z-index: 10;
padding: 40px;
} #g -nav-sp li{
margin-bottom: 20px;
} #g -nav-sp a{
display: block;
padding: 10px;
border-bottom: 2px solid #222 ;
color: #222 ;
}


.content-wrapper{
padding: 70px 10px 0;
}
.content-img{
width: 100%;
height: 40vh;
margin-bottom: 10px;
}
.content-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.content-txt{
width: 100%;
height: 50vh;
background-color: var(--color_3);
margin-bottom: 10px;
padding: 20px;
}
.content-box:nth-of-type(2)>.content-txt{
background-color: var(--color_2);
}
.content-txt>h2{
margin-bottom: 16px;
text-align: center;
}
.text{
margin-bottom: 20px;
line-height: 1.7;
}
.more-btn>a {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0.8em 1.6em;
width: 280px;
color: #333 ;
font-size: 16px;
font-weight: 700;
background-color: #fafafa ;
box-shadow: 5px 5px 0 #8ca7b2 ;
transition: 0.3s;
}
.more-btn>a:hover {
text-decoration: none;
background-color: #a0c4d3 ;
box-shadow: 0 0 0;
}

.col-1{
margin: 0 10px 10px;
padding: 20px;
background-color: var(--color_1);
}
.col-1>h2{
margin-bottom: 20px;
}
.col-1>p{
line-height: 1.7;
margin-bottom: 30px;
}

.col-3-wrapper{
padding: 0 10px;
}
.col-3-box{
margin-bottom: 10px;
}
.col-3-img{
width: 100%;
height: 35vh;
}
.col-3-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.col-3-txt{
text-align: center;
padding: 20px;
background-color: var(--color_2);
}
.col-3-txt>h2{
margin-bottom: 20px;
}
.icon{
width: 80px;
height: 80px;
background-color: #ffffff ;
border-radius: 50%;
padding: 12px;
margin: 0 auto 20px;
}
.col-3-txt>.more-btn{
margin-bottom: 20px;
}
footer{
margin: 0 10px 10px;
background-color: var(--color_1);
padding: 40px 20px;
}
footer>p{
text-align: center;
}


/* ローディングアニメーション */ #curtain {
display: none;/* 最後に取る */
width: 100%;
height: 100vh;
background-color: var(--color_1);
position: fixed;
top: 0;
left: 0;
z-index: 100;
} #logo {
width: 80%;
margin: 100px auto 0;
} #text  path{
fill: var(--color_1);
stroke: #000 ;
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: logo 1.2s 0.4s linear forwards;
}
@keyframes logo{
0%{stroke-dashoffset: 200px;}
80%{stroke-dashoffset: 0;fill: var(--color_1);}
100%{stroke-dashoffset: 0;fill: #000 ;}
}

この記事が気に入ったらサポートをしてみませんか？