webdevlabs/template.html at main · yamj6/webdevlabs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./static/script.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Document</title>
</head>
<body>
    <div class="grid-container">
        <header id="greeting">Hi, my name is Annie</header>
        <div class="topNav" id="myTopnav">
            <a class="navTitle" href="index.html" target="_self">Home</a>
            <a class="navTitle" href="views/cv.html" target="_self">CV</a>
            <a class="navTitle" href="views/contact.html" target="_self">Contact me</a>
            <a class="navTitle" href="views/fun.html" target="_self">For fun</a>
            <a href="template.html">Template</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
        <figure>
            <img src="static/beach-image.jpg" alt="Picture of beach" width="600" height="300">
        </figure>
        <main>
            <p id="intro">
                Welcome to my website! My name is Annie Min, a current sophomore
                studying Information Systems at Carnegie Mellon University.
            </p>
            <button id="readMoreButton">Read More</button>
            <p id="readMoreIntro">
                stuff stuff stuff
            </p>
            <button id="readLessButton">Read Less</button>
        </main>
        <summary>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit dolor leo,
            ac accumsan lorem consequat eget. Nam ut massa malesuada, tincidunt nulla ut,
            sollicitudin tortor. Aliquam eu est elementum, placerat purus sed, rutrum metus.
            Sed hendrerit a sem id tristique.
        </summary>
        <footer>Footer</footer>
    </div>
</body>
</html>