Does anyone know of CSS property that I can use to achieve the same result as clip-path to make rounded shapes around a div? My site needs to be compatible with the latest version of IE, but I checked on www.caniuse.com and clip-path is not supported on IE 11.
This is what I am trying to do:
My current code works as you can see in this codepen: https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100
The problem is, that this code won’t work in IE, how can I solve this? Surely there must be another CSS property which does the same.
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin:10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center; }
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
clip-path: circle(50% at 50% 50%);
background-color: #fff;
border: 0.8rem solid #fff; }
.card__text-content {
position: absolute;
top: 6rem; }
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem; }
In this case, border-radius: 50%; on the .card__img will give you the same result, and it's compatible with IE9 and above.
Demo:
body {
background-color: gray;
}
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin: 10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center;
}
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
border-radius: 50%; /* instead of clip-path */
background-color: #fff;
border: 0.8rem solid #fff;
}
.card__text-content {
position: absolute;
top: 6rem;
}
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem;
}
<div class="card">
<div class="card__inner-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Light_bulb_icon_red.svg/2000px-Light_bulb_icon_red.svg.png" alt="Bulb icon" class="card__img">
<div class="card__text-content">
<h4 class="card__heading">We help charities</h4>
<p>Share knowledge and working practice to make the best technology choices.</p>
</div>
</div>
</div>
you could use inline SVG to clip an image as it has great browser support - http://caniuse.com/#search=inline%20svg
Related
I have a popup window (within the same page) which I'm attempting to put a container which scrolls horizontally into, yet it distorts the popup window and does not display anything other than the scrollbar. I'm honestly at a loss, can anyone help me here? I've looked around for solutions but I can't find anything that I can see applies to my problem.
If anyone can help, or point me in the right direction, I'd be really grateful. The scrollbar works perfectly fine when isolated, but inside the window shows like this:
Standalone:
My HTML (popup window with scrollbar inside)
<div id="formula-popup" class="popup-window">
<div>
<a onclick="closeFormulaWindow()" title="Close" class="close">X</a>
<span id="ftitle" class="title1"></span>
<form method="post" id="formulaform" name="edit">
<span>Current Formula</span>
<p id="current-formula" class="formula">Existing formula</p>
<input id="id-passer" type="hidden" name="formula-id" value="">
<!--sort out horizontal scrollbar from bookmarks here later-->
<input onclick="refreshWindow()" name="edit-formula" type="submit" value="Confirm">
</form>
<div class="h-scrollbar">
<section class="h-scrollbar-container">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
</div>
</div>
<div class="pseudo-track"></div>
</section>
</div>
</div>
My CSS:
.scrollbar-container {
display: flex;
flex-direction: row;
}
.h-scrollbar {
display: flex;
max-width: 30vw;
padding: 0px 10px;
height: 20vh;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.h-scrollbar-container {
width: 100%;
}
.outer-wrapper {
max-width: 100vw;
overflow-x: scroll;
position: relative;
scrollbar-color: #d5ac68 #f1db9d;
scrollbar-width: thin;
-ms-overflow-style: none;
}
.pseudo-track {
background-color: #f1db9d;
height: 2px;
width: 100%;
position: relative;
top: -3px;
z-index: -10;
}
.outer-wrapper::-webkit-scrollbar {
height: 5px;
}
.outer-wrapper::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}
.outer-wrapper::-webkit-scrollbar-thumb {
height: 5px;
background-color: #d5ac68;
}
.outer-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #f1db9d;
}
.outer-wrapper::-webkit-scrollbar:vertical {
display: none;
}
.inner-wrapper {
display: flex;
padding-bottom: 10px;
}
.pseudo-item {
height: 30px;
width: 80px;
margin-right: 15px;
flex-shrink: 0;
background-color: gray;
}
.pseudo-item:nth-of-type(2n) {
background-color: lightgray;
}
.popup-window {
position: fixed;
font-family: Arial, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
}
.popup-window div {
width: 40vw;
height: 30vw;
position: relative;
margin: 10% auto 30%;
border-radius: 10px;
background: #213B54;
padding-top: 2vh;
padding-left: 1vw;
padding-right: 1vw;
padding-bottom: 2vh;
display: flex;
flex-direction: column;
}
.close {
font: Arial, sans-serif;
background: #067A9F;
color: #B5E5E7;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
cursor: pointer;
}
.popup-window div .title1 {
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 36px;
color: #EE6802;
align-self: center;
}
.popup-window form input[type=submit]:hover {
opacity: 0.8;
}
.popup-window form span {
color: #EE6802;
font-size: 22px;
}
.popup-window form {
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
}
.popup-window form span, input {
width: 100%;
}
.popup-window form input[type=submit] {
width: 20%;
background-color: #067A9F;
color: #213B54;
padding: 14px 0;
cursor: pointer;
border: none;
}
I found the solution, it was that I forgot to select an element inside the window properly and instead it was selecting all divs and so overriding the CSS properties.
I have a "small" issue on my website with Firefox. On Google Chrome and Safari it is working just fine.
What it should be (Chrome and Safari):
Issue on Firefox:
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
<h2><span class="headline">Contact</span></h2>
The expected result is that the green line should be below the header (in this case below "Contact".
Reproducible code:
Important forgotten note; I use Bootstrap 4 too.
<style>
#wrapper {
position: relative;
margin: 25px auto 5px auto;
max-width: 820px;
min-height: 600px;
padding: 1px 0px 30px 0px;
background-color: #ffffff;
color: #603813;
text-align: center;
}
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-12">
<h2><span class="headline">Contact</span></h2>
</div>
</div>
</div>
</div>
I think the problem is that you don't define a vertical position (top or bottom) for your line, so the browser kinda just does anything.
Try adding
.headline:after {
top: 100%;
}
JSFiddle: https://jsfiddle.net/0p7948Lx/2/
I can't reproduce your issue in Firefox 60.8 on Debian. However, here is a somewhat simplified approach that works without position, transform and border. I find it a little more elegant.
Maybe it fixes the issue as well?
h2 {
width: 230px;
text-align: center;
}
.headline {
line-height: 1.5em;
}
.headline:after {
content: '';
display: block;
width: 100%;
height: 8px;
margin-top: 1em;
background: #64c800;
border-radius: 4px;
}
<h2><span class="headline">Contact</span></h2>
I'm trying to make a tooltip for a button that can have a variable offset. I thought I had found a good solution, but something strange happens when tested in another browser. The code below (and in this fiddle) will render differently between Chromium 72.0.3626.81 and Firefox 66.0b3 (both on Arch Linux). On Chromium it displays as expected, but on Firefox the tooltip is not offset correctly. On Firefox, the margin of the actual tooltip is off by half of what it should be.
Why does this happen, and how can I keep the intended behaviour consistent between browsers?
:root {
font-size: 62.5%;
font-family: 'sans-serif';
--tooltip-offset: 50px;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.link {
border-radius: 4px;
height: 4rem;
font-size: 1.6rem;
border: 1px solid hsl(215, 36%, 78%);
padding: 0 1.5rem;
justify-content: center;
align-items: center;
display: inline-flex;
}
.tooltip {
font-size: 1.4rem;
z-index: 2;
width: 225px;
position: absolute;
text-align: center;
padding: 0.7rem 3rem;
border-radius: 4px;
pointer-events: none;
top: 100%;
margin-top: 12px;
border: 1px solid black;
margin-left: calc(0px - var(--tooltip-offset));
}
.tooltip:before {
z-index: 1;
content: ' ';
position: absolute;
bottom: 100%;
border-color: transparent transparent black transparent;
margin-left: var(--tooltip-offset);
left: calc(50% - 12px);
border-width: 12px;
border-style: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div class="container">
<a class="link" href="example.com">
Go to example.com
</a>
<span class="tooltip">
Click here to go to example.com
</span>
</div>
I'm not sure if Firefox and Chrome handle negative margins differently, so a more reliable way might be to use transform:
:root {
font-size: 62.5%;
font-family: 'sans-serif';
--tooltip-offset: 50px;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.link {
border-radius: 4px;
height: 4rem;
font-size: 1.6rem;
border: 1px solid hsl(215, 36%, 78%);
padding: 0 1.5rem;
justify-content: center;
align-items: center;
display: inline-flex;
}
.tooltip {
font-size: 1.4rem;
z-index: 2;
width: 225px;
position: absolute;
text-align: center;
padding: 0.7rem 3rem;
border-radius: 4px;
pointer-events: none;
top: 100%;
margin-top: 12px;
border: 1px solid black;
transform: translateX(calc(0px - var(--tooltip-offset)));
}
.tooltip:before {
z-index: 1;
content: ' ';
position: absolute;
bottom: 100%;
border-color: transparent transparent black transparent;
margin-left: var(--tooltip-offset);
left: calc(50% - 12px);
border-width: 12px;
border-style: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div class="container">
<a class="link" href="example.com">
Go to example.com
</a>
<span class="tooltip">
Click here to go to example.com
</span>
</div>
That looks like it works correctly in both browsers on my end!
I want to make a circle <div>, like this image:
I have tried this code.
.discussion:after {
content: '\2807';
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 100px;
color:white;
}
<div class="discussion"></div>
How can I do this correctly?
You could just use :after pseudo-element with content: '•••' and transform: rotate. Note that this is the bullet HTML special character •, or \u2022.
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '•••';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
}
<div></div>
Improving on Nenad Vracar's answer, here's one that doesn't use text (so it's font-independent) and everything is centered nicely:
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 2px;
margin-left: -1px;
margin-top: -1px;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 0 2px white, 0 11px 0 2px white, 0 -11px 0 2px white;
}
<div></div>
Yet another answer, same as others except:
it uses the vertical ellipsis character (U+22EE)
text-align and line-height to center the content
does not use any pixel value
.discussion:after {
content: "\22EE";
/* box model */
display: inline-block;
width: 1em;
height: 1em;
/* decoration */
color: #FFFFFF;
background-color: #000000;
border-radius: 50%;
/* center align */
line-height: 1;
text-align: center;
}
<div class="discussion"></div>
<div class="discussion" style="font-size: 2em;"></div>
<div class="discussion" style="font-size: 3em;"></div>
<div class="discussion" style="font-size: 4em;"></div>
Note that U+2807 is actually a Braille pattern and the dots are not supposed to be centered.
Use this code.
.discussion {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background: #2d3446;
}
.discussion:after {
content: '\22EE';
font-size: 1em;
font-weight: 800;
color: white;
position: absolute;
left: 7px;
top: 1px;
}
<div class="discussion"></div>
Hope this helps!
I hope this is what you wanted! Otherwise feel free to ask.
.discussion{
display: block; /* needed to make width and height work */
background: #2d3446;
width: 25px;
height: 25px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.discussion:after {
content: '\2807';
font-size: 1em;
color: white;
margin-left: 15%;
}
<div class="discussion"></div>
Using text dots
.discussion{
width:50px;
height:50px;
text-align:center;
background-color:black;
border: 2px solid red;
border-radius: 100%;
}
.discussion text{
writing-mode: tb-rl;
margin-top:0.4em;
margin-left:0.45em;
font-weight:bold;
font-size:2em;
color:white;
}
<div class="discussion"><text>...</text></div>
.discussion:after {
content: '\2807';
font-size: 1em;
display: inline-block;
text-align: center;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 50%;
color: white;
padding:3px;
}
<div class="discussion"></div>
I have deleted (i found how to do it) all my post, the following code works for 3 vertical dot into a black circle
.discussion:after{
display:inline-block;
content:'\22EE';
line-height:100%;
border-radius: 50%;
margin-left:10px;
/********/
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
color:white;
}
<div class="discussion"></div>
I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another.
I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far:
.heart {
position: relative;
margin-top: 20px;
background-color: #000000;
opacity: .8;
width: 65px;
height: 30px;
border-radius: 15px;
display: inline;
}
.box {
margin: 75px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
display: flex;
}
.thumbnail_image {
position: absolute;
float: left;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
top: 60px;
left: 200px;
right: 100px;
width: 400px;
height: 338px;
position: relative;
display: flex;
}
h1 {
font-color: #ffffff !important;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
<div class="box">
<div class="heart">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
</div>
My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.
Use position:absolute; on heart dialog, text container, and image overlay elements and then position them correctly with the left and right properties.
Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.
I went ahead and mocked up your image with some html/css to give you an idea of implementation.
Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.
Here's my code, hope it helps:
body {
background-color: grey;
}
.container {
position:fixed;
height: 500px;
width: 700px;
background-image: url(http://i.stack.imgur.com/MS8X8.png);
background-position: 46% 52%;
background-size: 150%
}
.hearts {
position: absolute;
background-color: rgba(149, 165, 166,.5);
color: white;
right: 40px;
top: 15px;
padding: 15px 25px 15px 25px;
border-radius: 15px
}
.blue {
width: 550px;
height: 500px;
background-color: rgb(102,173,255);
float: right;
}
h1, h5 {
position: absolute;
font-family: sans-serif;
color: white;
text-transform: uppercase;
}
#quote {
left: 200px;
top: 30px;
font-size: 60px;
}
#attr {
left: 200px;
top: 450px;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<div class = "hearts">423</div>
<div class = "blue">
<h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
<h5 id = "attr">-Sheldon Cooper</h5>
</div>
</div>
</body>
</html>
Understanding the stacking order
In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:
div {
position: absolute;
background: red;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.two {
background: blue;
top: 10px;
left: 20px;
}
.three {
background: green;
top: 20px;
left: 40px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
With that out of the way...
Let's make these!
Feel free to jump to the complete example at the end of this answer!
Want to use some pedantic semantics?
A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted
Our markup now looks like this:
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<a href="#" class="love-counter">
<3 123
</a>
<nav>
Previous
Next
</nav>
</blockquote>
The CSS
Main background image and color
These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)
blockquote {
background: #18a0ff url(image-url) no-repeat;
background-size: 170px 490px;
}
Add the transparent grey background and quotation character
This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.
blockquote:before {
content: '\201C';
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 30px;
font-size: 2.4em;
text-align: center;
background: rgba(0,0,0,0.7);
width: 170px;
color: rgba(255,255,255,0.3);
}
Align the main quote text along with its citation
In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.
blockquote {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
}
Position the back / forward navigation and love counter
These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:
.love-counter {
position: absolute;
right: 20px;
top: 20px;
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
}
Complete example
Compatibility: IE 11+ and all modern browsers.
You might consider a javascript method to shrink the font size for larger quotes.
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
blockquote {
background: #18a0ff url(http://i.stack.imgur.com/e3nDc.jpg) no-repeat;
background-size: 170px 490px;
height: 490px;
color: #FFF;
font-family: 'Passion One', cursive;
font-size: 4.2em;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
font-weight: 400;
line-height: 1;
width: 650px;
text-transform: uppercase;
}
blockquote p {
margin: 0;
margin-top: 0.75em;
}
cite {
font-size: 0.25em;
font-weight: 400;
margin-top: 2em;
}
cite:before {
content: '\2014 '
}
blockquote:before {
content: '\201C';
font-size: 2.4em;
padding-top: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
width: 170px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.love-counter {
color: #FFF;
text-decoration: none;
font-size: 0.2em;
position: absolute;
right: 20px;
top: 20px;
font-family: helvetica;
font-weight: bold;
background: rgba(0, 0, 0, 0.2);
padding: 0 10px;
border-radius: 10px;
height: 30px;
line-height: 30px;
min-width: 60px
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 0;
width: 170px;
text-align: center;
}
nav a:before,
nav a:after {
font-size: 36px;
width: 50%;
display: inline-block;
color: #FFF;
}
nav a:first-child:before {
content: '<';
}
nav a:last-child:after {
content: '>';
}
.x-large {
background-image: url(http://i.stack.imgur.com/qWm5m.jpg);
}
.x-large p {
font-size: 0.62em;
}
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
<h2>Larger quote</h2>
<blockquote class="x-large">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<cite>Albert Einstein</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 30px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
</div>
</body>
<footer>
<div>
<h6>A Project by Charles Bateman</h6>
</div>
</footer>