创意手风琴菜单banner图片幻灯片- HTML, CSS3 cid1070-网页前端设计

作者code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

<!-- jQuery library -->
<script src="https://code.5g-o.com/wp-content/uploads/2020/02/jquery.min_.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>
<body>
   <br><br><br><br><br><br> <br>
    <section id="team" class="team circle-left">
     
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="team-box">
                    <form>
                        <ul>
                            <!--accordian first slide-->
                            <li>
                                <input id="rad1" type="radio" checked name="rad">
                                <!--verticle text-->
                                <label for="rad1"><span class="team-name text-white">RESPONSIVE ACCORDIAN</span></label>
                                <div class="accslide d-flex">
                                    <div class="team-inner">
                                       
                                        <div class="team-about">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error cumque vitae dolorem sequi quos a amet ab eligendi ex atque, velit nulla esse nesciunt. Fuga odit nostrum exercitationem quidem, quod reprehenderit ipsam fugit nisi doloribus dicta culpa cum, voluptas saepe, iste in doloremque reiciendis repellat maiores velit aspernatur deleniti. Enim?
                                                <br><br>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora est recusandae adipisci eum sunt qui accusantium consequuntur voluptas doloremque ut veritatis aperiam debitis non totam nulla, sint vel itaque rem praesentium excepturi facere soluta minima. Suscipit placeat iusto saepe obcaecati perferendis, illo illum consequatur quas, ea totam, tempora reiciendis temporibus?
                                            </p>
                                            <span class="hr-line ml-0 mt-4 mb-4"></span>
                                            <a href="#." class="btn btn-danger">Read More</a>
                                        </div>
                                        <div class="team-img">
                                            <img src="https://code.5g-o.com/wp-content/uploads/2020/05/rec_model_3.jpg" alt="team-img">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!--accordian second slide-->
                            <li>
                                <input id="rad2" type="radio" name="rad">
                                <!--verticle text-->
                                <label for="rad2"><span class="team-name text-white">WITH IMAGE SLIDING</span></label>
                                <div class="accslide">
                                    <div class="team-inner">
                                        <div class="team-about">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis dolorum aliquid, harum velit fugit laborum est deserunt placeat id dolor consequuntur quod beatae illo veniam obcaecati magnam aspernatur aut in recusandae dolore tempore. In veniam dolore earum, est, tenetur repellendus quibusdam culpa, totam voluptates laborum perspiciatis incidunt. Explicabo autem, dolores.
                                                <br><br>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta exercitationem doloremque excepturi minus quis, alias sint assumenda incidunt quisquam. Dignissimos, voluptatem. Magni quos atque velit, et, officiis enim laborum, maxime perspiciatis quasi libero nobis hic unde numquam impedit modi optio dolorem non saepe! Molestias ratione aliquam praesentium incidunt, rerum obcaecati.
                                            </p>
                                            <span class="hr-line ml-0 mt-4 mb-4"></span>
                                            <a href="#." class="btn btn-danger">Read More</a>
                                        </div>
                                        <div class="team-img">
                                            <img src="https://code.5g-o.com/wp-content/uploads/2020/05/model_19.jpg" alt="team-img">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!--accordian third slide-->
                            <li>
                                <input id="rad3" type="radio" name="rad">
                                <!--verticle text-->
                                <label for="rad3"><span class="team-name text-white">LEARN TODAY</span></label>
                                <div class="accslide">
                                    <div class="team-inner">
                                        <div class="team-about">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat autem, architecto nesciunt dolore, explicabo asperiores, assumenda quaerat rerum dolores, eveniet sit! Incidunt illum, maiores sapiente, non quidem vel libero similique distinctio necessitatibus, quis, totam aliquam nesciunt. Quasi optio delectus, voluptatem laboriosam at voluptas perferendis saepe ipsa ipsam. Aspernatur, obcaecati, impedit!
                                                <br><br>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quo adipisci sit nesciunt repellat laudantium, nemo? Perspiciatis consequatur, hic adipisci esse provident fugiat et possimus fuga quis debitis error, rem repudiandae dolorum facere molestias quos impedit. Ullam dolore, laborum perferendis, debitis temporibus a nesciunt minima vitae minus molestiae alias magnam.
                                            </p>
                                            <span class="hr-line ml-0 mt-4 mb-4"></span>
                                            <a href="#." class="btn btn-danger">Read More</a>
                                        </div>
                                        <div class="team-img">
                                            <img src="https://code.5g-o.com/wp-content/uploads/2020/05/model_2.jpg" alt="team-img">
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>
  body{    
    font-family: 'Roboto Condensed', sans-serif;
    background: #ebebeb;  
     
    
}

.team-box input {
    position: absolute;
    display: none;
}
.team-box form ul{
    padding: 0 ;
    margin: 0;
}

.team-box .team-name{
    position: relative;
    display: block;
    width: 420px;
    transform: rotate(-90deg);
    top: 197px;
    left: -185px;
    text-align: left;
    padding-left: 25px;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.team-box label {
    position: relative;
    display: block;
    height:420px;
    width: 50px;
    z-index: 3;
    background: #ff6666;
    text-align: center;
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    margin-bottom:0;
    float: left;
    overflow: hidden;     
    transition: width 1s ease, background 0.5s ease;
}

.team-box #rad2 + .team-box label {
    background: #888;     
    transition: width 1s ease, background 0.5s ease;
}

.team-box label:hover,.team-box #rad2 + .team-box label:hover {
    background: #e65151;
    color: #fff;
    cursor: pointer;
}

.team-box{
    position: relative;
    overflow: hidden;
    padding: 35px 0;
}

.team-box .accslide {
    display:block;
    height:420px;
    width: 0px;
    background: #fff;
    opacity: 0;
    overflow-x: hidden;
    float: left;
         
    transition: all 1s ease;
}

.team-box .accslide .team-about{
    padding: 40px;
    width: 579px;
    display: inline-block;
    float: left;
    background: #FFFFFF;
    z-index: 1;
}

.team-box .accslide .team-img{
    display: inline-block;
    width: 355px;
    float: right;
    position: absolute;
    margin-top: -36px;
    border: 4px solid #fff;
}


.team-box .accslide .team-inner{
    width: 960px;
    background: #FFFFFF;
}
.team-box input[type="radio"]:checked+label ~ .accslide {
    width: 960px;
    opacity: 1;
}


/* team two */

.team-box-two-inner{
    max-width:700px;
    margin: 0 auto;
    position: relative;
}
.team-box-two-inner .team-two-about{
    position: relative;
    max-width: 395px;
    padding: 40px 80px 40px 40px;
    background: #f4f4f4;
}
.team-box-two-inner .team-two-about p{
    max-width: 280px;
 }
.team-two-social a{
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
}
.team-two-image{
    margin-left: -40px;
    position: relative;
}


.team-two .navPrev {
    position: absolute;
    top: 15%;
    left: 15px;
    z-index: 0
}
.team-two .navPrev span {
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}

.team-two .navPrev:hover span {
    width: 270px;
}

.team-two .navPrev span img {
    position: relative;
    margin: auto 0px;
    cursor: pointer;
    width: 270px;
}

.team-two .navNext {
    position: absolute;
    top: 15%;
    right: 15px;
    z-index: 2;
}

.team-two .navNext span {
    width: 270px;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
}

.team-two .navNext span img {
    position: relative;
    margin: auto 0px;
    cursor: pointer;
     width: 270px;
}
.team-two .owl-team .owl-prev{
    position: absolute;
    top: 83px;
    height: 382px;
    margin: 0;
    padding: 0;
    width: 205px;
    background: transparent;
    border: 0;
    border-radius:0;
}
.team-two .owl-team .owl-prev{
    left: 0;
}

.team-two-left,.team-two-right{
    position: absolute;
    top: 0;
    height: 379px;
    width: 100%;
    cursor: pointer;
}
.team-two-right-nav, .team-two-left-nav{
    position: relative;
    max-width: 70px;
    height:378px;
    text-align: center;
    color: #FFFFFF;
    background: yellow;
}

.team-two-right-nav{
    float: right;
}
.team-two-left-nav{
    float: left;
}

.team-two-right-nav h4 {
    position: relative;
    width: 300px;
    display: block;
    transform: rotate(90deg);
    top: 140px;
    right: 115px;
    text-align: left;
    margin: 0;
    padding-left: 15px;
    text-transform: uppercase;
}

.team-two-left-nav i{
   position: relative;
    top: 12px;
    font-size: 20px;
    color: #FFFFFF;

}
.team-two-left-nav .team-verticle-line{
    position: relative;
    height: 80px;
    width: 2px !important;
    display: block !important;
    margin: 0 auto;
    background: #FFFFFF;
    top: 20px;
}

.team-two-left-nav h4 {
    position: relative;
    width: 300px;
    display: block;
    transform: rotate(-90deg);
    top:90px;
    right: 115px;
    text-align: left;
    margin: 0;
    padding-right: 15px;
    text-transform: uppercase;
}

.team-two-right-nav i{
    position: absolute;
    bottom: 15px;
    right: 23px;
    font-size: 20px;
    color: #FFFFFF;
}
.team-two-right-nav .team-verticle-line{
    height: 80px;
    width: 2px !important;
    display: inline-block !important;
    background: #FFFFFF;
    position: absolute;
    bottom: 55px;
    right: 33px;
}    
    
    .team-box .team-name {
    position: relative;
    display: block;
    width: 420px;
    transform: rotate(-90deg);
    top: 197px;
    left: -185px;
    text-align: left;
    padding-left: 25px;
    font-size: 1.5rem;
    text-transform: uppercase;
}
    p{
        font-size: 14px;
        text-align: justify;
    }

.text-white {
    color: #fff!important;
}
   
    ul li{
        text-decoration: none;
        list-style: none;
    }
    
    .btn-danger{
        padding: 12px 40px;
        border-radius: 50px;
        margin-top: 30px;
        background: #ff6666;
        border: none;
    }

 

在线演示

让链接同时具备两种打开方式
获取源码: PROF
下载数:195人次, 文件大小: 250.0 KB, 上传日期: 2020年-11月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,358 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 8元 才能查看此处内容！立即支付

类似文章