Skip to content

Instantly share code, notes, and snippets.

@Okoro91

Okoro91/index.html

Created November 13, 2017 17:05
Show Gist options
  • Save Okoro91/68a0f73d0cee49446d56a83625a4e27b to your computer and use it in GitHub Desktop.
Save Okoro91/68a0f73d0cee49446d56a83625a4e27b to your computer and use it in GitHub Desktop.
Download ZIP
MY DAY EXPRESS WITH IMAGES // source http://jsbin.com/nilazij
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MY DAY EXPRESS WITH IMAGES</title>
<style id="jsbin-css">
body{
background-color:#800080;
margin:0px;
padding:0px;
}
nav{
background-color:red;
margin-left:-200px;
width:250px;
padding-right:20px;
}
nav:hover{
background-color:cyan;
margin-left:50px;
width:200px;
}
nav:active{
background-color:blue;
}
figcaption{
background-color:grey;
margin:0px;
padding:0px;
}
.responsive-image{
margin:0px;
padding:0px;
}
figure{
margin:0px;
padding:0px;
}
ul{
list-style-type:none;
}
</style>
</head>
<body>
<header>
<h1>M.I Okoro's Day</h1>
<p>just want to share how i spent my day</p>
<img src="https://lh3.googleusercontent.com/ES68bmK70eUQ5FGn-JK0EPPoVCOnqRWLtHvpDypkDKoCIIyiGyCzZlXyMIVdBHYBCAQ7nDHgBWI=x0-y0-z1" width="200px" alt="After the days work">
<nav>
<ul>
<a href="#fig1"><li>Rise of the dawn</li></a>
<a href="#fig2"><li>For the first task</li></a>
<a href="#fig3"><li>Get energized</li></a>
<a href="#fig4"><li>productivity</li></a>
<a href="#fig5"><li>Never atop learning</li></a>
<a href="#fig6"><li>In HIS Name</li></a>
<a href="#fig7"><li>light out</li></a>
</ul>
</nav>
</header>
<hr>
<br>
<main>
<figure id="fig1">
<img class="responsive-image" width="460" height="560" src="http://cdn.productivemuslim.com/wp-content/uploads/2014/05/ProductiveMuslim-How-I-Consistently-Wake-Up-for-Fajr-45-Minutes-Before-Adhan-600.png" alt=""">
<figcaption>Waking up in the morning and given thanks to the Lord the most High for another beautiful love day</figcaption>
</figure>
<figure id="fig2">
<img class="responsive-image" width="460" height="560" src="https://s-media-cache-ak0.pinimg.com/originals/36/26/de/3626de7a6e78498f5f5515d443f6fc17.jpg" alt="image showing my first task">
<figcaption>My first task of the day is to appreciate my Lord for another brighter day</figcaption>
</figure>
<figure id="fig3">
<img
class="responsive-image" src="https://fitnessforrealpeople.files.wordpress.com/2015/07/sundaybrunch-thewestin-hyderabad.jpg" width="460" height="560" alt="image of morning breakfast">
<figcaption>Taken breakfast makes me fit for the task ahead</figcaption>
</figure>
<figure id="fig4">
<img class="responsive-image" width="460" height="560" src="https://www.edutopia.org/sites/default/files/styles/responsive_2880px/public/cover_media/burns-169hero-checkunderstand-500px.jpg?itok=4VzvmMaU&timestamp=1493657370" alt="productivity image">
<figcaption>Having a productive day</figcaption>
<img class="responsive-image" width="460" height="560" src="https://image.slidesharecdn.com/prombookslideshare-final-low-quality-2-160207192822/95/book-trailer-the-productive-muslim-where-faith-meets-productivity-12-638.jpg?cb=1460477600" alt="image of spiritual productivity">
<figcaption>Having a productive day and never forgeting my 5 daily prayer</figcaption>
</figure>
<figure id="fig5">
<img class="responsive-image" width="460" height="560" src="http://www.lifeinspirationtoday.com/wp-content/uploads/2014/04/online-learning.jpg" alt=""">
<figcaption>Tech Learning</figcaption>
<figure id="fig6">
<img class="responsive-image" width="460" height="560" src="https://yayuelsahdotcom1.files.wordpress.com/2013/05/kepada-mu-aku-bersujud.jpg?w=705" alt="prayer before bed">
<figcaption>yap! to glorify His name once again before Sleeping for such a wonderful and productive day</figcaption>
<figure id="fig7">
<img class="responsive-image" width="460" height="560" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3tXLcLSGtCHK46CvY3uE4o8H0FG9bUsJ1gSSGlInimVxc3S3ZOg" alt="sleeping time image">
<figcaption>Light Out</figcaption>
</main>
<script id="jsbin-source-css" type="text/css">body{
background-color:#800080;
margin:0px;
padding:0px;
}
nav{
background-color:red;
margin-left:-200px;
width:250px;
padding-right:20px;
}
nav:hover{
background-color:cyan;
margin-left:50px;
width:200px;
}
nav:active{
background-color:blue;
}
figcaption{
background-color:grey;
margin:0px;
padding:0px;
}
.responsive-image{
margin:0px;
padding:0px;
}
figure{
margin:0px;
padding:0px;
}
ul{
list-style-type:none;
}</script>
</body>
</html>
Raw
jsbin.nilazij.css
body{
background-color:#800080;
margin:0px;
padding:0px;
}
nav{
background-color:red;
margin-left:-200px;
width:250px;
padding-right:20px;
}
nav:hover{
background-color:cyan;
margin-left:50px;
width:200px;
}
nav:active{
background-color:blue;
}
figcaption{
background-color:grey;
margin:0px;
padding:0px;
}
.responsive-image{
margin:0px;
padding:0px;
}
figure{
margin:0px;
padding:0px;
}
ul{
list-style-type:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment