First of all create a HTML File with a proper name, create a CSS File and also a JavaScript File then add CSS File and JavaScript File in HTML File
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>
<link rel="stylesheet" href="/Clone.css">
<script src="/Clone.js"></script>
</head>
<body>
<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="location 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>
</body>
</html>
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;
}
Amazon logo with
Height: 100px
Width: 102px
Result Using HTML and CSS
DOM manipulation in JavaScript
// last_container
const Description = document.createElement("p");
Description.className = "description";
const LastContent = document.createElement("p");
LastContent.className = "last_content";
LastContent.textContent = "";
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";
const Internet = document.createElement("p");
Internet.className = "internet footer2";
Internet.textContent = "";
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";
const Employe = document.createElement("p");
Employe.className = "employe footer2";
Employe.textContent = "";
const SecondMidContainer = document.createElement("div");
SecondMidContainer.className = "second_mid_container";
SecondMidContainer.appendChild(Global);
SecondMidContainer.appendChild(Employe);
// first_mid_container
const Location = document.createElement("p");
Location.className = "location head2";
const Kathmandu = document.createElement("p");
Kathmandu.className = "ktm footer2";
Kathmandu.textContent = "";
const FirstMidContainer = document.createElement("div");
FirstMidContainer.className = "first_mid_container";
FirstMidContainer.appendChild(Location);
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 = "";
const Jobs = document.createElement("p");
Jobs.className = "jobs footer1";
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 = "";
const Salaries = document.createElement("p");
Salaries.className = "salaries footer1";
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 = "";
const Reviews = document.createElement("p");
Reviews.className = "reviewsn footer1";
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 = "mid_container";
RightContainer.appendChild(FirstRightContainer);
RightContainer.appendChild(SecondRightContainer);
RightContainer.appendChild(ThirdRightContainer);
// company_profile
const CompanyName = document.createElement("p");
CompanyName.className = "company_name";
const Rating = document.createElement("p");
Rating.className = "rating";
Rating.textContent = "";
const CompanyProfile = document.createElement("div");
CompanyProfile.className = "last_container"
CompanyProfile.appendChild(CompanyName);
CompanyProfile.appendChild(Rating);
// ompany_logo
const Logo = document.createElement("img");
Logo.className = "logo";
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 = "left_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);
I am little confuse in dot textContent [.textContent], I will update later
0 Comments