codeup-web-exercises/bootstrap-resume.html at main · lexibor/codeup-web-exercises · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Resume</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>

<header class="container d-flex flex-column justify-content-center border-bottom border-success border-opacity-75 border-5 rounded-bottom-1 shadow-sm">

    <h1 class="text-center display-3 mb-3 fw-bold font-monospace shadow mt-3">CODY THE DUCK</h1>

    <h2 class="text-center display-7 fw-semibold font-monospace">Software Developer</h2>

    <p class="text-center">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <div class="contaner text-center">
        <ul class="nav flex-md-row flex-column justify-content-md-evenly">
            <li class="nav-item">
                <img class="nav-link text-dark d-inline-block p-0 mb-2" src="img/phone-call.png" width="25"> 210-123-4567</img>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark mb-2 p-0">
                    <img class="nav-link text-dark d-inline-block p-0" src="img/email.png" width="25">
                    cody@codeup.com
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark mb-2 p-0" href="#">
                    <img class="nav-link text-dark d-inline-block p-0" src="img/linkedin.png" width="25">
                    @cody-the-duck
                </a>

            </li>
            <li class="nav-item">
                <a class="nav-link text-dark mb-2 p-0" href="#">
                    <img class="nav-link text-dark d-inline-block p-0" src="img/github.png" width="25">
                    @cody-the-duck
                </a>
            </li>
        </ul>
    </div>
</header>

<div class="container my-3">

        <div class="row">
            <div class="col-md-5 col-12">
                <div class="my-2">
                    <p class="fw-bold text-primary fs-4 text-nowrap font-monospace">SKILLS AND ABILITIES</p>
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>Javascript</li>
                        <li>Bootstrap</li>
                    </ul>
                </div>

                <div class="my-2">
                    <p class="fw-bold text-primary fs-4 text-nowrap font-monospace">ACADEMIC</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                </div>

                <div class="my-2">
                    <p class="fw-bold text-primary fs-4 text-nowrap font-monospace">PROFESSIONAL EXPERIENCE</p>
                    <p>Job 2</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                    <br>
                    <p>Job 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>

                </div>


            </div>
            <div class="col-md-7 col-sm-6 col-12 gx-md-5">
                <div class="my-2 ms-md-4">
                    <p class="fw-bold text-primary fs-4 text-nowrap font-monospace">DEVELOPMENT PROJECTS</p>
                    <p>Project 3</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                    <br>
                    <p>Project 2</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                    <br>
                    <p>Project 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                </div>

                <div class="my-2 ms-md-4">
                    <p class="fw-bold text-primary fs-4 text-nowrap font-monospace">AWARDS AND INVOLVMENT</p>
                    <p>AWARD 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                    <br>
                    <p>INVOLVMENT 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>
</html>