<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
- .nav-pills {
+ h1 {
+ margin-top: 1rem;
+
+ }
+ .nav-pills, .saitama {
margin-bottom: 1rem;
}
-img {
- image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
- image-rendering: -moz-crisp-edges; /* Firefox */
- image-rendering: -o-crisp-edges; /* Opera */
- image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
- image-rendering: pixelated; /* Chrome */
- image-rendering: optimize-contrast; /* CSS3 Proposed */
- -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
- width: 100%;
-}
+ .container {
+ padding-bottom: 1rem;
+ }
+ img {
+ image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
+ image-rendering: -moz-crisp-edges; /* Firefox */
+ image-rendering: -o-crisp-edges; /* Opera */
+ image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+ image-rendering: pixelated; /* Chrome */
+ image-rendering: optimize-contrast; /* CSS3 Proposed */
+ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
+ width: 100%;
+ margin-top: 3.5rem;
+ position: sticky;
+ top: 3.5rem;
+ }
+ @media only screen and (max-width: 1200px) {
+ img {
+ height: 500px;
+ width: auto;
+ }
+ }
</style>
</head>
<body>
- <div class="container">
- <h1>The Onion Report</h1>
- <div class="row">
- <div class="col-lg-4"><img src="saitama.png" /></div>
- <div class="col-lg-8"><?php echo doIt(); ?></div>
- </div>
+ <div class="container-fluid">
+ <h1>The Onion Report</h1>
+ <div class="container">
+ <div class="row">
+ <div class="col-xl-4 saitama"><img src="saitama.png" class="mx-auto d-block" /></div>
+ <div class="col-xl-8"><?php echo doIt(); ?></div>
+ </div>
+ </div>
</div>
</body>
</html>