codeup-web-exercises/Bootstrap-Grid.html at main · amir97353/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>

    <link rel="stylesheet" href="css/Bootstrap-grid.css">
    <script src="https://kit.fontawesome.com/9695248fab.js" crossorigin="anonymous"></script>
</head>
<body>

<!--header top 3 items-->
<div class="container">
    <div class="row text-center">
            <h1>CODY THE DUCK</h1>
            <h2>SOFTWARE DEVELOPER</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aliquid architecto
                deleniti eaque eos, facilis illum inventore iste libero magnam magni modi mollitia nemo qui quidem
                repellat sunt tempore?
            </p>
    </div>


    <div class="row text-center">
        <p class="col-md-3 col-lg-3"><i class="fa-solid fa-phone"></i>210-521-1234</p>
        <p class="col-md-3 col-lg-3"><i class="fa-solid fa-envelope"></i>Blah@codeup.com</p>
        <p class="col-md-3 col-lg-3"><i class="fa-brands fa-linkedin-in"></i>@cody-the-duck</p>
        <p class="col-md-3 col-lg-3"><i class="fa-brands fa-github"></i>@cody-the-duck</p>
    </div>
    <div class="row">
        <hr style="height: 10px">
        <div class="col-md-4">
            <h4>SKILLS AND ABILITIES</h4>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JAVASCRIPT</li>
                    <li>BOOTSTRAP</li>
                </ul>
                <h4>ACADEMIC</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A cupiditate dicta hic, mollitia nemo
                reprehenderit rerum vero? Animi corporis fuga id illum in labore, nobis non officia quisquam
                temporibus? Impedit?</p>

            <h4>PROFESSIONAL EXPERIENCE</h4>
            <p>JOB 2</p>
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquam aut, consequatur
                    delectus, distinctio fugit laboriosam libero neque sit tempora totam veniam vero? Dignissimos
                    dolorem et
                    ipsa obcaecati veritatis.</P>
                <p>JOB 1</p>
                <p>JOB 1</p>
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquam aut, consequatur
                    delectus, distinctio fugit laboriosam libero neque sit tempora totam veniam vero? Dignissimos
                    dolorem et
                    ipsa obcaecati veritatis.</P>
        </div>

        <div class="col-8">
            <h4>DEVELOPMENT PROJECTS</h4>
            <p>Project 3</p>

            <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquam aut,
                consequatur delectus, distinctio fugit laboriosam libero neque sit tempora totam veniam vero? Dignissimos
                dolorem et ipsa obcaecati veritatis.</P>

            <p>Project 2</p>
            <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquam aut,
                    consequatur
                    delectus, distinctio fugit laboriosam libero neque sit tempora totam veniam vero? Dignissimos
                    dolorem et
                    ipsa obcaecati veritatis.</P>
            <p>Project 1</p>
            <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquam aut,
                consequatur delectus, distinctio fugit laboriosam libero neque sit tempora totam veniam vero? Dignissimos
                dolorem et ipsa obcaecati veritatis.</P>

            <h4>AWARDS AND INVOLVEMENT</h4>

            <p>AWARD 1</p>
                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquam aut,
                    consequatur
                    delectus, distinctio fugit laboriosam libero neque sit tempora totam veniam vero? Dignissimos
                    dolorem et
                    ipsa obcaecati veritatis.</P>
            <p>INVOLVEMENT 1</p>
            <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, alias aliquam aut,
                consequatur delectus, distinctio fugit laboriosam libero neque sit tempora totam veniam vero? Dignissimos
                dolorem et ipsa obcaecati veritatis.</P>
        </div>
    </div>
</div>

</body>
</html>