codeup-web-exercises/grid-exer.html at main · John-Alejandro/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid Exercise Resume</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <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=Roboto+Slab:wght@900&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=Mukta:wght@700&family=Roboto+Slab:wght@900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <link rel="stylesheet" href="css/resume.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col">
           <h1 class="text-center">Jack Is Back</h1>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col">
            <h2 class="text-center"> Freelance Gaming Mercenary </h2>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col">
           <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi dicta dignissimos doloremque eaque eos error fugit magnam maiores minus nam nemo obcaecati, officia pariatur, porro reprehenderit rerum tempora voluptatibus!</p>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <p class="text-center"><i class="fas fa-phone"></i> 555-666-7777</p>
        </div>
        <div class="col-md-3">
            <p class="text-center"><i class="fas fa-envelope-square"></i> jack@gamingrus.com</p>
        </div>
        <div class="col-md-3">
            <p class="text-center"><i class="fab fa-linkedin-in"></i>@jack-the-merc</p>
        </div>
        <div class="col-md-3">
            <p class="text-center"><i class="fab fa-github"></i>@jack-the-merc</p>
        </div>
    </div>
</div>
<hr>
<div class="container">
    <div class="row">
        <div class="row col-md-4">
            <div class="col">
                <h3>SKILLS AND ABILITIES</h3>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>Javascript</li>
                    <li>Bootstrap/Grid</li>
                </ul>
                <h3>ACADEMIC</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate debitis dignissimos dolore earum exercitationem fugiat ipsa laboriosam, magnam minus nisi odio omnis quis quo sint tenetur ut voluptas? Ab, odio?</p>

            </div>
            <div class="col">
                <h3>PROFESSIONAL EXPERIENCE</h3>
                <p>Job 2</p>
                <p>Lorem ipsum dolor sit amet, consectetur quos.</p>
                <p>Job 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  in vero!</p>
            </div>
        </div>
        <div class="row col-md-8">
            <div class="col">
                <h3>DEVELOPMENT PROJECTS</h3>
                <p>Project 3</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut culpa deserunt dolore dolorem dolorum fugiat ipsam nostrum numquam quae quas quod rem repudiandae rerum, sapiente tempora totam velit vitae.</p>
                <p>Project 2</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, architecto atque corporis debitis eveniet in iure magni maxime numquam, omnis placeat possimus rem saepe similique suscipit, tempore totam vero voluptatum?</p>
                <p>Project 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi fugit modi quasi quod! Autem eaque, earum, fugit ipsa iusto, laboriosam libero maiores officiis quae ratione rem saepe sed vero.</p>
                <h3>AWARDS AND INVOLVEMENT</h3>
                <p>AWARD 2</p>
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium, sint? Ab amet beatae, blanditiis delectus deleniti, eligendi eos expedita facilis itaque officia perferendis quod tempora vel. Ducimus, maxime voluptatem.</P>
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium assumenda et, exercitationem expedita harum id in ipsa nisi obcaecati praesentium rem sed similique sint totam ut veniam veritatis voluptatibus.</P>
            </div>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

</body>
</html>