Webleb - Snippets de Código - Notificação de brinde

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    width: 100%;
    min-height: 100vh;
    background: #e6e6e6;
}
.connection
{
    position: fixed;
    bottom: 50px;
    left: 50px;
    width: 360px;
    height: 70px;
    background: #242526;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}
.connection p
{
    font-size: 14px;
    color: #fff;
    font-weight: 300;
}
.connection .refreshBtn
{
    font-size: 16px;
    margin-left: 10px;
    text-decoration: none;
    color: #469aff;
}
.connection .wifi-off
{
    margin-right: 20px;
    font-size: 26px;
    color: #7c7c7c;
}
.connection .close
{
    margin-left: 20px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    background: #474747;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.connection .wifi
{
    color: #029702;
    font-size: 26px;
    margin-right: 20px;
}
.online.active
{
    width: 420px;
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}
.offline.active
{
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  background: #f2f2f2;
}
.wrapper{
  position: absolute;
  top: 20px;
  left: 20px;
  animation: show_toast 1s ease forwards;
}
@keyframes show_toast {
  0%{
    transform: translateX(-100%);
  }
  40%{
    transform: translateX(10%);
  }
  80%, 100%{
    transform: translateX(20px);
  }
}
.wrapper.hide{
  animation: hide_toast 1s ease forwards;
}
@keyframes hide_toast {
  0%{
    transform: translateX(20px);
  }
  40%{
    transform: translateX(10%);
  }
  80%, 100%{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
  }
}
.wrapper .toast{
  background: #fff;
  padding: 20px 15px 20px 20px;
  border-radius: 10px;
  border-left: 5px solid #2ecc71;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
  width: 430px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .toast.offline{
  border-color: #ccc;
}
.toast .content{
  display: flex;
  align-items: center;
}
.content .icon{
  font-size: 25px;
  color: #fff;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  background: #2ecc71;
}
.toast.offline .content .icon{
  background: #ccc;
}
.content .details{
  margin-left: 15px;
}
.details span{
  font-size: 20px;
  font-weight: 500;
}
.details p{
  color: #878787;
}
.toast .close-icon{
  color: #878787;
  font-size: 23px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  transition: all 0.3s ease;
}
.close-icon:hover{
  background: #efefef;
}

JS

// Selecting all required elements
const wrapper = document.querySelector(".wrapper"),
toast = wrapper.querySelector(".toast"),
title = toast.querySelector("span"),
subTitle = toast.querySelector("p"),
wifiIcon = toast.querySelector(".icon"),
closeIcon = toast.querySelector(".close-icon");

function offline(){ //function for offline
        wrapper.classList.remove("hide");
        toast.classList.add("offline");
        title.innerText = "You're offline now";
        subTitle.innerText = "Opps! Internet is disconnected.";
        wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
    }

setInterval(()=>{ //this setInterval function call ajax frequently after 100ms
        ajax();
    }, 100);
}

Notificação de brinde

Recomendado

Código HTML do jogo Aquapark IO desbloqueado

Código da barra de navegação HTML CSS

Modelo de site de portfólio HTML CSS JavaScript

HTML

CSS

JS

Recomendado

Código HTML do jogo Aquapark IO desbloqueado

Código da barra de navegação HTML CSS

Modelo de site de portfólio HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS