7月26日作業データ（モバイルファースト） - ★ゆめの訓練校復習日記★

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>北欧のECサイト風ページ</title>
<meta name="description" content="家具・インテリアの通販サイトです。北欧風の家具を中心に取り扱っています。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Telugu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<header>
<h1>Furniture-store</h1>
<p id="ham-btn"><span></span></p>
</header>
<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>
<div class="sns-wrapper">
<p><img src="img/instagram-brands.svg" alt=""></p>
<p><img src="img/twitter-brands.svg" alt=""></p>
<p><img src="img/line-brands.svg" alt=""></p>
</div>
</nav>

<nav id="g-nav-pc">
<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>


<main>
<div class="content-wrapper">
<div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="txt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta maxime at tempora id temporibus, veritatis distinctio?</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main-01.jpg" alt="">
</div><!-- /.content-img -->
</div><!-- /.content-box -->

<div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="txt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta maxime at tempora id temporibus, veritatis distinctio?</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main-02.jpg" alt="">
</div><!-- /.content-img -->
</div><!-- /.content-box -->
<div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="txt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta maxime at tempora id temporibus, veritatis distinctio?</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main-03.jpg" alt="">
</div><!-- /.content-img -->
</div><!-- /.content-box -->
</div><!-- /.content-wrapper -->

<div class="col-1">
<h2>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, dicta!</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae eos necessitatibus laborum beatae perspiciatis sed saepe.</p>
</div><!-- ./col-1 -->


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

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

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-03.jpg" alt="">
</div><!-- /.col-3-img -->
<div class="col-3-icon">
<h3>Lorem, ipsum.</h3>
<p class="icon"><img src="img/icon-3.svg" alt=""></p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.col-3-icon -->
</div><!-- /.col-3-box -->
</div><!-- /.col-3-wrapper -->
</main>
<footer>
<p><small>&copy; 2022 Furniture-store</small></p>
</footer>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>

style.css

@use "reset";


//カラーの登録
$base_color:#ffffff;
$main_color:#eee7d6;
$color_2:#d6eee9;
$color_3:#e2d6ee;
$color_4:#eed6d6;

//フォントの登録
$title: 'Anek Telugu', sans-serif;


//ブレイクポイントの登録
$point-lsp:480px;
$point-tab:768px;
$point-spc:900px;
$point-pc:1366px;

@mixin lsp {
  @media (min-width:$point-lsp){
  @content;
  }
}
@mixin tab {
  @media (min-width:$point-tab){
  @content;
  }
}
@mixin spc {
  @media (min-width:$point-spc){
  @content;
  }
}
@mixin pc {
  @media (min-width:$point-pc){
  @content;
  }
}

//ボタンのスタイル
.more-btn{
width: 80%;
margin: 0 auto 10px;
background-color: #d6d3ce;
a{
display: block;
text-align: center;
padding: 12px 10px;
color: #333;
&::after{
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(45deg);
margin-left: 20px;
}
}
}

/* spファースト */
body{
background-color: $base_color;
}
#g-nav-pc{
display: none;
@include spc(){
display: block;
width: 100%;
height: 50px;
background-color: $color_2;
position: sticky;
top: 0;
ul{
width: 960px;
height: 50px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
li{
margin: 0 10px;
a{
padding: 20px;
color: #333;
&:hover{
text-decoration: underline 3px;
text-underline-offset: 3px;
}
}
}
}
}
}
header{
width: 100%;
height: 60px;
background-color: $main_color;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
@include spc(){
position: static;
height: 100px;
text-align: center;
display: block;
}
}
h1{
font-family: $title;
font-size: 26px;
@include spc(){
font-size: 36px;
line-height: 100px;
}
}
#ham-btn{
width: 50px;
height: 50px;
position: relative;
cursor: pointer;
span{
display: block;
width: 30px;
height: 4px;
background-color: #333;
position: absolute;
top: 0;
right: 0;
bottom: 14px;
left: 0;
margin: auto;
transition: 0.2s;
&::after{
display: block;
content: "";
width: 30px;
height: 4px;
background-color: #333;
position: absolute;
top: 28px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
}
@include spc(){
display: none;
}
}

#ham-btn.click{
span{
bottom: 0;
transform: rotate(45deg);
&::after{
top: 0;
transform: rotate(90deg);
}
}
}

#g-nav-sp{
display: none;
width: 100%;
height: calc(100vh - 60px);
background-color: $color_2;
position: fixed;
top: 60px;
left: 0;
z-index: 10;
padding: 20px 60px 20px 20px;
li{
margin-bottom: 16px;
a{
display: block;
padding: 8px 0;
color: #333;
border-bottom: 1px solid #333;
}
}
.sns-wrapper{
margin-top: 30px;
display: flex;
justify-content: center;
p{
width: 40px;
height: 40px;
padding: 4px;
margin: 0 10px;
}
}
}

main{
padding: 70px 10px 10px;
max-width: 1366px;
margin: 0 auto;
@include spc(){
padding: 10px;
}
}
.content-box{
display: flex;
flex-direction: column-reverse;
margin-bottom: 10px;
@include tab(){
flex-direction: row-reverse;
justify-content: space-between;
&:nth-of-type(2){
flex-direction: row;
}
}

&:nth-of-type(2)>.content-txt{
background-color: $color_3;
}
&:nth-of-type(3)>.content-txt{
background-color: $color_4;
}
}
.content-img{
width: 100%;
height: 200px;
@include tab(){
width: calc(100% / 3 * 2 - 10px);
height: 600px;
}
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
.content-txt{
padding: 20px;
background-color: $color_2;
@include tab(){
width: calc(100% / 3);
}
h2{
font-family: $title;
font-size: 24px;
text-align: center;
margin-bottom: 10px;
}
.txt{
line-height: 1.8;
margin-bottom: 14px;
font-size: 14px;
}
@include lsp(){
padding: 20px 80px;
}
@include tab(){
padding: 80px 40px;
line-height: 2;
h2{
font-size: 28px;
margin-bottom: 40px;
}
.txt{
margin-bottom: 30px;
font-size: 16px;
}
}
}

/* col-1部分 */
.col-1{
background-color: $main_color;
padding: 30px;
margin-bottom: 10px;
h2{
font-size: 20px;
margin-bottom: 30px;
line-height: 1.7;
}
p{
line-height: 1.8;
}

@include spc(){
padding: 60px;
h2{
max-width: 600px;
margin: 0 auto 40px;
font-size: 24px;
}
p{
max-width: 600px;
margin: 0 auto 40px;
font-size: 18px;
}
}
}

//col-3部分
.col-3-wrapper{
.col-3-img{
width: 100%;
height: 180px;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
.col-3-icon{
padding: 30px;
background-color: $color_2;
h3{
text-align: center;
}
.icon{
width: 80px;
height: 80px;
background-color: #FFF;
border-radius: 50%;
padding: 14px;
margin: 20px auto;
}
.more-btn{
width: 60%;
}
}

@include spc(){
display: flex;
justify-content: space-between;
}
}

.col-3-box:nth-of-type(2){
.col-3-icon{
background-color: $color_3;
}
}
.col-3-box:nth-of-type(3){
.col-3-icon{
background-color: $color_4;
}
}
@include lsp{
.col-3-box{
display: flex;
&:nth-of-type(-n+2){
margin-bottom: 10px;
}
.col-3-img{
width: 50%;
height: 280px;
}
.col-3-icon{
width: 50%;
}
@include spc(){
display: block;
width: calc((100% - 20px) / 3);
.col-3-img{
width: 100%;
height: 260px;
}
.col-3-icon{
width: 100%;
height: 340px;
}
&:nth-of-type(-n+2){
margin-bottom: 0;
}
}
}
}


//footer部分
footer{
width: 100%;
height: 200px;
background-color: $main_color;
p{
text-align: center;
padding-top: 50px;
}
}