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]
HTML5
  1. <!DOCTYPE html>
  2. <html lang="de">
  3.  
  4.    <meta charset="utf-8">
  5.    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    <!--External Styles -->
  8.    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  9.    <link rel="stylesheet" href="css/font-awesome.min.css">
  10.    <link href="css/font-awesome.min.css"> </head>
  11.    .card {
  12.        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
  13.        border: 1 solid #ddd;
  14.        margin-bottom: 30px;
  15.    }
  16.    
  17.    .social-icons i {
  18.        border: 1px solid #868e96;
  19.        color: #868e96;
  20.        width: 30px;
  21.        height: 30px;
  22.        border-radius: 50%;
  23.        line-height: 30px;
  24.    }
  25.    
  26.    .social-icons i:hover {
  27.        background: #bcbcbc;
  28.        color: #fff;
  29.    }
  30.    
  31.    .social-icons a {
  32.        margin: 0 5px;
  33.    }
  34.    
  35.    .btn-default {
  36.        background: #868e96;
  37.        color: #fff;
  38.        font-weight: 700;
  39.        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  40.        font-size: 14px;
  41.    }
  42.    
  43.    .card a:hover {
  44.        color: #5c5c5c;
  45.    }
  46.    
  47.    .flipcard {
  48.        position: relative;
  49.    }
  50.    
  51.    .flipcard:hover .front,
  52.    .flipcard.flip .front {
  53.        transform: rotateY(180deg);
  54.    }
  55.    
  56.    .flipcard:hover .back,
  57.    .flipcard.flip .back {
  58.        transform: rotateY(0deg);
  59.    }
  60.    
  61.    .flipcard .back {
  62.        transform: rotateY(-180deg);
  63.    }
  64.    
  65.    .flipcard .front,
  66.    .flipcard .back {
  67.        position: absolute;
  68.        width: 100%;
  69.        height: 100%;
  70.        box-sizing: border-box;
  71.        transition: all 0.5s ease-in;
  72.        backface-visibility: hidden;
  73.    }
  74.    
  75.    .testimonial-card .avatar img {
  76.        width: 100%;
  77.    }
  78.    
  79.    .testimonial-card .card-up {
  80.        overflow: hidden;
  81.        height: 120px;
  82.        border-radius: .3rem .3rem 0 0;
  83.    }
  84.    
  85.    .testimonial-card .avatar {
  86.        border-radius: 50%;
  87.        height: 120px;
  88.        width: 120px;
  89.        margin: -65px auto 0;
  90.        overflow: hidden;
  91.        border: 5px solid #fff;
  92.    }
  93.    
  94.    .rounded-circle {
  95.        border-radius: 50% !important;
  96.    }
  97.  
  98.    <div class="container">
  99.        <h1 class="text-center">Bootstrap 4 Cards</h1>
  100.        <hr>
  101.        <div class="row">
  102.            <!-- Einfache Card -->
  103.            <div class="col-md-3">
  104.                <h3 class="text-center mb-5">Einfache Card</h3>
  105.                <div class="card"> <img class="card-img-top img-fluid" src="images/014-klein.jpg" alt="">
  106.                    <div class="card-body">
  107.                        <h4 class="card-title">Card Titel</h4>
  108.                        <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>
  109.                </div>
  110.            </div>
  111.            <!-- Card mit Slider -->
  112.            <div class="col-md-3">
  113.                <h3 class="text-center mb-5">Card mit Slider</h3>
  114.                <div class="card">
  115.                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  116.                        <div class="carousel-inner" role="listbox">
  117.                            <div class="carousel-item active"> <img class="imd-block img-fluid" src="images/slider/001-klein.jpg"> </div>
  118.                            <div class="carousel-item"> <img class="d-block img-fluid" src="images/slider/002-klein.jpg"> </div>
  119.                            <div class="carousel-item"> <img class="d-block img-fluid" src="images/slider/003-klein.jpg" alt="Third slide"> </div>
  120.                        </div>
  121.                        <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>
  122.                        <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>
  123.                    </div>
  124.                    <div class="card-body"> <span class="badge-box"></span>
  125.                        <h4 class="card-title">Card Titel</h4>
  126.                        <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>
  127.                </div>
  128.            </div>
  129.            <!-- Profil Card -->
  130.            <div class="col-md-3">
  131.                <h3 class="text-center mb-5">Profil Card</h3>
  132.                <div class="card">
  133.                    <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>
  134.                    <div class="card-body text-center">
  135.                        <h4 class="card-title">Max Muster</h4>
  136.                        <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>
  137.                </div>
  138.            </div>
  139.            <!-- Card mit Video -->
  140.            <div class="col-md-3">
  141.                <h3 class="text-center mb-5">Video Card</h3>
  142.                <div class="card">
  143.                    <div class="embed-responsive embed-responsive-16by9">
  144.                        <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>
  145.                    </div>
  146.                    <div class="card-body">
  147.                        <h4 class="card-title">Card Titel</h4>
  148.                        <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>
  149.                </div>
  150.            </div>
  151.            <div class="col-md-3">
  152.                <h3 class="text-center mb-5">Profil Card 2</h3>
  153.                <div class="card testimonial-card">
  154.                    <!--Background color-->
  155.                    <div class="card-up bg-dark"> </div>
  156.                    <!--Avatar-->
  157.                    <div class="avatar"> <img src="images/team/team1.jpg" class="rounded-circle"> </div>
  158.                    <div class="card-body text-center">
  159.                        <!--Name-->
  160.                        <h4 class="card-title">Max Muster</h4>
  161.                        <hr>
  162.                        <!--Social Media Icons-->
  163.                        <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>
  164.                </div>
  165.            </div>
  166.            <div class="col-md-3">
  167.                <div class="flipcard">
  168.                    <h3 class="text-center mb-5">Flip Card</h3>
  169.                    <div class="front">
  170.                        <div class="card"> <img class="card-img-top img-fluid" src="images/014-klein.jpg" alt="">
  171.                            <div class="card-body">
  172.                                <h4 class="card-title">Card Vorderseite</h4>
  173.                                <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>
  174.                        </div>
  175.                    </div>
  176.                    <div class="back">
  177.                        <div class="card"> <img class="card-img-top img-fluid" src="images/002-klein.jpg" alt="">
  178.                            <div class="card-body">
  179.                                <h4 class="card-title">Card Rückseite</h4>
  180.                                <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>
  181.                        </div>
  182.                    </div>
  183.                </div>
  184.            </div>
  185.        </div>
  186.    </div>
  187.    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  188.    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  189.    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  190. </body>
  191.  
  192. </html>




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


Gehe zu:


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