diff --git a/README.md b/README.md index 20a9bfd..1b218cc 100644 --- a/README.md +++ b/README.md @@ -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/ diff --git a/apj.png b/apj.png new file mode 100644 index 0000000..8bd3e06 Binary files /dev/null and b/apj.png differ diff --git a/index.html b/index.html index b31afbf..5e3e28d 100644 --- a/index.html +++ b/index.html @@ -3,28 +3,80 @@ - Project 1 + The Tribute Website // A.P.J Abdul Kalam -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+
+
+
+ A.P.J Abdul Kalam +
+
+

A.P.J Abdul Kalam

+

1931-2015

+
+
+
+

Missile Man of India

+

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

+ +
+
+

Biographies

+
    +
  • + Eternal Quest: Life and Times of Dr Kalam by S Chandra; Pentagon + Publishers, 2002. +
    • +
  • + President A P J Abdul Kalam by R K Pruthi; Anmol Publications, + 2002. +
    • +
  • + A P J Abdul Kalam: The Visionary of India by K Bhushan, G Katyal; + P H Pub Corp, 2002. +
    • +
  • + A Little Dream (documentary film) by P. Dhanapal; Minveli Media + Works Private Limited, 2008. +
    • +
  • + The Kalam Effect: My Years with the President by P M Nair; Harper + Collins, 2008. +
    • +
  • + My Days With Mahatma Abdul Kalam by Fr A K George; Novel + Corporation, 2009. +
    • +
  • + A.P.J. Abdul Kalam: A Life by Arun Tiwari; Haper Collins, 2015. +
    • +
  • + The People's President: Dr A P J Abdul Kalam by S M Khan; + Bloomsbury Publishing, 2016. +
    • + +
+
+ + +
+ +
\ No newline at end of file diff --git a/style.css b/style.css index a55070f..e80618b 100644 --- a/style.css +++ b/style.css @@ -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; - } - } - - - - - \ No newline at end of file + +} +.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; +} + + + + + + + + + +