HTML-CSS-Coursework-Week4/index.html at 221906a45ca6acf23e66dec106552e211187fee7 · 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
98
<!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" 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:wght@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:wght@600&family=Quicksand:wght@300&display=swap"
        rel="stylesheet">

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

<body>
<header>
    <div class="title">
    <div class="box"></div>
    <h2 class="name"> Maya Nelson</h2>
    <p> / PROJECT MANAGER</p>
    </div>
    <nav class="header-navbar">
        <a href="#">ABOUT ME</a>
        <a href="#">RESUME</a>
        <a href="#">PROJECTS</a>
        <a href="#">CONTACT</a>
    </nav>
</header>
<main>
    <div class="portfolio-card">
        <img src="https://static.wixstatic.com/media/2e2a49_bd3a1599bc1b4265a01b2754b99b8536~mv2_d_5760_3840_s_4_2.jpeg/v1/crop/x_2703,y_43,w_2199,h_2205/fill/w_205,h_205,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/AdobeStock_230407429.jpeg" alt="profile picture" class="profile-picture">
        <p class="name"><b>Maya<br /> Nelson</b></p>
        <p>PROJECT MANAGER</p>
        <nav class="social-media-nav">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQNgmZb41ZiFtUCgddb3AdTG4UNzEK1NxMb-CWQq3evg&s" href=""   alt="Facebook">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGUFcw0s8YBIQTPwoT_fj36ZXnh4FeXRn6Y6vD1Wqlkw&s" href=""
                alt="Twitter">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB4agyICe43CkiIUMGzBJzwl43cT30Eucp2c3yE3TpSQ&s" href=""
                alt="Linkedin">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRDO0Sb6V0D7ME7aqA4_Ldu0CIU5L8XIHzP7nqaXqOJA&s" href=""
                alt="Instagram">

        </nav>
    </div>
    <div class="left-container"></div>
    <div class="main-content">
        <h1><b>Hello</b></h1>
        <h3>Here's who I am & what I do</h3>
        <button class="first-button">RESUME</button>
        <button class="second-button">PROJECTS</button>
        <p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to
        add your own content and make changes to the font.</p>
        <p>I’m a great place for you to tell a story and let your users know a little more about you.</p>
    </div>
</main>
<footer>
    <p>© 2035 by Maya Nelson.<br />
    Powered and secured by Wix</p>
    <div class="footer-contacts">
        <div>
           <p><b>Call</b></p>
           <p>123-456-7890</p>
        </div>
        <div>
           <p><b>Write</b></p>
           <p>info@mysite.com</p>
        </div>
        <div>
        <p><b>Follow</b></p>
      <nav class="social-media-nav-footer">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQNgmZb41ZiFtUCgddb3AdTG4UNzEK1NxMb-CWQq3evg&s"
            href="" alt="Facebook">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGUFcw0s8YBIQTPwoT_fj36ZXnh4FeXRn6Y6vD1Wqlkw&s"
            href="" alt="Twitter">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB4agyICe43CkiIUMGzBJzwl43cT30Eucp2c3yE3TpSQ&s"
            href="" alt="Linkedin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRDO0Sb6V0D7ME7aqA4_Ldu0CIU5L8XIHzP7nqaXqOJA&s"
            href="" alt="Instagram">

        </nav>
        </div>
    </div>


    <p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p></footer>


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

</body>

</html>