git.iko.soy/ilyakooo0.github.io
on master help sign in
Design somewhat done
commit24ad6b1cf687123b699533c8addeaede34e97c7c authorilyakooo0 <ilyakooo0@gmail.com> dateThu 30 Jun 2016, 16:53 (10 years ago) parent646bd4a
7 files changed+83−103
compare with master
unifiedsplit
#style.scss−21 Responsive Layout for refernce/index.html−17 Responsive Layout for refernce/style.css−1 Responsive Layout for refernce/style.scss−50 index.html+11−6 logo.png style.sass+72−8
#style.scssdeleted−21
@@ -1,21 +0,0 @@
1−$font: Menlo;
2−
3−body {
4− font-family: $font;
5− background-color: #fafafa;
6−}
7−
8−h1 {
9− display: block;
10− text-align: center;
11− margin: auto;
12− width: 100%;
13− height: 100%;
14−// background-color: aqua;
15−}
16−
17−#foo {
18−// background-color: fuchsia;
19− display: block;
20− margin-top: 100px;
21−}
Responsive Layout for refernce/index.htmldeleted−17
@@ -1,17 +0,0 @@
1−<!DOCTYPE HTML>
2−<head>
3− <link rel="stylesheet" href="style.css">
4− <meta name="viewport" content="width=device-width, initial-scale=1.0">
5−</head>
6−<body lang="en">
7− <header>
8− <div id="logo"></div>
9− <div id="links"> <a>Link1</a><a>Link2</a></div>
10− </header>
11− <div id="content">
12− <div id="Article">
13− <h1>THIS IS HEADER!!!!!</h1>
14− <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
15− </div>
16− </div>
17−</body>
Responsive Layout for refernce/style.cssdeleted−1
@@ -1 +0,0 @@
1−body{display:block;font-family:Menlo;background-color:#fafafa;margin:auto;max-width:500px;margin-top:20px}header{display:block;height:100px}#logo{display:block;width:100px;height:100px;background-color:#5ff5f0;float:left}#links{display:flex;height:100%}#links a{display:block;margin-left:20px;float:left;align-self:center}#links a:hover{color:#bcbcbc}@media screen and (max-width: 540px){body{margin-left:20px;margin-right:20px}}
Responsive Layout for refernce/style.scssdeleted−50
@@ -1,50 +0,0 @@
1−$font: Menlo;
2−
3−body {
4− display: block;
5− font-family: $font;
6− background-color: #fafafa;
7− margin: auto;
8− max-width: 500px;
9− margin-top: 20px;
10−}
11−
12−
13−header {
14− display: block;
15− height: 100px;
16−}
17−
18−#logo {
19− display: block;
20− width: 100px;
21− height: 100px;
22− background-color: #5ff5f0;
23− float: left;
24−}
25−
26−#links {
27− display: flex;
28− height: 100%;
29−}
30−
31−#links a {
32− display: block;
33− margin-left: 20px;
34− float: left;
35− align-self: center;
36−// margin-bottom: auto;
37−// margin-top: auto;
38−
39−}
40−
41−#links a:hover {
42− color: #bcbcbc;
43−}
44−
45−@media screen and (max-width: 540px) {
46− body{
47− margin-left: 20px;
48− margin-right: 20px;
49− }
50−}
index.html+11−6
@@ -1,13 +1,18 @@
11<!DOCTYPE HTML>
22<head>
33 <link rel="stylesheet" href="style.css">
4− <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
5−
4+ <link href="https://fonts.googleapis.com/css?family=PT+Mono|PT+Serif:400,700&subset=cyrillic" rel="stylesheet">
65 <meta name="viewport" content="width=device-width, initial-scale=1.0">
76</head>
8−<body>
9− <div id="foo">
10−
11− <h1>Coming Soon...</h1>
7+<body lang="en">
8+ <header>
9+ <img src="logo.png" id="logo">
10+ <div id="links"> <a href="#"><b>codePoet</b></a><a href="#">lightCatcher</a><a href="#">contact</a></div>
11+ </header>
12+ <div id="content">
13+ <div class="article">
14+ <h1>tcVeta</h1>
15+ <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
16+ </div>
1217 </div>
1318</body>
logo.pngnew file

Binary file not shown.

style.sass+72−8
@@ -1,16 +1,80 @@
11---
22---
33
4−body
5− font-family: 'PT Mono', monospace
6− background: #fafafa
4+$headerHeight: 150px
75
8−h1
6+body
97 display: block
10− text-align: center
8+ background-color: #fafafa
119 margin: auto
12− width: 100%
10+ max-width: 700px
11+ margin-top: 20px
12+ color: #191919
13+
14+header
15+ display: flex
16+ min-height: $headerHeight
17+ flex-wrap: wrap
1318
14−#foo
19+#logo
1520 display: block
16− margin-top: 30vh
21+ width: $headerHeight
22+ height: $headerHeight
23+ // background-color: #5ff5f0
24+ float: left
25+
26+.article
27+ // display: block
28+ margin-top: 50px
29+ // background-color: #1000FA
30+
31+#links
32+ display: flex
33+ flex-wrap: wrap
34+ height: 100%
35+ align-content: space-around
36+ align-self: center
37+
38+ a
39+ text-decoration: none
40+ display: block
41+ margin-left: 40px
42+ // margin-right: 20px
43+ align-self: center
44+ font-family: 'PT Mono', monospace
45+ font-size: 21px
46+ text-align: center
47+ color: #191919
48+ // margin-bottom: auto
49+ // margin-top: auto
50+
51+ a:hover
52+ color: #bcbcbc
53+
54+h1
55+ font-family: 'PT x', monospace
56+ font-weight: bold
57+ font-size: 28px
58+
59+p
60+ font-family: 'PT Serif', serif
61+
62+
63+
64+@media screen and (max-width: 650px)
65+ header
66+ justify-content: center
67+ #links
68+ justify-content: center
69+ a
70+ width: 100%
71+ margin-top: 15px
72+ margin-left: 0px
73+ margin-right: 0px
74+ .article
75+ margin-top: 30px
76+
77+@media screen and (max-width: 742px)
78+ body
79+ margin-left: 21px
80+ margin-right: 21px