Skip to content

Commit

Permalink
切版班-第三週主線任務：RWD-v5
Browse files Browse the repository at this point in the history
  • Loading branch information
@osncode
osncode committed Aug 17, 2024
1 parent 604c81a commit cfcfbd3
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 31 deletions.
20 changes: 10 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- nav -->
<nav class="nav bg-nav">
<!-- header -->
<header class="header bg-header">
<div class="container-full">
<div class="nav-content d-flex">
<div class="nav-img">
<div class="header-content d-flex">
<div class="header-img">
<a href="#"><img src="img/logo-white.png" alt="logo"></a>
</div>
<ul class="nav-list d-flex">
<ul class="header-list d-flex">
<li class="item"><a class="p-12" href="#">系列鏡框</a></li>
<li class="item"><a class="p-12" href="#">門市據點</a></li>
<li class="item"><a class="p-12" href="#">部落格</a></li>
Expand All @@ -23,21 +23,21 @@
</div>
</div>
</div>
</nav>
<!-- header -->
<header class="header bg-header">
</header>
<!-- banner -->
<div class="banner bg-banner">
<div class="container">
<div class="row">
<div class="col">
<div class="title-header text-align-right">
<div class="title-banner text-align-right">
<p>Promise-Desert 2020 早春系列</p>
<h1 class="h1">看得清，才能看得遠</h1>
<a class="fs-20" href="#">立即購買</a>
</div>
</div>
</div>
</div>
</header>
</div>
<!-- intro -->
<div class="intro bg-light">
<div class="container">
Expand Down
42 changes: 21 additions & 21 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
}

/* background */
.bg-nav{
.bg-header{
background: var(--primary);
}

.bg-header{
.bg-banner{
background-image: url("img/home-header.png");
height: 787px;
background-repeat: no-repeat;
Expand All @@ -37,36 +37,36 @@
padding: 0px 12px;
}

/* nav */
/* header */
.container-full{
max-width: 1320px;
padding: 0px 12px;
margin: 0 auto;
}

.nav-content{
.header-content{
justify-content: space-between;
align-items: center;
}

.nav-img img{
.header-img img{
padding: 12px 12px 12px 0px;
width: 80px;
}

.nav-list .item{
.header-list .item{
text-align: center;
font-size: 20px;
transition: 0.5s;
margin-left: 52px;
}

.nav-list .item:hover{
.header-list .item:hover{
font-weight: bold;
}

@media (max-width:768px){
.nav-list .item{
.header-list .item{
margin-left: 0px;
}
}
Expand All @@ -75,32 +75,32 @@
.container-full{
padding: 0px;
}
.nav-content{
.header-content{
flex-direction: column;
align-items: start;
}
.nav-img img{
.header-img img{
padding: 12px;
}
.nav-list{
.header-list{
flex-wrap:wrap;
width: 100%;
}
.nav-list .item{
.header-list .item{
font-size: 16px;
border: 1px solid #FFF;
padding: 12px 0px 12px 0px;
width: 50%;
}
}

/* header */
.title-header{
/* banner */
.title-banner{
height: auto;
padding: 296px 0px;
}

.title-header p{
.title-banner p{
font-size: 36px;
color:var(--secondary);
}
Expand All @@ -112,28 +112,28 @@
margin-bottom: 10px;
}

.title-header a{
.title-banner a{
background: #AA0601;
padding: 6px 12px;
transition: 0.5s;
display: inline-block;
}
.title-header a:hover{
.title-banner a:hover{
font-weight: bold;
}

@media (max-width:992px){
.bg-header{
.bg-banner{
background-image: url("img/home-header-sm.png");
}
}

@media (max-width:599px){
.bg-header{
.bg-banner{
height: 396px;
}
.header{
.title-header{
.banner{
.title-banner{
padding: 144px 0px;
.h1{
font-size: 24px;
Expand Down

1 comment on commit cfcfbd3

@osncode
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

調整命名(第四週檔案切分出共同區塊用)：

nav 區塊 改為 header
header 區塊 改為 banner

相關樣式連動更改。

Please sign in to comment.