maauer.h/index.php at master · maauer/maauer.h · 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

<!doctype html>
<html>
<head>
  <title>menachem | menachem238</title>
	<link rel="shortcut icon" type="image/png" href="/pixico.png">

  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=0' />
  <meta name="description" content="the web site of menachem aka menachem238 / maauer" />
	<meta name='keywords' content='menachem,menachem238,maauer'/>
  <meta name="author" content="menachem" />
  <meta name="author" content="menachem238" />
	<meta name="google" content="notranslate" />

  <!-- opengraph -->
  <meta property="og:url" content="https://maauer.com" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="menachem | menachem238" />
  <meta property="og:description" content="the web site of menachem aka menachem238 / maauer" />


  <style>
    /* html and body */
    html, body {margin: 0; padding: 0; background-color:#181818; }

    /* begin title and links section (unorganized) */
    p.title {display: inline; color: #ffffff; font-size:6em; font-family: 'Roboto Slab', sans-serif, monospace; font-weight:lighter;}
    div.links {display: block; color: #ffffff; font-size:16px; font-weight:900; font-family: 'Roboto Slab', sans-serif, monospace;  font-weight:normal;}
    div.title {position:absolute; left:15%; top:35%;}
    /* links */
    div.links a:hover {position:relative; bottom: 0.1em;}

    a:link, a:visited {text-decoration: none; color: #bf0f0f;}
    p.title:hover ~ #add-238 {color: #ffffff; opacity: 0.45;}

    /* animations for the "238" */
    #add-238 {color: #181818; opacity:0;}
    #add-238:hover {color: #ffffff; opacity:0.45;}
    #add-238 {
      transition: all 0.50s;
      -webkit-transition: all 0.50s;
      -moz-transition: all 0.50s;
      -o-transition: all 0.50s;}
    #add-238:hover {
      transition: all 2.0s;
      -webkit-transition: all 2.0s;
      -moz-transition: all 2.0s;
      -o-transition: all 2.0s;}

    /* end title */


		/* below0 - absolute container for relitave objects that lives below 100%*/
		div.below0 {
			position:absolute;
			top:105%;
			left:0;
			right:0;
			width: 100%; /* may need to change with quote */
			height: auto;
		}

			/* quote of the day - quoteotd */
      	/* div positioning & size */
				div.quoteotd {
        	position:relative;
        	width: auto; /* may need to change with quote */
        	height: auto;
      	}

      	/* styling */
      	p.quoteotd {
        	padding-right:6%;
        	padding-left:6%;
        	color:#ffffff;
        	font-family: 'Roboto Slab', sans-serif, monospace;
        	font-size: 1.3rem;
					text-align: center;
      	}
    	/* end quote of the day */
    /* end below0 */

    /* hr - yes I know it is html5 but blah blah... */
    .hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
    color:#ffffff;
		right:5%;
    left:5%;
    position:absolute;
    }


    /* media queries for smaller screens */
    @media (max-width: 1000px){
      /* title */
      p.title {font-size:10vw;}
    }
    @media (max-width: 500px){
      /* title */
      p.title {font-size:12vw;}
    }
    @media (max-width: 350px){
      /* title */
      p.title {font-size:10vw;}
      a.links {font-size:10px;}
    }

  </style>
</head>
<body>
  <div class='title'>
    <p class='title'>men&#10701;chem</p><p class='title' id='add-238'>238</p>
    <div class='links'>
      <a class='links' href='/github' target='_blank'>GITHUB</a>&emsp;
      <a class='links' href='/projects/'>PROJECTS</a>&emsp;
      <!-- <a class='links' href='/twitter' target='_blank'>TWITTER</a>&emsp; -->
      <a class='links' href='/codepen' target='_blank'>CODEPEN</a>&emsp;
    </div> <!-- close 'links' -->
  </div> <!-- close 'title' -->

  <span class='hr' style='top:103%;'></span>

	<div class='below0'>

  	<div class='quoteotd'>
    	<p class='quoteotd'>Time goes by, people change, paint fades, buildings get torn down. But through, through the shivering and changing and the __________ look of consistancy in you life, your memories will live on untainted. For they are pure and perfect. Rain will not erode them, bulldozers cannot level them and the actions of others will never corrupt them.
      </p>
      <p class='quoteotd'>--S1 '09 - '10  -xoxoxox</p>
  	</div>
  </div>

<!-- end -->
<link href="/fonts/roboto-slab.css" rel="stylesheet">

</body>
</html>

<!-- copyright maauer.com 2016-2017 - but you can do whatever you want with it. If you do please give me credit by linking back here. in a comment or "a" tag-->