<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 ----------> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div class="container"> <div id="mypod-logo" class="row justify-content-center no-gutters"> <div class="col-50 center-block"> <img src="http://dev.media.mypod.online/media/mypod_logo_square.png" class="mypod-logo" /> </div> </div> <div class="row justify-content-center no-gutters"> <div class="col-50 center-block"> <form class="justify-content-center"> <input class="form-control form-control-lg form-control-borderless" type="search" placeholder="Enter a search and subscribe to the generated podcast"> </form> </div> </div> <div class="row after-search no-gutters"> <div class="col-sm center-block"> <p class="text-center">Subscribe using your favorite podcast app to receive new episodes that match your search automatically</p> </div> </div> <div class="row justify-content-center no-gutters podcast-icons"> <div class="col-1"></div> <div class="col-1"><a href="https://prod.mypod.online/feed?q=%22jack%20dorsey%22"></a><img src="xxx" width="50" heigh="50" /></a></div> <div class="col-1"><a href="https://radiopublic.com/https%3A%2F%2Fdev.mypod.online%2Ffeed%3Fq%3D%22jack%20dorsey%22"></a><img src="xxx" width="50" heigh="50" /></a></div> <div class="col-1"><img src="xxx" width="50" heigh="50" /></div> <div class="col-1"><img src="xxx" width="50" heigh="50" /></div> <div class="col-1"><img src="xxx" width="50" heigh="50" /></div> <div class="col-1"><img src="xxx" width="50" heigh="50" /></div> <div class="col-1"><img src="xxx" width="50" heigh="50" /></div> <div class="col-1"><img src="xxx" width="50" heigh="50" /></div> <div class="col-1"><img src="xxx" width="50" heigh="50" /></div> </div> <div class="row no-gutters search-results"> <div class="col"> <p class="search-results-intro">Preview of the latest podcast episodes that match your search for: <strong>"Jack Dorsey"</strong></p> <div class="row no-gutters search-results-row"> <div class="col-50"> <div class="row no-gutters episode-title-row"> <div class="col"> <p class="episode-title">Podcast Episode Title Goes Here...</h4> </div> </div> <div class="row no-gutters"> <div class="col-1 podcast-image"> <img src="xxx" width="100" height="100" /> </div> <div class="col search-result-info"> <p class="podcast-name">Podcast Name</p> <p class="podcast-episode-timestamp">Publish Date/Time</p> <p class="podcast-episode-description">Short episode description</p> </div> </div> </div> </div> <div class="row no-gutters"> <div class="col-50"> <div class="row no-gutters episode-title-row"> <div class="col"> <p class="episode-title">Podcast Episode Title Goes Here...</h4> </div> </div> <div class="row no-gutters"> <div class="col-1 podcast-image"> <img src="xxx" width="100" height="100" /> </div> <div class="col search-result-info"> <p class="podcast-name">Podcast Name</p> <p class="podcast-episode-timestamp">Publish Date/Time</p> <p class="podcast-episode-description">Short episode description</p> </div> </div> </div> </div> </div> </div> </div>

body { background-color: #202c53; font-family: 'Roboto', 'Arial'; } .no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } } #mypod-logo { padding-top:25px; } .mypod-logo { width: 200px; height: 200px; } input.form-control-borderless::placeholder { color: #cacbcd; font-style: italic; opacity: 1; } .form-control-borderless { border-radius: 5px; border: 1px solid rgb(168, 165, 165); box-shadow: 1px 1px 10px 0px rgb(208, 206, 206); font-size: 1.2em; font-weight: 400; height: 60px; left: 138; opacity: 1; text-align: left; width: 650px; } .after-search { padding-top:35px; padding-bottom:0; } .podcast-icons { padding-top: 1px; padding-bottom: 50px; } .search-results { background-color: #FFFFFF; border-radius: 25px; padding: 25px; margin-bottom: 35px; } .search-results-intro { font-style: italic; } .search-results-row { margin-bottom: 35px; } .episode-title-row { } .episode-title { font-size: 1.35em; font-weight: 700; margin-bottom: 5px; padding: 0; } .podcast-image { margin-right: 85px; padding: 0; } .search_result-info { } .podcast-name { font-size: 1.1em; font-weight: 600; color: #737171; padding: 0; margin: 0; } .podcast-episode-timestamp { font-size: 0.85em; font-style: italic; padding: 0; margin: 0; } .podcast-episode-description { padding: 0; margin: 8px 0; }