bostonTripWebsite/index.html at main · ajaxromik/bostonTripWebsite · 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Why You Should Hire Me</title>
        <link rel="stylesheet" href="style.css">
        <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=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css"> -->
        <script src="https://kit.fontawesome.com/61135f9f0f.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <section class="header">
            <nav>
                <a href="index.html" style="width: 35%;"><img src="images/WelcomePNGPhoto.png" alt="Welcome" /></a>
                <div class="nav-links" id="navLinks">
                    <i class="fa fa-times" onclick="hideMenu()"></i>
                    <ul>
                        <li><a href="">HOME</a></li>
                        <li><a href="valentines/valentinesMessage.html">VALENTINES TEMPLATE</a></li>
                        <li><a href="minecraftblockspeeds.html">FUN CALCULATOR</a></li><!--Might be too long a phrase, check this-->
                        <li><a href="">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showMenu()"></i>
            </nav>

            <div class="text-box">
                <h1>William Carr</h1>
                <p>While I may not have previous experience working on a web-development team, I believe that this job would help me start a career in tech which I have been working towards since the age of 9.</p>
                <a href="OOPDANotes.html" class="hero-btn">Check out these notes!</a>
            </div>

        </section>


        <!-----text to fill the website with----->
        <section class="skill">
            <h1>Skills</h1>
            <p>What I lack in work experience, I will make up for with personal skills that I am to improve during both free time and working hours.</p>

            <div class="row">
                <div class="skill-col">
                    <h3>Leadership</h3>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, fugiat consequuntur perspiciatis dolorum, in porro temporibus quisquam reprehenderit voluptate tempora, repellendus assumenda fuga vero unde sed! Praesentium sint quo vero!</p>
                </div>
                <div class="skill-col">
                    <h3>Critical Thinking</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci neque aperiam iste provident quaerat libero magnam voluptatibus deserunt quibusdam magni soluta dolorum doloremque delectus officiis, veritatis praesentium maxime porro amet?</p>
                </div>
                <div class="skill-col">
                    <h3>Collaboration</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo expedita doloremque sunt aut obcaecati quaerat, soluta eum eveniet voluptatibus quidem quia ipsum eius nam. Laborum repellendus quae nisi sint.</p>
                </div>
            </div>

        </section>

        <!----interesting details----->
        <section class="int-fact">
            <h1>Interesting Facts About Me</h1>
            <p>Neque atque ex mollitia illum accusamus modi!</p>

            <div class="row">
                <div class="int-col">
                    <img src="images/leafsquished.jpg" alt="A leaf with water puddled in its center.">
                    <div class="layer">
                        <h3>Leaf Photography</h3>
                    </div>
                </div>
                <div class="int-col">
                    <img src="images/silouettes.jpg" alt="Silouetted image of a neighborhood.">
                    <div class="layer">
                        <h3>Silouettes</h3>
                    </div>
                </div>
                <div class="int-col">
                    <img src="images/frostedleaves.jpg" alt="Leaves with frosted morning dew on a winter morning.">
                    <div class="layer">
                        <h3>Frosty Leaves</h3>
                    </div>
                </div>
            </div>

        </section>

        <!----images---->
        <section class="photogallery">
            <h1>Images That Make My Website Look More Attractive</h1>
            <p>Quas, nam molestiae explicabo animi qui eum quidem.</p>

            <div class="row">
                <div class="gallery-col" id="peacefulriver">
                    <img src="images/peacefulriver.jpg" alt="A peaceful river.">
                    <h3>Peaceful River</h3>
                    <p>Qui sit beatae porro ab autem voluptas quibusdam magni, nobis reprehenderit quod, veritatis est id?</p>
                </div>
                <div class="gallery-col">
                    <img src="images/froge.jpg" alt="A frog.">
                    <h3>Happy Frog</h3>
                    <p>Qui sit beatae porro ab autem voluptas quibusdam magni, nobis reprehenderit quod, veritatis est id?</p>
                </div>
                <div class="gallery-col">
                    <img src="images/whiteriver.jpg" alt="A powerful and fast river.">
                    <h3>The Dangers of the Outdoors</h3>
                    <p>Qui sit beatae porro ab autem voluptas quibusdam magni, nobis reprehenderit quod, veritatis est id?</p>
                </div>
            </div>
        </section>

        <!-------------- testimonials aka vouchers -------------->
        <section class="vouchers">
            <h1>How confident am I?</h1>
            <p>Culpa necessitatibus iste aliquam aperiam nam omnis quasi quod, ipsa saepe sunt doloribus tenetur.</p>

            <div class="row">
                <div class="vouchers-col">
                    <img src="images/croppedfroge.jpg" alt="froge">
                    <div>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam hic alias porro laudantium natus eum vel id magnam quasi perferendis adipisci voluptates ad enim pariatur neque temporibus fugit, dolore molestias!</p>
                        <h3>Look at this happy frog!</h3>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                </div>
                <div class="vouchers-col">
                    <img src="images/croppedfroge.jpg" alt="froge">
                    <div>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam hic alias porro laudantium natus eum vel id magnam quasi perferendis adipisci voluptates ad enim pariatur neque temporibus fugit, dolore molestias!</p>
                        <h3>He vouches for me!</h3>

                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                </div>
            </div>


        </section>

        <!--------Contact me!--------->
        <section class="contact">
            <h1>Did you like my website? Did you hate it?<br>Let me know your thoughts!</h1>
            <a href="" class="hero-btn">CONTACT ME</a>
        </section>

        <!------- footer -------->
        <section class="footer">
            <h4>About Me</h4>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident esse nobis sed, pariatur quisquam nisi enim dolore. <br> Modi recusandae, vitae et cum nihil ad est eligendi consequatur iusto expedita odit!</p>
            <div class="socials">
                <i class="fa fa-facebook"></i>
                <i class="fa fa-instagram"></i>
                <i class="fa fa-twitter"></i>
                <i class="fa fa-linkedin"></i>
            </div>
        </section>

        <!--------JavaScript for Toggle Menu ------->
        <script>

            var navLinks = document.getElementById("navLinks");

            function showMenu(){
                navLinks.style.right = "0";
            }
            function hideMenu(){
                navLinks.style.right = "-200px";
            }

        </script>
    </body>
</html>