Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- .items{
- font-size:12px;
- list-style-type: none;
- margin:0px;
- padding:0px;
- display:flex;
- flex-direction: row;
- }
- .item{
- width:130px;
- text-align:center;
- /*height:365px;*/
- padding:15px 11px 45px 11px;
- }
- .item:nth-of-type(1){
- background:#a2d6d9;
- }
- .item:nth-of-type(2){
- background:#f48871;
- }
- .item:nth-of-type(3){
- background:#b9d694;
- }
- .item:nth-of-type(4){
- background:#fae17c;
- }
- .item:nth-of-type(5){
- background:#f6b56b;
- }
- .bg-darkblue{
- background:#51a7ac;
- }
- .bg-firebrick{
- background:#e8301d;
- }
- .bg-darkgreen{
- background:#89b453;
- }
- .bg-darkyellow{
- background:#f6c640;
- }
- .bg-darkorange{
- background:#f07f30
- }
- .item > span:nth-of-type(1){
- padding:5px;
- width:30px;
- display:inline-block;
- border-radius:20px;
- box-shadow:0px 1px 2px 0px rgb(0 0 0 / 80%);
- }
- .item > span > img{
- height:30px;
- }
- .item > h5{
- text-transform: uppercase;
- text-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.9);
- }
- .item:nth-of-type(1) > h5{
- color:#51a7ac;
- }
- .item:nth-of-type(2) > h5{
- color:#e8301d;
- }
- .item:nth-of-type(3) > h5{
- color:#89b453;
- }
- .item:nth-of-type(4) > h5{
- color:#f6c640;
- }
- .item:nth-of-type(5) > h5{
- color:#f07f30;
- }
- .item > span:nth-of-type(2){
- color:white;
- }
- .main{
- background: black;
- padding:20px 20px 15px 20px;
- width:720px;
- }
- .subtitle{
- text-align:center;
- font-family: 'Courier';
- color:white;
- margin-bottom:0px;
- margin-top:14px;
- }
- .nav{
- padding:4px;
- background:#999999;
- }
- .btn{
- margin-right:2px;
- padding:6px 4px 5px 4px;
- border:none;
- cursor:pointer;
- color:white;
- border-bottom: solid 1px #999999;
- }
- .btn:hover{
- border-bottom:solid 1px black;
- }
- .inner{
- background: white;
- }
- .big-heading{
- color:#f0412f;
- font-family:'Lucida Console';
- margin:25px 0px 15px 0px;
- transform: scale(1, 2);
- }
- .subheading{
- color:#787c7f;
- margin-top:0px;
- text-transform: uppercase;
- }
- .section{
- color:#c0c0c0;
- line-height:30px;
- margin-left:45px;
- margin-right:45px;
- padding-bottom:30px;
- }
- #home{
- text-align:center;
- padding:17px;
- margin:13px;
- }
- </style>
- </head>
- <body>
- <div class="main">
- <div class="inner">
- <div class="nav">
- <input type="button" value="File" class="btn bg-darkblue">
- <input type="button" value="Edit" class="btn bg-firebrick">
- <input type="button" value="View" class="btn bg-darkgreen">
- <input type="button" value="Tools" class="btn bg-darkyellow">
- <input type="button" value="Help" class="btn bg-darkorange">
- </div>
- <div id="home">
- <h1 class="big-heading">
- HTML AND CSS
- </h1>
- <h2 class="subheading">
- < Cheat Sheet >
- </h2>
- <div class="section">
- Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Amet excepturi sint perspiciatis commodi dolore exercitationem. Quis vero maxime natus suscipit voluptatem nostrum distinctio dolores pariatur! Asperiores, exercitationem consequatur quae odit.
- </div>
- </div>
- </div>
- <h5 class="subtitle">
- A TITLE FOR BEGINNERS
- </h5>
- </div>
- <ul class="items">
- <li class="item">
- <span class="bg-darkblue">
- <img src="https://static.thenounproject.com/png/89200-200.png" alt="">
- </span>
- <h5>
- HTML
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-firebrick">
- <img src="https://static.thenounproject.com/png/3803708-200.png" alt="">
- </span>
- <h5>
- CSS
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-darkgreen">
- <img src="https://static.thenounproject.com/png/3532081-200.png" alt="">
- </span>
- <h5>
- Snippets
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-darkyellow">
- <img src="https://static.thenounproject.com/png/3805888-200.png" alt="">
- </span>
- <h5>
- Tags
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- <li class="item">
- <span class="bg-darkorange">
- <img src="https://static.thenounproject.com/png/1489354-200.png" alt="">
- </span>
- <h5>
- Hyperlinks
- </h5>
- <span>
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nam, quam velit eligendi fuga nobis fugiat repellat modi delectus aperiam, culpa laborum magni. Distinctio, velit. Consequatur magni quia, quisquam error
- </span>
- </li>
- </ul>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement