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> </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> <div class="content-wrapper"> <div class="content"> <div class="photo-box"> <img src="img/main-01.jpg" alt=""> </div> <div class="txt-box"> <h2>Lorem, ipsum dolor.</h2> <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis numquam neque earum tempora sequi.</p> <p class="btn"><a href="#">view more</a></p> </div> </div><!-- /.content --> <div class="content"> <div class="photo-box"> <img src="img/main-02.jpg" alt=""> </div> <div class="txt-box"> <h2>Lorem, ipsum dolor.</h2> <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis numquam neque earum tempora sequi.</p> <p class="btn"><a href="#">view more</a></p> </div> </div><!-- /.content --> <div class="content"> <div class="photo-box"> <img src="img/main-03.jpg" alt=""> </div> <div class="txt-box"> <h2>Lorem, ipsum dolor.</h2> <p class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis numquam neque earum tempora sequi.</p> <p class="btn"><a href="#">view more</a></p> </div> </div><!-- /.content --> </div><!-- /.content-wrapper --> <div class="col-1"> <h2>Lorem, ipsum dolor sit amet<br>consectetur adipisicing elit.</h2> <p class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit.<br>Quia dolore ad beatae fuga asperiores ab, quas aut atque nesciunt delectus mollitia suscipit<br>tempore provident perspiciatis et, soluta dolor laboriosam sint!</p> <p class="btn"><a href="#">view more</a></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">アイコン</p> <p class="btn"><a href="#">view more</a></p> </div><!-- /.col-3-txt --> </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">アイコン</p> <p class="btn"><a href="#">view more</a></p> </div><!-- /.col-3-txt --> </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">アイコン</p> <p class="btn"><a href="#">view more</a></p> </div><!-- /.col-3-txt --> </div><!-- /.col-3-box --> </div><!-- /.col-3-wrapper --> <footer> <p><small>© 2022 Furniture-store</small></p> </footer> </body> </html>
style.css
@charset "utf-8"; /* カスタムプロパティ */ :root{ --color_1:#d2e8ed; --color_2:#ede0d2; --color_3:#edecd2; --color_4:#edd2df; } *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } img{ vertical-align: bottom; } /* PCレイアウト */ header{ width: 100%; height: 100px; background-color: var(--color_1); } h1{ text-align: center; line-height: 100px; } #g-nav{ width: 100%; height: 50px; background-color: var(--color_2); } #g-nav>ul{ max-width: 960px; height: 50px; display: flex; margin: 0 auto; justify-content: space-between; align-items: center; } #g-nav a{ color: #222; padding: 10px 20px; } #g-nav a:hover{ text-decoration: underline 4px #e72a6c; text-underline-offset: 4px; } /* content部分 */ .content-wrapper{ padding: 0 10px; } .content{ display: flex; justify-content: space-between; margin-bottom: 10px; } .content:nth-of-type(2){ flex-direction: row-reverse; } .photo-box{ width: calc((100% - 10px) / 3 * 2); height: 500px; } .photo-box>img{ object-fit: cover; width: 100%; height: 100%; } .txt-box{ width: calc((100% - 10px) / 3); background-color: var(--color_3); padding:60px 40px; } .content:nth-of-type(2)>.txt-box{ background-color: var(--color_2); } .content:nth-of-type(3)>.txt-box{ background-color: var(--color_4); } .txt-box>h2{ font-size: 30px; margin-bottom: 40px; } .txt-box>.txt{ margin-bottom: 50px; line-height: 2; } .btn{ width: 60%; height: 50px; margin: 0 auto; background-color: #FFF; } .btn>a{ display: block; line-height: 50px; text-align: center; color: #222; } .btn>a::after{ display: inline-block; content: ""; width: 10px; height: 10px; border-top: 1px solid #222; border-right: 1px solid #222; transform: rotate(45deg); margin-left: 20px; transition: 0.1s } .btn>a:hover::after{ transform: translateX(20px) rotate(45deg); } .col-1{ width: 100%; height: 500px; background-color: var(--color_3); margin-bottom: 10px; text-align: center; padding: 100px; } .col-1>h2{ margin-bottom: 40px; line-height: 2; } .col-1>.txt{ margin-bottom: 30px; line-height: 2; }