├── images ├── flower.jpg └── profile-image.jpeg ├── about.html ├── contact.html ├── README.md ├── styles └── style.css └── index.html /images/flower.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-class/HEAD/images/flower.jpg -------------------------------------------------------------------------------- /images/profile-image.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/html-css-class/HEAD/images/profile-image.jpeg -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

About page

11 | 12 | 13 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Contact page

11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS Porjects 2 | 3 | ## HTML Part 4 | 5 | ### Introduction to HTML 6 | 7 | - What is HTML? Why HTML? 8 | - Tags, attributes 9 | - Types of tags - container, empty 10 | - basic structure of html 11 | - comments 12 | - html file validation 13 | 14 | ### Typography 15 | 16 | - Headings, paragraphs 17 | - Entity, icon, sybmol 18 | - add font awesome icon 19 | 20 | ### List, Link, media 21 | 22 | - ordered, unordered 23 | - Link 24 | - Media - image, video, audio, website/map 25 | 26 | ### Table, form 27 | 28 | ### Web accessibility 29 | 30 | - semantic - meaningful 31 | - landmark -> nav, header, main, article, section, footer 32 | - img -> alt 33 | - link -> described 34 | 35 | ## CSS Part 36 | 37 | ### Introduction to CSS 38 | 39 | - What is CSS? Why CSS? 40 | - Inline, Internal, External CSS 41 | 42 | ### Selectors & combinators 43 | 44 | - element selectors 45 | - grouping selectors 46 | - nested selectors 47 | - Universal selector 48 | - class selector 49 | - id selector 50 | - Pesudo selector - pesudo class, pesudo elements 51 | 52 | ### Typography 53 | 54 | - font properties 55 | - text styling 56 | - color 57 | - icon styling 58 | - how to add google font 59 | - how to add font awesome icon and style it 60 | 61 | ### Box Model 62 | 63 | - padding 64 | - margin 65 | - border 66 | - display: block, inline, inline-block, flex, grid, table 67 | 68 | ### Layout 69 | 70 | - flex 71 | 72 | ### Responsiveness 73 | 74 | - media query 75 | 76 | ### Others 77 | 78 | - responsive image 79 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | /* reset code starts */ 2 | 3 | * { 4 | } 5 | /* reset code ends */ 6 | 7 | /* common style starts */ 8 | a { 9 | color: white; 10 | } 11 | .btn { 12 | border: none; 13 | border-radius: 0.5rem; 14 | padding: 1rem; 15 | margin: 0.5rem; 16 | background-color: orange; 17 | text-transform: uppercase; 18 | cursor: pointer; 19 | } 20 | 21 | .title { 22 | color: white; 23 | background-color: green; 24 | text-align: center; 25 | text-transform: uppercase; 26 | padding: 1rem 0; 27 | } 28 | img { 29 | width: 100%; 30 | height: 100%; 31 | display: block; 32 | object-fit: cover; 33 | } 34 | 35 | /* common style ends */ 36 | 37 | body { 38 | font-family: "Roboto", sans-serif; 39 | 40 | margin: 0 auto; 41 | } 42 | 43 | /* nav starts here */ 44 | nav { 45 | background-color: #293462; 46 | color: white; 47 | display: flex; 48 | justify-content: space-around; 49 | align-items: center; 50 | gap: 2rem; 51 | min-height: 10vh; 52 | } 53 | nav a { 54 | color: white; 55 | text-decoration: none; 56 | font-size: 1.2rem; 57 | } 58 | a:hover { 59 | text-decoration: underline; 60 | color: orange; 61 | } 62 | 63 | .right-nav { 64 | display: flex; 65 | gap: 2rem; 66 | padding: 1rem; 67 | } 68 | /* nav ends here */ 69 | /* header starts here */ 70 | header { 71 | min-height: 40vh; 72 | } 73 | .container { 74 | display: flex; 75 | padding: 2rem; 76 | } 77 | .left-div { 78 | background-color: #1cd6ce; 79 | flex: 1; 80 | display: flex; 81 | flex-direction: column; 82 | justify-content: center; 83 | align-items: center; 84 | padding: 1rem; 85 | } 86 | .right-div { 87 | background-color: rebeccapurple; 88 | flex: 1; 89 | } 90 | /* header ends here */ 91 | /* main starts here */ 92 | main { 93 | background-color: #1cd6ce; 94 | min-height: 40vh; 95 | } 96 | /* main ends here */ 97 | /* footer starts here */ 98 | footer { 99 | background-color: #d61c4e; 100 | color: white; 101 | min-height: 10vh; 102 | } 103 | 104 | .icon { 105 | font-size: 1.5rem; 106 | } 107 | /* footer ends here */ 108 | 109 | @media screen and (max-width: 768px) { 110 | nav { 111 | flex-direction: column; 112 | background-color: #002fec; 113 | } 114 | } 115 | @media screen and (max-width: 600px) { 116 | nav { 117 | flex-direction: column; 118 | background-color: red; 119 | } 120 | .right-div { 121 | display: none; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Anisul Islam 10 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | 35 | 36 | 37 | 38 | 39 |
40 |

About me

41 |
42 |
43 |

44 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus 45 | soluta excepturi deserunt doloribus aliquam dicta nemo magnam 46 | dolores accusantium quos dignissimos maiores, quasi laboriosam 47 | perferendis, reiciendis at, consequatur adipisci rerum! 48 |

49 |
50 | 51 | 52 |
53 |
54 |
55 | profile image 61 |
62 |
63 |
64 | 65 | 66 | 67 | 68 |
69 |
70 |

Service

71 |
    72 |
  1. web development
    2. 73 |
  2. android development
    3. 74 |
  3. teaching
    4. 75 |
76 |
77 | 78 |
79 |

Skills

80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
TechnologiesLevel of the knowledge
HTML★★★★☆
CSS★★★★☆
JS★★★★☆
103 |
104 | 105 |
106 |

Contact

107 |
108 | 109 |
110 |
111 | 112 | 113 |

114 | 115 |
116 | 117 |
118 |
119 | 120 | 121 |
122 | 123 | 133 |
134 |
135 | 136 | 137 | 138 | 152 | 153 | 154 | 155 | 156 | --------------------------------------------------------------------------------