Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bootstrap 4 Cards
#1
Bootstrap 4 Cards

Boostrap Beta 2
Font Awesome Icons

[Bild: sreen.JPG]
HTML:
Code:
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--External Styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="css/font-awesome.min.css"> </head>
<style>
    .card {
        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
        border: 1 solid #ddd;
        margin-bottom: 30px;
    }
    
    .social-icons i {
        border: 1px solid #868e96;
        color: #868e96;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        line-height: 30px;
    }
    
    .social-icons i:hover {
        background: #bcbcbc;
        color: #fff;
    }
    
    .social-icons a {
        margin: 0 5px;
    }
    
    .btn-default {
        background: #868e96;
        color: #fff;
        font-weight: 700;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
        font-size: 14px;
    }
    
    .card a:hover {
        color: #5c5c5c;
    }
    
    .flipcard {
        position: relative;
    }
    
    .flipcard:hover .front,
    .flipcard.flip .front {
        transform: rotateY(180deg);
    }
    
    .flipcard:hover .back,
    .flipcard.flip .back {
        transform: rotateY(0deg);
    }
    
    .flipcard .back {
        transform: rotateY(-180deg);
    }
    
    .flipcard .front,
    .flipcard .back {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        transition: all 0.5s ease-in;
        backface-visibility: hidden;
    }
    
    .testimonial-card .avatar img {
        width: 100%;
    }
    
    .testimonial-card .card-up {
        overflow: hidden;
        height: 120px;
        border-radius: .3rem .3rem 0 0;
    }
    
    .testimonial-card .avatar {
        border-radius: 50%;
        height: 120px;
        width: 120px;
        margin: -65px auto 0;
        overflow: hidden;
        border: 5px solid #fff;
    }
    
    .rounded-circle {
        border-radius: 50% !important;
    }
</style>

<body>
    <div class="container">
        <h1 class="text-center">Bootstrap 4 Cards</h1>
        <hr>
        <div class="row">
            <!-- Einfache Card -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Einfache Card</h3>
                <div class="card"> <img class="card-img-top img-fluid" src="images/014-klein.jpg" alt="">
                    <div class="card-body">
                        <h4 class="card-title">Card Titel</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                </div>
            </div>
            <!-- Card mit Slider -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Card mit Slider</h3>
                <div class="card">
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                            <div class="carousel-item active"> <img class="imd-block img-fluid" src="images/slider/001-klein.jpg"> </div>
                            <div class="carousel-item"> <img class="d-block img-fluid" src="images/slider/002-klein.jpg"> </div>
                            <div class="carousel-item"> <img class="d-block img-fluid" src="images/slider/003-klein.jpg" alt="Third slide"> </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                    </div>
                    <div class="card-body"> <span class="badge-box"></span>
                        <h4 class="card-title">Card Titel</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                </div>
            </div>
            <!-- Profil Card -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Profil Card</h3>
                <div class="card">
                    <div class="profile-box bg-secondary"> <img class="card-img-top rounded-circle px-2 pt-2 pb-2" src="images/team/team1.jpg" alt="Card image cap"> </div>
                    <div class="card-body text-center">
                        <h4 class="card-title">Max Muster</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <span class="social-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> </span> </div>
                </div>
            </div>
            <!-- Card mit Video -->
            <div class="col-md-3">
                <h3 class="text-center mb-5">Video Card</h3>
                <div class="card">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/i2zOLe0KGCo?iv_load_policy=3&controls=0&showinfo=0&rel=0&autoplay=1&loop=1"></iframe>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">Card Titel</h4>
                        <p class="card-text">Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                </div>
            </div>
            <div class="col-md-3">
                <h3 class="text-center mb-5">Profil Card 2</h3>
                <div class="card testimonial-card">
                    <!--Background color-->
                    <div class="card-up bg-dark"> </div>
                    <!--Avatar-->
                    <div class="avatar"> <img src="images/team/team1.jpg" class="rounded-circle"> </div>
                    <div class="card-body text-center">
                        <!--Name-->
                        <h4 class="card-title">Max Muster</h4>
                        <hr>
                        <!--Social Media Icons-->
                        <p><i class="fa fa-quote-left"></i> Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <span class="social-icons text-center"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> </span> </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="flipcard">
                    <h3 class="text-center mb-5">Flip Card</h3>
                    <div class="front">
                        <div class="card"> <img class="card-img-top img-fluid" src="images/014-klein.jpg" alt="">
                            <div class="card-body">
                                <h4 class="card-title">Card Vorderseite</h4>
                                <p class="card-text"><i class="fa fa-quote-left"></i> Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                        </div>
                    </div>
                    <div class="back">
                        <div class="card"> <img class="card-img-top img-fluid" src="images/002-klein.jpg" alt="">
                            <div class="card-body">
                                <h4 class="card-title">Card Rückseite</h4>
                                <p class="card-text"><i class="fa fa-quote-left"></i> Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Karteninhalts ausmacht.</p> <a href="#" class="btn btn-default text-uppercase">Details</a> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>


Angehängte Dateien
.rar   bootstrap-4 Cards.rar (Größe: 1,77 MB / Downloads: 3)
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste