HTML and CSS Cheat Sheet

  1. HTML Bolierplate

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

  2. HTML5 Table

    
<table border="1">
    <thead>
        <th>Table Heading 1</th>
        <th>Table Heading 2</th>
        <th>Table Heading 3</th>
    </thead>
    <tbody>
        <td>Table Deta 1</td>
        <td>Table Deta 2</td>
        <td>Table Deta 3</td>
    </tbody>
    <tfoot>
        <th>Table footer 1</th>
        <th>Table footer 2</th>
        <th>Table footer 3</th>
    </tfoot>                
</table>

  3. CSS Funcation

    Preview img Preview img 
    
filter: invert(100);

    **** Use between 0 to 100

  4. Im moving text 

    
<marquee>Im moving text</marquee>

    ****HTML has many types of marquee See More

  5. Hover Me 

    
.btn:link,
.btn:visited {
    text-decoration: none;
    padding: 10px 40px;
    display: inline-block;
    font-size: 25px;
    border-radius: 100px;
    transition: all .2s;
    position: relative;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, .3)
}

.btn:active:hover {
    transform: translateY(-1px);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .3)
}

.btn-white {
    color: #000000;
    background-color: #fff;
}

.btn-white::after {
    background-color: rgb(211, 211, 211);
}

.btn::after {
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: inline-block;
    position: absolute;
    z-index: -1;
    transition: all .5s;
    border-radius: 100px;
}

.btn:hover::after {
    transform: scaleX(1.5) scaleY(1.4);
    opacity: 0;
}

  6. Text Video Background 

    
<nav class="nav">
    <div class="nav__logo">
        <video autoplay muted loop>
            <source src="assets/video/video.mp4" type="video/mp4">
        </video>

        <div class="text-box">
            <a href="index.html"> Diptenu</a>
        </div>
    </div>

    <ol>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ol>
</nav>
                    
    
.nav { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
    height: 10vh;
    /* background: red; */
}

.nav .nav__logo {
    /* background: yellow; */
    height: 100%;
    width: 200px;
    position: relative;
}

.nav .nav__logo video {
    width: 100%;
    height: 100%;
}

.text-box {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.4rem;
    font-weight: 900;
    mix-blend-mode: multiply;
}

.text-box a {
    color: #fff;
    text-decoration: none;
}

.nav ol {
    list-style: none;
}

.nav ol li {
    display: inline-block;
    margin-right: 2rem;
}

.nav ol li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    padding: 1.3rem 2rem;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    border-radius: .8rem;
    -webkit-border-radius: .8rem;
    -moz-border-radius: .8rem;
    -ms-border-radius: .8rem;
    -o-border-radius: .8rem;
}

.nav ol li a:hover {
    background: red;
}

  7. How we can add a global file
    We need jquery & JavaScript for that 

    
$(function() {
  $("*[include-html]").each(function() {
    var t = $(this).attr("include-html"),
      u = this.id;
    jQuery.ajax({
      url: t,
      success: function(t) {
        $("#" + u).html(t)
      },
      error: function(n, c, i) {
        var s = n.status + ": " + n.statusText;
        $("#" + u).html(t + "-" + s)
      }
    })
  })
});

    Final code 

    
<div include-html="include/header.html" id="header_file"></div>