Responsive-Layout/index.html at master · johnykuro/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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive Layout | Project 2</title>
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
  </head>
  <body>
    <header>
      <h1>Ash Ketchum</h1>
      <nav id="top">
        <h2>Navigation</h2>
        <ul class="main-nav">
         <li><a href="#top">Home</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#skills">Skills</a></li>
         <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="main-header">
          <img src="images/profile-image.jpg" alt="Profile picture." id="profile-image"/>
          <div class="about">
          <p>Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!</p>
          </div>
        </div>
      </nav>
    </header>

      <section class="container clearfix" id="portfolio">

        <h4>Portfolio</h4>

          <article class="card one">
            <img src="images/portfolio-1.png" alt="Image of a Marketing Page developed by Ash." />
            <h3>Marketing Page</h3>
            <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
          </article>

          <article class="card two">
            <img src="images/portfolio-2.png" alt="Image of a Search Page developed by Ash." />
            <h3>Search Page</h3>
            <p>This project searches through a specific database to find information that the user is trying to look up.</p>
          </article>

          <article class="card three">
            <img src="images/portfolio-3.png" alt="Image of a Travel App developed by Ash." />
            <h3>Travel App</h3>
            <p>This project compares travel times based on different transport methods and tells you the best one.</p>
          </article>

          <article class="card four">
            <img src="images/portfolio-6.png" alt="Image of a Map of Favorite Spots developed by Ash." />
            <h3>Map of Favorite Spots</h3>
            <p>This project uses mapping api's to plot points for my favourite spots in the city for a do-it-yourself walking tour.</p>
          </article>

          <article class="card five">
            <img src="images/portfolio-5.png" alt="Image of a Photo Gallery developed by Ash." />
            <h3>Photo Gallery</h3>
            <p>This project shows images I have taken in an esy to navigate gellery for the user to look through.</p>
          </article>

          <article class="card six">
            <img src="images/portfolio-4.png" alt="Image of a Calculator developed by Ash." />
            <h3>Calculator</h3>
            <p>Someone can enter in the numbers they want, and press the big blue button and get the result they want.</p>
          </article>

          <article class="card seven">
            <img src="images/portfolio-7.png" alt="Image of a Map of Favorite Spots developed by Ash." />
            <h3>Video Player</h3>
            <p>Project uses mapping api's to plot points for my favourite spots in the city for a do-it-yourself walking tour.</p>
          </article>

          <article class="card eight">
            <img src="images/portfolio-8.png" alt="Image of a Photo Gallery developed by Ash." />
            <h3>Video Gallery</h3>
            <p>Project shows videos from a recent trip to the viewer and allows them to easily navigate through videos.</p>
          </article>

          <article class="card nine">
            <img src="images/portfolio-9.png" alt="Image of a Calculator developed by Ash." />
            <h3>Form Page</h3>
            <p>Someone can enter in the numbers they want, and press the big blue button and get the result they want.</p>
          </article>
       </section>

      <section id="skills">
        <h3>Skills</h3>
        <p>I have picked up experience with the languages and software shown below. I am constantly improving myself and I see these skills develop more everyday.</p>
        <div class="skill">
          <div id="HTML">HTML</div>
        </div>
        <div class="skill">
          <div id="CSS">CSS</div>
        </div>
        <div class="skill">
          <div id="Javascript">Javascript</div>
        </div>
        <div class="skill">
          <div id="Wordpress">Wordpress</div>
        </div>
        <div class="skill">
          <div id="Photoshop">Photoshop</div>
        </div>
        <div class="skill">
          <div id="Illustrator">Illustrator</div>
        </div>
      </section>

      <footer class="clearfix" id="contact">
        <h4>Contact</h4>
        <p>If your interested in chatting or want more information on what I've been working on, I'd love to hear from you!</p>
        <ul>
          <li><span>Phone</span><a href="tel:111-555-1234">+1 (111) 555-1234</a></li>
          <li><span>Email</span><a href="mailto:email@yoursite.com">email@yoursite.com</a></li>
        </ul>
        <div class="main-footer">
          <p id="name">Ash Ketchum</p>
          <ul>
            <li><a href="#top">HOME</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#skills">SKILLS</a></li>
            <li><a href="#contact">CONTACT</a></li>
            <li><a href="#top">BACK TO TOP</a></li>
          </ul>
        </div>
      </footer>
  </body>
</html>