├── images
├── .DS_Store
├── html.jpg
├── icon.png
├── logo.png
├── favicon.ico
├── page3
│ └── title.jpeg
├── CSS_selector
│ └── selector.gif
├── page2
│ └── element_analogy.png
├── Introduction
│ └── first_web_page.jpeg
├── arrow_left.svg
└── arrow_right.svg
├── .idea
├── vcs.xml
├── modules.xml
├── HTMLandCssNotes.iml
└── workspace.xml
├── HTMLStructure.md
├── readme.md
├── menu.js
└── base.css
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/.DS_Store
--------------------------------------------------------------------------------
/images/html.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/html.jpg
--------------------------------------------------------------------------------
/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/icon.png
--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/logo.png
--------------------------------------------------------------------------------
/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/favicon.ico
--------------------------------------------------------------------------------
/images/page3/title.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/page3/title.jpeg
--------------------------------------------------------------------------------
/images/CSS_selector/selector.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/CSS_selector/selector.gif
--------------------------------------------------------------------------------
/images/page2/element_analogy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/page2/element_analogy.png
--------------------------------------------------------------------------------
/images/Introduction/first_web_page.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingNinjasCodes/HTMLandCssNotes/master/images/Introduction/first_web_page.jpeg
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/images/arrow_left.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/images/arrow_right.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/HTMLandCssNotes.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/HTMLStructure.md:
--------------------------------------------------------------------------------
1 | * Introduction > Manish
2 | * Tags, Attributes and Elements > Manish
3 | * Page Title > Manish
4 | * Paragraphs > Manish
5 | * Headings > Manish
6 | * Lists > Manish
7 | * Links > Manish
8 | * Images > Manish
9 | * Tables > Manish
10 | * Table: rowspan > Manish
11 | * Table: colspan > Manish
12 | * Forms > Manish
13 | * HTML vs CSS > Manish
14 | * CSS: Getting Started > Kamal
15 | * CSS: Inline > Kamal
16 | * CSS: External > Kamal
17 | * CSS: In Page > Kamal
18 | * Selectors, Properties, and Values > Kamal
19 | * Colors > Kamal
20 | * Text > Kamal
21 | * Margin > Kamal
22 | * Padding > Kamal
23 | * Border > Kamal
24 | * Border Radius > Kamal
25 | * Span and Div > Manish
26 | * Text Abbreviations Quotations and Code >Manish
27 | * Meta Tags > Manish
28 | * Description Lists > Manish
29 | * Sections in a Document > Manish
30 | * Class and ID Selectors > Kamal
31 | * Grouping and Nesting > Manish
32 | * Pseudo Classes > Manish
33 | * Pseudo Elements > Manish
34 | * Shorthand Properties > Manish
35 | * Background Images > Manish
36 | * Specificity > Kamal
37 | * Display Properties > Kamal
38 | * Page Layouts > Manish
39 | * Media Tags > Manish ->covered in media queeries
40 | * HTML Forms > Manish
41 | * Shadows > Kamal
42 | * More Selectors > Kamal
43 | * Attribute Selectors > Kamal
44 | * Background > Manish -> covered in shorthand properties and background-images
45 | * Transformations > Kamal
46 | * Gradients > Kamal
47 | * Media Queries > Manish
48 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | **CodingNinjasCodes** is an open-source repository that is created to provide open-source free code for the people or those who want to contribute or learn.
5 |
6 | - First clone download from the repository named **HTMLandCSSNotes**.
7 |
8 | - Open **index.html** for adding any additional informational or in order to contribute.
9 |
10 | - To add a new tab apart from the given tabs, add the following..
11 | ..*
tab-Name
12 | - add this line on the top of the index.html inside the tag after all the tags inside the closing tag.
13 |
14 | ..* After that add a new **** element and give it an id of same as the 'tabname' as mentioned above in the li tag and also give it a class name of "tabcontent".
15 |
16 | - Inside this
element add a new
tag and give it a class of "heading".
17 |
18 | - Inside that element give the name of the main-heading which you want to give.
19 |
20 | - After that add a new element and give it a class of "content".
21 |
22 | - Inside this content class div you can write the necessary information you want to provide in it.
23 |
24 | - So now, in order to add the necessary information you can use the following classes that are mentioned below...
25 |
26 |
27 | **class="explanationText"**-To add any information,text, paragraph include this class in the relevant HTML tag.
28 |
29 | **class="explanationNote"**-To add any additional important note in HTML page include this class.
30 |
31 | **class="explanationHeading"**-To add any subheading to our HTML file include this class.
32 |
33 | **class="outputWindow"**-To show the output of the any HTML CSS code while opening in the browser include this tag.This class generally includes inline CSS whose output will be visible to the user.
34 |
35 | **class="code"**-To show any HTML CSS code when opened in the browser.This class "code" must be included in
tag.Any code inside this tag is a dead code and will not be run by the browser and will be shown as it is to the user.
36 |
37 | **class="explanationImage"**-To add any additional image to our HTML file must include this class.
38 |
39 |
40 | All these classes must be applied in the **index.html** file.
41 |
42 | *To change the given layout, colors, any other kind of style open **base.css**
43 |
44 | *In order to change any of the layouts or styles you can manipulate the CSS of the following classes...
45 |
46 | **class="tabcontent"**-To style the tab content.
47 |
48 | **class="heading"**-To style the heading.
49 |
50 | **class="content"**-manipulates the content div.
51 |
52 | **class="explanationText"**-changes the layout of any text written or any text included in the explanationText class.
53 |
54 | **class="explanationImage"**-changes the layout of any image that must be added in the explanationImage class.
55 |
56 | **class="output-window"**-changes the layout of the output of a particular code that outputs in the browser.
57 |
58 | **class="explanationNote"**-changes the layout of any specific note that is included in the explanationNote class.
59 |
60 | **class="highlightCode"**-highlights a particular area of code which is included in the highlightCode class.
61 |
62 | **class="code-class"** includes the layout of the code that lies inside the **** tag and given a class name of "code".
63 |
64 | All these changes should be done inside the **base.css** file.
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/menu.js:
--------------------------------------------------------------------------------
1 | function rotateIcon(icon) {
2 | icon.classList.toggle("change");
3 | var tab = document.getElementsByClassName('tab')[0];
4 | var container = document.getElementsByClassName('container')[0];
5 | tab.style.transition = "all 0.5s";
6 | container.style.transition = "all 0.5s";
7 | if (container.classList.contains("change")) {
8 | tab.style.width = "48%";
9 | tab.style.boxShadow = "4px 5px 8px 2px lightgrey";
10 | container.style.marginLeft = "50%";
11 | } else {
12 | tab.style.width = "0%";
13 | tab.style.boxShadow = "none";
14 | container.style.marginLeft = "1%";
15 | }
16 | }
17 |
18 | function openIntroductionPage() {
19 | var tabcontent = document.getElementsByClassName("tabcontent");
20 | for (i = 0; i < tabcontent.length; i++) {
21 | tabcontent[i].style.display = "none";
22 | }
23 | var tab = document.getElementsByClassName("tab")[0];
24 | var listTags = tab.getElementsByTagName("li");
25 | for (i = 0; i < listTags.length; i++) {
26 | listTags[i].className = listTags[i].className.replace(" active", "");
27 | }
28 | document.getElementById("default").style.display = "block";
29 | }
30 | function openPage(evt, PageName) {
31 | localStorage.setItem("last_visited",PageName);
32 | localStorage.setItem("last_visited_link",evt.currentTarget)
33 | if(localStorage.visit_history == undefined){
34 | localStorage.setItem("visit_history","");
35 | }
36 | document.getElementById("default").style.display = "none";
37 |
38 | var i, tabcontent, listTags, tab;
39 | tabcontent = document.getElementsByClassName("tabcontent");
40 | for (i = 0; i < tabcontent.length; i++) {
41 | tabcontent[i].style.display = "none";
42 | }
43 | tab = document.getElementsByClassName("tab")[0];
44 | listTags = tab.getElementsByTagName("li");
45 | for (i = 0; i < listTags.length; i++) {
46 | listTags[i].className = listTags[i].className.replace(" active", "");
47 | }
48 | document.getElementById(PageName).style.display = "block";
49 | if(evt.currentTarget.className != " active") {
50 | evt.currentTarget.className += " active";
51 | }
52 | if(evt.currentTarget.className != " visited") {
53 | evt.currentTarget.className += " visited";
54 | }
55 | for (i = 0; i < listTags.length; i++) {
56 | if(listTags[i].className.indexOf("active")>-1){
57 | localStorage.setItem("last_visited_link",listTags[i].innerHTML);
58 | if(localStorage.visit_history.indexOf(listTags[i].innerHTML) == -1){
59 | localStorage.visit_history = localStorage.visit_history + listTags[i].innerHTML;
60 | }
61 | }
62 | }
63 | }
64 |
65 | function nextPage(){
66 | var tabcontent = document.getElementsByClassName("tabcontent");
67 | for (i = 0; i < tabcontent.length; i++) {
68 | if(tabcontent[i].style.display == "block" && i -1 && i4){
85 | listTags[i-4].scrollIntoView();
86 | }
87 | break;
88 | }
89 | }
90 | tab.style.overflow="hidden";
91 |
92 | for (i = 0; i < listTags.length; i++) {
93 | if(listTags[i].className.indexOf("active")>-1){
94 | localStorage.setItem("last_visited_link",listTags[i].innerHTML);
95 | if(localStorage.visit_history.indexOf(listTags[i].innerHTML) == -1){
96 | localStorage.visit_history = localStorage.visit_history + listTags[i].innerHTML;
97 | }
98 | }
99 | }
100 | }
101 |
102 | function previousPage(){
103 | var tabcontent = document.getElementsByClassName("tabcontent");
104 | for (i = 0; i < tabcontent.length; i++) {
105 | if(tabcontent[i].style.display == "block" && i>0){
106 | tabcontent[i].style.display = "none";
107 | tabcontent[i-1].style.display = "block";
108 | localStorage.setItem("last_visited",tabcontent[i-1].id);
109 | }
110 | }
111 | var tab = document.getElementById("ID");
112 | var listTags = tab.getElementsByTagName("li");
113 | tab.style.overflow="auto";
114 | for (i = 0; i < listTags.length; i++) {
115 | if(listTags[i].className.indexOf("active") > -1 && i>0){
116 | // listTags[i].className = listTags[i].className.replace(" active", "");
117 | listTags[i].className = listTags[i].className.replace(" active", "");
118 | listTags[i-1].className += " active visited";
119 | if(i>4){
120 | listTags[i-4].scrollIntoView();
121 | }
122 | if(i<3){
123 | listTags[0].scrollIntoView();
124 | }
125 | }
126 | }
127 | tab.style.overflow="hidden";
128 |
129 | for (i = 0; i < listTags.length; i++) {
130 | if(listTags[i].className.indexOf("active")>-1){
131 | localStorage.setItem("last_visited_link",listTags[i].innerHTML);
132 | if(localStorage.visit_history.indexOf(listTags[i].innerHTML) == -1){
133 | localStorage.visit_history = localStorage.visit_history + listTags[i].innerHTML;
134 | }
135 | }
136 | }
137 | }
138 |
139 | window.onload = function() {
140 | var viewPortHeight = document.documentElement.clientHeight;
141 | document.getElementsByClassName("tab")[0].style.height = (document.documentElement.clientHeight-20)+"px";
142 | // If anyone knows why the above line is required please email to manishsherawat1@gmail.com!!
143 | if(localStorage.last_visited !== undefined){
144 | //for switching the display on for the last visited page and turning off the default page
145 | document.getElementById("default").style.display = "none";
146 | last_page=document.getElementById(localStorage["last_visited"]);
147 | last_page.style.display = "block";
148 |
149 | //for setting the last visited page as active in the left side index.
150 |
151 | var i, listTags, tab;
152 | tab = document.getElementsByClassName("tab")[0];
153 | tab = document.getElementsByClassName("tab")[0];
154 | listTags = tab.getElementsByTagName("li");
155 | // overflow is set to auto for the menu in order to get the active element in the view.
156 | tab.style.overflow="auto";
157 | for(i = 0; i < listTags.length; i++){
158 | if(listTags[i].innerHTML == localStorage["last_visited_link"]){
159 | listTags[i].className += " active visited";
160 | if(i>4){
161 | listTags[i-4].scrollIntoView();
162 | }
163 | }
164 | }
165 | tab.style.overflow="hidden";
166 | // tab.setAttribute("style","height:500px");
167 |
168 |
169 | // For setting the previous visited links to visited status
170 | for(i = 0; i < listTags.length; i++){
171 | if(localStorage.visit_history.indexOf(listTags[i].innerHTML) > -1){
172 | listTags[i].className += " visited";
173 | }
174 | }
175 | }
176 | }
--------------------------------------------------------------------------------
/base.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | /*border: 0;*/
4 | padding: 0;
5 | }
6 |
7 | body {
8 | font-family: "Lato", sans-serif;
9 | }
10 |
11 | #wrapper {
12 | display: flex;
13 | justify-content: space-between;
14 | width: 100%;
15 | overflow-x:hidden;
16 | }
17 |
18 | .navigationArrows{
19 | height: 3em;
20 | width: 3em;
21 | }
22 |
23 | #previous_section_arrow{
24 | position: fixed;
25 | bottom: 0.01em;
26 | left: 17em;
27 | }
28 | #next_section_arrow{
29 | position: fixed;
30 | bottom: 0.01em;
31 | right: 0.01em;
32 | }
33 |
34 | ul.tab {
35 | box-shadow: 4px 5px 8px 2px lightgrey;
36 | width: 20.5%;
37 | display: flex;
38 | flex-direction: column;
39 | margin: 0;
40 | padding: 0;
41 | background-color: white;
42 | position: fixed;
43 | min-height: 100%;
44 | }
45 |
46 |
47 | /* Float the list items side by side */
48 |
49 | ul.tab li {
50 | font-family: "Roboto", sans-serif;
51 | font-size: 2em;
52 | float: left;
53 | padding-bottom: 5px;
54 | padding-top: 5px;
55 | border-bottom: 1px solid lightgrey;
56 | }
57 |
58 | ul.tab li.first {
59 | border-top: 1px solid lightgrey;
60 | }
61 |
62 |
63 | /*styling for the coding ninjas logo on left top*/
64 |
65 | ul.tab>a>img {
66 | display: block;
67 | margin: auto;
68 | padding-top: 1.6em;
69 | padding-bottom: 1.6em;
70 | }
71 |
72 | .ul.tab li.active {
73 | background-color: rgba(0, 0, 0, 0.05);
74 | }
75 |
76 |
77 | /* Style the links inside the list items */
78 |
79 | ul.tab li a {
80 | display: inline-block;
81 | color: black;
82 | padding: 12px 16px;
83 | text-decoration: none;
84 | transition: 0.3s;
85 | font-size: 17px;
86 | }
87 |
88 |
89 | /* Change background color of links on hover */
90 |
91 | ul.tab li:hover {
92 | background-color: rgba(0, 0, 0, 0.1);
93 | /*color: orange;*/
94 | }
95 |
96 |
97 | /* Create an active/current tablink class */
98 |
99 | ul.tab li:focus,
100 | .active {
101 | background-color: #ccc;
102 | }
103 |
104 |
105 | /* Style the tab content */
106 |
107 | .tabcontent {
108 | width: 79.5%;
109 | display: none;
110 | /*padding: 6px 12px;*/
111 | border-top: none;
112 | padding-left: 1em;
113 | padding-right: 0.4em;
114 | margin-left: 20%;
115 | }
116 |
117 | .active {
118 | background-color: rgba(255, 153, 0,0.92) !important;
119 | transition: .1s;
120 | }
121 |
122 | li.active a {
123 | color: white!important;
124 | }
125 |
126 | .visited {
127 | background-color: rgba(255, 165, 0, 0.08);
128 | }
129 |
130 | #default {
131 | width: 80%;
132 | display: block;
133 | padding: 6px 12px;
134 | text-align: center;
135 | margin-left: 20.5%;
136 | }
137 |
138 | #default h3 {
139 | font-size: 3em;
140 | }
141 |
142 | #default a:hover {
143 | cursor: pointer;
144 | color: red;
145 | }
146 |
147 | #hidden-heading {
148 | display: none;
149 | }
150 |
151 | .heading {
152 | font-size: 3em;
153 | padding:0.3em 0.8em;
154 | /*background-color: #0091ea;*/
155 | /*background-color: rgba(255,253,208,1);*/
156 | margin: 0 0 0.5em 0;
157 | color: rgba(0,0,0,0.74);
158 | /*box-shadow: 1px 1px 1px 1px lightgrey;*/
159 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
160 | transition: box-shadow .25s;
161 | border-radius: 2px;
162 | }
163 | .heading:hover {
164 | box-shadow: 2px 1px 1px 2px lightgrey;
165 | }
166 |
167 | .content {
168 | line-height: 1.3em;
169 | color: rgba(0, 0, 0, 0.71);
170 | font-family: "Roboto", sans-serif;
171 | font-size: 1.28em;
172 | padding-left: 0.8em;
173 | }
174 |
175 | .explanationHeading {
176 | /*background-color: #00e5ff;*/
177 | /*color: white;*/
178 | color: rgba(0,0,0,0.64);
179 | font-size: 1.4em;
180 | font-weight: bold;
181 | margin-right: 2em;
182 | padding:0.8em 1em;
183 | margin-bottom:0.85em;
184 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
185 | transition: box-shadow .25s;
186 | border-radius: 2px;
187 | }
188 | .explanationHeading:hover {
189 | box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.14);
190 | }
191 |
192 | .explanationText {
193 | /*line-height: 1.3em;*/
194 | line-height: 1.3em;
195 | color: #3e3e3e;
196 | font-family: 'Open Sans',sans-serif;
197 | margin: 0 2em 1em 1.2em;
198 | font-size: inherit;
199 | }
200 |
201 | #default > img {
202 | width: 75%;
203 | margin: 48px 0 24px 0;
204 | }
205 |
206 | .code {
207 | padding: 8px;
208 | font-family: monospace,Consolas, "Liberation Mono", Courier ;
209 | color: rgba(0,0,0,0.60);
210 | margin-top: 1em;
211 | margin-bottom: 1em;
212 | margin-left:3.5em;
213 | margin-right:3.5em;
214 | background-color:#F6F6F6;
215 | border: 1px solid lightgrey;
216 | border-radius: 3px;
217 | overflow-x:auto;
218 | transition: box-shadow .25s;
219 | }
220 | .highlightCode {
221 | font-family: Consolas,"Liberation Mono",Courier,monospace;
222 | color: rgba(0,0,0,0.60);
223 | /*background-color: white;*/
224 | padding:3px;
225 | margin:inherit;
226 | border: 2px solid white;
227 | border-radius: 5px;
228 | }
229 | .code:hover {
230 | transform: scale(1.0005);
231 | box-shadow: 2px 1px 1px 2px lightgrey;
232 | }
233 | .explanationNote {
234 | /*line-height: 1.3em;*/
235 | /*color: rgba(0,0,0,0.74);*/
236 | /*font-family: "Roboto";*/
237 | margin-top: 1em;
238 | margin-bottom: 1em;
239 | margin-left:3.5em;
240 | margin-right:3.5em;
241 | background-color:rgba(0,0,0,0.1);
242 | line-height: 1.3em;
243 |
244 | font-family: Consolas, "Liberation Mono", Courier, monospace;
245 | color: rgba(0, 0, 0, 0.60);
246 | background-color: rgba(0, 0, 0, 0.1);
247 | border: 1px solid lightgrey;
248 | border-radius: 3px;
249 | box-shadow: 0 2px 2px 0 lightgrey;
250 | transition: box-shadow .25s;
251 | }
252 | .explanationNote:hover {
253 | box-shadow: 0 2px 0 2px lightgrey;
254 | }
255 |
256 | dd{
257 | margin-left: 40px
258 | }
259 |
260 | .explanationList {
261 | /*line-height: 1.3em;*/
262 | color: rgba(0, 0, 0, 0.74);
263 | font-family: inherit;
264 | margin-right: 1.5em;
265 | margin-bottom: 0.4em;
266 | margin-left: 2em;
267 | padding: 8px 16px;
268 | }
269 |
270 | .explanationImage {
271 | margin-top: 1em;
272 | margin-bottom: 1em;
273 | margin-left:3.5em;
274 | margin-right:3.5em;}
275 |
276 | .output-window {
277 | padding: 10px;
278 | margin-top: 1em;
279 | margin-bottom: 1em;
280 | margin-left:3.5em;
281 | margin-right:3.5em;
282 | border: 1px solid lightgrey;
283 | box-shadow: 2px 2px 6px 3px lightgrey;
284 | }
285 |
286 | .output-window:hover {
287 | box-shadow: 3px 3px 8px 4px lightgrey;
288 | }
289 |
290 |
291 |
292 | div.explanationImage img {
293 | width: 96%;
294 | border: 1px solid lightgrey;
295 | box-shadow: 2px 2px 6px 3px lightgrey;
296 | }
297 |
298 | div.explanationImage img:hover {
299 | box-shadow: 3px 3px 8px 4px lightgrey;
300 | }
301 |
302 |
303 |
304 |
305 | /*The CSS below is example specific */
306 |
307 | /*For html vs CSS page*/
308 | .hiddenForHVC{
309 | display:none;
310 | }
311 | #HtmlVsCssDiv{
312 |
313 | }
314 |
315 | .headerHVC{
316 | display: flex;
317 | justify-content: space-between;
318 | align-items: center;
319 | /*padding: 10px;*/
320 | background-color: white;
321 | box-shadow: 2px 1px 1px 2px lightgrey;
322 | padding: 0.5em;
323 | }
324 | .ulHVC{
325 | list-style: none;
326 | }
327 |
328 | .bodyTextHVC{
329 | padding: 1.5em 1.5em;
330 | }
331 |
332 | /*for pseudo class page*/
333 | #examplePara1:hover {
334 | box-shadow: 2px 4px 6px 8px lightgrey;
335 | }
336 |
337 | /*for pseudo elements page*/
338 | #examplePara2::first-letter {
339 | font-size: 2em;
340 | }
341 | /*for Text Abbreviations Quotations and Code*/
342 | .blockquote {
343 | display: block;
344 | margin: 1em;
345 | margin: 1em;
346 | }
347 | /*for Text Abbreviations Quotations and Code*/
348 | #exampleBlockquote::before {
349 | display: block;
350 | height: 1em;
351 | content: "“";
352 | margin-left: -.95em;
353 | font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif;
354 | color: #999;
355 | }
356 |
357 | /*For Page Layouts*/
358 | .pageLayoutBox{
359 | display: inline-block;
360 | background: #0091ea;
361 | width: 100px;
362 | height: 100px;
363 | margin: 20px;
364 | color: white;
365 | }
366 | #specialTwoA{
367 | position: relative;
368 | top: -20px;
369 | left: 20px;
370 | }
371 | #specialTwoB{
372 | position: absolute;
373 | top: 35px;
374 | left: 20px;
375 | }
376 |
377 | ul.tab>a>img:hover {
378 | cursor: pointer;
379 | }
380 |
381 | .container {
382 | display: none;
383 | }
384 |
385 | @media (max-width: 720px) {
386 | ul.tab {
387 | overflow: scroll!important;
388 | z-index: 1;
389 | opacity: 0.9;
390 | width: 0%;
391 | box-shadow: none;
392 | }
393 |
394 | #default h3 {
395 | margin-top: 50px;
396 | }
397 |
398 | #default > img {
399 | width: 100%;
400 | }
401 |
402 | .heading {
403 | text-align: center;
404 | }
405 |
406 | #default, .tabcontent {
407 | margin-left: 0;
408 | width: 100%;
409 | padding-left: 0;
410 | }
411 |
412 | .output-window {
413 | margin: 0px 12px 8px 0px;
414 | box-shadow: 2px 0px 16px 0px lightgrey;
415 | }
416 |
417 | .code {
418 | margin: 0 12px 8px 0;
419 | box-shadow: none;
420 | }
421 |
422 | .explanationImage {
423 | margin: 0;
424 | }
425 |
426 | .explanationText {
427 | margin: 0 10px 12px 0px;
428 | }
429 |
430 | .explanationNote {
431 | margin: 12px 12px 8px 0;
432 | padding: 2px;
433 | }
434 |
435 | .highlightCode {
436 | display: flex;
437 | }
438 |
439 | .container {
440 | position: absolute;
441 | z-index: 1;
442 | top: 1%;
443 | left: 2%;
444 | display: inline-block;
445 | }
446 |
447 | .bar1, .bar2, .bar3 {
448 | width: 35px;
449 | height: 5px;
450 | background-color: rgba(255, 153, 0,0.92);
451 | margin: 6px 0;
452 | transition: 0.4s;
453 | }
454 |
455 | .change .bar1 {
456 | -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
457 | transform: rotate(-45deg) translate(-9px, 6px) ;
458 | }
459 |
460 | .change .bar2 {opacity: 0;}
461 |
462 | .change .bar3 {
463 | -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
464 | transform: rotate(45deg) translate(-8px, -8px) ;
465 | }
466 | }
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
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 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 | margin-l
232 | img
233 | container
234 | containe
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 | true
253 | DEFINITION_ORDER
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 | project
344 |
345 |
346 | true
347 |
348 |
349 |
350 | DIRECTORY
351 |
352 | false
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 | 1484767353551
363 |
364 |
365 | 1484767353551
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |
560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
591 |
592 |
593 |
594 |
595 |
596 |
597 |
598 |
599 |
600 |
601 |
602 |
603 |
604 |
605 |
--------------------------------------------------------------------------------