CSS3 心理測試模板

/*首頁樣式*/
body{
background-color: #f3f3f3;
margin: 0;
padding: 0;
}
.banner{
background-image: url(../images/banner.jpg);
background-size: cover;
height: 400px;
}
.title{
font-size: 48px;
font-weight: bold;
text-align: center;
margin-top: 80px;
}
.btn{
display: block;
width: 200px;
height: 50px;
margin: 50px auto 0;
background-color: #8cc63e;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #fff;
border-radius: 10px;
}
/*測試頁面樣式*/
.test{
background-color: #fff;
padding: 50px;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.test h2{
font-size: 36px;
font-weight: bold;
margin-top: 0;
}
.test p{
font-size: 18px;
line-height: 1.8;
text-align: left;
margin-bottom: 30px;
}
.tips{
font-size: 14px;
color: #8cc63e;
margin-top: 20px;
}
.test input{
margin-right: 20px;
}
.test .btn{
margin-top: 30px;
}
/*結果頁面樣式*/
.result{
max-width: 800px;
margin: 0 auto;
text-align: center;
background-color: #fff;
padding: 50px;
}
.result h2{
font-size: 36px;
font-weight: bold;
margin-top: 0;
}
.result p{
font-size: 18px;
line-height: 1.8;
margin-bottom: 30px;
}
.result .btn{
margin-top: 30px;
display: inline-block;
background-color: #8cc63e;
color: #fff;
padding: 10px 20px;
border-radius: 10px;
font-size: 20px;
}

CSS3 心理測試模板用于展示心理測試內容和結果，并為客戶提供個性化服務和分析。