├── README.md ├── imgs ├── logo.png ├── blog-1.jpg ├── blog-2.jpg ├── blog-3.jpg ├── laptop.png ├── team-1.png ├── team-2.png ├── team-3.png ├── team-4.png ├── tech-1.png ├── tech-2.png ├── tech-3.png ├── tech-4.png ├── title.png ├── work-01.jpg ├── work-02.jpg ├── work-03.jpg ├── work-04.jpg ├── work-05.jpg ├── work-06.jpg ├── work-07.jpg └── work-08.jpg ├── images ├── logo.png ├── photo1.jpg ├── photo10.png ├── photo2.jpg ├── photo3.jpg ├── photo4.jpg ├── photo5.jpg ├── photo6.jpg ├── photo7.jpg ├── photo8.jpg ├── photo9.jpg ├── mountain.jpg └── mountain2.jpg ├── style2.css ├── js └── custom.js ├── bondi.css ├── newimage ├── showcase.svg ├── react.svg └── fundamentals.svg ├── css ├── normalize.css ├── leon.css └── main.css ├── template1.html ├── index.html ├── project.html └── project2.html /README.md: -------------------------------------------------------------------------------- 1 | # Responsive-Design 2 | make responsive web design 3 | -------------------------------------------------------------------------------- /imgs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/logo.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/logo.png -------------------------------------------------------------------------------- /imgs/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/blog-1.jpg -------------------------------------------------------------------------------- /imgs/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/blog-2.jpg -------------------------------------------------------------------------------- /imgs/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/blog-3.jpg -------------------------------------------------------------------------------- /imgs/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/laptop.png -------------------------------------------------------------------------------- /imgs/team-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/team-1.png -------------------------------------------------------------------------------- /imgs/team-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/team-2.png -------------------------------------------------------------------------------- /imgs/team-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/team-3.png -------------------------------------------------------------------------------- /imgs/team-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/team-4.png -------------------------------------------------------------------------------- /imgs/tech-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/tech-1.png -------------------------------------------------------------------------------- /imgs/tech-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/tech-2.png -------------------------------------------------------------------------------- /imgs/tech-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/tech-3.png -------------------------------------------------------------------------------- /imgs/tech-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/tech-4.png -------------------------------------------------------------------------------- /imgs/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/title.png -------------------------------------------------------------------------------- /images/photo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo1.jpg -------------------------------------------------------------------------------- /images/photo10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo10.png -------------------------------------------------------------------------------- /images/photo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo2.jpg -------------------------------------------------------------------------------- /images/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo3.jpg -------------------------------------------------------------------------------- /images/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo4.jpg -------------------------------------------------------------------------------- /images/photo5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo5.jpg -------------------------------------------------------------------------------- /images/photo6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo6.jpg -------------------------------------------------------------------------------- /images/photo7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo7.jpg -------------------------------------------------------------------------------- /images/photo8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo8.jpg -------------------------------------------------------------------------------- /images/photo9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/photo9.jpg -------------------------------------------------------------------------------- /imgs/work-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-01.jpg -------------------------------------------------------------------------------- /imgs/work-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-02.jpg -------------------------------------------------------------------------------- /imgs/work-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-03.jpg -------------------------------------------------------------------------------- /imgs/work-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-04.jpg -------------------------------------------------------------------------------- /imgs/work-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-05.jpg -------------------------------------------------------------------------------- /imgs/work-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-06.jpg -------------------------------------------------------------------------------- /imgs/work-07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-07.jpg -------------------------------------------------------------------------------- /imgs/work-08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/imgs/work-08.jpg -------------------------------------------------------------------------------- /images/mountain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/mountain.jpg -------------------------------------------------------------------------------- /images/mountain2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Moemen12/Responsive-Design/HEAD/images/mountain2.jpg -------------------------------------------------------------------------------- /style2.css: -------------------------------------------------------------------------------- 1 | body::before{ 2 | display:block; 3 | content: ''; 4 | height: 60px; 5 | } 6 | 7 | @media(min-width:768px) { 8 | .news-input{ 9 | width: 50%; 10 | } 11 | } -------------------------------------------------------------------------------- /js/custom.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | $(".info-list li").click(function () { 3 | $(this).addClass("selected").siblings("li").removeClass("selected"); 4 | $(".info-content div").hide(); 5 | $("." + $(this).data("class")).fadeIn(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /bondi.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --dark-color:#19283f; 3 | --green-color:#33D1CC; 4 | --red-color:#ff3150; 5 | --yellow-color:#ffc400; 6 | --section-color:#eff7fa; 7 | } 8 | 9 | .main-btn{ 10 | background-color: var(--red-color); 11 | color:var(--yellow-color) ; 12 | padding: 0.5rem 1rem; 13 | } 14 | .main-btn:hover{ 15 | color: var(--yellow-color); 16 | } 17 | .main-title::after{ 18 | content: ''; 19 | width: 120px; 20 | height: 2px; 21 | background-color: var(--green-color); 22 | position: absolute; 23 | bottom: -20px; 24 | left: 50%; 25 | transform: translateX(-50%); 26 | } 27 | /* start navbar */ 28 | 29 | .navbar{ 30 | background-color: var(--dark-color); 31 | } 32 | .navbar .navbar-nav .nav-link{ 33 | color: white; 34 | } 35 | .navbar .navbar-nav .nav-link.active, 36 | .navbar .navbar-nav .nav-link:focus, 37 | .navbar .navbar-nav .nav-link:hover 38 | { 39 | color:var(--green-color) ; 40 | } 41 | .navbar .navbar-toggler{ 42 | font-size:25px; 43 | border-color: white; 44 | color: white; 45 | } 46 | .navbar .navbar-toggler:focus{ 47 | box-shadow:none; 48 | } 49 | .navbar .navbar-toggler[aria-expanded='true']{ 50 | border-color: var(--green-color); 51 | } 52 | .search{ 53 | border-left: 1px solid var(--green-color); 54 | } 55 | .search i{ 56 | color: var(--green-color); 57 | } 58 | /* end navbar */ 59 | 60 | /* start landing */ 61 | 62 | .landing{ 63 | background-color:var(--dark-color); 64 | min-height:calc(100vh - 72px); 65 | } 66 | /* end landing */ 67 | 68 | /* start features */ 69 | 70 | .features .icon-holder{ 71 | height: 200px; 72 | } 73 | .features .icon-holder i{ 74 | left: 50%; 75 | transform: translateX(-50%); 76 | } 77 | .features .icon-holder .number{ 78 | font-size: 12rem; 79 | color:var(--section-color); 80 | } 81 | .features .icon-holder .icon{ 82 | color: var(--green-color); 83 | } 84 | .features .feat h4{ 85 | color: var(--yellow-color); 86 | } 87 | /* end features */ 88 | 89 | 90 | /* start our-work */ 91 | 92 | .our-work{ 93 | background-color: var(--section-color); 94 | } 95 | .our-work ul .active{ 96 | background-color: var(--red-color); 97 | color: var(--yellow-color); 98 | } 99 | .our-work ul li{ 100 | padding: 0.5em 1rem; 101 | cursor: pointer; 102 | } 103 | .our-work ul li:not(.active):hover{ 104 | color: var(--red-color); 105 | } 106 | 107 | .our-work .box{ 108 | padding: 5px; 109 | overflow: hidden; 110 | position: relative; 111 | } 112 | .our-work .box::before{ 113 | content: attr(data-work); 114 | position: absolute; 115 | background-color: rgb(51 209 204 / 76%); 116 | width:calc(100% - 10px); 117 | height:calc(100% - 10px); 118 | display: flex; 119 | justify-content: center; 120 | align-items: center; 121 | font-weight: bold; 122 | color: white; 123 | transition: .3s ; 124 | font-size: 1.5rem; 125 | transform: translateX(calc(-100% - 5px)); 126 | } 127 | .our-work .box:hover::before{ 128 | transform: translateX(0); 129 | } 130 | 131 | /* end our-work */ 132 | 133 | 134 | /* start stuff */ 135 | .stuff .description{ 136 | max-width: 500px; 137 | } 138 | /* End stuff */ 139 | 140 | /* start Team */ 141 | .team{ 142 | background-color: var(--section-color); 143 | } 144 | .team h2{ 145 | color: var(--yellow-color); 146 | } 147 | .team .box h4{ 148 | background-color:var(--green-color) ; 149 | } 150 | /* End Team */ 151 | 152 | 153 | /* start project */ 154 | .project{ 155 | background-color: var(--dark-color); 156 | } 157 | 158 | /* End project */ 159 | 160 | /* start subscribe */ 161 | .subscribe{ 162 | background-color: var(--yellow-color); 163 | } 164 | .subscribe input[type='text']{ 165 | border: none; 166 | border-bottom:1px solid white; 167 | } 168 | .subscribe input[type='text']:focus{ 169 | outline: none; 170 | } 171 | .subscribe ::placeholder{ 172 | color: white; 173 | } 174 | .subscribe input[type='submit']{ 175 | background-color: var(--dark-color); 176 | color:var(--yellow-color); 177 | } 178 | /* End subscribe */ 179 | /* Start Footer */ 180 | .footer { 181 | background-color: var(--dark-color); 182 | } 183 | .footer .copyright > span { 184 | color: var(--green-color); 185 | } 186 | .footer .copyright div span { 187 | color: var(--yellow-color); 188 | } 189 | .footer .contact ul i { 190 | width: 20px; 191 | height: 20px; 192 | display: flex; 193 | justify-content: center; 194 | } 195 | .footer .facebook { 196 | background-color: #1877f2; 197 | } 198 | .footer .twitter { 199 | background-color: #1da1f2; 200 | } 201 | .footer .linkedin { 202 | background-color: #0077b5; 203 | } 204 | .footer .youtube { 205 | background-color: #ff0000; 206 | } 207 | /* End Footer */ -------------------------------------------------------------------------------- /newimage/showcase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } -------------------------------------------------------------------------------- /template1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 36 |
37 |
38 |
39 | 40 | 41 |
42 |
43 |

Hello There

44 |

We are Leon - Super Creative & Minimal Agency Web Template

45 |
46 |
47 | 48 | 49 |
50 |
51 |
52 | 53 |

Tell Us Your Idea

54 |

55 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 56 | eiusmod tempor incididunt ut lab 57 |

58 |
59 |
60 | 61 |

We Will Do All The Work

62 |

63 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 64 | eiusmod tempor incididunt ut lab 65 |

66 |
67 |
68 | 69 |

Your Product is Worldwide

70 |

71 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 72 | eiusmod tempor incididunt ut lab 73 |

74 |
75 |
76 |
77 | 78 | 79 |
80 |
81 |

Services

82 |

Don't be busy, be productive

83 |
84 |
85 | 86 |
87 | 88 |
89 |

Graphic Design

90 |

91 | Graphic design is the process of visual communication and 92 | problem-solving using one or more of typography, photography 93 | and illustration. 94 |

95 |
96 |
97 |
98 | 99 |
100 |

UI & UX

101 |

102 | Process of enhancing user satisfaction with a product by 103 | improving the usability, accessibility, and pleasure provided 104 | in the interaction. 105 |

106 |
107 |
108 | 109 |
110 |
111 | 112 |
113 | 114 |
115 |

Web Design

116 |

117 | Web design encompasses many different skills and disciplines 118 | in the production and maintenance of websites. 119 |

120 |
121 |
122 |
123 | 124 |
125 |

Web Development

126 |

127 | Web development is a broad term for the work involved in 128 | developing a web site for the Internet or an intranet. 129 |

130 |
131 |
132 | 133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 |
141 |
142 | 143 | 144 |
145 |
146 |

Portfolio

147 |

If you do it right, it will last forever.

148 |
149 |
150 | 151 |
152 |

Project Here

153 |

154 | My creative ability is very difficult to measure because it can 155 | manifest in so many surprising and. 156 |

157 |
158 |
159 |
160 | 161 |
162 |

Project Here

163 |

164 | My creative ability is very difficult to measure because it can 165 | manifest in so many surprising and. 166 |

167 |
168 |
169 |
170 | 171 |
172 |

Project Here

173 |

174 | My creative ability is very difficult to measure because it can 175 | manifest in so many surprising and. 176 |

177 |
178 |
179 |
180 |
181 |
182 | 183 | 184 |
185 |
186 |

About

187 |

Less is more work

188 |
189 |
190 | 191 |
192 |
193 |

194 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil 195 | nemo neque voluptate tempora velit cum non, fuga vitae architecto 196 | delectus sed maxime rerum impedit aliquam obcaecati, aut excepturi 197 | iusto laudantium! 198 |

199 |
200 |

201 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, 202 | sapiente. Velit iure exercitationem dolores nesciunt dolore. Eum 203 | officiis dolorum hic voluptate quaerat minima, similique inventore 204 | esse, alias, sed quo officia? 205 |

206 |
207 |
208 |
209 |
210 | 211 | 212 |
213 |
214 |

Contact

215 |

We are born to create

216 |
217 |

Feel free to drop us a line at:

218 | leonagency@mail.com 221 | 227 |
228 |
229 |
230 | 231 | 232 |
© 2021 Leon All Right Reserved
233 | 234 | 235 | 236 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive web design 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Choose Your plan

18 |
Free plain content 10GB
19 |
10$ plain content 50GB
20 |
21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 |

Our Features

33 |
34 |

Fast

35 |

This is Fast Feature This is Fast Feature This is Fast Feature This is Fast Feature This is Fast Feature

36 |
37 |
38 |

Secure

39 |

This is Secure Feature This is Secure Feature This is Secure Feature This is Secure Feature This is Secure Feature

40 |
41 |
42 |

Cheap

43 |

This is Cheap Feature This is Cheap Feature This is Cheap Feature This is Cheap Feature This is Cheap Feature

44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 |

57 | About Us 58 |

59 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam soluta eveniet neque vel. Hic natus culpa iure, aut laboriosam ea possimus totam, aliquam cumque dolorum, repellendus minus provident voluptatum vel? 60 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dignissimos fuga vero, sapiente illo aperiam. Quasi, sunt est debitis sit consectetur fugiat asperiores! Dicta, quasi possimus quidem in nam autem. 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 |

Our Pricing Plans

105 |
106 |

Plus

107 | 10$ 108 |
    109 |
  • Disk Space: 50GB
    • 110 |
  • bandWidth: 100GB
    • 111 |
  • FTP Accounts: 5
    • 112 |
  • Databases: 10
    • 113 |
  • Free Domain
    • 114 |
115 |
116 |
117 |

Premium

118 | 10$ 119 |
    120 |
  • Disk Space: 80GB
    • 121 |
  • bandWidth: 200GB
    • 122 |
  • FTP Accounts: 15
    • 123 |
  • Databases: 20
    • 124 |
  • Free Domain
    • 125 |
126 |
127 |
128 |

Ultimate

129 | 10$ 130 |
    131 |
  • Disk Space: 120GB
    • 132 |
  • bandWidth: 500GB
    • 133 |
  • FTP Accounts: 25
    • 134 |
  • Databases: 25
    • 135 |
  • Free Domain
    • 136 |
137 |
138 |
139 |
140 |
141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 |
149 |
150 |

What The Say About us ?

151 |
152 |
153 | 154 |
155 |

Ahmed

156 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt id iure ab facilis quia nulla laudantium cupiditate dolore tenetur nisi possimus facere numquam.

157 |
158 | 159 | 160 |
161 |
162 | 163 |
164 |

Sayed

165 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt id iure ab facilis quia nulla laudantium cupiditate dolore tenetur nisi possimus facere numquam.

166 |
167 | 168 | 169 |
170 |
171 | 172 |
173 |

Mahmoud

174 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt id iure ab facilis quia nulla laudantium cupiditate dolore tenetur nisi possimus facere numquam.

175 |
176 | 177 |
178 |
179 |
180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 |
188 |
189 |

Product Information

190 | 197 |
198 |
About Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil ipsa cumque dolor laudantium rerum, voluptatum repellendus suscipit maiores unde illo enim aliquid error, veniam laborum alias hic minus architecto!
199 |
History Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil ipsa cumque dolor laudantium rerum, voluptatum repellendus suscipit maiores unde illo enim aliquid error, veniam laborum alias hic minus architecto!
200 |
Specification Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil ipsa cumque dolor laudantium rerum, voluptatum repellendus suscipit maiores unde illo enim aliquid error, veniam laborum alias hic minus architecto!
201 |
Technical Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil ipsa cumque dolor laudantium rerum, voluptatum repellendus suscipit maiores unde illo enim aliquid error, veniam laborum alias hic minus architecto!
202 |
Review History Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nihil ipsa cumque dolor laudantium rerum, voluptatum repellendus suscipit maiores unde illo enim aliquid error, veniam laborum alias hic minus architecto!
203 |
204 |
205 |
206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 |
216 |
217 |
Copyright to Elzero Web school 2017
218 |
Designed by Osama Elzero
219 |
220 |
221 |
222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /css/leon.css: -------------------------------------------------------------------------------- 1 | /* Start Variables */ 2 | :root { 3 | --main-color: #10cab7; 4 | --secondary-color: #2c4755; 5 | --section-padding: 60px; 6 | --section-background: #f6f6f6; 7 | --main-duration: 0.5s; 8 | } 9 | /* End Variables */ 10 | /* Start Global Rules */ 11 | * { 12 | -webkit-box-sizing: border-box; 13 | -moz-box-sizing: border-box; 14 | box-sizing: border-box; 15 | } 16 | html { 17 | scroll-behavior: smooth; 18 | } 19 | body { 20 | font-family: "Work Sans", sans-serif; 21 | } 22 | .container { 23 | padding-left: 15px; 24 | padding-right: 15px; 25 | margin-left: auto; 26 | margin-right: auto; 27 | } 28 | /* Small */ 29 | @media (min-width: 768px) { 30 | .container { 31 | width: 750px; 32 | } 33 | } 34 | /* Medium */ 35 | @media (min-width: 992px) { 36 | .container { 37 | width: 970px; 38 | } 39 | } 40 | /* Large */ 41 | @media (min-width: 1200px) { 42 | .container { 43 | width: 1170px; 44 | } 45 | } 46 | /* End Global Rules */ 47 | /* Start Components */ 48 | .special-heading { 49 | color: #ebeced; 50 | font-size: 100px; 51 | text-align: center; 52 | font-weight: 800; 53 | letter-spacing: -3px; 54 | margin: 0; 55 | } 56 | .special-heading + p { 57 | margin: -30px 0 0; 58 | font-size: 20px; 59 | text-align: center; 60 | color: #797979; 61 | } 62 | @media (max-width: 767px) { 63 | .special-heading { 64 | font-size: 60px; 65 | } 66 | .special-heading + p { 67 | margin-top: -20px; 68 | } 69 | } 70 | /* End Components */ 71 | /* Start Header */ 72 | .header { 73 | padding: 20px; 74 | } 75 | .header .container { 76 | display: flex; 77 | justify-content: space-between; 78 | align-items: center; 79 | } 80 | .header .logo { 81 | width: 60px; 82 | } 83 | .header .links { 84 | position: relative; 85 | } 86 | .header .links:hover .icon span:nth-child(2) { 87 | width: 100%; 88 | } 89 | .header .links .icon { 90 | width: 30px; 91 | display: flex; 92 | flex-wrap: wrap; 93 | justify-content: flex-end; 94 | } 95 | .header .links .icon span { 96 | background-color: #333; 97 | margin-bottom: 5px; 98 | height: 2px; 99 | } 100 | .header .links .icon span:first-child { 101 | width: 100%; 102 | } 103 | .header .links .icon span:nth-child(2) { 104 | width: 60%; 105 | transition: var(--main-duration); 106 | } 107 | .header .links .icon span:last-child { 108 | width: 100%; 109 | } 110 | .header .links ul { 111 | list-style: none; 112 | margin: 0; 113 | padding: 0; 114 | background-color: #f6f6f6; 115 | position: absolute; 116 | right: 0; 117 | min-width: 200px; 118 | top: calc(100% + 15px); 119 | display: none; 120 | z-index: 1; 121 | } 122 | .header .links ul::before { 123 | content: ""; 124 | border-width: 10px; 125 | border-style: solid; 126 | border-color: transparent transparent #f6f6f6 transparent; 127 | position: absolute; 128 | right: 5px; 129 | top: -20px; 130 | } 131 | .header .links:hover ul { 132 | display: block; 133 | } 134 | .header .links ul li a { 135 | display: block; 136 | padding: 15px; 137 | text-decoration: none; 138 | color: #333; 139 | transition: var(--main-duration); 140 | } 141 | .header .links ul li a:hover { 142 | padding-left: 25px; 143 | } 144 | .header .links ul li:not(:last-child) a { 145 | border-bottom: 1px solid #ddd; 146 | } 147 | /* End Header */ 148 | /* Start Landing Section */ 149 | .landing { 150 | background-image: url(../images/mountain.jpg); 151 | background-size: cover; 152 | height: calc(100vh - 64px); 153 | position: relative; 154 | } 155 | .landing .intro-text { 156 | position: absolute; 157 | left: 50%; 158 | top: 50%; 159 | text-align: center; 160 | transform: translate(-50%, -50%); 161 | width: 320px; 162 | max-width: 100%; 163 | color: white; 164 | } 165 | .landing .intro-text h1 { 166 | margin: 0; 167 | font-weight: bold; 168 | font-size: 50px; 169 | color: var(--main-color); 170 | } 171 | .landing .intro-text p { 172 | font-size: 19px; 173 | line-height: 1.8; 174 | } 175 | /* End Landing Section */ 176 | /* Start Features */ 177 | .features { 178 | padding-top: var(--section-padding); 179 | padding-bottom: var(--section-padding); 180 | background-color: var(--section-background); 181 | } 182 | .features .container { 183 | display: grid; 184 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 185 | grid-gap: 20px; 186 | } 187 | .features .feat { 188 | padding: 20px; 189 | text-align: center; 190 | } 191 | .features .feat i { 192 | color: var(--main-color); 193 | } 194 | .features .feat h3 { 195 | font-weight: 800; 196 | margin: 30px 0; 197 | } 198 | .features .feat p { 199 | line-height: 1.8; 200 | color: #777; 201 | font-size: 17px; 202 | } 203 | /* End Features */ 204 | /* Start Services */ 205 | .services { 206 | padding-top: var(--section-padding); 207 | padding-bottom: var(--section-padding); 208 | } 209 | .services .services-content { 210 | display: grid; 211 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 212 | grid-gap: 30px; 213 | margin-top: 100px; 214 | } 215 | .services .services-content .srv { 216 | display: flex; 217 | margin-bottom: 40px; 218 | } 219 | @media (max-width: 767px) { 220 | .services .services-content .srv { 221 | flex-direction: column; 222 | text-align: center; 223 | } 224 | } 225 | .services .services-content .srv i { 226 | color: var(--main-color); 227 | flex-basis: 60px; 228 | } 229 | .services .services-content .srv .text { 230 | flex: 1; 231 | } 232 | .services .services-content .srv .text h3 { 233 | margin: 0 0 20px; 234 | } 235 | .services .services-content .srv .text p { 236 | color: #444; 237 | font-weight: 300; 238 | line-height: 1.6; 239 | } 240 | .services .services-content .image { 241 | text-align: center; 242 | position: relative; 243 | } 244 | .services .services-content .image::before { 245 | content: ""; 246 | background-color: var(--secondary-color); 247 | width: 100px; 248 | height: calc(100% + 100px); 249 | top: -50px; 250 | position: absolute; 251 | right: 0; 252 | z-index: -1; 253 | } 254 | .services .services-content .image img { 255 | width: 260px; 256 | } 257 | @media (max-width: 1199px) { 258 | .image-column { 259 | display: none; 260 | } 261 | } 262 | /* Start Services */ 263 | /* Start Portfolio */ 264 | .portfolio { 265 | padding-top: var(--section-padding); 266 | padding-bottom: var(--section-padding); 267 | background-color: var(--section-background); 268 | } 269 | .portfolio .portfolio-content { 270 | display: grid; 271 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 272 | grid-gap: 30px; 273 | margin-top: 80px; 274 | } 275 | .portfolio .portfolio-content .card { 276 | background-color: white; 277 | } 278 | .portfolio .portfolio-content .card img { 279 | max-width: 100%; 280 | } 281 | .portfolio .portfolio-content .card .info { 282 | padding: 20px; 283 | } 284 | .portfolio .portfolio-content .card .info h3 { 285 | margin: 0; 286 | } 287 | .portfolio .portfolio-content .card .info p { 288 | color: #777; 289 | line-height: 1.6; 290 | margin-bottom: 0; 291 | } 292 | /* End Portfolio */ 293 | /* Start About */ 294 | .about { 295 | padding-top: var(--section-padding); 296 | padding-bottom: calc(var(--section-padding) + 60px); 297 | } 298 | .about .about-content { 299 | margin-top: 100px; 300 | display: flex; 301 | flex-wrap: wrap; 302 | justify-content: space-between; 303 | } 304 | @media (max-width: 991px) { 305 | .about .about-content { 306 | flex-direction: column; 307 | text-align: center; 308 | } 309 | } 310 | .about .about-content .image { 311 | position: relative; 312 | width: 250px; 313 | height: 375px; 314 | } 315 | @media (max-width: 991px) { 316 | .about .about-content .image { 317 | margin: 0 auto 60px; 318 | } 319 | } 320 | .about .about-content .image::before { 321 | content: ""; 322 | position: absolute; 323 | background-color: #ebeced; 324 | width: 100px; 325 | height: calc(100% + 80px); 326 | top: -40px; 327 | left: -20px; 328 | z-index: -1; 329 | } 330 | .about .about-content .image::after { 331 | top: -40px; 332 | content: ""; 333 | position: absolute; 334 | width: 120px; 335 | height: 300px; 336 | border-left: 80px solid var(--main-color); 337 | border-bottom: 80px solid var(--main-color); 338 | z-index: -1; 339 | right: -150px; 340 | } 341 | @media (max-width: 991px) { 342 | .about .about-content .image::before, 343 | .about .about-content .image::after { 344 | display: none; 345 | } 346 | } 347 | .about .about-content .image img { 348 | max-width: 100%; 349 | } 350 | .about .about-content .text { 351 | flex-basis: calc(100% - 500px); 352 | } 353 | .about .about-content .text p:first-of-type { 354 | font-weight: bold; 355 | line-height: 2; 356 | margin-bottom: 50px; 357 | } 358 | .about .about-content .text hr { 359 | width: 50%; 360 | display: inline-block; 361 | border-color: var(--main-color); 362 | } 363 | .about .about-content .text p:last-of-type { 364 | line-height: 2; 365 | color: #777; 366 | } 367 | /* End About */ 368 | /* Start Contact */ 369 | .contact { 370 | padding-top: var(--section-padding); 371 | padding-bottom: var(--section-padding); 372 | background-color: var(--section-background); 373 | } 374 | .contact .info { 375 | padding-top: var(--section-padding); 376 | padding-bottom: var(--section-padding); 377 | text-align: center; 378 | } 379 | .contact .info .label { 380 | font-size: 35px; 381 | font-weight: 800; 382 | color: var(--secondary-color); 383 | letter-spacing: -2px; 384 | margin-bottom: 15px; 385 | } 386 | .contact .info .link { 387 | display: block; 388 | font-size: 35px; 389 | font-weight: 800; 390 | color: var(--main-color); 391 | text-decoration: none; 392 | } 393 | .contact .info .social { 394 | display: flex; 395 | justify-content: center; 396 | margin-top: 20px; 397 | font-size: 16px; 398 | } 399 | .contact .info .social i { 400 | margin-left: 10px; 401 | color: var(--secondary-color); 402 | } 403 | @media (max-width: 767px) { 404 | .contact .info .label, 405 | .contact .info .link { 406 | font-size: 25px; 407 | } 408 | } 409 | /* End Contact */ 410 | /* Start Footer */ 411 | .footer { 412 | background-color: var(--secondary-color); 413 | color: white; 414 | padding: 30px 10px; 415 | text-align: center; 416 | font-size: 18px; 417 | } 418 | .footer span { 419 | font-weight: bold; 420 | color: var(--main-color); 421 | } 422 | /* End Footer */ -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* Start Global rules */ 2 | *{ 3 | -webkit-box-sizing:border-box; 4 | -moz-box-sizing:border-box; 5 | box-sizing:border-box; 6 | } 7 | body{ 8 | font-family:Arial, Helvetica, sans-serif; 9 | 10 | } 11 | 12 | /* End Global rules */ 13 | 14 | 15 | /* Start Header */ 16 | .header{ 17 | background: url("../images/photo1.jpg")no-repeat top center; 18 | -webkit-background-size:cover; 19 | -moz-background-size:cover; 20 | background-size: cover; 21 | min-height: 500px; 22 | position: relative; 23 | } 24 | .header .overlay{ 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width:100%; 29 | height: 100%; 30 | color: #fff; 31 | background-color: rgba(0, 170, 255, 0.856); 32 | } 33 | .header .overlay h1{ 34 | font-size: 60px; 35 | margin-top: 100px; 36 | 37 | } 38 | .header .overlay .plan{ 39 | border: 4px solid #fff; 40 | font-size: 24px; 41 | width: 48%; 42 | padding:20px; 43 | margin-left: 1%; 44 | margin-right: 1%; 45 | word-break: break-all; 46 | 47 | } 48 | .header .overlay .order{ 49 | border: 4px solid #fff; 50 | font-size: 24px; 51 | padding:20px; 52 | margin: 30px 1% 0; 53 | 54 | 55 | } 56 | 57 | @media (max-width:420px) { /* Custome Media not found on Bootstrap */ 58 | h1{ 59 | margin-top:20px !important; 60 | font-size: 40px !important; 61 | } 62 | .header .overlay .plan{ 63 | float: none; 64 | margin: 0 auto 20px; 65 | font-size: 26px; 66 | } 67 | } 68 | 69 | 70 | @media (max-width:767px) { 71 | h1{ 72 | margin-top:40px; 73 | } 74 | .header .overlay .plan{ 75 | float: none; 76 | margin: 0 auto 20px; 77 | font-size: 26px; 78 | } 79 | } 80 | 81 | 82 | /* End Header */ 83 | 84 | 85 | /* Start Features */ 86 | .features{ 87 | padding: 30px 0; 88 | } 89 | 90 | .features .feat{ 91 | color: #555; 92 | padding:0 20px 0 0; 93 | margin-bottom: 30px; 94 | } 95 | .features .feat p{ 96 | line-height: 1.6; 97 | } 98 | .features .feat h2{ 99 | margin: 10px 0 8px; 100 | margin: 0; 101 | } 102 | .features .h1{ 103 | font-size: 50px; 104 | color: #555; 105 | } 106 | @media (max-width:767px){ 107 | .features .feat{ 108 | text-align: center; 109 | } 110 | } 111 | @media (min-width:768px){ 112 | .features .feat{ 113 | width:50%; 114 | } 115 | 116 | } 117 | @media (min-width:992px){ 118 | .features .feat{ 119 | width:33.333%; 120 | } 121 | } 122 | /* End Features */ 123 | 124 | 125 | /* Start About Us */ 126 | .about-us{ 127 | background-color:#ececec; 128 | padding: 30px 0; 129 | } 130 | .about-us .h1{ 131 | font-size:50px; 132 | color: #848484; 133 | } 134 | .about-us .responsive-paragraph{ 135 | color: #848484; 136 | } 137 | 138 | 139 | /* End About Us */ 140 | 141 | 142 | 143 | /* Start Our works */ 144 | 145 | @media (max-width:767px){ 146 | .our-works .image{ 147 | width: 100%; 148 | } 149 | 150 | } 151 | 152 | @media (min-width:768px){ 153 | .our-works .image{ 154 | width: 50%; 155 | } 156 | 157 | } 158 | 159 | @media (min-width:992px){ 160 | .our-works .image{ 161 | width: 33.3333%; 162 | } 163 | 164 | } 165 | 166 | 167 | @media (min-width:1200px){ 168 | .our-works .image{ 169 | width: 25%; 170 | } 171 | 172 | } 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | /* End Our works */ 183 | 184 | 185 | 186 | 187 | /* Start Our Pricing Table */ 188 | 189 | .pricing-table{ 190 | background-color: #444; 191 | color: #fff; 192 | padding: 50px 0; 193 | } 194 | 195 | .pricing-table .h1{ 196 | margin: 0 0 40px; 197 | font-size: 50px; 198 | } 199 | 200 | .pricing-table .pricing-plan{ 201 | border: 3px solid #fff; 202 | padding: 20px 0; 203 | position: relative; 204 | 205 | } 206 | 207 | .pricing-table .pricing-plan h3{ 208 | margin: 0 0 10px; 209 | font-size:26px; 210 | } 211 | .pricing-table .pricing-plan .pricing{ 212 | font-size: 22px; 213 | display: inline-block; 214 | margin: 0 0 10px; 215 | color:#bfbfbf; 216 | } 217 | .pricing-table .pricing-plan ul{ 218 | line-height: 2; 219 | font-size: 18px; 220 | } 221 | 222 | @media (max-width:767px){ 223 | .pricing-table .pricing-plan{ 224 | width:100%; 225 | margin-bottom: 20px; 226 | } 227 | 228 | } 229 | 230 | @media (min-width:768px){ 231 | .pricing-table .pricing-plan{ 232 | width:100%; 233 | margin-bottom: 20px; 234 | } 235 | 236 | } 237 | 238 | @media (min-width:992px){ 239 | .pricing-table .pricing-plan:not(.ultimate){ 240 | margin-right:1% ; 241 | 242 | 243 | } 244 | .pricing-table .pricing-plan{ 245 | width:32.666%; 246 | margin-bottom: 0; 247 | } 248 | 249 | .pricing-table .pricing-plan.plus{ 250 | left: 33.666%; 251 | } 252 | 253 | .pricing-table .pricing-plan.premium{ 254 | right:33.666%; 255 | } 256 | } 257 | /* End Our Pricing Table */ 258 | 259 | 260 | /* Start What the say */ 261 | 262 | .the-say{ 263 | padding: 50px 0; 264 | } 265 | .the-say .h1{ 266 | font-size: 50px; 267 | margin: 0 0 20px; 268 | color: #555; 269 | } 270 | 271 | .the-say .person-say{ 272 | background-color: #EEE; 273 | padding: 20px; 274 | margin: 0 0 20px; 275 | border: 1px solid #DDD; 276 | border-radius:10px; 277 | 278 | } 279 | .the-say .person-say .avatar{ 280 | width:100px ; 281 | margin-right: 20px; 282 | } 283 | 284 | 285 | .the-say .person-say h3{ 286 | margin: 5px 0 10px; 287 | } 288 | 289 | .the-say .person-say p{ 290 | margin: 0; 291 | line-height: 1.7; 292 | width:calc(100% - 120px); 293 | } 294 | .the-say .person-say .avatar{ 295 | width:100px ; 296 | margin-right: 20px; 297 | } 298 | 299 | 300 | .the-say .person-say h3{ 301 | margin: 5px 0 10px; 302 | } 303 | 304 | .the-say .person-say p{ 305 | margin: 0; 306 | line-height: 1.7; 307 | width:calc(100% - 120px); 308 | } 309 | 310 | 311 | @media (max-width:767px){ 312 | .the-say .person-say .avatar{ 313 | float: none; 314 | margin: auto; 315 | 316 | } 317 | .the-say .person-say h3{ 318 | float: none; 319 | text-align: center; 320 | 321 | 322 | } 323 | .the-say .person-say p{ 324 | float: none; 325 | width: 100%; 326 | 327 | 328 | } 329 | } 330 | 331 | 332 | 333 | 334 | 335 | @media (min-width:768px){ 336 | .the-say .person-say:first-of-type{ 337 | width: 100%; 338 | 339 | } 340 | 341 | .the-say .person-say:not(:first-of-type){ 342 | width: 49%; 343 | } 344 | .the-say .person-say:last-of-type{ 345 | margin-left: 2%; 346 | } 347 | } 348 | 349 | @media (min-width:768px) and (max-width:991px){ 350 | 351 | .the-say .person-say:not(:first-of-type) .avatar{ 352 | float: none; 353 | margin: auto; 354 | 355 | 356 | } 357 | 358 | .the-say .person-say:not(:first-of-type) h3{ 359 | float: none; 360 | text-align: center; 361 | 362 | 363 | } 364 | .the-say .person-say:not(:first-of-type) p{ 365 | float: none; 366 | width: 100%; 367 | 368 | 369 | } 370 | } 371 | 372 | 373 | 374 | @media (min-width:992px){ 375 | .the-say .person-say:first-of-type{ 376 | width: 80%; 377 | margin-left:10% ; 378 | } 379 | } 380 | 381 | 382 | 383 | 384 | 385 | /* End What the say */ 386 | 387 | 388 | /* Start Information */ 389 | 390 | .information{ 391 | background-color:#ececec; 392 | padding: 30px 0; 393 | font-size: 18px; 394 | } 395 | .information .h1{ 396 | font-size:50px; 397 | color: #848484; 398 | } 399 | 400 | 401 | 402 | .information .info-list li{ 403 | display: inline-block; 404 | background-color: #DDD; 405 | padding: 15px; 406 | font-size: 22px; 407 | cursor: pointer; 408 | 409 | } 410 | 411 | .information .info-list li.selected{ 412 | background-color: #fff; 413 | color: #22a9bd; 414 | } 415 | 416 | .information .info-content{ 417 | margin-bottom: 30px; 418 | } 419 | .information .info-content > div{ 420 | padding: 20px; 421 | background-color: #fff; 422 | line-height: 2; 423 | } 424 | 425 | .information .info-content > div:not(:first-of-type){ 426 | display: none; 427 | } 428 | 429 | 430 | @media (max-width:767px){ 431 | .information .info-list li{ 432 | display: block; 433 | } 434 | 435 | } 436 | 437 | /* End Information */ 438 | 439 | /* Start Footer */ 440 | 441 | .footer{ 442 | background-color: #333; 443 | color: #EEE; 444 | } 445 | .footer .copyright, 446 | .footer .design { 447 | padding: 20px; 448 | text-align: center; 449 | } 450 | @media (max-width:767px){ 451 | .footer .copyright, 452 | .footer .design { 453 | width:100%; 454 | 455 | } 456 | 457 | 458 | } 459 | @media (min-width:768px) { 460 | .footer .copyright, 461 | .footer .design { 462 | width:50%; 463 | 464 | } 465 | 466 | } 467 | 468 | 469 | 470 | /* End Footer */ 471 | 472 | 473 | @media (max-width:767px) { /*Mobile & tablet rules */ 474 | .visible-xs{ 475 | display: block !important; 476 | } 477 | .hidden-xs{ 478 | display: none !important; 479 | } 480 | .responsive-paragraph{ 481 | text-align: center; 482 | font-size: 20px !important; 483 | 484 | } 485 | } 486 | 487 | @media (min-width:768px)and (max-width:991px) { /*small screen rules */ 488 | .visible-sm{ 489 | display: block !important; 490 | } 491 | .hidden-sm{ 492 | display: none !important; 493 | } 494 | .container{ 495 | width: 750px; 496 | } 497 | } 498 | 499 | @media (min-width:992px) and (max-width:1199px) { /*small screen rules */ 500 | .visible-md{ 501 | display: block !important; 502 | } 503 | .hidden-md{ 504 | display: none !important; 505 | } 506 | .container{ 507 | width: 970px; 508 | } 509 | } 510 | 511 | @media (min-width:1200px) { /*small screen rules */ 512 | .visible-lg{ 513 | display: block !important; 514 | } 515 | .hidden-lg{ 516 | display: none !important; 517 | } 518 | .container{ 519 | width: 1170px; 520 | } 521 | } 522 | 523 | /* Start My framwork */ 524 | .container{ 525 | margin: auto; 526 | padding-left:15px; 527 | padding-right: 15px; 528 | } 529 | 530 | 531 | 532 | .text-center{ 533 | text-align: center; 534 | } 535 | 536 | .clearFix{ 537 | clear: both; 538 | } 539 | 540 | .visible-xs, 541 | .visible-sm, 542 | .visible-md, 543 | .visible-lg{ 544 | display: none; 545 | } 546 | 547 | .float-left{ 548 | float: left; 549 | } 550 | .float-right{ 551 | float: right; 552 | } 553 | 554 | .h1{ 555 | font-size: 2em; 556 | } 557 | .responsive-paragraph{ 558 | line-height: 1.8; 559 | font-size: 22px; 560 | } 561 | .responsive-image{ 562 | width: 100%; 563 | } 564 | 565 | .classic-list{ 566 | margin: 0; 567 | padding: 0; 568 | list-style: none; 569 | } 570 | 571 | .image-circle{ 572 | border-radius: 50%; 573 | } 574 | .image-thumbnail{ 575 | padding: 3px; 576 | background-color: #FFF; 577 | border: 1px solid #CCC; 578 | 579 | } 580 | 581 | 582 | /* End My framwork */ -------------------------------------------------------------------------------- /project.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 43 | 44 |
45 |
46 |

Taste the Creativity

47 |

We make awesome graphic and web design

48 | Get Started 49 |
50 |
51 | 52 |
53 |
54 |
55 | 56 |

We are Good at

57 |

Some Of These Stuff Under

58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 |
66 |

Graphic Design

67 |

Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

68 |

69 |
70 |
71 |
72 |
73 | 74 | 75 |
76 |

Graphic Design

77 |

Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

78 |

79 |
80 | 81 |
82 |
83 |
84 | 85 | 86 |
87 |

Graphic Design

88 |

Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

89 |

90 |
91 |
92 |
93 |
94 | 95 | 96 |
97 |
98 |
99 | 100 |

We Make This

101 |

Prepare To Be Amazed

102 |
103 | 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 | I Want More 154 |
155 |
156 |
157 | 158 |
159 |
160 |
161 | 162 |

Some Stuff About Us

163 |

THE GREAT TEAM

164 |
165 |

Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Donec sollicitudin molestie malesuada.

166 |
167 |
168 |
169 |

Retina Design

170 |

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

171 |

Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Donec sollicitudin molestie malesuada.

172 | Order Me One 173 |
174 |
175 |
176 |
177 | 178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |

Meet The Team

186 |

Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Donec sollicitudin molestie malesuada.

187 |
188 |
189 |
190 | 191 |

Luke Skywalker

192 |
“I don't understand how we got by those troops. I thought we were dead.“
193 |
194 |
195 |
196 |
197 | 198 |

Luke Skywalker

199 |
“I don't understand how we got by those troops. I thought we were dead.“
200 |
201 |
202 |
203 |
204 | 205 |

Luke Skywalker

206 |
“I don't understand how we got by those troops. I thought we were dead.“
207 |
208 |
209 |
210 |
211 | 212 |

Luke Skywalker

213 |
“I don't understand how we got by those troops. I thought we were dead.“
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 | 224 |
225 |
226 | 227 |
228 |
229 | 230 |
231 |
232 | 233 |
234 |
235 | 236 |
237 |
238 | 239 |
240 | 241 |
242 |
243 |
244 |
245 |

Start Your Project Now

246 |

Leave your description and we start the engine.Don't worry,you can cancel anytime

247 |
248 | Start Project 249 |
250 |
251 | 252 |
253 |
254 |
255 | 256 |

Read Our Blog

257 |

NEW STORIES

258 |
259 |
260 |
261 | 262 |
263 | Jan 17, 2022 264 |
Some Awesome Blog Title Here
265 |
266 |
267 |
268 | 269 |
270 | Jan 17, 2022 271 |
Some Awesome Blog Title Here
272 |
273 |
274 |
275 | 276 |
277 | Jan 17, 2022 278 |
Some Awesome Blog Title Here
279 |
280 |
281 |
282 | Start Project 283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
Subscribe to our Newsletter:
292 |
293 |
294 | 295 |
296 |
297 | 298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 | 308 |

Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

309 |
310 | Created By Graphberry 311 |
© 2022 - Bondi Inc
312 |
313 |
314 |
315 |
316 |
317 |
Links
318 |
    319 |
  • Home
    • 320 |
  • Our Services
    • 321 |
  • Portfolio
    • 322 |
  • Testimonials
    • 323 |
  • Support
    • 324 |
  • Terms and Condition
    • 325 |
326 |
327 |
328 | 329 |
330 |
331 |
About Us
332 |
    333 |
  • Sign In
    • 334 |
  • Register
    • 335 |
  • About Us
    • 336 |
  • Blog
    • 337 |
  • Contact Us
    • 338 |
339 |
340 |
341 |
342 |
343 |
Contact Us
344 |

345 | Get in touch with us via mail phone.We are waiting for your call or message 346 |

347 | graphberry@gmail.com 348 |
    349 |
  • 350 | 353 |
    • 354 |
  • 355 | 358 |
    • 359 |
  • 360 | 363 |
    • 364 |
  • 365 | 368 |
    • 369 |
370 |
371 |
372 |
373 |
374 |
375 | 376 | 377 | 378 | -------------------------------------------------------------------------------- /newimage/react.svg: -------------------------------------------------------------------------------- 1 | react -------------------------------------------------------------------------------- /project2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 29 | 30 | 31 |
32 |
33 |
34 |
35 |

Become a web Developer

36 |

37 | We focus on teaching our students the fundamentals
of the latest 38 | and greatest technologies to prepare them for
their first 39 | dev role 40 |

41 | 42 | 43 |
44 | 45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 |
53 |
54 |
55 |

Sign Up For Newsletter

56 |
57 | 58 | 59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 | 67 | 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 |
77 |

Virtual

78 |

79 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. 80 | Iure, quas quidem possimus dolorum esse eligendi? 81 |

82 | Read More 83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | 91 |
92 |

Hybrid

93 |

94 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. 95 | Iure, quas quidem possimus dolorum esse eligendi? 96 |

97 | Read More 98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 | 106 |
107 |

In Person

108 |

109 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. 110 | Iure, quas quidem possimus dolorum esse eligendi? 111 |

112 | Read More 113 |
114 |
115 |
116 |
117 |
118 |
119 | 120 | 121 | 122 | 123 |
124 |
125 |
126 |
127 | 128 |
129 |
130 |

Learn The Fundamentals

131 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia reprehenderit ab delectus aliquam est iusto.

132 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime, libero quasi? Natus facere aspernatur corrupti. Corrupti, accusamus a inventore quasi vero qui totam, delectus doloremque odio perferendis esse culpa explicabo!

133 | Read More 134 |
135 |
136 |
137 |
138 | 139 | 140 |
141 |
142 |
143 |
144 |

Learn React

145 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia reprehenderit ab delectus aliquam est iusto.

146 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime, libero quasi? Natus facere aspernatur corrupti. Corrupti, accusamus a inventore quasi vero qui totam, delectus doloremque odio perferendis esse culpa explicabo!

147 | Read More 148 |
149 |
150 | 151 |
152 |
153 |
154 |
155 | 156 | 157 | 158 | 159 | 160 |
161 |
162 |

Frequently Asked Questions

163 |
164 | 165 |
166 |

167 | 175 |

176 |
181 |
182 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam 183 | beatae fuga animi distinctio perspiciatis adipisci velit maiores 184 | totam tempora accusamus modi explicabo accusantium consequatur, 185 | praesentium rem quisquam molestias at quos vero. Officiis ad 186 | velit doloremque at. Dignissimos praesentium necessitatibus 187 | natus corrupti cum consequatur aliquam! Minima molestias iure 188 | quam distinctio velit. 189 |
190 |
191 |
192 | 193 |
194 |

195 | 203 |

204 |
209 |
210 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam 211 | beatae fuga animi distinctio perspiciatis adipisci velit maiores 212 | totam tempora accusamus modi explicabo accusantium consequatur, 213 | praesentium rem quisquam molestias at quos vero. Officiis ad 214 | velit doloremque at. Dignissimos praesentium necessitatibus 215 | natus corrupti cum consequatur aliquam! Minima molestias iure 216 | quam distinctio velit. 217 |
218 |
219 |
220 | 221 |
222 |

223 | 231 |

232 |
237 |
238 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam 239 | beatae fuga animi distinctio perspiciatis adipisci velit maiores 240 | totam tempora accusamus modi explicabo accusantium consequatur, 241 | praesentium rem quisquam molestias at quos vero. Officiis ad 242 | velit doloremque at. Dignissimos praesentium necessitatibus 243 | natus corrupti cum consequatur aliquam! Minima molestias iure 244 | quam distinctio velit. 245 |
246 |
247 |
248 | 249 |
250 |

251 | 259 |

260 |
265 |
266 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam 267 | beatae fuga animi distinctio perspiciatis adipisci velit maiores 268 | totam tempora accusamus modi explicabo accusantium consequatur, 269 | praesentium rem quisquam molestias at quos vero. Officiis ad 270 | velit doloremque at. Dignissimos praesentium necessitatibus 271 | natus corrupti cum consequatur aliquam! Minima molestias iure 272 | quam distinctio velit. 273 |
274 |
275 |
276 | 277 |
278 |

279 | 287 |

288 |
293 |
294 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam 295 | beatae fuga animi distinctio perspiciatis adipisci velit maiores 296 | totam tempora accusamus modi explicabo accusantium consequatur, 297 | praesentium rem quisquam molestias at quos vero. Officiis ad 298 | velit doloremque at. Dignissimos praesentium necessitatibus 299 | natus corrupti cum consequatur aliquam! Minima molestias iure 300 | quam distinctio velit. 301 |
302 |
303 |
304 |
305 |
306 |
307 | 308 | 309 | 310 | 311 | 312 | 313 |
314 |
315 |

Our Instructors

316 |

317 | Our instructors all have 5+ years working as a web developer in the 318 | industry 319 |

320 |
321 |
322 |
323 |
324 | 329 |

John Doe

330 |

331 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 332 | Assumenda accusamus nobis sed cupiditate iusto? Quibusdam. 333 |

334 | 335 | 336 | 337 | 338 |
339 |
340 |
341 | 342 |
343 |
344 |
345 | 350 |

Jane Doe

351 |

352 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 353 | Assumenda accusamus nobis sed cupiditate iusto? Quibusdam. 354 |

355 | 356 | 357 | 358 | 359 |
360 |
361 |
362 | 363 |
364 |
365 |
366 | 371 |

Steve Smith

372 |

373 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 374 | Assumenda accusamus nobis sed cupiditate iusto? Quibusdam. 375 |

376 | 377 | 378 | 379 | 380 |
381 |
382 |
383 | 384 |
385 |
386 |
387 | 392 |

Sara Smith

393 |

394 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 395 | Assumenda accusamus nobis sed cupiditate iusto? Quibusdam. 396 |

397 | 398 | 399 | 400 | 401 |
402 |
403 |
404 |
405 |
406 |
407 | 408 | 409 |
410 |
411 |
412 |
413 |

Contact Info

414 |
    415 |
  • 416 | Main Location: 50 Main st Boston MA 417 |
    • 418 |
  • 419 | Enrollment Phone: (555) 555-5555 420 |
    • 421 |
  • 422 | Student Phone: (333) 333-3333 423 |
    • 424 |
  • 425 | Enrollment Email: (555) 426 | enroll@frontendbc.test 427 |
    • 428 |
  • 429 | Student Email: 430 | student@frontendbc.test 431 |
    • 432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 | 441 | 442 | 451 | 452 | 453 | 507 | 508 | 509 | 510 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | -------------------------------------------------------------------------------- /newimage/fundamentals.svg: -------------------------------------------------------------------------------- 1 | static_assets --------------------------------------------------------------------------------