丰潇网站完成
This commit is contained in:
225
fengxiao/css/aboutUs.css
Normal file
225
fengxiao/css/aboutUs.css
Normal file
@@ -0,0 +1,225 @@
|
||||
* ,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* box-sizing: border-box; */
|
||||
}
|
||||
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
/* background: linear-gradient(to bottom, #3A8DFF 0%, #AEE6FF 60%, #F1F1F1 100%),
|
||||
url(../imgs/support/bg.png); */
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#3478FD 0%,
|
||||
#BED0F4 80%,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
|
||||
/* background: url(../imgs/support/bg.png) no-repeat bottom; */
|
||||
background-size: 100% 80%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: top, center;
|
||||
box-sizing: border-box;
|
||||
background-blend-mode: multiply;
|
||||
margin-top: 12vh;
|
||||
}
|
||||
|
||||
.banner-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../imgs/about/bg.svg);
|
||||
background-size: 120vw auto;
|
||||
background-position: 60% -8vw;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner-content-text{
|
||||
width: 40%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 10vw;
|
||||
left: 30vw;
|
||||
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(1){
|
||||
font-size: 5vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(2){
|
||||
font-size: 5vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(3){
|
||||
font-size: 1.6vw;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1vw;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.banner-content-text a{
|
||||
display: inline-block;
|
||||
width: 9vw;
|
||||
height: 2.3vw;
|
||||
background: #fff;
|
||||
border-radius: 1vw;
|
||||
background: #3478FD;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 3vh;
|
||||
margin-left: 13vw;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.banner-content-text a span{
|
||||
font-size: 0.9vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.banner-content-text a img{
|
||||
width: 1.2vw;
|
||||
height: 1.2vw;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
.banner-content-text a:hover{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
/* ---------------------------- */
|
||||
.aboutUs-content{
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#f1f1f1 0%,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aboutUs-content-text{
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0 auto;
|
||||
background: url(../imgs/about/adout1.png) ,url(../imgs/about/adout2.png);
|
||||
background-size: 25vw auto,25vw auto;
|
||||
background-position: 0 0,100% 0;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-top: 18vh;
|
||||
position: relative;
|
||||
top: -10vw;
|
||||
left: 2vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.aboutUs-content-text .text{
|
||||
width: 42%;
|
||||
height: 80%;
|
||||
background:#fff;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1.05vw;
|
||||
padding: 2.5vw;
|
||||
font-size: 1vw;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
line-height: 4.2vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: justify;
|
||||
}
|
||||
/* ----------------- */
|
||||
.aboutUs-team{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#f1f1f1 0%,
|
||||
#D8E8F4 100%
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.banner-content-list {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: #f1f1f1; */
|
||||
position: relative;
|
||||
background-image: url(../imgs/about/bg2.svg);
|
||||
background-size: 99% 80%;
|
||||
background-position: 100% 18vw;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.banner-content-list h2{
|
||||
font-size: 3vw;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-underline-offset: 0.8vw;
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
.content-listBOX{
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 4vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-listBOX-item{
|
||||
width: 23vw;
|
||||
height: 73%;
|
||||
/* background: palegoldenrod; */
|
||||
list-style: none;
|
||||
border-radius: 1vw;
|
||||
box-shadow: 8px 5px 10px 5px rgba(0,0,0,0.1);
|
||||
background: #fff;
|
||||
padding: 1vw;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-listBOX-item img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-listBOX-item h3{
|
||||
font-size: 1vw;
|
||||
/* font-weight: 500; */
|
||||
margin-top: 4vh;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user