Created
November 13, 2017 17:05
-
-
Save Okoro91/cb31646ab0ae5c75efbeb98061de6fc2 to your computer and use it in GitHub Desktop.
MY DAY EXPRESS WITH IMAGES // source http://jsbin.com/nilazij
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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×tamp=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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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