Thursday, 1 October 2020

HTML and CSS UI design Product Layout 2020


PUMA FOOTBALL PRODUCT UI DESIGN

Hey friends, today we will make a product UI design with pure Html5 and Css3.

Here is the sample video of the design.


DOWNLOAD IMAGES FROM HERE:

HERE IS THE HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css" />
    <title>PUMA</title>
  </head>
  <body>
    <div class="container">
      <div class="hero">
        <div class="logo">
          <img src="./logo.png" alt="" />
        </div>
        <div class="content">
          <div class="model">
            <h2>Puma 083285-02 TPU</h2>
            <ul>
              <li><strong>Brand</strong> Puma</li>
              <li><strong>Size</strong> 5</li>
              <li><strong>Material Type</strong> TPU</li>
              <li><strong>Manufacturer</strong> PUMA</li>
              <li><strong>Color</strong> ULTRA YELLOW-Black-Orange</li>
              <li><strong>Sport</strong> Soccer Ball, Football</li>
            </ul>
          </div>
          <div class="football">
              <img src="./fb.png" alt="">
          </div>
        </div>
        <div class="buy">
            <p>$22</p>
            <button>BUY NOW</button>
        </div>
        <div class="slogan">
            <div class="line"></div>
            <p>
                <strong>UNLEASH</strong>
                YOUR
                <strong>WILD</strong>
                SIDE
            </p>
        </div>
      </div>
    </div>
  </body>
</html>


HERE IS THE CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Carter+One&family=Julius+Sans+One&display=swap');
:root{
    --font1:'Carter One', cursive;
    --font2:'Julius Sans One', sans-serif;
}
*{
    margin0%;
    padding0%;
    box-sizing: border-box;
    overflow: hidden;
}
.container{
    height100vh;
    width: auto;
    max-width100%;
    max-height100%;
}
.hero{
    background-image: url(./bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height100vh;
    width: auto;
}
.hero .logo{
    position: absolute;
    left20px;
    top10px;  
}
.hero .logo img{
    height70px;
    width: auto; 
}
.content{
    display: flex;
    position: absolute;
    top180px;
    left50px;
    justify-content: center;
    align-items: center;
}
.content .model h2{
    font-size4rem;
    background: -webkit-linear-gradient(#db9621, #000000e1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   letter-spacing.2rem;
   font-family: var(--font1);
}
.content ul{
    margin-top30px;
    margin-left20px;
}
.content ul li{
    font-size1.5rem;
    font-family: var(--font2);
    color: black;
    line-height3.5rem;
}
.content ul li strong{
    margin-right20px;
}
.football{
    position: relative;
    left60px;
    width500px;
}
.football img{
    height400px;
    transition: all ease 2s;

}
.football img:hover{
    transform: scale(1.05) rotate(360deg);
}
.buy{
    position: relative;
    top650px;
    right250px;
    float: right;
}
.buy p{
    font-size3.6rem;
    font-family: var(--font2);
    color: black;
    text-align: center;
}
.buy button{
    background: linear-gradient(#e9ad0a, #585213e1);
    padding15px 30px;
    margin-top30px;
    color: black;
    font-size1.6rem;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius30px;
}
.buy button:hover{
    background: linear-gradient(#e9ad0a, #000000be);
}
.slogan{
    position: absolute;
    top680px;
    width300px;
    left40px;
    opacity.3;
    display: flex;
}
.slogan p{
    color: white;
    font-size2rem;
    font-family: var(--font2);
}
.slogan strong{
    color: #db9621;
    font-size3rem;
    font-family: var(--font1);
}
.slogan .line{
    background-color: #db9621;
    width5px;
    height110px;
    margin10px 10px;
}
Latest
Next Post

post written by:

0 Reviews: