"block"
Bootstrap 4.1.1 Snippet by evarevirus

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Broken Grid Images</title>
<style>
/*! CSS Used from: https://uploads-ssl.webflow.com/59fc88484bd9c800017235df/css/geely-atlas.443936fd3.css */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
h2{font-weight:bold;margin-bottom:10px;}
h2{font-size:32px;line-height:36px;margin-top:20px;}
h2{margin-top:0px;margin-bottom:60px;font-family:proxima-nova, sans-serif;color:#000;font-size:30px;line-height:38px;font-weight:700;}
.section{position:relative;width:100%;padding-top:120px;padding-bottom:120px;background-color:#fff;}
.cz{display:block;width:96%;max-width:1180px;margin-right:auto;margin-left:auto;}
.cz.exterior-cz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.exterior-images-div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:580px;margin-right:80px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
.exterior-image-1{width:480px;height:400px;background-image:url("https://uploads-ssl.webflow.com/59fc88484bd9c800017235df/59fca2984bd9c80001725111_Desing%20Image%201.jpg");background-position:50% 50%;background-repeat:no-repeat;box-shadow:0 40px 40px -20px rgba(0, 0, 0, .4);}
.exterior-image-2{position:static;z-index:2;width:200px;height:160px;margin-top:-120px;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;background-image:url("https://uploads-ssl.webflow.com/59fc88484bd9c800017235df/59fca2fd4bd9c8000172514e_desing%20image%203.jpg");background-position:50% 50%;background-repeat:no-repeat;box-shadow:0 40px 50px -20px rgba(0, 0, 0, .5);}
.exterior-image-3{width:280px;height:200px;margin-top:-90px;margin-right:50px;background-image:url("https://uploads-ssl.webflow.com/59fc88484bd9c800017235df/59fca37391b12f00016ba804_desing%20image%202.jpg");background-position:50% 50%;background-repeat:no-repeat;box-shadow:0 40px 40px -20px rgba(0, 0, 0, .4);}
.desing-text-div{max-width:460px;margin-right:60px;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
.standart-text{color:#909090;font-size:16px;line-height:24px;font-weight:300;}
.quote-div{margin-top:50px;}
.quote-div.quote-botom-div{margin-top:30px;}
.quote-line{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;}
.quote-line.quote-bottom-line{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:18px;line-height:26px;font-weight:600;}
.quote-sing{width:24px;height:19px;margin-right:20px;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;background-image:url("https://uploads-ssl.webflow.com/59fc88484bd9c800017235df/59fca4ec463ca50001a855b7_quote.png");background-position:50% 50%;background-size:24px;background-repeat:no-repeat;}
.quote-ab{font-family:Vollkorn, serif;color:#000;font-size:18px;line-height:26px;font-weight:400;}
.peter-image{width:100px;height:100px;margin-right:20px;border-radius:100%;background-image:url("https://uploads-ssl.webflow.com/59fc88484bd9c800017235df/59fca586d5dff6000148d504_Peter%20Photo.png");background-position:50% 50%;background-size:100px;background-repeat:no-repeat;}
._16pt-italic{color:#a7a7a7;font-size:16px;font-style:italic;font-weight:300;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: