This is a HTML File and try to give a proper (class or Id) name to understand easily.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AmazonCard</title>
<link rel="stylesheet" href="/Clone.css">
</head>
<body>
<div id="main_wrapper">
<div class="big_container">
<div class="container">
<div class="top_container">
<div class="left_container">
<div class="company_logo">
<img src="/amazon logo.png" alt="logo" id="amazonpng">
</div>
<div class="company_profile">
<p class="company_name">Amazon</p>
<p class="rating">3.7 ★</p>
</div>
</div>
<div class="right_container">
<div class="first_right_container">
<p class="reviews_number head1">196.2K</p>
<p class="reviewsn footer1">Reviews</p>
</div>
<div class="second_right_container">
<p class="salaries_number head1">486.6K</p>
<p class="salaries footer1">Salaries</p>
</div>
<div class="third_right_container">
<p class="jobs_number head1">15.3K</p>
<p class="jobs footer1">Jobs</p>
</div>
</div>
</div>
<div class="mid_container">
<div class="first_mid_container">
<p class="locationKTM head2">Location</p>
<p class="ktm footer2">Kathmandu, Nepal</p>
</div>
<div class="second_mid_container">
<p class="global head2">Global Company Size</p>
<p class="employe footer2">10000+ Employees</p>
</div>
<div class="third_mid-_container">
<p class="industry head2">Industry</p>
<p class="internet footer2">Internet & Web Services</p>
</div>
</div>
<div class="last_container">
<p class="description">Description</p>
<p class="last_content">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>
</div>
<script src="/Clone.js"></script>
</body>
</html>
This is a CSS File
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.big_container{
width: 900px;
height: 300px;
border: 2px solid black;
/* display: flex;
justify-content: center;
align-items: center; */
border-radius: 20px;
}
.container{
margin: 15px;
}
.top_container{
height: 100px;
display: grid;
grid-template-columns: 1fr 1fr;
/* border: 2px solid red; */
}
.left_container{
display: inline;
display: flex;
}
#logo{
max-height: 100px;
max-width: 102px;
}
.company_logo{
height: 100px;
width: 102px;
border: 1px solid black;
float: left;
overflow: hidden;
border-radius: 10px;
}
.company_profile{
margin-left: 15px;
}
.company_name{
font-size: 30px;
font-weight: bolder;
}
.rating{
color: rgb(58, 239, 58);
font-size: 20px;
font-weight: bold;
}
.right_container{
/* display: inline; */
justify-content: end;
display: flex;
gap: 30px;
/* border: 2px solid green; */
/* margin-right: 0px; */
}
.first_right_container{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
.second_right_container{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
.third_right_container{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
}
.head1{
font-size: 24px;
font-weight: bold;
}
.footer1{
margin-top: 4px;
color: lightseagreen;
}
.mid_container{
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;
}
.last_container{
height: 100px;
margin-top: 20px;
}
.description{
font-size: 20px;
font-weight: bold;
}
.last_content{
margin-top: 4px;
}
It is a JavaScript code, First of all we know about which is parent element and child element by node tree methods then we are entering in DOM manipulation. First we create a HTML attribute by 1st Const ............ = document.createElement("HTML attribute") 2nd ............className = "" 3rd ...........textContent = ""
function card (main_wrapper) {
for (let index = 0; index <= 6; index++) {
// last_container
const Description = document.createElement("p");
Description.className = "description";
Description.textContent = "Description";
const LastContent = document.createElement("p");
LastContent.className = "last_content";
LastContent.textContent = "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..";
const LastContainer = document.createElement("div");
LastContainer.className = "last_container"
LastContainer.appendChild(Description);
LastContainer.appendChild(LastContent);
// third_mid_container
const Industry = document.createElement("p");
Industry.className = "industry, head2";
Industry.textContent = "Industry"
const Internet = document.createElement("p");
Internet.className = "internet, footer2";
Internet.textContent = "Internet & Web Services";
const ThirdMidContainer = document.createElement("div");
ThirdMidContainer.className = "third_mid_container";
ThirdMidContainer.appendChild(Industry);
ThirdMidContainer.appendChild(Internet);
// second_mid_container
const Global = document.createElement("p");
Global.className = "global, head2";
Global.textContent = "Global Company Size";
const Employe = document.createElement("p");
Employe.className = "employe, footer2";
Employe.textContent = "10000+ Employees";
const SecondMidContainer = document.createElement("div");
SecondMidContainer.className = "second_mid_container";
SecondMidContainer.appendChild(Global);
SecondMidContainer.appendChild(Employe);
// first_mid_container
const LocationKTM = document.createElement("p");
LocationKTM.className = "location, head2";
LocationKTM.textContent = "LocationKTM";
const Kathmandu = document.createElement("p");
Kathmandu.className = "ktm, footer2";
Kathmandu.textContent = "Kathmandu, Nepal";
const FirstMidContainer = document.createElement("div");
FirstMidContainer.className = "first_mid_container";
FirstMidContainer.appendChild(LocationKTM);
FirstMidContainer.appendChild(Kathmandu);
// mid_container
const MidContainer = document.createElement("div");
MidContainer.className = "mid_container";
MidContainer.appendChild(FirstMidContainer);
MidContainer.appendChild(SecondMidContainer);
MidContainer.appendChild(ThirdMidContainer);
// third_right_container
const JobsNumber = document.createElement("p");
JobsNumber.className = "jobs_number, head1";
JobsNumber.textContent = "15.3K";
const Jobs = document.createElement("p");
Jobs.className = "jobs, footer1";
Jobs.textContent = "Jobs";
const ThirdRightContainer = document.createElement("div");
ThirdRightContainer.className = "third_right_container"
ThirdRightContainer.appendChild(JobsNumber);
ThirdRightContainer.appendChild(Jobs);
// second_right_container
const SalariesNumber = document.createElement("p");
SalariesNumber.className = "salaries_number, head1";
SalariesNumber.textContent = "486.6K";
const Salaries = document.createElement("p");
Salaries.className = "salaries, footer1";
Salaries.textContent = "Salaries";
const SecondRightContainer = document.createElement("div");
SecondRightContainer.className = "second_right_container"
SecondRightContainer.appendChild(SalariesNumber);
SecondRightContainer.appendChild(Salaries);
// first_right_container
const ReviewsNumber = document.createElement("p");
ReviewsNumber.className = "reviews_number, head1";
ReviewsNumber.textContent = "196.2K";
const Reviews = document.createElement("p");
Reviews.className = "reviewsn, footer1";
Reviews.textContent = "Reviews";
const FirstRightContainer = document.createElement("div");
FirstRightContainer.className = "first_right_container"
FirstRightContainer.appendChild(ReviewsNumber);
FirstRightContainer.appendChild(Reviews);
// right_container
const RightContainer = document.createElement("div");
RightContainer.className = "right_container";
RightContainer.appendChild(FirstRightContainer);
RightContainer.appendChild(SecondRightContainer);
RightContainer.appendChild(ThirdRightContainer);
// company_profile
const CompanyName = document.createElement("p");
CompanyName.className = "company_name";
CompanyName.textContent = "Amazon";
const Rating = document.createElement("p");
Rating.className = "rating";
Rating.textContent = "3.7";
const CompanyProfile = document.createElement("div");
CompanyProfile.className = "company_profile"
CompanyProfile.appendChild(CompanyName);
CompanyProfile.appendChild(Rating);
// ompany_logo
const Logo = document.createElement("img");
Logo.className = "logo";
Logo.src = "/amazon logo.png"
const CompanyLogo = document.createElement("div");
CompanyLogo.className = "ompany_logo"
CompanyLogo.appendChild(Logo);
// left_container
const LeftContainer = document.createElement("div");
LeftContainer.className = "left_container";
LeftContainer.appendChild(CompanyLogo);
LeftContainer.appendChild(CompanyProfile);
// top_container
const TopContainer = document.createElement("div");
TopContainer.className = "top_container";
TopContainer.appendChild(LeftContainer);
TopContainer.appendChild(RightContainer);
// container
const Container = document.createElement("div");
Container.className = "container";
Container.appendChild(TopContainer);
Container.appendChild(MidContainer);
Container.appendChild(LastContainer);
// big_container
const BigContainer = document.createElement("div");
BigContainer.className = "big_container";
BigContainer.appendChild(Container);
const wrapper = document.getElementById("main_wrapper");
wrapper.appendChild(BigContainer)
}
};
card();
Here is the final result using function, for loop and call the function
The next blog is on reuse function for Amazon card
){kind=link}
0 Comments