Code for creating a basic web page.

By

 <style>

html {
/* Setting a base font size of 10px give us easier rem calculations
Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth
*/
font-size: 10px;
}

body {
/* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Helvetica Neue', Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: #0000FF;
margin: 10px 5px 10px 5px;
background: url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png)
}

h1 {
font-size: 4rem;
margin-bottom: 0;
}

@media (max-width: 460px) {
h1 {
font-size: 3.5rem;
line-height: 1.2;
}
}

h2 {
font-size: 3.25rem;
}

a {
color: #477ca7;
}

a:visited {
color: #74638f;
}

#main {
margin: 30px 8px;
padding: 15px;
border-radius: 5px;
}

@media (max-width: 460px) {
#main {
margin: 0;
}
}

img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
border: 5px green;
border-radius: 15px;
}

#img-div {
padding: 10px;
margin: 0;
}

#img-caption {
margin: 15px 0 5px 0;
}

@media (max-width: 460px) {
#img-caption {
font-size: 1.4rem;
}
}

#headline {
margin: 50px 0;
text-align: center;
}

ul {
max-width: 550px;
margin: 0 auto 50px auto;
text-align: left;
line-height: 1.6;
}

li {
margin: 16px 0;
}

blockquote {
font-style: italic;
max-width: 545px;
margin: 0 auto 50px auto;
text-align: left;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tribute page</title>
</head>
<body>
<main id="main">
    <h1 id="title">JUNAID AHMAD MIR</h1>
    <h3>A man without ambition is worse than a dead man.</h3>
    <figure id="img-div">
        <img
                id="image"
                src="https://pbs.twimg.com/media/EhhkPwAVoAAjfQ7?format=jpg&name=small"
                alt="Junaid Ahmad Mir pic date:2018"
        />
        <figcaption id="img-caption">
            Junaid Ahmad Mir with his mates at Delhi zoo in 2018.
        </figcaption>
    </figure>
    <section id="tribute-info">
        <h3 id="headline">Here is a small intro about Mir's life:</h3>
        <ul>
            <li><strong>1997</strong> - Born in Banagund kashmir</li>
            <li>
                <strong>2012</strong> - Matriculated from Government boys High School Nowpora.
            </li>
            <li>
                <strong>2015</strong> - Passed higher HSE part-2 from government Boys higher secondary Nagam.
            </li>
            <li>
                <strong>2020</strong> - left the college with an incomplete degree.
            </li>

            <li>
                <strong>present</strong> -Know the basics of web development, java, python, and AI. Also certified in
                "COMPUTER APPLICATIONS AND BUSSINESS ACCOUNTING AND MULTI-LINGUAL DESKTOP PUBLISHING" (CABA and MDTP
                ONE YEAR DIPLOMA), also certified java IOT developer. I may be lacking in degrees and high marks but I
                am a very innovative and passionate man trying to find my place in the current technological era....
            </li>
        </ul>
        <blockquote
                cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm"
        >
            <p>
                "Technology is the best and the most effective way to manipulate the world around us and to get the
                maximum from it. The innnovations and ideas must be cradled and bought up for the betterment of humans
                so that we all are blessed with the facilities and the basic rights of a peaceful world."
            </p>
        </blockquote>
        <h3>
            If you have time, you should read more about this young innnovative person on:
            <a
                    id="tribute-link"
                    href="https://the-mirs-mechatronics.blogspot.com"
                    target="_blank"
            >Personal Blog</a
            >.
        </h3>
    </section>
</main>

</body>
</html>

No comments:

Post a Comment