デイトラweb制作上級編パターン2 DAY31~44⑤

卒業制作課題パターン2 5日目
PC版

スマホ版

「当院について」ページの構造

背景画像について → 上級編パターン2 DAY31~44③
横並びカードについて → 中級編 DAY13
下層ページ共通のメインビジュアル

HTML
<section class="low-main-visual">
<div class="low-main-visual__bg low-main-visual__bg-p-medical">
<div class="low-main-visual__inner">
<div class="low-main-visual__text">
<h2 class="low-main-visual__title">診療案内</h2>
<p class="low-main-visual__en">MEDICAL</p>
</div>
</div>
</div>
</section>
SCSS
.low-main-visual {
height: 340px;
padding: 0 60px;
margin-top: 122px;
margin-bottom: 105px;
@include mq('sp') {
height: 188px;
padding: 0 20px;
margin-top: 79px;
margin-bottom: 86px;
}
}
.low-main-visual__bg {
height: inherit;
border-radius: 12px;
position: relative;
&::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
border-radius: 12px;
}
}
.low-main-visual__inner {
height: inherit;
padding-top: 132px;
@include mq('sp') {
padding-top: 61px;
}
}
.low-main-visual__text {
text-align: center;
color: #fff;
font-weight: 700;
position: relative;
}
.low-main-visual__title {
font-size: 32px;
line-height: (36 /32);
letter-spacing: 3.2px;
margin-bottom: 16px;
@include mq('sp') {
font-size: 24px;
line-height: (36 / 24);
letter-spacing: 4.8px;
margin-bottom: 6px;
}
}
.low-main-visual__en {
line-height: (36 / 14);
letter-spacing: 1.4px;
@include mq('sp') {
font-size: 12px;
line-height: (36 / 12);
letter-spacing: 1.2px;
}
}
// p-aboutの背景画像
.low-main-visual__bg-p-about {
background: url(../img/about/page-about_top.png) no-repeat center center / cover;
@include mq('sp') {
background: url(../img/about/page-about_top-sp.png) no-repeat center center / cover;
}
}
まとめ
今回も卒業制作課題を進めました。
メインビジュアル以外はトップページを参考に簡単に作成できたので、比較的スムーズに完成させることができました。
前に作成したコーポレートサイトよりも早く完成させることを目標に頑張りたいです!