yellowfoxco
Check-in [4788cc20e7]
Login
HomeTimelineBranchesTagsTicketsWiki

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Single-page redesign
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1: 4788cc20e7f98c9d6801c72570f6320cbb3bbdbd
User & Date: nalck 2016-01-18 21:28:51.444
Context
2016-01-19
06:29
Add webserver check-in: 7c384fbb38 user: nalck tags: trunk
2016-01-18
21:28
Single-page redesign check-in: 4788cc20e7 user: nalck tags: trunk
2016-01-17
07:05
Initial commit check-in: c2e2dd94d0 user: nalck tags: trunk
Changes
Unified Diff Ignore Whitespace Patch
Deleted contact-raw.css. 
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

:root {
	--dark-white:	#bdc3c7;
	--light-white:	#ecf0f1;
	--dark-grey:	#7f8c8d;
	--light-grey:	#95a5a6;
	--dark-black:	#212121;
	--light-black:	#424242;
	--dark-red:	#c0392b;
	--light-red:	#e74c3c;
	--dark-orange:	#d35400;
	--light-orange:	#e67e22;
	--dark-yellow:	#f39c12;
	--light-yellow:	#f1c40f;
	--dark-green:	#27ae60;
	--light-green:	#2ecc71;
	--dark-blue:	#2980b9;
	--light-blue:	#3498db;
	--dark-indigo:	#2c3e50;
	--light-indigo:	#34495e;
	--dark-violet:	#8e44ad;
	--light-violet:	#9b59b6;
}

body {
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 1.2em;
	margin: auto;
	max-width: 64ch;
}

a {
	color: var(--dark-blue);
	border-bottom: 0.2ch solid transparent;
	text-decoration: none;
}

a:hover {
	color: var(--dark-blue);
	border-bottom: 0.2ch solid;
}

a:visited { color: var(--dark-blue); }

header h1 a {
	border-bottom: 0.2ch solid; 
	border-top: 0.2ch solid;
	color: var(--light-black);
}

header h1 a:hover { color: var(--light-black); }
header h1 a:visited { color: var(--light-black); }

h1, h2, h3, h4 {
	color: var(--dark-grey);
	padding: 2ch;
	text-align: center;
}

main h2 { display: none; }

main h3 {
	color: var(--light-grey);
	letter-spacing: 0.8ch;
}

p {
	color: var(--dark-black);
	line-height: 1.5;
}


iframe {
	display: block;
	margin: auto;
	max-width: 64ch;
}

form {
	margin: 5ch auto;
}

input, textarea, #button {
	display: block;
	margin: 2ch auto;
	padding: 1ch;
	width: 280px;
}

footer {
	color: var(--light-black);
	margin: 5ch auto 2ch auto;
	text-align: center;
}


@media (max-width: 768px) {
	body {
		font-size: 1em;
		width: 95%;
	}

	header h1 {
		margin: auto;
	}

	p {
		margin: 2ch auto;
		width: 30ch;
	}

	main h3 {
		letter-spacing: 0ch;
	}
}

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
Deleted contact.css. 
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

body {
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.2em;
  margin: auto;
  max-width: 64ch;
}

a {
  color: #2980b9;
  border-bottom: 0.2ch solid transparent;
  text-decoration: none;
}

a:hover {
  color: #2980b9;
  border-bottom: 0.2ch solid;
}

a:visited {
  color: #2980b9;
}

header h1 a {
  border-bottom: 0.2ch solid;
  border-top: 0.2ch solid;
  color: #424242;
}

header h1 a:hover {
  color: #424242;
}

header h1 a:visited {
  color: #424242;
}

h1,
h2,
h3,
h4 {
  color: #7f8c8d;
  padding: 2ch;
  text-align: center;
}

main h2 {
  display: none;
}

main h3 {
  color: #95a5a6;
  letter-spacing: 0.8ch;
}

p {
  color: #212121;
  line-height: 1.5;
}

iframe {
  display: block;
  margin: auto;
  max-width: 64ch;
}

form {
  margin: 5ch auto;
}

input,
textarea,
#button {
  display: block;
  margin: 2ch auto;
  padding: 1ch;
  width: 280px;
}

footer {
  color: #424242;
  margin: 5ch auto 2ch auto;
  text-align: center;
}

@media (max-width: 768px) {
  body {
    font-size: 1em;
    width: 95%;
  }

  header h1 {
    margin: auto;
  }

  p {
    margin: 2ch auto;
    width: 30ch;
  }

  main h3 {
    letter-spacing: 0ch;
  }
}

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
Deleted contact.html. 
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

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='contact.css' />
    <title>Connect  - YELLOWFOXCO</title>
  </head>
  <body>
    <header>
      <h1><a href='index.html'>YELLOWFOXCO</a></h1>
    </header>
    <main>
      <h2>Connect </h2>
      <article>
        <iframe src='http://snapwidget.com/sc/?u=eWVsbG93Zm94Y298aW58MTUwfDN8M3x8bm98NXxub25lfG9uU3RhcnR8eWVzfG5v&ve=311215' 
                title='Instagram Widget' 
                class='snapwidget-widget' 
                allowTransparency='true' 
                frameborder='0' 
                scrolling='yes' 
                style='border:none; overflow:hidden; width:100%; height:20%'>
        </iframe>
	<h3>PASSION • MEETS • DESIGN</h3>
        <p>
          YELLOWFOXCO was created for the creative. Turning home decor 
          into a passion and letting inspiration unfold. Working hard &amp;
          getting our hands dirty is what we do, design is what we love. 
          We are the wild creative type, and so are our customers. We
          design for you in mind, making your dream home come true.
        <p>
          You can view our work on our 
          <a href='https://etsy.com/shop/YELLOWFOXCO'>Etsy</a> shop. We
          write on
          <a href='https://yellowfoxco.tumblr.com'>Tumblr</a> and post
          photos to <a href='https://instagram.com/yellowfoxco/'>
          Instagram</a> You can also find us on 
          <a href='https://facebook.com/YellowFoxCo'>Facebook</a>.
        </p>
        <p>
          We often make custom orders. If you've got an idea,
          send us an <a href='mailto:emily@yellowfoxco.com'>email</a>
          to get in touch. You can also use the following form:
        </p>
        <form action='http://formspree.io/emily@yellowfoxco.com' 
          method='POST'>
          <input type='text' name='name' placeholder='Your Name' />
          <input type='email' name='_replyto' 
            placeholder='Your Email Address' />
	  <textarea placeholder='Tell us about your project!' rows='5'>
          </textarea>
          <input id='button' type='submit' value='Send' />
        </form>
      </article>
    </main>
    <footer>
      &#169;
      2016
      YELLOWFOXCO
    </footer>
  </body>
</html>

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
Deleted flag.jpg.

cannot compute difference between binary files

Deleted index-raw.css. 
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

:root {
	--dark-white:	#bdc3c7;
	--light-white:	#ecf0f1;
	--dark-grey:	#7f8c8d;
	--light-grey:	#95a5a6;
	--dark-black:	#212121;
	--light-black:	#424242;
	--dark-red:	#c0392b;
	--light-red:	#e74c3c;
	--dark-orange:	#d35400;
	--light-orange:	#e67e22;
	--dark-yellow:	#f39c12;
	--light-yellow:	#f1c40f;
	--dark-green:	#27ae60;
	--light-green:	#2ecc71;
	--dark-blue:	#2980b9;
	--light-blue:	#3498db;
	--dark-indigo:	#2c3e50;
	--light-indigo:	#34495e;
	--dark-violet:	#8e44ad;
	--light-violet:	#9b59b6;
}

body {
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 1.2em;
	margin: auto;
	width: 90%;
}

a {
	text-decoration: none;
}

header { height: 10vh; }

header h1 {
	height: 100%;
	line-height: 10vh;
	text-align: center;
	vertical-align: middle;
}

header h1 a {
	border-bottom: 0.2ch solid; 
	border-top: 0.2ch solid;
	color: var(--light-black);
}

main h2 { display: none; }

#portal a {
	border-radius: 10px;
	color: var(--light-white);
	display: block;
	filter: grayscale;
	filter: brightness(99%);
	float: left;
	font-size: 1.75em;
	height: 50vh;
	line-height: 50vh;
	margin: 7% 1.6% 14% 1.6%;
	text-align: center;
	text-shadow: 1px 1px 2px var(--dark-black),
		-1px 1px 2px var(--dark-black),
		-1px -1px 2px var(--dark-black),
		1px -1px 2px var(--dark-black);
	vertical-align: middle;
	width: 30%;
}

#portal a:hover { filter: brightness(120%); }

#shop-button {
	background: url(shelf.jpg) no-repeat;
	background-size: cover;
}

#blog-button {
	background: url(flag.jpg);
	background-size: cover;
}

#connect-button {
	background: url(rope.jpg);
	background-size: cover;
}

footer {
	clear: both;
	text-align: center;
}

@media (max-width: 768px) {
	
	body {
		font-size: 1em;
	}

	#portal a {
		float: none;
		height: 25vh;
		line-height: 25vh;
		margin: 4% auto;
		width: 90%;
	}
}

@media (orientation: landscape) and (max-width: 768px) {

	body {
		width: 100%;
	}
	
	#portal a {
		float: left;
		margin: 7.5% 1%;
		width: 31%;
		height: 60vh;
		line-height: 60vh;
	}
}

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
Deleted index.css. 
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

body {
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.2em;
  margin: auto;
  width: 90%;
}

a {
  text-decoration: none;
}

header {
  height: 10vh;
}

header h1 {
  height: 100%;
  line-height: 10vh;
  text-align: center;
  vertical-align: middle;
}

header h1 a {
  border-bottom: 0.2ch solid;
  border-top: 0.2ch solid;
  color: #424242;
}

main h2 {
  display: none;
}

#portal a {
  border-radius: 10px;
  color: #ecf0f1;
  display: block;
  -webkit-filter: grayscale;
  filter: grayscale;
  -webkit-filter: brightness(99%);
  filter: brightness(99%);
  float: left;
  font-size: 1.75em;
  height: 50vh;
  line-height: 50vh;
  margin: 7% 1.6% 14% 1.6%;
  text-align: center;
  text-shadow: 1px 1px 2px #212121,
		-1px 1px 2px #212121,
		-1px -1px 2px #212121,
		1px -1px 2px #212121;
  vertical-align: middle;
  width: 30%;
}

#portal a:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}

#shop-button {
  background: url(shelf.jpg) no-repeat;
  background-size: cover;
}

#blog-button {
  background: url(flag.jpg);
  background-size: cover;
}

#connect-button {
  background: url(rope.jpg);
  background-size: cover;
}

footer {
  clear: both;
  text-align: center;
}

@media (max-width: 768px) {
  body {
    font-size: 1em;
  }

  #portal a {
    float: none;
    height: 25vh;
    line-height: 25vh;
    margin: 4% auto;
    width: 90%;
  }
}

@media (orientation: landscape) and (max-width: 768px) {
  body {
    width: 100%;
  }

  #portal a {
    float: left;
    margin: 7.5% 1%;
    width: 31%;
    height: 60vh;
    line-height: 60vh;
  }
}

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
Changes to index.html. 
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

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

    <link rel='stylesheet' href='index.css' />
    <title>Home - YELLOWFOXCO</title>
  </head>
  <body>
    <header>
      <h1><a href='index.html'>YELLOWFOXCO</a></h1>






    </header>
    <main>







      <h2>Home</h2>




      <nav id='portal'>





        <a href='https://etsy.com/shop/YELLOWFOXCO' id='shop-button'>Shop</a>

        <a href='https://yellowfoxco.tumblr.com' id='blog-button'>Blog</a>
        <a href='contact.html' id='connect-button'>Connect</a>


      </nav>












    </main>
    <footer>
      <p>
        &#169;
        2016
        YELLOWFOXCO
      </p>
    </footer>
  </body>
</html>





>
|
<



|
>
>
>
>
>
>


>
>
>
>
>
>
>
|
>
>
>
>
|
>
>
>
>
>
|
>
|
|
>
>
|
>
>
>
>
>
>
>
>
>
>
>
>


<
|
|
|
<




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

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <title>yellowfoxco</title>
    <link rel='stylesheet' type='text/css' href='style.css' />

  </head>
  <body>
    <header>
      <h1>YELLOWFOXCO</h1>
      <img src='logo.jpg' alt='Logo' />
      <nav>
	<a href='https://etsy.com/shop/YELLOWFOXCO'>Shop</a>
	<a href='#connect'>Connect</a>
	<a href='https://yellowfoxco.tumblr.com'>Blog</a>
      </nav>
    </header>
    <main>
      <h2 id='connect'>PASSION • MEETS • DESIGN</h2>
      <p>
        YELLOWFOXCO was created for the creative. Turning home decor 
        into a passion and letting inspiration unfold. Working hard &amp;
        getting our hands dirty is what we do, design is what we love. 
        We are the wild creative type, and so are our customers. We
	design for you in mind, making your dream home come true.
      </p>
      <iframe src='http://snapwidget.com/sc/?u=eWVsbG93Zm94Y298aW58MTUwfDN8M3x8bm98NXxub25lfG9uU3RhcnR8eWVzfG5v&ve=311215' 
                title='Instagram Widget' 
                class='snapwidget-widget' 
                allowTransparency='true' 
                frameborder='0' 
                scrolling='yes' 
                style='border:none; overflow:hidden; width:100%; height:20%'>
      </iframe>
      <p>
        You can view our work on our 
        <a href='https://etsy.com/shop/YELLOWFOXCO'>Etsy</a> shop. We
        write on
        <a href='https://yellowfoxco.tumblr.com'>Tumblr</a> and post
        photos to <a href='https://instagram.com/yellowfoxco/'>
        Instagram</a> You can also find us on 
        <a href='https://facebook.com/YellowFoxCo'>Facebook</a>.
      </p>
      <p>
        We often make custom orders. If you've got an idea,
        send us an <a href='mailto:emily@yellowfoxco.com'>email</a>
        to get in touch. You can also use the following form:
      </p>
      <form action='http://formspree.io/emily@yellowfoxco.com' method='POST'>
        <input type='text' name='name' placeholder='Your Name' />
        <input type='email' name='_replyto' placeholder='Email Address' />
        <textarea placeholder='Tell us about your project!' rows='5'>
        </textarea>
        <input id='submit' type='submit' value='Send' />
      </form>
    </main>
    <footer>

      &#169;
      2016
      YELLOWFOXCO

    </footer>
  </body>
</html>
Added logo.jpg.

cannot compute difference between binary files

Added raw.css. 














































































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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

:root {
	--dark-white:	#bdc3c7;
	--light-white:	#ecf0f1;
	--dark-grey:	#7f8c8d;
	--light-grey:	#95a5a6;
	--dark-black:	#212121;
	--light-black:	#424242;
	--dark-red:	#c0392b;
	--light-red:	#e74c3c;
	--dark-orange:	#d35400;
	--light-orange:	#e67e22;
	--dark-yellow:	#f39c12;
	--light-yellow:	#f1c40f;
	--dark-green:	#27ae60;
	--light-green:	#2ecc71;
	--dark-blue:	#2980b9;
	--light-blue:	#3498db;
	--dark-indigo:	#2c3e50;
	--light-indigo:	#34495e;
	--dark-violet:	#8e44ad;
	--light-violet:	#9b59b6;
}

body {
  color: var(--dark-black);
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  margin: auto;
  width: 95%;
}

header {
  display: block;
  height: 100%;
}

h1 {
  border-top: 0.2ch solid;
  border-bottom: 0.2ch solid;
  display: block;
  margin: 2ch auto;
  padding: 0.5ch;
  text-align: center;
  width: 14ch;
}

nav {
  margin: 5% auto;
  text-align: center;
}

nav a {
  color: var(--dark-black);
  display: inline-block;
  font-size: 1.5em;
  margin: 1%;
  max-width: 7ch;
}

img {
  border-radius: 300px;
  display: block;
  margin: 5% auto;
  width: 300px;
}

main {
  margin: 10% auto;
  width: 95%;
}

h2 {
  color: var(--dark-white);
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.4ch;
  margin: 2ch auto 5ch auto;
  text-align: center;
}

p {
  margin: 3ch auto;
  max-width: 41ch;
}

a {
  border-bottom: 0.2ch solid transparent;
  color: var(--dark-blue);
  text-decoration: none;
}

a:hover {
  border-bottom: 0.2ch solid;
}

form {
  margin: 5ch auto;
}

input, textarea {
  font-size: 1em;
  font-family: helvetica, arial, verdana, sans-serif;
  display: block;
  margin: 2ch auto;
  padding: 1ch;
  width: 30ch;
}

#submit {
  width: 20ch;
}

footer {
  color: var(--dark-grey);
  margin: 5ch auto 2ch auto;
  text-align: center;
}

@media (max-width: 650px) {
  nav {
    margin: 10% auto;
  }

  nav a {
    display: block;
    margin: 1ch auto;
  }

  h2 {
    font-size: 0.9em;
  }
}
Deleted rope.jpg.

cannot compute difference between binary files

Deleted shelf.jpg.

cannot compute difference between binary files

Added style.css. 
































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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

body {
  color: #212121;
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 1.5em;
  line-height: 1.5;
  margin: auto;
  width: 95%;
}

header {
  display: block;
  height: 100%;
}

h1 {
  border-top: 0.2ch solid;
  border-bottom: 0.2ch solid;
  display: block;
  margin: 2ch auto;
  padding: 0.5ch;
  text-align: center;
  width: 14ch;
}

nav {
  margin: 5% auto;
  text-align: center;
}

nav a {
  color: #212121;
  display: inline-block;
  font-size: 1.5em;
  margin: 1%;
  max-width: 7ch;
}

img {
  border-radius: 300px;
  display: block;
  margin: 5% auto;
  width: 300px;
}

main {
  margin: 10% auto;
  width: 95%;
}

h2 {
  color: #bdc3c7;
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.4ch;
  margin: 2ch auto 5ch auto;
  text-align: center;
}

p {
  margin: 3ch auto;
  max-width: 41ch;
}

a {
  border-bottom: 0.2ch solid transparent;
  color: #2980b9;
  text-decoration: none;
}

a:hover {
  border-bottom: 0.2ch solid;
}

form {
  margin: 5ch auto;
}

input,
textarea {
  font-size: 1em;
  font-family: helvetica, arial, verdana, sans-serif;
  display: block;
  margin: 2ch auto;
  padding: 1ch;
  width: 30ch;
}

#submit {
  width: 20ch;
}

footer {
  color: #7f8c8d;
  margin: 5ch auto 2ch auto;
  text-align: center;
}

@media (max-width: 650px) {
  nav {
    margin: 10% auto;
  }

  nav a {
    display: block;
    margin: 1ch auto;
  }

  h2 {
    font-size: 0.9em;
  }
}
Powered by Fossil · RSS