checkpoint1/index.html at master · LauraColten/checkpoint1 · 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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>

<head>
  <title>Laura Colten</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="./style.css">
  <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Vidaloka" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy" rel="stylesheet">
</head>

<body>
  <!-- Nav section at top of page -->
  <nav>
    <a href="#">Shop &nbsp;</a>
    <a href="#">About &nbsp;</a>
    <a href="#" class="img"><img src="./cat.png"></button>
      <a href="#">Thoughts &nbsp;</a>
      <a href="#">Contact</a>
  </nav>
  <header>
    <div class="large">
      2018 Collection
    </div>
    <a href="#" class="small">
      coming soon
    </a>
  </header>
  <!-- Main section of the page with merchandise-->
  <main>
    <!-- Signature scarves section -->
    <section class="first">
      <p class="smalltitle">
        CatScarf
      </p>
      <p class="largetitle">
        SIGNATURE
      </p>
      <hr>
      <p class="description">
        Autumn colors. Luxurious fibers. High fashion.
      </p>
      <div class="scarfpic">
        <a href="#"><img src="./Clyde_brown_grande.jpg"></a>
      </div>
      <div class="scarfpic">
        <a href="#"><img src="./Squirrel_light_sky_grande.jpg"></a>
      </div>
      <div class="scarfpic">
        <a href="#"><img src="./Sid_Nancy_charcoal_coral_grande.jpg"></a>
      </div>
      <!-- Spring scarves section -->
      <p class="smalltitle">
        CatScarf
      </p>
      <p class="largetitle">
        SPRING
      </p>
      <hr>
      <p class="description">
        Bright. Bold. Adorable.
      </p>
      <div class="scarfpic">
        <a href="#"><img src="./gus-blue_grande.jpg"></a>
      </div>
      <div class="scarfpic">
        <a href="#"><img src="./mobius_pink_grande.jpg"></a>
      </div>
      <div class="scarfpic">
        <a href="#"><img src="./cowl_bluegrey_grande.jpg"></a>
      </div>
      <!-- Winter scarves section -->
      <p class="smalltitle">
        CatScarf
      </p>
      <p class="largetitle">
        WINTER
      </p>
      <hr>
      <p class="description">
        Striking design. Pure Comfort. High Fashion.
      </p>
      <div class="scarfpic">
        <a href="#"><img src="./the-ricky2_grande.jpg"></a>
      </div>
      <div class="scarfpic">
        <a href="#"><img src="./the-felix-grey_grande.jpg"></a>
      </div>
      <div class="scarfpic">
        <a href="#"><img src="./theidk2_grande.jpg"></a>
      </div>
      <!-- All Hallow's Eve scarves section -->
      <p class="smalltitle">
        CatScarf
      </p>
      <p class="largetitle">
        THE HALLOW'S EVE
      </p>
      <hr>
      <p class="description">
        Reversible. Comfortable. Badass.
      </p>
      <div class="scarfpics">
        <div class="scarfpic">
          <a href="#"><img src="./the_hallows_eve_skull_bones_detail_grande.jpg"></a>
        </div>
        <div class="scarfpic">
          <a href="#"><img src="./the_hallows_eve_solid_grande.jpg"></a>
        </div>
      </div>
    </section>
    <section class="spacer">
    </section>
    <!-- Page bio section -->
    <section class="second">
      <p class="smalltitle">
        CatScarf
      </p>
      <p class="largetitle">
        HIGH FASHION
      </p>
      <hr>
      <p class="description">
        Born from a need for high quality, artisan hand-knit pet fashion for all seasons. Our collections have a little something
        for every beloved feline in your life.
        <div class="row">
          <div class="info">
            <div class="gif">
              <img src="./img_premiumyarns_anim.gif">
            </div>
            <div class="sectiontitle">
              PREMIUM YARNS
            </div>
            <hr>
            <div class="sectioninfo">
              From the Andes in Peru to South of Beijing, we scoured the globe to find yarns that are both animal-friendly and of the upmost
              quality. Alpaca, mink, and recycled silk are just some of the fibers we have in our arsenal. When it comes
              to your cat's comfort, we don't play dice.
            </div>
          </div>
          <div class="info">
            <div class="gif">
              <img src="./img_knitbyhand_anim.gif">
            </div>
            <div class="sectiontitle">
              CUSTOM FIT </div>
            <hr>
            <div class="sectioninfo">
              Fat cat, skinny cat, small cat, tall cat – there's a CatScarf for all. We're here to cater to your cat's specific needs.
              You tell us your cat's measurements and we craft your loved one a scarf that is not only fashionable and made
              with love, but has an impeccable fit.
            </div>
          </div>
          <div class="info">
            <div class="gif">
              <img src="./img_custom_fit_anim.gif">
            </div>
            <div class="sectiontitle">
              KNIT BY HAND</div>
            <hr>
            <div class="sectioninfo">
              Each scarf is painstakingly knit by hand for the cat it was purchased for. We understand how important your cat is and what
              they deserve. Hours are spent clacking away, knitting until the scarf is flawless. Not all scarves make the
              cut; we accept nothing less than perfection.
            </div>
          </div>
        </div>
    </section>
    <!-- Company contact info section -->
    <section class="spacer"></section>
    <section class="third">
      <div class="catbutton">
        <a href="#" class="img"><img src="./cat.png"></a>
      </div>
      <a href="#">
        <span class="fa-stack fa-lg social">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
        </span>
      </a>
      <a href="#">

        <span class="fa-stack fa-lg social">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
        </span>
      </a>
      <a href="#">
        <span class="fa-stack fa-lg social">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
        </span>
      </a>
      <div class="outro">
        A PORTION OF EVERY CATSCARF GOES TO HELP ANIMALS IN NEED
      </div>
      <div class="copyright">
        ©2015 CatScarf
      </div>
    </section>
  </main>

</body>

</html>