Skip to content

project7-html-css #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

project7-html-css #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0864c19
Add files via upload
Subhajit944 May 21, 2025
cf5640f
Add files via upload
Subhajit944 May 21, 2025
4a14ef1
Add files via upload
Subhajit944 May 21, 2025
c97982e
Update README.md
Subhajit944 May 21, 2025
ae28462
Update README.md
Subhajit944 May 22, 2025
00425f8
Update README.md
Subhajit944 May 22, 2025
67c408b
Update README.md
Subhajit944 May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# HTML-CSS-Project
View this layout projects click here >> https://layout-1-html-css-by-subhajit.netlify.app/
View this layout projects click here >> https://layout7-html-css-by-subhajit.netlify.app/
Binary file added apj.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 71 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,80 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project 1</title>
<title> The Tribute Website // A.P.J Abdul Kalam </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container">
<section class="box-container">
<div class=" box box1"></div>
<div class="box box2"></div>
</section>
<section class="box-container">
<div class="box box3"></div>
<div class="box box4"></div>
</section>
<section class="box-container">
<div class="box box5"></div>
<div class="box box6"></div>
</section>
<section class="box-container">
<div class="box box7"></div>
<div class="box box8"></div>
</section>
</section>

<div class="container">
<div class="content">
<section class="top_section">
<div class="image_container" >
<img src="apj.png" alt="A.P.J Abdul Kalam">
</div>
<div>
<h1>A.P.J Abdul Kalam</h1>
<h4> 1931-2015</h4>
</div>
</section>
<section class="about_section">
<h2> Missile Man of India</h2>
<p>The India has produced a galaxy of great Sciecistis. Dr. APJ Abdul Kalam was on of them. This greate man
was born on 15th october in 1931 in Rameswarzam, Tamilnadu.
His pearnts were Jainulabdeen and Ashiamma. He got his primary education from Rameswaram Elementary school.
He got his jire education forom St. Joseph's college in Tiruchirappali in 1954. He became graduate in physies.
He Joined ismo in 1969. He was known as the Missile Man of India. He was end awarded Padma Bhusan in 1961,
Padma Bibuhusan in 1990, Bharat Ratna in 1997. This great man died on 27 July in 2015 i'n Shillong.
Though he is no morse with us, his mot name will be retain in goldden letters in the history of the india. Jame al
aval bor </p>

</section>
<section class="biography_section">
<h3>Biographies</h3>
<ul>
<li>
Eternal Quest: Life and Times of Dr Kalam by S Chandra; Pentagon
Publishers, 2002.
</li>
<li>
President A P J Abdul Kalam by R K Pruthi; Anmol Publications,
2002.
</li>
<li>
A P J Abdul Kalam: The Visionary of India by K Bhushan, G Katyal;
P H Pub Corp, 2002.
</li>
<li>
A Little Dream (documentary film) by P. Dhanapal; Minveli Media
Works Private Limited, 2008.
</li>
<li>
The Kalam Effect: My Years with the President by P M Nair; Harper
Collins, 2008.
</li>
<li>
My Days With Mahatma Abdul Kalam by Fr A K George; Novel
Corporation, 2009.
</li>
<li>
A.P.J. Abdul Kalam: A Life by Arun Tiwari; Haper Collins, 2015.
</li>
<li>
The People's President: Dr A P J Abdul Kalam by S M Khan;
Bloomsbury Publishing, 2016.
</li>

</ul>
</section>

<footer>
<p>
Read more about A.O.J. Abdul Kalam on <a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam">Wikipedia ..</a>
</p>
</footer>
</div>

</div>

</body>
</html>
169 changes: 97 additions & 72 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,102 @@

* {
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #ebd6fb;
}

.container {
max-width: 1200px;
height: 800px;
background-color:white;
margin: 80px 60px;
}

.box {
width: 100%;
height: 200px;
background-color: white;
}

.box-container {
}
.container {
background-color: #e5e5fd;
min-height: 100vh;
border: 20px solid #171857;
}


.content {
max-width:900px ;
margin: 0 auto;
}


.image_container {
border-radius: 50%;
overflow: hidden;
}

.image_container,
img {
width: 300px;
height: 320px;

}

.top_section{
margin-top: 100px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.top_section h1 {
font-size: 60px;
font-weight: bold;
color: #1d1e4c;
}

.top_section h4 {
font-size: 30px;
text-align: end;
}

.about_section {
margin-top: 50px;
}

.about_section h2 {
font-size: 40px;
width: 400px;
margin-bottom: 20px;
}

.about_section p {
font-size: 20px;
line-height: 30px;
letter-spacing: 1.2px;
}


.biography_section {
margin: 50px 0;
border: 3px solid #171857;


}

.box1 {
background-color: #eec4dc;
}

.box2 {
background-color:#e5a0c6 ;
}
.box3 {
background-color: #e27bb1;
}
.box4 {
background-color:#e2619f ;
}
.box5 {
background-color: #e44b8d;
}
.box6 {
background-color:#d24787 ;
}
.box7 {
background-color: #bb437e;
}
.box8 {
background-color: #a53e76;
}


@media screen and (width > 1200px) {
.container {
margin: 80px auto;
}
}

@media screen and (width < 1200px) and (width > 450px) {
.container {
margin: 40px 24px;
}
}

@media screen and (width < 450px) {
.container {
margin: 24px 16px;
}
}






}
.biography_section h3 {
margin-bottom: 20px;
font-size: 42px;
}

.biography_section ul {
margin-left:50px ;
}

.biography_section li {
margin-bottom: 15px;
}

footer {
margin: 50px 0;
}

footer p {
text-align: end;
}