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;
}
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
overflow: hidden;
}
.container{
height: 100vh;
width: auto;
max-width: 100%;
max-height: 100%;
}
.hero{
background-image: url(./bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: auto;
}
.hero .logo{
position: absolute;
left: 20px;
top: 10px;
}
.hero .logo img{
height: 70px;
width: auto;
}
.content{
display: flex;
position: absolute;
top: 180px;
left: 50px;
justify-content: center;
align-items: center;
}
.content .model h2{
font-size: 4rem;
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-top: 30px;
margin-left: 20px;
}
.content ul li{
font-size: 1.5rem;
font-family: var(--font2);
color: black;
line-height: 3.5rem;
}
.content ul li strong{
margin-right: 20px;
}
.football{
position: relative;
left: 60px;
width: 500px;
}
.football img{
height: 400px;
transition: all ease 2s;
}
.football img:hover{
transform: scale(1.05) rotate(360deg);
}
.buy{
position: relative;
top: 650px;
right: 250px;
float: right;
}
.buy p{
font-size: 3.6rem;
font-family: var(--font2);
color: black;
text-align: center;
}
.buy button{
background: linear-gradient(#e9ad0a, #585213e1);
padding: 15px 30px;
margin-top: 30px;
color: black;
font-size: 1.6rem;
cursor: pointer;
outline: none;
border: none;
border-radius: 30px;
}
.buy button:hover{
background: linear-gradient(#e9ad0a, #000000be);
}
.slogan{
position: absolute;
top: 680px;
width: 300px;
left: 40px;
opacity: .3;
display: flex;
}
.slogan p{
color: white;
font-size: 2rem;
font-family: var(--font2);
}
.slogan strong{
color: #db9621;
font-size: 3rem;
font-family: var(--font1);
}
.slogan .line{
background-color: #db9621;
width: 5px;
height: 110px;
margin: 10px 10px;
}
