git.iko.soy/ilyakooo0.github.io
on master help sign in
Design somewhat done
24ad6b1ilyakooo0
#style.scssdeleted−21
compare with master
unifiedsplit
@@ -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 @@
1<!DOCTYPE HTML>
1<!DOCTYPE HTML>
2<head>
2<head>
3 <link rel="stylesheet" href="style.css">
3 <link rel="stylesheet" href="style.css">
4− <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
4+ <link href="https://fonts.googleapis.com/css?family=PT+Mono|PT+Serif:400,700&subset=cyrillic" rel="stylesheet">
5−
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7</head>
6</head>
8−<body>
7+<body lang="en">
9− <div id="foo">
8+ <header>
10−
9+ <img src="logo.png" id="logo">
11− <h1>Coming Soon...</h1>
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>
12 </div>
17 </div>
13</body>
18</body>
logo.pngnew file

Binary file not shown.

style.sass+72−8
@@ -1,16 +1,80 @@
1---
1---
2---
2---
3
3
4−body
4+$headerHeight: 150px
5− font-family: 'PT Mono', monospace
6− background: #fafafa
7
5
8−h1
6+body
9 display: block
7 display: block
10− text-align: center
8+ background-color: #fafafa
11 margin: auto
9 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
13
18
14−#foo
19+#logo
15 display: block
20 display: block
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
16− margin-top: 30vh
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