codeup-web-exercises/bootstrap-grid.html at main · DracosEye/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>T-Block Resume</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
    <!--RESUME HEADER -->
    <div class="container d-flex flex-column text-center" id="header">
        <h1>CODY THE DUCK</h1>
        <h2>Software Developer</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cupiditate distinctio, esse exercitationem expedita maxime modi quas suscipit vel voluptates. Consequatur culpa eveniet illum minima molestiae, officia optio quasi quo?</p>
        <!--CONTAINER WITH CONTACT INFO -->
        <div class="container d-flex flex-wrap">
            <div class="d-flex align-items-center justify-content-center col-md-3 col-12">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
                </svg>
                <p class="contact-info">210-123-1234</p>
            </div>
            <div class="d-flex align-items-center justify-content-center col-md-3 col-12">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
                </svg>
            <p class="contact-info">cody@codeup.com</p>
            </div>
            <div class="d-flex align-items-center justify-content-center col-md-3 col-12">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
                    <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
                </svg>
                <p class="contact-info">@cody-the-duck</p>
            </div>
            <div class="d-flex align-items-center justify-content-center col-md-3 col-12">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-headphones" viewBox="0 0 16 16">
                    <path d="M8 3a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a6 6 0 1 1 12 0v5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1V8a5 5 0 0 0-5-5z"/>
                </svg>
                <p class="contact-info">@cody-the-duck</p>
            </div>
        </div>
        <div id="divider"></div>
        <div class="container d-flex flex-wrap" id="all-content">
            <div class="container col-12 col-md-4 align-content-start" id="skills">
                <div class="content-chunk">
                    <h3>SKILLS AND ABILITIES</h3>
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>Javascript</li>
                        <li>Bootstrap</li>
                    </ul>
                </div>
                <div class="container content-chunk">
                    <h3>ACADEMIC</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aperiam delectus doloribus eligendi facilis id incidunt magnam numquam odit perferendis placeat possimus quasi quos, soluta tempora tempore veritatis, vero?</p>
                </div>
                <div class="container content-chunk">
                    <h3>PROFESSIONAL EXPERIENCE</h3>
                    <p>Job 2</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi consectetur consequuntur distinctio dolor, dolore excepturi facere fugiat laudantium, magnam necessitatibus neque placeat provident quia recusandae, repellat vel voluptate voluptatum.</p>
                    <p>Job 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dicta iste nisi odio quidem quos ratione tempore! Aliquid amet excepturi fugit in ipsa iste optio quos tempore ut vero! Velit!</p>
                </div>
            </div>
            <div class="container col-12 col-md-8" id="achievements">
                <div class="container content-chunk">
                    <h3>DEVELOPMENT PROJECTS</h3>
                    <p>Project 3</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, blanditiis cumque deleniti excepturi illo laudantium mollitia nobis odit officia, qui, quod repellat? Commodi dolorum enim esse ipsum non, odio quod?</p>
                    <p>Project 2</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam animi aut, commodi consequuntur cumque, delectus deserunt facere ipsum labore, maiores maxime officiis quia rem sapiente tempore totam voluptas?</p>
                    <p>Project 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at, aut dolor ea esse eveniet illum laboriosam omnis quo ratione reiciendis repudiandae sapiente ullam. Animi dolorem non placeat quae quis?</p>
                </div>
                <div class="container content-chunk">
                    <h3>AWARDS AND INVOLVEMENT</h3>
                    <p>AWARD 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, cum dolores facere in minima necessitatibus nemo non quibusdam rem velit? Ab esse molestiae necessitatibus provident quas, repellendus suscipit! Deserunt, nobis?</p>
                    <p>INVOLVEMENT 1</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis deserunt eligendi eos fuga hic, nemo odit quas soluta tempore. Ab aspernatur, culpa eos harum molestiae officia perferendis tempore voluptas!</p>
                </div>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>