├── .vscode └── settings.json ├── .gitattributes ├── assignments.html ├── index.html ├── blogs.html ├── styles.css ├── dummy-blog.html ├── lib └── components.html ├── projects.html └── images └── hero.svg /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /assignments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | assignment | adarshbalika 9 | 10 | 11 | 12 | 26 | 27 |
28 |

this is an assignment

29 |

You need to work on this yourself and practice CSS and JS taught in the class.

30 |

This should be similar to minionese app, as a bonus try POST request.

31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | home | adarshbalika 7 | 8 | 9 | 10 | 24 | 25 |
26 | 27 |

adarsh balika the web developer

28 |
29 | 30 |
31 |
32 |

technologies

33 |

I'm familiar with HTML5, CSS3, Git, JavaScript, NodeJS, ReactJS, and Web Hosting

34 |
35 |
36 | 37 |
38 |
39 |

projects

40 |

I like to showcase my work and thus, you can see my projects hosted online

41 | See Projects 42 |
43 |
44 | 45 |
46 |
47 |

blogs

48 |

I am also working on some technical and non techincal blogs. I like to document my journey of learning.

49 | Read Blogs 50 |
51 |
52 | 53 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /blogs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | blogs | adarshbalika 8 | 9 | 10 | 24 | 25 |
26 |

read my blogs

27 |
28 | 29 | 54 | 55 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); 2 | 3 | :root { 4 | --primary-color: #7C3AED; 5 | --off-white: #F3F4F6; 6 | --dark-gray: #6B7280; 7 | } 8 | 9 | body { 10 | font-family: 'Montserrat', sans-serif; 11 | margin: 0px 12 | } 13 | 14 | hr { 15 | margin: 2rem 0rem; 16 | } 17 | 18 | /** spaces **/ 19 | 20 | .margin-md { 21 | margin: 2rem; 22 | } 23 | 24 | /** container **/ 25 | .container { 26 | padding: 0rem 1rem; 27 | } 28 | 29 | .container-center { 30 | max-width: 600px; 31 | margin: auto; 32 | } 33 | 34 | /** links **/ 35 | .link { 36 | box-sizing: border-box; 37 | text-decoration: none; 38 | padding: 0.5rem 1rem; 39 | } 40 | 41 | .link-primary { 42 | background-color: var(--primary-color); 43 | border-radius: 0.5rem; 44 | color: white; 45 | display: block; 46 | max-width: 140px; 47 | margin: 1rem 1rem 1rem 0rem; 48 | } 49 | 50 | .link-secondary { 51 | color: var(--primary-color); 52 | border-radius: 0.5rem; 53 | border: 1px solid var(--primary-color); 54 | display: block; 55 | max-width: 140px; 56 | margin: 1rem 1rem 1rem 0rem; 57 | } 58 | 59 | /** look into BEM naming convention for CSS **/ 60 | 61 | /** lists **/ 62 | 63 | .list-non-bullet { 64 | list-style: none; 65 | padding-inline-start: 0px; 66 | } 67 | 68 | .list-item-inline { 69 | display: inline; 70 | padding: 0rem 0.5rem; 71 | } 72 | 73 | /** navigation **/ 74 | 75 | .navigation { 76 | background-color: var(--primary-color); 77 | color: white; 78 | padding: 1rem; 79 | border-bottom-left-radius: 1rem; 80 | } 81 | 82 | .navigation .nav-brand { 83 | font-weight: bold; 84 | } 85 | 86 | .navigation .nav-pills { 87 | text-align: right; 88 | } 89 | 90 | .navigation .link { 91 | color: white; 92 | } 93 | 94 | .navigation .link-active { 95 | font-weight: bold; 96 | } 97 | 98 | /** header **/ 99 | 100 | .hero { 101 | padding: 2rem; 102 | padding-top: 5rem; 103 | 104 | } 105 | 106 | .hero .hero-img { 107 | max-width: 80%; 108 | width: 350px; 109 | display: block; 110 | margin: auto; 111 | } 112 | 113 | .hero .hero-heading { 114 | text-align: center; 115 | padding-top: 1rem; 116 | color: var(--dark-gray); 117 | } 118 | 119 | .hero .hero-heading .heading-inverted { 120 | color: var(--primary-color); 121 | } 122 | 123 | /** sections **/ 124 | 125 | .section { 126 | padding: 2rem; 127 | } 128 | 129 | .section h1 { 130 | text-align: center; 131 | 132 | } 133 | 134 | .ow { 135 | background-color: var(--off-white); 136 | } 137 | 138 | /** footers **/ 139 | 140 | .footer { 141 | background-color: var(--primary-color); 142 | padding: 4rem 1rem; 143 | text-align: center; 144 | color: white; 145 | border-top-right-radius: 1rem; 146 | } 147 | 148 | .footer .link { 149 | color: white 150 | } 151 | 152 | .footer .footer-header { 153 | font-weight: bold; 154 | font-size: large; 155 | } 156 | 157 | .footer ul { 158 | padding-inline-start: 0px; 159 | } 160 | 161 | /** projects **/ 162 | .showcase-list { 163 | padding: 2rem; 164 | } 165 | 166 | /** blogs **/ 167 | .showcase-blog { 168 | padding-bottom: 6rem; 169 | } -------------------------------------------------------------------------------- /dummy-blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | blogs | adarshbalika 9 | 10 | 11 | 12 | 26 | 27 |
28 |

this is a dummy blog

29 |
30 | 31 |
32 |

33 | Dummy text: Its function as a filler or as a tool for comparing the visual impression of different typefaces Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content. This is required when, for example, the final text is not yet available. Dummy text is also known as 'fill text'. It is said that song composers of the past used dummy texts as lyrics when writing melodies in order to have a 'ready-made' text to sing with the melody. Dummy texts have been in use by typesetters since the 16th century. 34 |

35 | 36 |

The usefulness of nonsensical content

37 |

38 | Dummy text is also used to demonstrate the appearance of different typefaces and layouts, and in general the content of dummy text is nonsensical. Due to its widespread use as filler text for layouts, non-readability is of great importance: human perception is tuned to recognize certain patterns and repetitions in texts. If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page (layout or type area). For this reason, dummy text usually consists of a more or less random series of words or syllables. This prevents repetitive patterns from impairing the overall visual impression and facilitates the comparison of different typefaces. Furthermore, it is advantageous when the dummy text is relatively realistic so that the layout impression of the final publication is not compromised. 39 |

40 | 41 | 42 |

Incomprehensibility or readability? That is the question.

43 |

44 | The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century. Lorem Ipsum is composed in a pseudo-Latin language which more or less corresponds to 'proper' Latin. It contains a series of real Latin words. This ancient dummy text is also incomprehensible, but it imitates the rhythm of most European languages in Latin script. The advantage of its Latin origin and the relative meaninglessness of Lorum Ipsum is that the text does not attract attention to itself or distract the viewer's attention from the layout. 45 |

46 | 47 |
48 | 49 | 50 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /lib/components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Component Library 8 | 9 | 10 | 11 | 12 | 13 |

tanay's component library

14 |

I am attending neog.camp and I want to make a library which would make all my projects look good and consistent. 15 |

16 | 17 |
18 | 19 | 20 |

@typography

21 | 22 |

This is the biggest heading

23 |

This is the second biggest

24 |

Let me show you the normal text. This is free flowing and will wrap at the end like a paragraph.

25 |

This paragraph will have a bold text

26 | This is relatively smaller text 27 | 28 |
29 | 30 |

@container

31 | 32 |

fluid container

33 |
This is a fluid container and it will go till the end of the page
34 | 35 |

center container

36 |
This is a centered container and it will go till the specified width
37 | 38 |
39 | 40 |

@links

41 | 42 | Primary Link 43 | Secondary Link 44 | 45 |
46 | 47 |

@lists

48 | 49 |

unordered list

50 |

This list will not have the bullet

51 | 52 | 58 | 59 |

unordered inline list

60 | 61 | 66 | 67 |

reverse ordered list

68 | 69 |
    70 |
  1. milk
  2. 71 |
  3. eggs
  4. 72 |
  5. break
  6. 73 |
74 | 75 |
76 | 77 |

@nav

78 | 79 | 93 | 94 |
95 | 96 |

@header

97 | 98 |
99 | 100 |

adarsh balika the web developer

101 |
102 | 103 |
104 |

@section

105 |
106 |
107 |

white section

108 |

We are an open community of developers building resources for a better Web, regardless of brand, browser, 109 | or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue 110 | to drive innovation on the Web to serve the greater good. It starts here, with you.

111 |
112 | 113 |
114 | 115 |
116 |
117 |

off white section

118 |

We are an open community of developers building resources for a better Web, regardless of brand, browser, 119 | or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue 120 | to drive innovation on the Web to serve the greater good. It starts here, with you.

121 |
122 | 123 |
124 | 125 |
126 | 127 |

@footer

128 | 129 | 150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | projects | adarshbalika 8 | 9 | 10 | 24 | 25 |
26 |

see my code

27 |
28 | 29 | 109 | 110 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /images/hero.svg: -------------------------------------------------------------------------------- 1 | react --------------------------------------------------------------------------------