"family picture"
Bootstrap 4.0.0 Snippet by roipirau

Post to Facebook Tweet this

<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>
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; margin:auto; } .nail { border:2px rgb(31,46,78) solid; border-radius:50%; height:10px; width:10px; background-color:grey; box-shadow: 5px -2px 5px rgb(31,46,78); position:relative; bottom:2px; right:2px; }
5

Related: See More

Argon Design System
Profile picture with badge
Blog posts with picture

Questions / Comments: