Bootstrap自适应商品活动介绍单页布局效果-html代码-BFW代码库

代码语言：html

所属分类：响应式

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body{
    background-image: url();
}

.imgJumbotron{
    background-image: url('http://repo.bfw.wiki/bfwrepo/image/5e4b4000794db.png');
    background-size: cover ;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat; 
    text-align: center;
    padding-top: 300px;
    margin-top: 60px;
}

.myColor{
    background-color: #6b4f9a;
}
.myBorder{
    border: 1px solid #6b4f9a;
}
.myCardColor{
    background-color: #a299c5;
}
.myCardHeader{
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.mySize{
    width: 210px;
    height: 131px;
}

p{
    font-size: 19px;
    font-family: 'Raleway', sans-serif;
}

.myDisplay{
    font-size: 5.5rem;
    font-weight: 500;
    line-height: 1.2;
}
@media only screen and ( max-width : 768px) {

    .imgJumbotron{
        background-image: url('http://repo.bfw.wiki/bfwrepo/image/5e4b3fd64359e.png');
    }

    .myDisplay{
        font-size: 2.5rem !important;
        font-weight: 600 !important;
        line-height: 0.5 !important;
    }
    
}

.step-number{
    position: absolute;
    top: 40px;
    background-color: #a299c5;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding: 8px;
    border: 1px solid #6b4f9a;
    color: white;
    text-align: center;
    font: 32px Arial, sans-serif;
}
.step-numberText{
    margin-left: 80px;
}
img{
    border-radius: 8px;
    border: 2px solid #a299c5;
    padding: 5px;
}

#contacts{
    display: flex;
    align-items: center;
    justify-content: center;
}
#video{
    margin-top: 50px;
}

#info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    margin-top: 50px;
}

#info > h2 {
    margin-bottom: 20px;
    word-wrap: break-word;
}

footer {
    margin-top: 20px;
    background-color: #6b4f9a;
    padding: 10px;
}
footer > span {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    font-size: 1.2em;
    color: white;
}

div > ul > li > a {
    font-size: 1.2em;
}
input[type="email"]::placeholder {  
    /* Firefox, Chrome, Opera */ 
    text-align: center; 
} 
img {
  max-width: 100%;
}
</style>

</head>
<body >
<header id="header">

<nav id="nav-bar" class="navbar navbar-light fixed-top navbar-expand-lg myColor">
<a class="navbar-brand" href="#" style="color:white;">
    LOGO

</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#service">产品信息</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#advantages">行业资讯</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#form">联系我们</a>
</li>
</ul>
</div>
</nav>
</header>

<div class="jumbotron imgJumbotron">
<div class="container myContainerIntro">
<div class="row">
<div class="col-sm ">
<h1 class="text-white pb-3 myDisplay">SPECIAL COLOR</h1>
</div>
</div>
<div class="row">
<div class="col-sm">
<h5 class=" text-white pb-3">Il percorso per sviluppare conoscenze e competenze nell'ambito della
colorazione e della schiaritura.</h5>
</div>
</div>
<div class="row">
<div class="col-sm">
<a class="btn btn-lg myColor text-white" href="#service" role="button">Scopri il servizio</a>
</div>
</div>
</div>
</div>

<div id="service" class="container " style="padding-top: 5rem;">
<div style="text-align: center;">
<h1 class="display-4">SPECIAL COLOR</h1>
<p class="lead">Un Anno di Formazione per un totale di 3 incontri:</p>
<hr class="my-4">
<p>Apprendi le tecniche più innovative per i servizi colore ed effetti luce con accessori studiati ad hoc.
Impara a miscelare le Erbe Tintorie e offri in salone il servizio di colorazione green più richiesto del
momento.</p>
</div>

<div class="fw-row">
<div id="column-5e3fca7f20930" class="none  fw-col-sm-12 wow " data-wow-offset="120" data-wow-duration="1.5s">
<div class="fw-main-row">
<div class="fw-col-inner">
<div class="mt-2 mb-3">
<div class="col-md-11 center-block">
<div class="row mt-5">
<div class="col-md-6 mt-2">
<div class="step-number"><span>1</span></div>
<div class="step-numberText">
<h4>Colore</h4>
<p>Studiare il colore di ultima generazione. Intenso, multisfaccettato e ad
alta definizone. Un colore frutto di conoscenza e competenza tecnica, di
ricerca e continuo aggiornamento.</p>
</div>
</div>
<div class="col-md-6 text-center auto-margin-img pt-1"><img src="http://repo.bfw.wiki/bfwrepo/image/5e4b3fd64359e.png" alt="ImgColor" width="400" height="200" class=".........完整代码请登录后点击上方下载按钮下载查看