Mobile-First-Responsive-Layout/index.html at master · Aceer121/Mobile-First-Responsive-Layout · 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>
                <title>Arcel Derosena</title>
                <link rel="stylesheet" href="css/styles.css">
                <link href="https://fonts.googleapis.com/css2?family=Hind+Guntur:wght@300&family=Manrope:wght@200;300;400&family=Maven+Pro&display=swap" rel="stylesheet">
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width,  initial-scale=1">
              </head>
          <body>
            <header class="main-header clearfix" >
            <div>
              <h1 class="english">Arcel Derosena</h1>
              <nav class="nav">
                <ul class="main-nav">
                  <li><a href="#top">HOME</a></li>
                  <li><a href="#portfolio">PORTFOLIO</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                </ul>
              </nav>
              </div>

              </header>
              <div class="intro clearfix">
                    <img src="images/responsive-layout-profile.png" class="profile" alt="profile-img"/>
                    <p class="bio">I'm a Web Developer who enjoys desinging web based
                    projects and solving problems. I'm currently enrolled in the
                    Tech Degree program from team Treehouse.</p>
              </div>
                <main>
                  <div class="container clearfix">
                    <h1 class="portfolio-1" id="portfolio"> PORTFOLIO</h1>
                    <div class= "row-1">
                  <div class="col-1">
                <img class="image" alt="images" src="images/portfolio-1.png">
                <h2>Marketing Page</h2>
                  <p>This project shows the front page of a
                   marketing page website meant for a specific
                    business i'm interested in.</p>
                  </div>
                    <div class="col-2">
                      <img class="image" alt="images" src="images/portfolio-2.png">
                        <h2>Search Page</h2>
                          <p>This project searches through a specific
                           database to find information that the
                           user is trying to look up.</p>
                      </div>
                        <div class="col-3">
                        <img class="image" alt="images" src="images/portfolio-3.png">
                      <h2>Travel App</h2>
                      <p>This project compares travel times
                    based on different transportation
                     methods and tells you the best one.</p>
                </div>
              </div>
              <div class="row-2">
                  <div class="col-4">
                  <img class="image" alt="images" src="images/portfolio-4.png">
                    <h2>Map of Favorite Spots</h2>
                      <p> This project uses mapping apis to plot
                       points for my favorite spots in the city
                     for a do-it yourself walking tour.</p>
              </div>
              <div class="col-5">
                  <img class="image" alt="images" src="images/portfolio-5.png">
                    <h2>Photo Gallery</h2>
                      <p>This project shows pictures from a
                      recent trip to the viewer and allows
                      them to easily navigae through photos.</p>
              </div>
                <div class="col-6">
                  <img class="image" alt="images" src="images/portfolio-6.png">
                    <h2>Calculator</h2>
                      <p>Someone can enter through the numbers
                    they want and press the big blue
                button and get the result.</p>
              </div>
            </div>
      </div>
    </main>
              <h1 id="contact">CONTACT</h1>
              <p>If your interested in chatting and want more information
              about what I've been working on, I'd love to hear from you.</p>
              <p><strong>Phone</strong> 646-510-6290</p>
              <p><strong>Email</strong><a class="Email" href="darcel21@gmail.com"> darcel21@gmail.com</a></p>
              <div class="t-border clearfix">
              <footer class="fix">
              <div>
              <h2 class="student-name">Arcel Derosena</h2>
              <ul class="footer-nav">
                  <li class="menu">
                  <a href="#top">HOME</a></li>
                  <li class="menu">
                    <a  href="#portfolio">PORTFOLIO</a></li>
                  <li class="menu">
                  <a  href="#contact">CONTACT</a></li>
                  </ul>
                  </div>
              <h2 class="top-1"><a href="#top">Back To Top</a></h2>
        </footer>
</div>
      </body>
      </html>