Created
January 7, 2018 16:59
-
-
Save emmasamuel/eb2bd3230423ef09031fe319b7cac183 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/tucunijile
This file contains hidden or 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>JS Bin</title> | |
| <style id="jsbin-css"> | |
| html body * { | |
| text-align: center; | |
| width: auto; | |
| height: auto; | |
| padding: 0; | |
| margin: 0px; | |
| } | |
| .container { | |
| width: 700px; | |
| height: 1500px; | |
| padding-left: 450px; | |
| } | |
| .main { | |
| width: inherit; | |
| height 1600px; | |
| padding: 10px; | |
| margin: 0; | |
| } | |
| .heading { | |
| width: inherit; | |
| height: 300px; | |
| background-image: url(image/cloudy.jpeg); | |
| background-size: cover; | |
| color: #000; | |
| font-family: "times new roman" sans-serif; | |
| letter-spacing: normal | |
| font-size: 40px; | |
| text-align-last: left; | |
| } | |
| .nav { | |
| width: 700px; | |
| height: 30px; | |
| background-color: #880000; | |
| color: whitesmoke; | |
| border-radius: 4px; | |
| padding-top: 15px; | |
| } | |
| a { | |
| color: white; | |
| text-decoration-line: none; | |
| font-family: "times new roman" verdana monospace; | |
| font-size: 18px; | |
| font-weight:700; | |
| } | |
| a:active { | |
| color: black; | |
| } | |
| a:hover { | |
| text-transform: lowercase; | |
| } | |
| a:visited { | |
| background-color: pink; | |
| } | |
| .mainsection { | |
| width: 700px; | |
| padding-top: 30px; | |
| } | |
| h3 { | |
| width: inherit; | |
| height: 50px; | |
| color: #000; | |
| font-family: "times new roman" sans-serif; | |
| letter-spacing: normal; | |
| font-size: 40px; | |
| text-align-last: left; | |
| margin: 0; | |
| padding-top: 30px; | |
| padding-left: 15px | |
| } | |
| .img { | |
| width: 700px; | |
| height: 50px; | |
| background-image: url(image/elegant-1769669__340.png); | |
| background-repeat: no-repeat; | |
| } | |
| .image { | |
| width: auto; | |
| height: 60px; | |
| padding-left: 85px; | |
| } | |
| .section { | |
| width: 200px; | |
| height: 300px; | |
| color: #00000; | |
| font-family: verdana arial helvetica sans-serif; | |
| line-height: 25px; | |
| vertical-align: baseline; | |
| word-spacing: 0; | |
| letter-spacing: -1px; | |
| font-weight: 400%; | |
| font-style: oblique; | |
| font-variant: normal; | |
| text-transform: none; | |
| text-decoration: none solid rgb(0,0,0); | |
| text-indent: 0; | |
| float: left; | |
| } | |
| .sidenav { | |
| width: 200px; | |
| height: 155px; | |
| float: right; | |
| } | |
| ul * { | |
| color: #9b1313; | |
| font-size: 12px | |
| font-family: verdana arial helvetica sans-serif; | |
| line-height: normal; | |
| vertical-align: baseline; | |
| word-spacing: 0; | |
| letter-spacing: 0; | |
| font-weight: 400%; | |
| font-style: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| text-decoration: none solid rgb(0,0,0); | |
| text-indent: 0; | |
| list-style-image: url(image/link_image.png) | |
| } | |
| h2 { | |
| width: 150px; | |
| height: 20px; | |
| background-color: #880000; | |
| border-radius: 5px; | |
| color: white; | |
| font-family: verdana arial helvetica sans-serif; | |
| font-size: 20px; | |
| font-weight: 700px; | |
| } | |
| .footpage { | |
| width: 100%; | |
| height: 500px | |
| background-color: #00000; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="main"> | |
| <h3 class="heading"> Simple Factorial</h3> | |
| <div class="nav"> | |
| <a href="#"> HOME </a> | |
| <a href="#"> WEBSITE </a> | |
| <a href="#"> PORTFOLIO </a> | |
| <a href="#"> ABOUT US </a> | |
| <a href="#"> MATHEMATICS </a> | |
| <a href="#"> CONTACT US </a> | |
| </div> | |
| <div class="mainsection"> | |
| <div class="headings"> <h3>Simple!</h3></div> | |
| <div class="image"> <div class="img"></div> </div> | |
| <div class="section"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nibh malesuada, rutrum ipsum ut, tincidunt metus. Phasellus pretium, mi ac vehicula venenatis, urna arcu imperdiet neque</p> | |
| <br> | |
| <p class="secondline">quis congue purus augue a nisl. Sed feugiat consequat neque nec gravida. Pellentesque ut eros est. Nunc hendrerit mauris at velit iaculis, a mattis enim imperdiet. Phasellus gravida aliquam lorem, vel posuere diam.</p> | |
| </div> | |
| <div class="sidenav"> | |
| <h2>Popular Articles </h2> | |
| <ul> | |
| <li> <a href="#"> How to design </a></li> | |
| <li> <a href="#">What is WYSIWYG </a></li> | |
| <li> <a href="#"> How to SEO </a></li> | |
| <li> <a href="#">XHTML 1.0 Strict</a></li> | |
| <li> <a href="#">Why use a computer</a></li> | |
| <li> <a href="#">What the hell</a></li> | |
| </ul> | |
| <h2>Some Friends </h2> | |
| <ul> | |
| <li> <a href="#">How to design </a></li> | |
| <li> <a href="#"> What is WYSIWYG </a></li> | |
| <li> <a href="#"> How to SEO </a></li> | |
| <li> <a href="#">XHTML 1.0 Strict </a></li> | |
| <li> <a href="#">Why use a computer </a></li> | |
| <li> <a href="#">What the hell </a></li> | |
| </ul> | |
| <h2>Popular Articles </h2> | |
| <ul> | |
| <li> <a href="#"> How to design </a></li> | |
| <li> <a href="#">What is WYSIWYG </a></li> | |
| <li> <a href="#"> How to SEO </a></li> | |
| <li> <a href="#">XHTML 1.0 Strict</a></li> | |
| <li> <a href="#">Why use a computer</a></li> | |
| <li> <a href="#">What the hell</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- this is and other duplicate of mainsection class --> | |
| </div> | |
| <footer class="footpage"> | |
| <h3>jdsdhsdjalsjklajsk</h3> | |
| </footer> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">html body * { | |
| text-align: center; | |
| width: auto; | |
| height: auto; | |
| padding: 0; | |
| margin: 0px; | |
| } | |
| .container { | |
| width: 700px; | |
| height: 1500px; | |
| padding-left: 450px; | |
| } | |
| .main { | |
| width: inherit; | |
| height 1600px; | |
| padding: 10px; | |
| margin: 0; | |
| } | |
| .heading { | |
| width: inherit; | |
| height: 300px; | |
| background-image: url(image/cloudy.jpeg); | |
| background-size: cover; | |
| color: #000; | |
| font-family: "times new roman" sans-serif; | |
| letter-spacing: normal | |
| font-size: 40px; | |
| text-align-last: left; | |
| } | |
| .nav { | |
| width: 700px; | |
| height: 30px; | |
| background-color: #880000; | |
| color: whitesmoke; | |
| border-radius: 4px; | |
| padding-top: 15px; | |
| } | |
| a { | |
| color: white; | |
| text-decoration-line: none; | |
| font-family: "times new roman" verdana monospace; | |
| font-size: 18px; | |
| font-weight:700; | |
| } | |
| a:active { | |
| color: black; | |
| } | |
| a:hover { | |
| text-transform: lowercase; | |
| } | |
| a:visited { | |
| background-color: pink; | |
| } | |
| .mainsection { | |
| width: 700px; | |
| padding-top: 30px; | |
| } | |
| h3 { | |
| width: inherit; | |
| height: 50px; | |
| color: #000; | |
| font-family: "times new roman" sans-serif; | |
| letter-spacing: normal; | |
| font-size: 40px; | |
| text-align-last: left; | |
| margin: 0; | |
| padding-top: 30px; | |
| padding-left: 15px | |
| } | |
| .img { | |
| width: 700px; | |
| height: 50px; | |
| background-image: url(image/elegant-1769669__340.png); | |
| background-repeat: no-repeat; | |
| } | |
| .image { | |
| width: auto; | |
| height: 60px; | |
| padding-left: 85px; | |
| } | |
| .section { | |
| width: 200px; | |
| height: 300px; | |
| color: #00000; | |
| font-family: verdana arial helvetica sans-serif; | |
| line-height: 25px; | |
| vertical-align: baseline; | |
| word-spacing: 0; | |
| letter-spacing: -1px; | |
| font-weight: 400%; | |
| font-style: oblique; | |
| font-variant: normal; | |
| text-transform: none; | |
| text-decoration: none solid rgb(0,0,0); | |
| text-indent: 0; | |
| float: left; | |
| } | |
| .sidenav { | |
| width: 200px; | |
| height: 155px; | |
| float: right; | |
| } | |
| ul * { | |
| color: #9b1313; | |
| font-size: 12px | |
| font-family: verdana arial helvetica sans-serif; | |
| line-height: normal; | |
| vertical-align: baseline; | |
| word-spacing: 0; | |
| letter-spacing: 0; | |
| font-weight: 400%; | |
| font-style: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| text-decoration: none solid rgb(0,0,0); | |
| text-indent: 0; | |
| list-style-image: url(image/link_image.png) | |
| } | |
| h2 { | |
| width: 150px; | |
| height: 20px; | |
| background-color: #880000; | |
| border-radius: 5px; | |
| color: white; | |
| font-family: verdana arial helvetica sans-serif; | |
| font-size: 20px; | |
| font-weight: 700px; | |
| } | |
| .footpage { | |
| width: 100%; | |
| height: 500px | |
| background-color: #00000; | |
| color: white; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| html body * { | |
| text-align: center; | |
| width: auto; | |
| height: auto; | |
| padding: 0; | |
| margin: 0px; | |
| } | |
| .container { | |
| width: 700px; | |
| height: 1500px; | |
| padding-left: 450px; | |
| } | |
| .main { | |
| width: inherit; | |
| height 1600px; | |
| padding: 10px; | |
| margin: 0; | |
| } | |
| .heading { | |
| width: inherit; | |
| height: 300px; | |
| background-image: url(image/cloudy.jpeg); | |
| background-size: cover; | |
| color: #000; | |
| font-family: "times new roman" sans-serif; | |
| letter-spacing: normal | |
| font-size: 40px; | |
| text-align-last: left; | |
| } | |
| .nav { | |
| width: 700px; | |
| height: 30px; | |
| background-color: #880000; | |
| color: whitesmoke; | |
| border-radius: 4px; | |
| padding-top: 15px; | |
| } | |
| a { | |
| color: white; | |
| text-decoration-line: none; | |
| font-family: "times new roman" verdana monospace; | |
| font-size: 18px; | |
| font-weight:700; | |
| } | |
| a:active { | |
| color: black; | |
| } | |
| a:hover { | |
| text-transform: lowercase; | |
| } | |
| a:visited { | |
| background-color: pink; | |
| } | |
| .mainsection { | |
| width: 700px; | |
| padding-top: 30px; | |
| } | |
| h3 { | |
| width: inherit; | |
| height: 50px; | |
| color: #000; | |
| font-family: "times new roman" sans-serif; | |
| letter-spacing: normal; | |
| font-size: 40px; | |
| text-align-last: left; | |
| margin: 0; | |
| padding-top: 30px; | |
| padding-left: 15px | |
| } | |
| .img { | |
| width: 700px; | |
| height: 50px; | |
| background-image: url(image/elegant-1769669__340.png); | |
| background-repeat: no-repeat; | |
| } | |
| .image { | |
| width: auto; | |
| height: 60px; | |
| padding-left: 85px; | |
| } | |
| .section { | |
| width: 200px; | |
| height: 300px; | |
| color: #00000; | |
| font-family: verdana arial helvetica sans-serif; | |
| line-height: 25px; | |
| vertical-align: baseline; | |
| word-spacing: 0; | |
| letter-spacing: -1px; | |
| font-weight: 400%; | |
| font-style: oblique; | |
| font-variant: normal; | |
| text-transform: none; | |
| text-decoration: none solid rgb(0,0,0); | |
| text-indent: 0; | |
| float: left; | |
| } | |
| .sidenav { | |
| width: 200px; | |
| height: 155px; | |
| float: right; | |
| } | |
| ul * { | |
| color: #9b1313; | |
| font-size: 12px | |
| font-family: verdana arial helvetica sans-serif; | |
| line-height: normal; | |
| vertical-align: baseline; | |
| word-spacing: 0; | |
| letter-spacing: 0; | |
| font-weight: 400%; | |
| font-style: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| text-decoration: none solid rgb(0,0,0); | |
| text-indent: 0; | |
| list-style-image: url(image/link_image.png) | |
| } | |
| h2 { | |
| width: 150px; | |
| height: 20px; | |
| background-color: #880000; | |
| border-radius: 5px; | |
| color: white; | |
| font-family: verdana arial helvetica sans-serif; | |
| font-size: 20px; | |
| font-weight: 700px; | |
| } | |
| .footpage { | |
| width: 100%; | |
| height: 500px | |
| background-color: #00000; | |
| color: white; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
for review.