oNora / HTML_CSS_snippets

This is a collection of simple tasks, that I created while I was learning how to create fancy stuff with pure html and css.

HTML and CSS snippets

This is a collection of simple tasks, that I created during a cours of Web Design and UI Technologies at Telerik Academy and while I was learning how to create fancy stuff with pure html and css.

####1. Chat_session_style

Requirements for this task are set as screenshots. You can see them in folder task-images inside task's folder.
Demo link: http://onora.github.io/HTML_CSS_snippets/Chat_session_style/Chat_session_style.html

####2. LESS_SASS

Implementing a page with both LESS (demo) and SASS (demo) technology.

####3. WebGallery_with_HTML_CSS

Create images' gallery only with html and css. When an image is selected, it is shown zoomed.
Demo link: http://onora.github.io/HTML_CSS_snippets/WebGallery_with_HTML_CSS/index.html

####4. button

Responsive style for buttons and links. They are text independet. It means that they shrink and expand no matter how long the text inside is and the style stays the same.
Demo link: http://onora.github.io/HTML_CSS_snippets/button/button.html

####5. from_psd_to_page

Requirements for this task are set as screenshots - preview.png.
Demo link: http://onora.github.io/HTML_CSS_snippets/from_psd_to_page/

####6. menu_list_submenu_style

Requirements for this task are set as screenshots. You can see them in folder task-images inside task's folder.
Demo link: http://onora.github.io/HTML_CSS_snippets/menu_list_submenu_style/menu_list_submenu_style.html

####7. responsiveShadow_for_differentImgSize

Web page (HTML + CSS + images) that displays few images (with different sizes) with a shadow. It means that the shadow shrink and expand no matter how large images are
Demo link: http://onora.github.io/HTML_CSS_snippets/responsiveShadow_for_differentImgSize/responsiveShadow.html

####8. responsive-examples Simple implementation of responsive design. (more details)