<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section class="container-fluid fwhite bg-green developers-banner"> <div class="row"> <div class="col-md-6 col-xs-12 desktop-section-height mobile-section-height bc left"> <div class="center tc"> <h1 class="fw300">monday.com API</h1> <h2 class="fw100">v1 docs</h2> </div> </div> <div class="col-md-6 col-xs-12 desktop-section-height mobile-section-height right"></div> </div> </section>

/*! CSS Used from: https://developers.monday.com/style/all-e12f4df2.css */ @media (min-width: 992px) { .desktop-section-height { height:45vw!important; } } @media (max-width: 991px) { .mobile-section-height { height: 72vw!important; } } .bg-green { background-color: #40c870; } section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } *:before,*:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; } .col-md-6,.col-xs-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xs-12 { float: left; } .col-xs-12 { width: 100%; } @media (min-width: 992px) { .col-md-6 { float: left; } .col-md-6 { width: 50%; } } .container-fluid:before,.container-fluid:after,.row:before,.row:after { content: " "; display: table; } .container-fluid:after,.row:after { clear: both; } @media (max-width: 991px) { h2 { padding-top: 20px; padding-bottom: 10px; } } section.developers-banner .left { overflow: hidden; } section.developers-banner .left .center { width: 80%; margin: 0 8%; padding-left: 10px; } section.developers-banner .left .center h1,section.developers-banner .left .center h2 { line-height: 7vw; font-size: 6vw; } @media (max-width: 991px) { section.developers-banner .left .center h1,section.developers-banner .left .center h2 { line-height: 13vw; font-size: 12vw; } } section.developers-banner .right { background: url("https://developers.monday.com/img/developers/banner.jpg") no-repeat center center; background-size: cover; } *::-moz-selection { color: #fff; background: #40c870; } *::selection { color: #fff; background: #40c870; } *::-moz-selection { color: #fff; background: #40c870; } .bc { white-space: nowrap; font-size: 0; letter-spacing: -0.34em; word-spacing: -0.34em; } .bc:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .bc .center { vertical-align: middle; display: inline-block; white-space: normal; font-size: initial; letter-spacing: normal; word-spacing: normal; } h1,h2 { font-weight: 300; padding: 0; margin: 0; } .fw100 { font-weight: 100!important; } .fw300 { font-weight: 300!important; } .fwhite { color: #fff; } .tc { text-align: center; } section { overflow: hidden; } /*! CSS Used from: https://developers.monday.com/developers-assets/css/screen-efe80d4f.css */ div,h1,h2,section { margin: 0; padding: 0; border: 0; vertical-align: baseline; } section { display: block; }