🎅 Projekt (3) Karty Animowanej na stronę internetową lub bloga SNOWMAN

🔧 MOdelarstwo kartonowe, Mały Modelarz i własne projekty 🔧

🎅 Projekt (3) Karty Animowanej na stronę internetową lub bloga SNOWMAN

w dniu listopada 28, 2021

Hellow , How How How..... :)

Zapraszam do przeglądania kodu html i css3

Kochani jeśli podoba ci się to co robię i zawieszam na blogu. Proszę ciebie o wsparcie , abym mógł tworzyć dalej projekty i zawieszać na blogu.

Można wpłacać na PayPal lub zakupić świeczki na moim blogu ŚWIECZKI PARTLITE

KOD HTML

<body>
    <div class="main">
  <div class="sun"></div>
  <div class="snowman">
    <div class="top-hat">
      <div class="round-top"></div>
      <div class="hat-body-top"></div>
      <div class="hat-body-bottom">
        <div class="rounded-bottom"></div>
      </div>
      <div class="brim"></div>
    </div>
    <div class="snowman-head">
      <div class="left-eye"></div>
      <div class="right-eye"></div>
      <div class="carrot-nose"></div>
      <div class="coal-mouth coal-1"></div>
      <div class="coal-mouth coal-2"></div>
      <div class="coal-mouth coal-3"></div>
      <div class="coal-mouth coal-4"></div>
      <div class="coal-mouth coal-5"></div>
    </div>
    <div class="scarf">
      <div class="scarf-top"></div>
      <div class="left-side"></div>
      <div class="left-shadow"></div>
      <div class="left-bottom-shadow"></div>
      <div class="left-fringe">
        <div class="tassel tassel-1"></div>
        <div class="tassel tassel-2"></div>
        <div class="tassel tassel-3"></div>
        <div class="tassel tassel-4"></div>
        <div class="tassel tassel-5"></div>
        <div class="tassel tassel-6"></div>
        <div class="tassel tassel-7"></div>
        <div class="tassel tassel-8"></div>
      </div>
      <div class="right-side"></div>
      <div class="right-shadow"></div>
      <div class="right-bottom-shadow"></div>
      <div class="right-fringe">
        <div class="tassel tassel-1"></div>
        <div class="tassel tassel-2"></div>
        <div class="tassel tassel-3"></div>
        <div class="tassel tassel-4"></div>
        <div class="tassel tassel-5"></div>
        <div class="tassel tassel-6"></div>
        <div class="tassel tassel-7"></div>
      </div>
    </div>
    <div class="snowman-middle">
      <div class="coal-button button-1"></div>
      <div class="coal-button button-2"></div>
      <div class="coal-button button-3"></div>
    </div>
    <div class="snowman-bottom"></div>
  </div>
  <div class="branch-arms left-arm">
    <div class="arm-base"></div>
    <div class="arm-top"></div>
    <div class="finger-branch branch-left"></div>
    <div class="finger-branch branch-top"></div>
  </div>
  <div class="branch-arms right-arm">
    <div class="arm-base"></div>
    <div class="arm-top"></div>
    <div class="finger-branch branch-left"></div>
    <div class="finger-branch branch-top"></div>
  </div>
  <div class="snow"></div>
  <div class="snowfall"></div>
</div>
</body>

KOD CSS3

{
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;

}

.box{
    position: relative;
    border-radius: 8px;
    width: 400px;
    height: 400px;
    background: black;
}
.content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    align-items: center;
    color: white;
    padding: 20px;
    font-family: consolas;
    text-align: center;
}
.content a
{
    background-color: #4CAF50;
    border-radius: 4px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: 0.5s;
}
.content a:hover
{
    color: white;
    background: #1DEA3C ;
}
.box img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    -webkit-clip-path: polygon(0 0, 100% 0,100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 1s;
    
    
}
.box:hover img
{
    -webkit-clip-path: polygon(0 0, 100% 0,100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%); 
}

Dla was mały projekcik / zapraszam do subscrycji na Youtube :)

Komentarze