github pages:https://rochelwang1205.github.io/sweetie/
github repo:https://github.com/rochelwang1205/sweetie
在_nav.scss及_footer.scss中撰寫,也記得要在all.scss中引入!
//all.scss
@import './layout/nav';
@import './layout/footer';
<nav>
<a href="#" class="d-desktop-none"><span class="material-icons">reorder</span></a>
<h1><a href="#" class="logo"><img src="./assets/images/nav/logo-all-dark.svg" alt="logo"></a></h1>
<ul class="page_btn d-mobile-none">
<li><a href="#">首頁</a></li>
<li><a href="#">甜點</a></li>
<li><a href="#">登入</a></li>
</ul>
<a href="#"><span class="material-icons">shopping_cart</span></a>
</nav>
nav {
display: flex;
justify-content: space-between;
align-items: center;
margin:42px;
ul {
display: flex;
gap:60px;
font-weight: bold;
}
img {
width: 100%;
height:40px;
}
}
<footer>
<div class="info">
<div class="contact_info">
<div>
<img src="./assets/images/footer/logotype-sm-dark.svg" alt="logo" class="logo">
</div>
<div>
<p>07-1234-5678</p>
<p>sweetaste@email.com</p>
<p>800 高雄市新興區幸福路 520 號</p>
</div>
</div>
<img src="./assets/images/footer/sm-今天是個吃甜點的好日子.svg" alt="今天是個吃甜點的好日子" class="slogan">
</div>
<div class="link">
<div class="outside_link">
<img src="./assets/images/footer/ic-line@.svg" alt="email_icon" class="icon">
<img src="./assets/images/footer/ic-facebook.svg" alt="facebook_icon" class="icon">
</div>
<div>
<p>© 2018 Sweetaste All Rights Reserved</p>
</div>
</div>
</footer>
footer{
background-color: #EAF0ED;
color: #3F5D45;
padding: 40px 122px 30px 122px;
margin: 0 auto;
.info{
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.slogan{
width: 60px;
}
.contact_info{
display: flex;
justify-content: space-between;
flex-direction: column;
line-height: 1.5;
font-weight: 400;
.logo{
width: 172px;
}
}
}
.link{
display: flex;
justify-content: space-between;
align-items: baseline;
.outside_link{
width: 32px;
display: flex;
gap: 8px;
}
}
}
下一篇將處理nav和footer的RWD~
💡分享:近期六角學院分享20份可商用得設計稿(真的太佛了),附上文章連結:https://www.facebook.com/hexschool/posts/pfbid02cDLUBSiErvbdgw9HtqeKWQpgCLWZEY8dvPtjq53VU6Amc9ayoxPGpvg7K9BFpyZZl(內含設計稿網址),分享給大家~
參考資料:
以上實作僅根據此系列提到的部分進行練習,細節沒有完全符合設計稿。請斟酌參考。