4月18日の作業データ（CG-BIM Studio） - ★ゆめの訓練校復習日記★

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>CG-BIM Studio</title>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<header>
<h1><a href="#">CG-BIM Studio</a></h1>
<nav id="g-nav">
<ul>
<li><a href="#">私たちについて</a>
<div class="drop-menu">
<div class="drop-inner">
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
お知らせ</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
コンセプト</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
事業内容</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
会社について</a></p>
</div><!-- /.drop-inner -->
</div><!-- /.drop-menu -->
</li>

<li><a href="#">サービスについて</a>
<div class="drop-menu">
<div class="drop-inner">
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
制作の流れ</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
利用者の声</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
よくある質問</a></p>
</div><!-- /.drop-inner -->
</div><!-- /.drop-menu -->
</li>

<li><a href="#">実績紹介</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>


<button id="ham-btn" type="button"><span></span></button>
<nav id="g-nav-sp">
<ul>
<li><a href="#">私たちについて</a>
<div class="drop-menu">
<p><a href="#">お知らせ</a></p>
<p><a href="#">コンセプト</a></p>
<p><a href="#">事業内容</a></p>
<p><a href="#">会社について</a></p>
</div><!-- /.drop-menu -->
</li>

<li><a href="#">サービスについて</a>
<div class="drop-menu">
<p><a href="#">制作の流れ</a></p>
<p><a href="#">利用者の声</a></p>
<p><a href="#">よくある質問</a></p>
</div><!-- /.drop-menu -->
</li>

<li><a href="#">実績紹介</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>




<main>
<div class="main-visual">
<img src="img/top-main-01.webp" alt="" width="1920" height="960">
</div>


<section id="news">
<h2 data-en="News">ニュース</h2>
<div class="news-wrapper">
<div class="news-box">
<a href="#">
<h3>記事タイトル</h3>
<p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
<p class="post-date">2023.04.18</p>
</a>
</div><!-- /.news-box -->

<div class="news-box">
<a href="#">
<h3>記事タイトル</h3>
<p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
<p class="post-date">2023.04.17</p>
</a>
</div><!-- /.news-box -->

<div class="news-box">
<a href="#">
<h3>記事タイトル</h3>
<p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
<p class="post-date">2023.04.16</p>
</a>
</div><!-- /.news-box -->

<div class="news-box">
  <a href="#">
  <h3>記事タイトル</h3>
  <p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
  <p class="post-date">2023.04.15</p>
</a>
</div><!-- /.news-box -->
</div><!-- /.news-wrapper -->

</section><!-- /#news -->

<section id="concept">
<h2 data-en="Concept">コンセプト</h2>
</section><!-- /#news -->

<section id="service">
<h2 data-en="Service">サービス</h2>
</section><!-- /#service -->

<section id="works">
<h2 data-en="Works">実績紹介</h2>
</section><!-- /#works -->

<section id="about">
<h2 data-en="About">会社について</h2>
</section><!-- /#about -->
</main>

<footer></footer>
</body>
</html>

style.scss

@use "reset";

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=RocknRoll+One&display=swap');

//変数の登録
$font_en: 'Kanit', sans-serif;
$font_ja:'RocknRoll One', sans-serif;

//レイアウトシフト用
img{
object-fit: cover;
width: 100%;
height: 100%;
}

//sp用のナビ
#g-nav-sp{
display: none;
}
body{
height: 2000px;
}


//header部分
header{
width: 96%;
height: 70px;
background-color: #ffffffaa;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
z-index: 10;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 8px #717171;
}

h1{
width: 25%;
padding-left: 20px;
a{
color: #222;
}
}

#g-nav{
width: 75%;
ul{
display: flex;
justify-content: right;
position: relative;
li{
margin: 0 14px;
a{
color: #222;
padding: 20px 14px;
&:hover{
text-decoration: underline 2px;
text-underline-offset: 2px;
}
}
}
}
}


.drop-menu{
position: absolute;
left: 0;
top: 40px;
width: 100%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
.drop-inner{
display: flex;
align-items: center;
background-color: #ffffff;
border-radius: 10px;
height: 160px;
margin-top: 20px;
}
p{
margin: 0 40px;
}
img{
display: block;
margin-bottom: 6px;
}
}

#g-nav li:hover>.drop-menu{
opacity: 1;
visibility: visible;
}





//main-visual部分
.main-visual{
width: 100%;
height: 100vh;
margin-bottom: 200px;
}
.main-visual>img{
object-fit: cover;
width: 100%;
height: 100%;
}


//お知らせ部分
.news-wrapper{
max-width: 1200px;
margin: 50px auto;
display: flex;
gap: 40px;
.news-box{
a{
display: flex;
flex-direction: column;
color: #222;
h3{
order: 2;
margin: 10px 0 6px;
}
.post-img{
order: 1;
}
.post-date{
order: 3;
text-align: right;
}
}
}
}