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

最新推荐文章于 2022-11-07 22:46:29 发布

zwxic

最新推荐文章于 2022-11-07 22:46:29 发布

阅读量353

点赞数

分类专栏：网站前端前端设计 js 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/zwxic/article/details/108820364

版权

网站前端同时被 3 个专栏收录

24 篇文章

订阅专栏

前端设计

23 篇文章

订阅专栏

5 篇文章

订阅专栏

创意手风琴菜单banner图片幻灯片- HTML, CSS3 id1070-网页前端设计
在这里插入图片描述

源码下载地址

在新演示地址

<!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://www.5g-o.com/codedesign/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://www.5g-o.com/codedesign/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://www.5g-o.com/codedesign/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://www.5g-o.com/codedesign/wp-content/uploads/2020/05/model_2.jpg" alt="team-img">
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

css

  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;
    }