HTML-CSS-Coursework-Week4/index.html at 17c01ccb2155deda47b90672f9b53ab9e890336d · CodeYourFuture/HTML-CSS-Coursework-Week4 · 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Add a link to your custom CSS here -->
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <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=Poppins:ital,wght@1,600&display=swap" rel="stylesheet">
<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=Poppins:ital,wght@1,600&family=Quicksand:wght@300&display=swap" rel="stylesheet">


    <title>Responsive grid project</title>
</head>

<body>

    <!-- Add your markup here -->
   <header>
        <nav class="navbar">
            <div class="square"></div>
            <div class="navbar left_navbar"><span id="name">Maya Nelson</span> / PROJECT MANAGER</div>
            <div class="navbar right_navbar">
                <div class="navbar_links"><a href="#">About Me</a></div>
                <div class="navbar_links"><a href="#">RESUME</a></div>
                <div class="navbar_links"><a href="#">PROJECTS</a></div>
                <div class="navbar_links"><a href="#">CONTACT</a></div>
            </div>

        </nav>


   </header>
    <main>

        <div class="information_area">
            <div id="title">Hello</div>
            <p id="sub_title">Here's who I am & what I do</p>
            <div class="main_links">
                <div><a id="resume" href="#">RESUME</a></div>
                <div><a id="projects" href="#">PROJECTS</a></div>
            </div>
            <div>
                <p>I'm a paragraph. Click here to add your own text and edit me. It is easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.</p>
                <br>
                <p>I am a great place for you to tell a story and let your users know a little more about you.</p>
            </div>
        </div>
        <div class="picture_area">
            <img id="image" src="./images/images.jpeg" alt="cv image">
            <p id="information_name">Maya<br>Nelson</p>
            <hr style="width: 28%">
            <p id="information_job">PROJECT MANAGER</p>
            <div class="information_footer">
                <a href="#"><img src="./images/facebook-icon.svg"></a>
                <a href="#"><img src="./images/twitter-icon.svg"></a>
                <a href="#"><img src="./images/instagram-icon.svg"></a>
            </div>


        </div>


   </main>
   <footer>
    <p>This website design was created by Wix.com,<br> and is used here for strictly educational purposes.</p>
    <div class="footer_right_section">
        <di class="call">
            <span><p>call</p></span>
            <p>123-456-7890</p>
        </di>
        <div class="write">
            <span><p>Write</p></span>
            <p><a href="#">info@maya.com</a></p>
        </div>
        <div class="follow">
            <span><p>follow</p></span>
            <div class="footer_images">
                <a href="#"><img src="./images/facebook-icon.svg"></a>
                <a href="#"><img src="./images/twitter-icon.svg"></a>
                <a href="#"><img src="./images/instagram-icon.svg"></a>
            </div>
        </div>
    </div>
   </footer>


    <!-- Please leave this in to credit the creators of this design -->

</body>

</html>