Bootstrap Snippet family picture using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body style="background-color:rgb(60,90,149);height:1200px;">
<div class="container">
    <h1>family picture</h1>
    <div class="row">
        <div class ="col-md-6">
            <div class="rope"><div class="nail"></div></div>
            <div class="canvas">
                <img src="https://image.freepik.com/vecteurs-libre/dessin-de-bande-dessinee-de-famille_23-2147495912.jpg">
            </div>
       </div>
       <div class ="col-md-6">
            <div class="rope"><div class="nail"></div></div>
            <div class="canvas">
                <img src="https://png.pngtree.com/element_origin_min_pic/17/03/23/0c4c97ea35eaf44cee6bbf56a3847c6d.jpg">
       </div>
       </div>
       <div class ="col-md-6">
            <div class="rope"><div class="nail"></div></div>
            <div class="canvas">
                <img src="https://media.istockphoto.com/vectors/happy-family-having-fun-summer-landscape-background-vector-id812064710?k=6&m=812064710&s=612x612&w=0&h=0kUGW8JyJAQdVnsaP-9BtnlawI_nONZlzTEoFFDXK14=">
            </div>
       </div>
       <div class ="col-md-6">
            <div class="rope"><div class="nail"></div></div>
            <div class="canvas">
                <img src="https://media.istockphoto.com/vectors/family-posing-for-a-picture-cartoon-vector-id865006230?k=6&m=865006230&s=612x612&w=0&h=c3hnKRHTekV-X0L2JfdTvJRGa0JMYiEXQ1YY1KW9Q64=">
            </div>
       </div>
    </div>
</div>
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
h1
{
    text-align:center;
    margin:50px;
    font-size:50px;
    text-decoration: underline;
    color:rgb(34,34,34);
}
.canvas
{
   border:8px rgb(34,34,34) solid; 
   height:300px;
   width:300px;
   box-shadow: 10px 5px 5px rgb(31,46,78);
   margin:auto;
}
img
{
    height:284px;
    width:284px;
}
.rope
{
    transform: rotate(45deg);
    border-left:4px rgb(34,34,34) solid;
    border-top:4px rgb(34,34,34) solid;
    border-radius:10px 0px 0px 0px;
    height:150px;
    width:150px;
    position:relative;
    top:75px;
    margin-left:75px;
    z-index: -1;
    box-shadow:5px 0px 20px rgb(31,46,78) inset;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
5
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"family picture"
Bootstrap 4.0.0 Snippet by roipirau

Related: See More

Questions / Comments:

"family picture" Bootstrap 4.0.0 Snippet by roipirau

Related: See More

Questions / Comments:

"family picture"
Bootstrap 4.0.0 Snippet by roipirau