codeup-web-exercises/bootstrap-grid.html at main · snackadactyl/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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Grid Resume</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


    <style>
        #name-row {
            background-color: rgba(199, 122, 215, 0.55);
        }

        #title-row {
            background-color: rgba(146, 50, 162, 0.44);
        }

        #left-side {
            background-color: rgba(54, 19, 157, 0.68);
        }

        #right-side {
            background-color: rgba(112, 15, 168, 0.59);
        }

        .section-heading {
            color: rgb(17, 0, 0);
            font-weight: 900;
        }
    </style>
</head>
<body>

<!-- Main page content -->
<div class="container">
    <div class="row" id="name-row">
        <div class="col-12 text-center">
            <h1>Katie Monfore</h1>
        </div>
    </div>

<!--    //TITLE AND INTRO//-->
    <div class="row text-center" id="title-row">
        <div class="col-12">
            <h4>STUDENT of LIFE</h4>whew

            <p>
                Hello my name is Katie. I am a student at Codeup for Web Dev. </p>

<!--        //CONTACT INFO WITH CUTE LITTLE ICONS//-->
        </div>
        <div class="col-12 col-md-6 col-lg-3"><i class="fa-solid fa-phone"></i> 123-456-7890</div>
        <div class="col-12 col-md-6 col-lg-3"><i class="fa-solid fa-envelope"></i> hello@gmail.com</div>
        <div class="col-12 col-md-6 col-lg-3"><i class="fa-brands fa-linkedin"></i> snackadactyl</div>
        <div class="col-12 col-md-6 col-lg-3"><i class="fa-solid fa-pizza-slice"></i>GITHUB</div>
    </div>
    <hr>

<!--    //LEFT SIDE CONTENT//-->
    <div class="row">
        <div class="col-12 col-md-4" id="left-side">
            <!-- left side content -->
            <section>
                <h6 class="section-heading">SKILLS & ABILITIES</h6>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JAVASCRIPT</li>
                    <li>BOOTSTRAP</li>
                </ul>

            </section>

<!--          //  ACADEMIC SECTION //-->
            <section>
                <h6 class="section-heading">ACADEMIC</h6>
                <p>
                    <i class="fa-solid fa-graduation-cap"></i>University of Hawaii 2014
                    <br>
                    <i class="fa-solid fa-graduation-cap"></i>Remington College HNL 2013
                </p>
            </section>

<!--            // PROFESSIONAL EXPERIENCE //-->
            <section>
                <h6 class="section-heading">PROFESSIONAL EXPERIENCE</h6>
                <p><strong>Licensed Massage Therapist</strong></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque blanditiis eos fuga in mollitia
                    possimus quia quo unde vero. Accusamus assumenda consequuntur dolorum enim esse eum optio
                    reprehenderit vitae!</p>
                <p><strong>Systems Administrator</strong></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur assumenda deserunt dignissimos
                    doloremque excepturi explicabo iste magni minima molestias nesciunt optio placeat quos repellendus
                    reprehenderit, saepe unde voluptatem voluptatum!</p>
            </section>
        </div>


<!--        //RIGHT SIDE CONTENT //-->
        <div class="col-12 col-md-8" id="right-side" id="right-side">
            <!-- Right side content -->
            <section>
                <h6 class="section-heading">DEVELOPMENT PROJECTS</h6>
                <p>PROJECT 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aut esse ex, illo inventore
                    ipsum quo temporibus vitae voluptatem? Autem dolorum ea est expedita odit omnis repudiandae sit
                    voluptas voluptates!</p>
                <p>PROJECT 2</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aspernatur atque commodi cum ea
                    earum et explicabo illo, incidunt maxime nam nostrum quaerat reprehenderit saepe, soluta ut
                    veritatis. Soluta, tenetur.</p>
            </section>
            <section>
                <h6 class="section-heading">AWARDS & INVOLVEMENT</h6>
                <p>AWARD 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur facilis, minima! Aliquam culpa
                    cumque, ducimus eius ex facere laboriosam maxime nihil nisi officia optio praesentium reprehenderit
                    rerum, sequi suscipit vitae?</p>
                <p>INVOLVEMENT 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut commodi debitis eaque
                    excepturi, fuga hic id impedit minima modi molestias nulla, omnis provident quaerat quibusdam quod
                    saepe sequi unde!</p>
            </section>
        </div>
    </div>
</div>


<!--JAVA AND MY CUSTOM LIBRARIES-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
<!-- Your custom JS goes here -->
<script src="https://kit.fontawesome.com/68746c8b4b.js" crossorigin="anonymous"></script>
</body>

</html>