markTemplate1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

    <title>Template</title>

    <link rel="stylesheet" href="css/markTemplate1.css">
</head>
<body>
    <!-- Nav Bar -->
    <header>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Projects">Projects</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </header>

    <!-- Home -->
    <section id="Home">
        <div class="intro-text">
            <h1>John Smith</h1>
            <h3>First Year Computer Science Student</h3>
        </div>
        <img src="images/smilingGuy3.jpg" alt="profile image">
    </section>

    <!-- About -->
    <section id="About" class="fill-width">
        <div class="about-grid">
            <div>
                <h1 class="title-coloring">About Me</h1>
                <p>
                    Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                    Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                    duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                    modi ab cor rupti, sint tempo ribus. Rat ione, labo riosam magni.
                    Even iet labo riosam exp licabo quae beatae atque quod reic iendis
                    aliq uid nihil off icia, accus antium magni corp oris, volup tatem
                    placeat.
                </p>
            </div>
            
            <img src="images\smilingGuy3.jpg" alt="profile image">
    
            <div>
                <h1 class="title-coloring">Education</h1>
                <h4>Bachelor of Computing <br> University of Guelph</h4>
                <p>
                    Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                    Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                    duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                    modi ab cor rupti, sint tempo ribus. Rat ione, labo riosam magni.
                    Even iet labo riosam exp licabo quae beatae atque quod reic iendis
                    aliq uid nihil off icia, accus antium magni corp oris, volup tatem
                    placeat.
                </p>
            </div>

            <div>
                <h1 class="title-coloring">Skills</h1>

                <p>
                    Javascript: Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                    Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                    duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                    modi ab cor rupti, sint tempo ribus.
                    C/C++: Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                    Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                    duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                    modi ab cor rupti, sint tempo ribus.
                </p>
            </div>
        </div>
        <div id="Projects"></div>
    </section>

    
    <section>   <!-- Projects-->

        <h1 id="Project-Title">Projects</h1>

        <div class="fill-width">
            <section class="project">
                <img src="images\RandomFiller.jpg" alt="project image">

                <div class="Project-Description">
                    <h3 class="title-coloring">Project Name</h3>
                    <p>Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                        Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                        duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                        modi ab cor rupti, sint tempo ribus. Rat ione, labo riosam magni.
                        Even iet labo riosam exp licabo quae beatae atque quod reic iendis
                        aliq uid nihil off icia, accus antium magni corp oris, volup tatem
                        placeat.</p>
                </div>
            </section>
        </div>

        <div class="fill-width">
            <section class="project">
                <img src="images\RandomFiller2.jpg" alt="project image">

                <div class="Project-Description">
                    <h3 class="title-coloring">Project Name</h3>
                    <p>Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                        Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                        duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                        modi ab cor rupti, sint tempo ribus. Rat ione, labo riosam magni.
                        Even iet labo riosam exp licabo quae beatae atque quod reic iendis
                        aliq uid nihil off icia, accus antium magni corp oris, volup tatem
                        placeat. Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                        Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                        duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                        modi ab cor rupti, sint tempo ribus. 
                </p>
                </div>
            </section>
        </div>

        <div class="fill-width">
            <section class="project">
                <img src="images\RandomFiller3.png" alt="project image">

                <div class="Project-Description">
                    <h3 class="title-coloring">Project Name</h3>
                    <p>Lorem ipsum dolor sit amet, conse ctetur adipi sicing elit.
                        Pers pici atis tempore dol orum dele niti laud antium ipsam cons equu ntur
                        duc imus veri tatis ea quib usdam inve ntore unde pari atur volup tatum,
                        modi ab cor rupti, sint tempo ribus. Rat ione, labo riosam magni.
                        Even iet labo riosam exp licabo quae beatae atque quod reic iendis
                        aliq uid nihil off icia, accus antium magni corp oris, volup tatem
                        placeat.</p>
                </div>
            </section>
        </div>
    </section>

    <!-- Contact Me -->
    <footer id="Contact" class="fill-width">
            <div class="Contact-List">
                <a href="">Linkedin</a>
                <a href="">Instagram</a>
                <a href="">Github</a>
            </div>
    </footer>
</body>
</html>