forked from mmistakes/minimal-mistakes
/
index.html
160 lines (141 loc) · 7.01 KB
/
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
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
<!-- * Tips
1. “!”치고 “tab”; 또는 “HTML”입력 후 “HTML:5” 선택
2. 하위 요소 생성: “>” 사용 /* 예: */ header>ul>li
3. 동급 요소 생성: “+” 사용 /* 예: */ section>article>h2+p
4. 반복 태그 생성: “*” 사용 /* 예: */ ul>li*5
5. CSS class 와 id 설정: “.” 와 “#”사용 /* 예: */ ul#menu>li.item*3
6. Grouping (그룹화) : “( )” 사용 /* 예: */ .container>(header>nav>ul>li*5>a)+(#content>section)+footer
7. 속성 [attribute] 있는 태그: “[]”사용 /* 예: */ td[title="name" colspan="5"]
8. 텍스트가 있는 태그: {} 중괄호 안에 {텍스트}를 입력 /* 예: */ a.button{Click Me}
9. 넘버링(숫자를 순서대로 나열): “$”사용 /* 예: */ ul.list>li.item$*5>{$}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="./css/w3.css">
<style> body, h1, h2, h3, h4, h5 { font-family: "Raleway", sans-serif } </style>
<title>eddie's new home</title>
</head>
<body>
<div class="w3-sidebar w3-collapse w3-white w3-animate-left w3-large" style="z-index:3;width:300px;" id="mySidebar">
<div class="w3-bar w3-black w3-center">
<a class="w3-bar-item w3-button" style="width:33.33%" href="javascript:void(0)" onclick="openNav('nav01')">
<i class="fa fa-bars w3-xlarge"></i></a>
<a class="w3-bar-item w3-button" style="width:33.33%" href="javascript:void(0)" onclick="openNav('nav03')">
<i class="fa fa-file w3-xlarge"></i></a>
<a class="w3-bar-item w3-button" style="width:33.33%" href="javascript:void(0)" onclick="openNav('nav02')">
<i class="fa fa-camera w3-xlarge"></i></a>
</div>
<div id="nav01" class="w3-bar-block">
<a class="w3-button w3-hover-teal w3-hide-large w3-large w3-right" href="javascript:void(0)"
onclick="w3_close()">x</a>
<a class="w3-bar-item w3-button w3-border-bottom w3-large" href="#"><img
src="https://www.w3schools.com/images/w3schools.png" style="width:80%;"></a>
<a class="w3-bar-item w3-button" href="#">Learn HTML</a>
<a class="w3-bar-item w3-button" href="#">Learn W3.CSS</a>
<a class="w3-bar-item w3-button" href="#">Learn JavaScript</a>
<a class="w3-bar-item w3-button" href="#">Learn SQL</a>
<a class="w3-bar-item w3-button" href="#">Learn PHP</a>
</div>
<div id="nav02">
<a class="w3-bar-item w3-button" target="_blank" href="tryw3css_templates_black.htm"><img
src="img_demo_black.png" style="width:100%;"></a>
<a class="w3-bar-item w3-button" target="_blank" href="tryw3css_examples_album.htm"><img
src="img_demo_summer.jpg" style="width:100%;"></a>
<a class="w3-bar-item w3-button" target="_blank" href="tryw3css_examples_blog.htm"><img src="img_demo_blog.jpg"
style="width:100%;"></a>
</div>
<div id="nav03">
<div class="w3-container w3-border-bottom">
<h1 class="w3-text-theme">W3.CSS</h1>
</div>
<ul class="w3-ul w3-large">
<li class="w3-padding-16">Smaller and faster</li>
<li class="w3-padding-16">Easier to use</li>
<li class="w3-padding-16">Easier to learn</li>
<li class="w3-padding-16">CSS only</li>
<li class="w3-padding-16">Speeds up apps</li>
<li class="w3-padding-16">CSS equality for all</li>
<li class="w3-padding-16">PC Laptop Tablet Mobile</li>
</ul>
</div>
</div>
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<div class="w3-main" style="margin-left:300px;">
<div class="w3-top w3-theme w3-large w3-hide-large">
<i class="fa fa-bars w3-button w3-teal w3-xlarge" onclick="w3_open()"></i>
</div>
<header class="w3-container w3-theme w3-padding-64 w3-center">
<h1 class="w3-xxxlarge w3-padding-16">W3Schools.com</h1>
</header>
<div class="w3-container w3-padding-large w3-section w3-light-grey">
<h1 class="w3-jumbo">CSS</h1>
<p class="w3-xlarge">The Language for Styling Web Pages</p>
<a class="w3-button w3-theme w3-hover-white" href="/css/default.asp">LEARN CSS</a>
<a class="w3-button w3-theme w3-hover-white" href="/cssref/default.asp">CSS REFERENCE</a>
<p class="w3-large">
<p>
<div class="w3-code cssHigh notranslate">
body {<br>
background-color: #d0e4fe;<br>}<br>h1 {<br>
color: orange;<br>
text-align: center;<br>}<br>p {<br>
font-family: "Times New Roman";<br>
font-size: 20px;<br>}
</div>
<a class="w3-button w3-theme w3-hover-white" href="/css/tryit.asp?filename=trycss_default" target="_blank">Try
it Yourself</a>
</div>
<div class="w3-container w3-padding-large w3-section w3-light-grey">
<h1 class="w3-jumbo">JavaScript</h1>
<p class="w3-xlarge">The Language for Programming Web Pages</p>
<a href="/js/default.asp" class="w3-button w3-theme w3-hover-white">LEARN JS</a>
<a href="/jsref/default.asp" class="w3-button w3-theme w3-hover-white">JS REFERENCE</a>
<p>
<div class="w3-code jsHigh notranslate">
// Click the button to change the color of this paragraph<br><br>function myFunction() {<br>
var x;<br>
x = document.getElementById("demo");<br>
x.style.fontSize = "25px"; <br>
x.style.color = "red"; <br>}
</div>
<a class="w3-button w3-theme w3-hover-white" href="/js/tryit.asp?filename=tryjs_default" target="_blank">Try it
Yourself</a>
</div>
<footer class="w3-container w3-padding-large w3-light-grey w3-justify w3-opacity">
<p>
<nav>
<a href="/forum/default.asp" target="_blank">FORUM</a> |
<a href="/about/default.asp" target="_top">ABOUT</a>
</nav>
</p>
</footer>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
openNav("nav01");
function openNav(id) {
document.getElementById("nav01").style.display = "none";
document.getElementById("nav02").style.display = "none";
document.getElementById("nav03").style.display = "none";
document.getElementById(id).style.display = "block";
}
</script>
<script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
<script>
w3CodeColor();
</script>
<script src="./js/index.js"></script>
</body>
</html>