markTemplate2.html

<!-- almost identical to the html from the first template-->

<!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:wght@300&family=PT+Sans:wght@700&display=swap" rel="stylesheet">

    <title>Template</title>

    <link rel="stylesheet" href="css/markTemplate2.css">
</head>
<body>
    <!-- Nav Bar -->
    <header>
        <div class="top-header">
            <h2 id="nav-name"><a class="Name-Text" href="">Your<br>Name</a></h2>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#About">About</a></li>
                <li><a href="#Projects">Projects</a></li>
            </ul>
        </div>

        <div class="Contact-List">
            <a href="#"><img src="images\linkedin-logo.png"></a>
            <a href="#"><img src="images\instagram-logo.png"></a>
            <a href="#"><img src="images\git-logo.jpg"></a>
        </div>
    </header>

    <!-- Home -->
    <section id="Home">
        <div class="Profile">
            <img id="Profile-Image" src="images\headshotphoto.jpg" alt="profile image">
        </div>
    </section>

    <!-- About -->
    <section id="About">
        <div class="about-grid">
            <div class="About-Text">
                <h1>About Me</h1>
                <h2 class="about-subhead">Student</h2>
                <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 class="About-Text">
                <div class="education-title">
                    <h1>Education</h1>
                    <h4>Bachelor of Computing <br> University of Guelph</h4>
                </div>
                <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 class="About-Text">
                <h1 class="skills-title">Skills</h1>

                <p>
                    Javascript: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Perspiciatis tempore dolorum deleniti laudantium ipsam consequuntur
                    ducimus veritatis. 
                    
                    C/C++: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Perspiciatis tempore dolorum deleniti laudantium ipsam consequuntur
                    ducimus veritatis.
                </p>
            </div>
        </div>
    </section>

    <!-- Projects, 90 words max for description-->
    <section id="Projects">

        <h1>Projects</h1>

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

                <div class="Project-Description">
                    <h3>Project Name</h3>
                    <p>Nemo ipsum architecto distinctio ea consequuntur at
                        officiis inventore quas fuga, dolorem perspiciatis, ad corporis,
                        unde ullam! Nemo ipsum architecto distinctio ea consequuntur at
                        officiis inventore quas fuga, dolorem perspiciatis, ad corporis,
                        unde ullam! Nemo ipsum architecto distinctio ea consequuntur at
                        officiis inventore quas fuga, dolorem perspiciatis, ad corporis,
                        unde ullam!Nemo ipsum architecto distinctio ea consequuntur at
                        officiis inventore quas fuga, dolorem perspiciatis, ad corporis,
                        unde ullam!Nemo ipsum architecto distinctio ea consequuntur at
                        officiis inventore quas fuga, dolorem perspiciatis, ad corporis,
                        unde ullam!</p>
                </div>
            </section>
        </div>

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

                <div class="Project-Description">
                    <h3>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  Pac Man 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\RandomFiller3.png" alt="project image">

                <div class="Project-Description">
                    <h3>Project Name</h3>
                    <p>Nemo ipsum architecto distinctio ea consequuntur at
                        officiis inventore quas fuga, dolorem perspiciatis, ad corporis,
                        unde ullam! Nemo ipsum architecto distinctio ea consequuntur at
                        officiis inventore quas fuga, dolorem perspiciatis, ad corporis,
                        unde ullam!</p>
                </div>
            </section>
        </div>
    </section>

    <!-- Contact Me -->
    <footer id="Contact">
            
    </footer>
</body>
</html>