Skip to content

Instantly share code, notes, and snippets.

@tiagomatosweb

tiagomatosweb/fade-effect-css-1.html

Created June 4, 2019 12:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tiagomatosweb/2945edfa63ffde4fbe604b0f18f1181c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tiagomatosweb/2945edfa63ffde4fbe604b0f18f1181c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tiagomatosweb revised this gist Jun 4, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion fade-effect-css-1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!--
    Assista o vídeo dessa aula: https://youtu.be/ZdI_AEUgApw
    Se inscreva no canal: https://youtube.com/tiagomatosweb
    --
    -
    Valeu jovem
    TM ;)
    -->
  2. tiagomatosweb created this gist Jun 4, 2019.
    55 changes: 55 additions & 0 deletions fade-effect-css-1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    <!--
    Assista o vídeo dessa aula: https://youtu.be/ZdI_AEUgApw
    Se inscreva no canal: https://youtube.com/tiagomatosweb
    --
    Valeu jovem
    TM ;)
    -->

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fade 1</title>
    <style>
    .company {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    }
    .company__read-more {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 40px 0;
    text-align: center;
    background-image: linear-gradient(to bottom, transparent, white);
    }
    .company__read-more a {
    font-size: 14px;
    color: #FFF;
    background-color: #00B1E1;
    padding: 5px 20px;
    border-radius: 4px;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div class="company">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p>
    <div class="company__read-more">
    <a href="">Leia Mais</a>
    </div>
    </div>
    </body>
    </html>