HTML code for Amazon card. First create a boiler template by press (Shift +1) OR (!) and press enter then it forms in your ......html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Create CSS file and add CSS file in HTML file using link:css. For example:
<link rel="stylesheet" href="/amazon.css">
There Is a HTML code for Amazon Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon Project</title>
<link rel="stylesheet" href="/amazon.css">
</head>
<body>
<div class="container">
<div class="containera">
<div class="container1">
<div class="container1_1">
<div class="logo">
<img src="/amazon.webp" alt="logo">
</div>
<div class="content">
<p class="amazon">Amazon</p>
<p class="star">3.7 ★</p>
</div>
</div>
<div class="container1_2">
<div class="container1_21">
<p class="1962k head1">196.2K</p>
<p class="reviewsn footer1">Reviews</p>
</div>
<div class="container1_22">
<p class="4866k head1">486.6K</p>
<p class="salaries footer1">Salaries</p>
</div>
<div class="container1_23">
<p class="153k head1">15.3K</p>
<p class="jobs footer1">Jobs</p>
</div>
</div>
</div>
<div class="container2">
<div class="container2_1">
<p class="location head2">Location</p>
<p class="ktm footer2">Kathmandu, Nepal</p>
</div>
<div class="container2_2">
<p class="global head2">Global Company Size</p>
<p class="employe footer2">10000+ Employees</p>
</div>
<div class="container2_3">
<p class="industry head2">Industry</p>
<p class="internet footer2">Internet & Web Services</p>
</div>
</div>
<div class="container3">
<p class="description">Description</p>
<p class="all">All Amazon teams and businesses, from delivery to AWS, are guided by four key tents: customer
obsession rather than competitor focous, passion for invention, commitment to operational excellence, and....
</p>
</div>
</div>
</div>
</body>
</html>
CSS code for Amazon card
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.container{
width: 900px;
height: 300px;
border: 2px solid black;
}
.containera{
margin: 15px;
}
.container1{
height: 100px;
display: grid;
grid-template-columns: 1fr 1fr;
/* border: 2px solid red; */
}
.container1_1{
display: inline;
display: flex;
}
.logo{
height: 100px;
width: 100px;
border: 2px solid black;
/* display: float; */
float: left;
}
.content{
margin-left: 15px;
}
.amazon{
font-size: 30px;
font-weight: bolder;
}
.star{
color: rgb(58, 239, 58);
font-size: 20px;
font-weight: bold;
}
.container1_2{
/* display: inline; */
justify-content: end;
display: flex;
gap: 30px;
/* border: 2px solid green; */
/* margin-right: 0px; */
}
.container1_21{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
.container1_22{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
.container1_23{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
.head1{
font-size: 24px;
font-weight: bold;
}
.footer1{
margin-top: 4px;
color: lightseagreen;
}
.container2{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 55px;
margin-top: 20px;
/* border: 2px solid blueviolet; */
}
.head2{
font-size: 20px;
font-weight: bold;
}
.footer2{
margin-top: 4px;
}
.container3{
height: 100px;
margin-top: 20px;
}
.description{
font-size: 20px;
font-weight: bold;
}
.all{
margin-top: 4px;
}
And the final result is
0 Comments