Skip to content

Instantly share code, notes, and snippets.

@AmoahDevLabs
Last active March 15, 2021 02:07
Show Gist options
  • Save AmoahDevLabs/a2d000896b5bdf053237142e23317d3e to your computer and use it in GitHub Desktop.
Save AmoahDevLabs/a2d000896b5bdf053237142e23317d3e to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image and TEXT</title>
<style>
.img-container {
position: relative;
width: 100%; /* for IE 6*/
}
.img-container h2 span {
position: absolute;
top: 100px;
left: 0;
width: 100%;
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.abt-img {
width: 100%;
}
</style>
</head>
<body>
<div class="img-container">
<img src="{{ abt.image.url }}" alt="about image" class="abt-img">
<h2><span>Our Mission<br>We envision a world where anyone, anywhere has
the power to transform their life through learning.</span></h2>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment