AtufaShireen/index.html

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tribute Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="main.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>

</head>
<body>

<main id="main">

    <div class="spacing">
        <div id="title">
            <h1 class="display-4"><strong>Dr. APJ Abdul Kalam</strong></h1>
            <h3><em>Missile Man Of India</em></h3></div>
    </div>


    <figure id="img-div">
        <img src="https://www.jagranjosh.com/imported/images/E/Articles/Bharat-ratna-Abdul-Kalam.jpg" id="image" class="rounded mx-auto d-block">
        <figcaption id="img-caption">Mr.A.P.J recieving Bharat Ratna from President Of India</figcaption>
    </figure>

    <section id="tribute-info">
        <h3 id="headline">Interesting Facts About Missle Man Of India</h3>
        <ul>
            <li>APJ Kalam was born on October 15, 1931, into a poor family. His father had only one boat to support his
                family
            </li>
            <li>Kalam was a hardworking boy right from the beginning. At the tender age of five, he started selling
                newspapers to help his father support the family. He did this job in the evenings after school. He also
                spent a great deal of time on his studies.
            </li>
            <li>Kalam was fascinated by physics and mathematics.</li>
            <li>Kalam missed an opportunity to become a fighter pilot for the Indian Air force. He was on the ninth spot
                on the list, and there were only eight openings. The first eight shortlisted candidates were recruited.
            </li>
            <li>In 1960, Kalam became involved with DRDO’s Aeronautical Development Establishment.</li>
            <li>In 1969, Kalam was made the project director for Satellite Launch Vehicles and was shifted to ISRO. The
                project became successful, and India, under the directorship of Kalam, was able to launch the Rohini
                satellite series into Earth’s orbit.
            </li>
            <li>Kalam was known as the ‘Missile Man’ of India due to his continued, successful work with ballistic
                missiles and launch vehicle technology.
            </li>
            <li>Kalam also made significant contributions to the nuclear capabilities of India. The Pokhran -2 nuclear
                tests (in 1998) were successful thanks to his organizational and technical support.
            </li>
            <li>Kalam was honored with many awards, including the highest civilian award in the country, the Bharat
                Ratna (1997). His other awards include Padma Bhushan (1981) and Padma Vibhushan (1990).
            </li>
            <li> Interestingly, he was also honored with doctorates from 40 universities.</li>
            <li><strong>Inspired by his life, a Bollywood movie was also produced with the title, I Am Kalam.</strong>
            </li>
            <li>Kalam is a source of inspiration for millions of people in India and around the world.</li>
            <li>Kalam became the President of the largest democracy of the world –India – on July 25, 2002. He was known
                as <strong>“the People’s President”</strong> because of his simple and down-to-earth attitude.
            </li>
            <li>e was once asked by a journalist how would he like to be remembered: as a scientist, a president or a
                teacher. And he replied smilingly – “I want to be remembered as a teacher first and then as any other
                person.”
            </li>
            <li>Kalam’s visit to Switzerland is commemorated as Science Day in the country. This declaration in his
                honor was made by the Swiss government after the sad demise of this great personality.
            </li>
        </ul>

    </section>
    <div class="container">
        <blockquote>
            <p>"Look at the sky. We are not alone. The whole universe is friendly to us and conspires only to give the
                best to those who dream and work."</p>
            <cite>-----APJ Abdul Kalam</cite>
            <a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" id="tribute-link" target="_blank"> Know More
                About Him</a>
        </blockquote>
    </div>

</main>

</body>
</html>

## lwqway.markdown

      
    Raw
  

              lwqway.markdown
            
          
    LwQwaY

A Pen by atufa on CodePen.
License.

  
## style.scss

#main{
  background: #abbaab;
background: -webkit-linear-gradient(to right, #ffffff, #abbaab);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffffff, #abbaab);


}
#title{
padding:20px 2px 4px 50px;
background: #403B4A;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #E7E9BB, #403B4A);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E7E9BB, #403B4A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
h3{
padding:20px 20px 0px 20px;
}
#image{
padding:0px;
width:70%;
max-width:90%;
height:20%;
margin:0;
}
#img-caption{
text-align:center;
padding:0px 40px 50px 50px;
}
#img-div{
 /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

margin:20px;
padding:20px;
}
#headline{
text-align:center;
margin:0px 0px 20px 0px;
}
cite{
font-size:19px;
text-align:right;
padding-bottom:0px;
}
ul{
max-width:900px;
margin:40px 90px 60px 40px;
line-height:1.6;
}
li{
margin:5px;
}
blockquote{
padding:30px 30px 0px 30px;
margin:30px;
font-size:30px;
font-style:italic;
background: #616161;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9bc5c3, #616161);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #9bc5c3, #616161); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}


#tribute-link{
align:right;
font-size:20px;
color:black !important;
padding:70px 70px 0px 70px;
margin:70px 70px 0px 70px;
border:50px;
}


.spacing{
text-align: center;
top:50%;
left:50%;
padding:40px 0px 20px 0px;

}

p{
  text-align: center;
}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Tribute Page</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" href="main.css">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>

	</head>
	<body>

	<main id="main">

	<div class="spacing">
	<div id="title">
	<h1 class="display-4"><strong>Dr. APJ Abdul Kalam</strong></h1>
	<h3><em>Missile Man Of India</em></h3></div>
	</div>


	<figure id="img-div">
	<img src="https://www.jagranjosh.com/imported/images/E/Articles/Bharat-ratna-Abdul-Kalam.jpg" id="image" class="rounded mx-auto d-block">
	<figcaption id="img-caption">Mr.A.P.J recieving Bharat Ratna from President Of India</figcaption>
	</figure>

	<section id="tribute-info">
	<h3 id="headline">Interesting Facts About Missle Man Of India</h3>
	<ul>
	<li>APJ Kalam was born on October 15, 1931, into a poor family. His father had only one boat to support his
	family
	</li>
	<li>Kalam was a hardworking boy right from the beginning. At the tender age of five, he started selling
	newspapers to help his father support the family. He did this job in the evenings after school. He also
	spent a great deal of time on his studies.
	</li>
	<li>Kalam was fascinated by physics and mathematics.</li>
	<li>Kalam missed an opportunity to become a fighter pilot for the Indian Air force. He was on the ninth spot
	on the list, and there were only eight openings. The first eight shortlisted candidates were recruited.
	</li>
	<li>In 1960, Kalam became involved with DRDO’s Aeronautical Development Establishment.</li>
	<li>In 1969, Kalam was made the project director for Satellite Launch Vehicles and was shifted to ISRO. The
	project became successful, and India, under the directorship of Kalam, was able to launch the Rohini
	satellite series into Earth’s orbit.
	</li>
	<li>Kalam was known as the ‘Missile Man’ of India due to his continued, successful work with ballistic
	missiles and launch vehicle technology.
	</li>
	<li>Kalam also made significant contributions to the nuclear capabilities of India. The Pokhran -2 nuclear
	tests (in 1998) were successful thanks to his organizational and technical support.
	</li>
	<li>Kalam was honored with many awards, including the highest civilian award in the country, the Bharat
	Ratna (1997). His other awards include Padma Bhushan (1981) and Padma Vibhushan (1990).
	</li>
	<li> Interestingly, he was also honored with doctorates from 40 universities.</li>
	<li><strong>Inspired by his life, a Bollywood movie was also produced with the title, I Am Kalam.</strong>
	</li>
	<li>Kalam is a source of inspiration for millions of people in India and around the world.</li>
	<li>Kalam became the President of the largest democracy of the world –India – on July 25, 2002. He was known
	as <strong>“the People’s President”</strong> because of his simple and down-to-earth attitude.
	</li>
	<li>e was once asked by a journalist how would he like to be remembered: as a scientist, a president or a
	teacher. And he replied smilingly – “I want to be remembered as a teacher first and then as any other
	person.”
	</li>
	<li>Kalam’s visit to Switzerland is commemorated as Science Day in the country. This declaration in his
	honor was made by the Swiss government after the sad demise of this great personality.
	</li>
	</ul>

	</section>
	<div class="container">
	<blockquote>
	<p>"Look at the sky. We are not alone. The whole universe is friendly to us and conspires only to give the
	best to those who dream and work."</p>
	<cite>-----APJ Abdul Kalam</cite>
	<a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" id="tribute-link" target="_blank"> Know More
	About Him</a>
	</blockquote>
	</div>

	</main>

	</body>
	</html>

	#main{
	background: #abbaab;
	background: -webkit-linear-gradient(to right, #ffffff, #abbaab); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #ffffff, #abbaab);



	}
	#title{
	padding:20px 2px 4px 50px;
	background: #403B4A; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #E7E9BB, #403B4A); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #E7E9BB, #403B4A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	}
	h3{
	padding:20px 20px 0px 20px;
	}
	#image{
	padding:0px;
	width:70%;
	max-width:90%;
	height:20%;
	margin:0;
	}
	#img-caption{
	text-align:center;
	padding:0px 40px 50px 50px;
	}
	#img-div{
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	margin:20px;
	padding:20px;
	}
	#headline{
	text-align:center;
	margin:0px 0px 20px 0px;
	}
	cite{
	font-size:19px;
	text-align:right;
	padding-bottom:0px;
	}
	ul{
	max-width:900px;
	margin:40px 90px 60px 40px;
	line-height:1.6;
	}
	li{
	margin:5px;
	}
	blockquote{
	padding:30px 30px 0px 30px;
	margin:30px;
	font-size:30px;
	font-style:italic;
	background: #616161; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #9bc5c3, #616161); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #9bc5c3, #616161); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	}


	#tribute-link{
	align:right;
	font-size:20px;
	color:black !important;
	padding:70px 70px 0px 70px;
	margin:70px 70px 0px 70px;
	border:50px;
	}


	.spacing{
	text-align: center;
	top:50%;
	left:50%;
	padding:40px 0px 20px 0px;

	}

	p{
	text-align: center;
	}