├── aliHossain2.0.0 ├── img │ ├── ali.png │ ├── logo.png │ ├── blog-01.jpg │ ├── blog-02.jpg │ ├── blog-03.jpg │ ├── favicon.png │ ├── footer_logo.png │ ├── project_01.jpg │ ├── project_02.jpg │ ├── project_03.jpg │ ├── project_04.jpg │ ├── project_05.jpg │ └── maxresdefault.jpg ├── js │ └── script.js ├── scss │ ├── _blog.scss │ ├── custom.scss │ ├── _hero.scss │ ├── _service.scss │ ├── _footer.scss │ ├── _about.scss │ ├── _projects.scss │ ├── _contact.scss │ ├── _header.scss │ ├── _utilities.scss │ └── _responsive.scss ├── style.css ├── css │ └── custom.min.css └── index.html ├── aliHossain3.0.0 ├── img │ ├── ali.png │ ├── logo.png │ ├── blog-01.jpg │ ├── blog-02.jpg │ ├── blog-03.jpg │ ├── favicon.png │ ├── footer_logo.png │ ├── project_01.jpg │ ├── project_02.jpg │ ├── project_03.jpg │ ├── project_04.jpg │ ├── project_05.jpg │ └── maxresdefault.jpg ├── scss │ ├── _blog.scss │ ├── custom.scss │ ├── _hero.scss │ ├── _service.scss │ ├── _footer.scss │ ├── _about.scss │ ├── _projects.scss │ ├── _contact.scss │ ├── _header.scss │ ├── _dark_theme.scss │ ├── _utilities.scss │ └── _responsive.scss ├── js │ └── script.js ├── style.css ├── css │ └── custom.min.css └── index.html ├── aliHossainhtml ├── img │ ├── ali.png │ ├── logo.png │ ├── blog-01.jpg │ ├── blog-02.jpg │ ├── blog-03.jpg │ ├── favicon.png │ ├── project_01.jpg │ ├── project_02.jpg │ ├── project_03.jpg │ ├── project_04.jpg │ ├── project_05.jpg │ ├── footer_logo.png │ └── maxresdefault.jpg ├── js │ └── script.js ├── scss │ ├── _blog.scss │ ├── custom.scss │ ├── _hero.scss │ ├── _service.scss │ ├── _footer.scss │ ├── _about.scss │ ├── _projects.scss │ ├── _contact.scss │ ├── _header.scss │ ├── _utilities.scss │ └── _responsive.scss ├── style.css ├── css │ └── custom.min.css └── index.html └── README.md /aliHossain2.0.0/img/ali.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/ali.png -------------------------------------------------------------------------------- /aliHossain2.0.0/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/logo.png -------------------------------------------------------------------------------- /aliHossain3.0.0/img/ali.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/ali.png -------------------------------------------------------------------------------- /aliHossain3.0.0/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/logo.png -------------------------------------------------------------------------------- /aliHossainhtml/img/ali.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/ali.png -------------------------------------------------------------------------------- /aliHossainhtml/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/logo.png -------------------------------------------------------------------------------- /aliHossainhtml/img/blog-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/blog-01.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/blog-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/blog-02.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/blog-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/blog-03.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/favicon.png -------------------------------------------------------------------------------- /aliHossain2.0.0/img/blog-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/blog-01.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/blog-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/blog-02.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/blog-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/blog-03.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/favicon.png -------------------------------------------------------------------------------- /aliHossain3.0.0/img/blog-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/blog-01.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/blog-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/blog-02.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/blog-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/blog-03.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/favicon.png -------------------------------------------------------------------------------- /aliHossainhtml/img/project_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/project_01.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/project_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/project_02.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/project_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/project_03.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/project_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/project_04.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/project_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/project_05.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/footer_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/footer_logo.png -------------------------------------------------------------------------------- /aliHossain2.0.0/img/project_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/project_01.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/project_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/project_02.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/project_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/project_03.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/project_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/project_04.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/img/project_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/project_05.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/footer_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/footer_logo.png -------------------------------------------------------------------------------- /aliHossain3.0.0/img/project_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/project_01.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/project_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/project_02.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/project_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/project_03.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/project_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/project_04.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/project_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/project_05.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/footer_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/footer_logo.png -------------------------------------------------------------------------------- /aliHossain2.0.0/img/maxresdefault.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain2.0.0/img/maxresdefault.jpg -------------------------------------------------------------------------------- /aliHossain3.0.0/img/maxresdefault.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossain3.0.0/img/maxresdefault.jpg -------------------------------------------------------------------------------- /aliHossainhtml/img/maxresdefault.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/HEAD/aliHossainhtml/img/maxresdefault.jpg -------------------------------------------------------------------------------- /aliHossain2.0.0/js/script.js: -------------------------------------------------------------------------------- 1 | const mobile_bars = document.querySelector(".mobile_bars"); 2 | mobile_bars.addEventListener("click", () => { 3 | document.querySelector(".main_menu").classList.toggle("open"); 4 | }); 5 | -------------------------------------------------------------------------------- /aliHossainhtml/js/script.js: -------------------------------------------------------------------------------- 1 | const mobile_bars = document.querySelector(".mobile_bars"); 2 | mobile_bars.addEventListener("click", () => { 3 | document.querySelector(".main_menu").classList.toggle("open"); 4 | }); 5 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_blog.scss: -------------------------------------------------------------------------------- 1 | #blog_area{ 2 | background: $bgColor; 3 | .child_blog{ 4 | flex-basis: 32%; 5 | transition: 0.3s; 6 | img{ 7 | display: block; 8 | } 9 | .blog_info{ 10 | background: $whiteColor; 11 | padding: 25px; 12 | h4{ 13 | color: $bkColor; 14 | font-size: 25px; 15 | text-transform: uppercase; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_blog.scss: -------------------------------------------------------------------------------- 1 | #blog_area{ 2 | background: $bgColor; 3 | .child_blog{ 4 | flex-basis: 32%; 5 | transition: 0.3s; 6 | img{ 7 | display: block; 8 | } 9 | .blog_info{ 10 | background: $whiteColor; 11 | padding: 25px; 12 | h4{ 13 | color: $bkColor; 14 | font-size: 25px; 15 | text-transform: uppercase; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /aliHossainhtml/scss/_blog.scss: -------------------------------------------------------------------------------- 1 | #blog_area{ 2 | background: $bgColor; 3 | .child_blog{ 4 | flex-basis: 32%; 5 | transition: 0.3s; 6 | img{ 7 | display: block; 8 | } 9 | .blog_info{ 10 | background: $whiteColor; 11 | padding: 25px; 12 | h4{ 13 | color: $bkColor; 14 | font-size: 25px; 15 | text-transform: uppercase; 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/custom.scss: -------------------------------------------------------------------------------- 1 | // Utilities 2 | @import "utilities"; 3 | 4 | // Header Area Style 5 | @import "header"; 6 | 7 | // Hero Area Style 8 | @import "hero"; 9 | 10 | // About Area Style 11 | @import "about"; 12 | 13 | // Service Area Style 14 | @import "service"; 15 | 16 | // Project Area Style 17 | @import "projects"; 18 | 19 | // Blog Area Style 20 | @import "blog"; 21 | 22 | // Contact Area Style 23 | @import "contact"; 24 | 25 | // Footer Area Style 26 | @import "footer"; 27 | 28 | // Responsive Area Style 29 | @import "responsive"; 30 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/custom.scss: -------------------------------------------------------------------------------- 1 | // Utilities 2 | @import "utilities"; 3 | 4 | // Header Area Style 5 | @import "header"; 6 | 7 | // Hero Area Style 8 | @import "hero"; 9 | 10 | // About Area Style 11 | @import "about"; 12 | 13 | // Service Area Style 14 | @import "service"; 15 | 16 | // Project Area Style 17 | @import "projects"; 18 | 19 | // Blog Area Style 20 | @import "blog"; 21 | 22 | // Contact Area Style 23 | @import "contact"; 24 | 25 | // Footer Area Style 26 | @import "footer"; 27 | 28 | // Responsive Area Style 29 | @import "responsive"; 30 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/custom.scss: -------------------------------------------------------------------------------- 1 | // Utilities 2 | @import "utilities"; 3 | 4 | // Header Area Style 5 | @import "header"; 6 | 7 | // Hero Area Style 8 | @import "hero"; 9 | 10 | // About Area Style 11 | @import "about"; 12 | 13 | // Service Area Style 14 | @import "service"; 15 | 16 | // Project Area Style 17 | @import "projects"; 18 | 19 | // Blog Area Style 20 | @import "blog"; 21 | 22 | // Contact Area Style 23 | @import "contact"; 24 | 25 | // Footer Area Style 26 | @import "footer"; 27 | 28 | // Responsive Area Style 29 | @import "responsive"; 30 | 31 | 32 | // Dark Theme Style 33 | @import "dark_theme"; 34 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_hero.scss: -------------------------------------------------------------------------------- 1 | #hero_area { 2 | padding-top: 60px; 3 | background: $bgColor; 4 | img { 5 | display: block; 6 | } 7 | .admin_info { 8 | flex-basis: 40%; 9 | order: 1; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | h2 { 14 | font-size: 65px; 15 | text-transform: uppercase; 16 | line-height: 1em; 17 | } 18 | h5 { 19 | font: { 20 | size: 20px; 21 | weight: $fontWMD; 22 | } 23 | text-transform: uppercase; 24 | margin-bottom: 0; 25 | } 26 | } 27 | .admin_image { 28 | flex-basis: 60%; 29 | order: 2; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_hero.scss: -------------------------------------------------------------------------------- 1 | #hero_area { 2 | padding-top: 60px; 3 | background: $bgColor; 4 | img { 5 | display: block; 6 | } 7 | .admin_info { 8 | flex-basis: 40%; 9 | order: 1; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | h2 { 14 | font-size: 65px; 15 | text-transform: uppercase; 16 | line-height: 1em; 17 | } 18 | h5 { 19 | font: { 20 | size: 20px; 21 | weight: $fontWMD; 22 | } 23 | text-transform: uppercase; 24 | margin-bottom: 0; 25 | } 26 | } 27 | .admin_image { 28 | flex-basis: 60%; 29 | order: 2; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_hero.scss: -------------------------------------------------------------------------------- 1 | #hero_area { 2 | padding-top: 60px; 3 | background: $bgColor; 4 | img { 5 | display: block; 6 | } 7 | .admin_info { 8 | flex-basis: 40%; 9 | order: 1; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | h2 { 14 | font-size: 65px; 15 | text-transform: uppercase; 16 | line-height: 1em; 17 | } 18 | h5 { 19 | font: { 20 | size: 20px; 21 | weight: $fontWMD; 22 | } 23 | text-transform: uppercase; 24 | margin-bottom: 0; 25 | } 26 | } 27 | .admin_image { 28 | flex-basis: 60%; 29 | order: 2; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_service.scss: -------------------------------------------------------------------------------- 1 | #service_area { 2 | background: $bgColor; 3 | .child_service { 4 | padding: 40px; 5 | background: $whiteColor; 6 | flex-basis: 32%; 7 | border-radius: 10px; 8 | box-shadow: 0 0 10px #ddd; 9 | transition: 0.5s; 10 | i { 11 | color: $pColor; 12 | font-size: 45px; 13 | margin-bottom: 20px; 14 | } 15 | h4 { 16 | color: $bkColor; 17 | font-size: 25px; 18 | text-transform: uppercase; 19 | } 20 | &:hover { 21 | background: $bkColor; 22 | i { 23 | color: $sColor; 24 | } 25 | h4, 26 | p { 27 | color: $whiteColor; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_service.scss: -------------------------------------------------------------------------------- 1 | #service_area { 2 | background: $bgColor; 3 | .child_service { 4 | padding: 40px; 5 | background: $whiteColor; 6 | flex-basis: 32%; 7 | border-radius: 10px; 8 | box-shadow: 0 0 10px #ddd; 9 | transition: 0.5s; 10 | i { 11 | color: $pColor; 12 | font-size: 45px; 13 | margin-bottom: 20px; 14 | } 15 | h4 { 16 | color: $bkColor; 17 | font-size: 25px; 18 | text-transform: uppercase; 19 | } 20 | &:hover { 21 | background: $bkColor; 22 | i { 23 | color: $sColor; 24 | } 25 | h4, 26 | p { 27 | color: $whiteColor; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_service.scss: -------------------------------------------------------------------------------- 1 | #service_area { 2 | background: $bgColor; 3 | .child_service { 4 | padding: 40px; 5 | background: $whiteColor; 6 | flex-basis: 32%; 7 | border-radius: 10px; 8 | box-shadow: 0 0 10px #ddd; 9 | transition: 0.5s; 10 | i { 11 | color: $pColor; 12 | font-size: 45px; 13 | margin-bottom: 20px; 14 | } 15 | h4 { 16 | color: $bkColor; 17 | font-size: 25px; 18 | text-transform: uppercase; 19 | } 20 | &:hover { 21 | background: $bkColor; 22 | i { 23 | color: $sColor; 24 | } 25 | h4, 26 | p { 27 | color: $whiteColor; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-JS-SASS-Portfolio-Project 2 | 3 | ## 📝 Why? 4 | I have HTML, CSS, JS as Well as SASS tutorial on my Procoder BD youtube channel. So visitors should khow how to combind all knowledge to a project. Thats why I carated a video and here is the source code. 5 | 6 | ## 🥰 Website screenshot 7 | ![Logo](https://github.com/shovoalways/HTML-CSS-JS-SASS-Portfolio-Project/blob/main/aliHossainhtml/img/maxresdefault.jpg?raw=true) 8 | 9 | 10 | ## 🧑‍💻 Contributors 11 | - [@Ali Hossain](https://github.com/shovoalways/) 12 | 13 | 14 | ## 🥰 Follow me 15 | - [@Github](https://github.com/shovoalways/) 16 | - [@Facebook](https://facebook.com/shovoalways/) 17 | - [@Twitter](https://twitter.com/shovoalways/) 18 | - [@Instagram](https://instagram.com/shovoalways/) 19 | -------------------------------------------------------------------------------- /aliHossain3.0.0/js/script.js: -------------------------------------------------------------------------------- 1 | // Mobile Menu Script 2 | 3 | const mobile_bars = document.querySelector(".mobile_bars"); 4 | mobile_bars.addEventListener("click", () => { 5 | document.querySelector(".main_menu").classList.toggle("open"); 6 | }); 7 | 8 | // Light and Dark mood 9 | const darkTheme = document.querySelector(".dark_theme"); 10 | darkTheme.addEventListener("click", () => { 11 | darkTheme.querySelector("i").classList.toggle("fa-sun"); 12 | darkTheme.querySelector("i").classList.toggle("fa-moon"); 13 | document.body.classList.toggle("dark"); 14 | }); 15 | 16 | window.addEventListener("load", () => { 17 | if (document.body.classList.contains("dark")) { 18 | darkTheme.querySelector("i").classList.add("fa-sun"); 19 | } else { 20 | darkTheme.querySelector("i").classList.add("fa-moon"); 21 | } 22 | }); 23 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | #footer_area{ 2 | background: $bkColor; 3 | position: relative; 4 | .top{ 5 | cursor: pointer; 6 | position: absolute; 7 | bottom: 10px; 8 | right: 10px; 9 | i{ 10 | width: 40px; 11 | height: 40px; 12 | background: $pColor; 13 | color: $whiteColor; 14 | padding-top: 12px; 15 | display: block; 16 | border-radius: 5px; 17 | transition: 0.3s; 18 | &:hover{ 19 | background: $sColor; 20 | } 21 | } 22 | } 23 | .logo_area{ 24 | width: 200px; 25 | margin: 0 auto 20px; 26 | } 27 | .socila_area ul{ 28 | text-align: center; 29 | margin-bottom: 20px; 30 | } 31 | .copyright{ 32 | color: $whiteColor; 33 | p{ 34 | font-size: 13px; 35 | span{ 36 | color: red; 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | #footer_area{ 2 | background: $bkColor; 3 | position: relative; 4 | .top{ 5 | cursor: pointer; 6 | position: absolute; 7 | bottom: 10px; 8 | right: 10px; 9 | i{ 10 | width: 40px; 11 | height: 40px; 12 | background: $pColor; 13 | color: $whiteColor; 14 | padding-top: 12px; 15 | display: block; 16 | border-radius: 5px; 17 | transition: 0.3s; 18 | &:hover{ 19 | background: $sColor; 20 | } 21 | } 22 | } 23 | .logo_area{ 24 | width: 200px; 25 | margin: 0 auto 20px; 26 | } 27 | .socila_area ul{ 28 | text-align: center; 29 | margin-bottom: 20px; 30 | } 31 | .copyright{ 32 | color: $whiteColor; 33 | p{ 34 | font-size: 13px; 35 | span{ 36 | color: red; 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /aliHossainhtml/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | #footer_area{ 2 | background: $bkColor; 3 | position: relative; 4 | .top{ 5 | cursor: pointer; 6 | position: absolute; 7 | bottom: 10px; 8 | right: 10px; 9 | i{ 10 | width: 40px; 11 | height: 40px; 12 | background: $pColor; 13 | color: $whiteColor; 14 | padding-top: 12px; 15 | display: block; 16 | border-radius: 5px; 17 | transition: 0.3s; 18 | &:hover{ 19 | background: $sColor; 20 | } 21 | } 22 | } 23 | .logo_area{ 24 | width: 200px; 25 | margin: 0 auto 20px; 26 | } 27 | .socila_area ul{ 28 | text-align: center; 29 | margin-bottom: 20px; 30 | } 31 | .copyright{ 32 | color: $whiteColor; 33 | p{ 34 | font-size: 13px; 35 | span{ 36 | color: red; 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /aliHossain2.0.0/style.css: -------------------------------------------------------------------------------- 1 | /*=============================================== 2 | * Custom CSS 3 | =================================================*/ 4 | *, 5 | *::after, 6 | *::before { 7 | box-sizing: border-box; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | body { 15 | font-family: "Poppins", sans-serif; 16 | list-style: 1.5em; 17 | } 18 | .inner { 19 | display: flex; 20 | justify-content: space-between; 21 | } 22 | .inner-grid { 23 | display: grid; 24 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 25 | gap: 20px; 26 | grid-auto-flow: dense; 27 | } 28 | 29 | .ul { 30 | margin: 0; 31 | padding: 0; 32 | list-style: none; 33 | } 34 | .ul li { 35 | display: inline-block; 36 | } 37 | 38 | a { 39 | transition: 0.5s; 40 | text-decoration: none; 41 | } 42 | 43 | img { 44 | max-width: 100%; 45 | height: auto; 46 | } 47 | .text-center { 48 | text-align: center; 49 | } 50 | -------------------------------------------------------------------------------- /aliHossain3.0.0/style.css: -------------------------------------------------------------------------------- 1 | /*=============================================== 2 | * Custom CSS 3 | =================================================*/ 4 | *, 5 | *::after, 6 | *::before { 7 | box-sizing: border-box; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | body { 15 | font-family: "Poppins", sans-serif; 16 | list-style: 1.5em; 17 | } 18 | .inner { 19 | display: flex; 20 | justify-content: space-between; 21 | } 22 | .inner-grid { 23 | display: grid; 24 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 25 | gap: 20px; 26 | grid-auto-flow: dense; 27 | } 28 | 29 | .ul { 30 | margin: 0; 31 | padding: 0; 32 | list-style: none; 33 | } 34 | .ul li { 35 | display: inline-block; 36 | } 37 | 38 | a { 39 | transition: 0.5s; 40 | text-decoration: none; 41 | } 42 | 43 | img { 44 | max-width: 100%; 45 | height: auto; 46 | } 47 | .text-center { 48 | text-align: center; 49 | } 50 | -------------------------------------------------------------------------------- /aliHossainhtml/style.css: -------------------------------------------------------------------------------- 1 | /*=============================================== 2 | * Custom CSS 3 | =================================================*/ 4 | *, 5 | *::after, 6 | *::before { 7 | box-sizing: border-box; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | body { 15 | font-family: "Poppins", sans-serif; 16 | list-style: 1.5em; 17 | } 18 | .inner { 19 | display: flex; 20 | justify-content: space-between; 21 | } 22 | .inner-grid { 23 | display: grid; 24 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 25 | gap: 20px; 26 | grid-auto-flow: dense; 27 | } 28 | 29 | .ul { 30 | margin: 0; 31 | padding: 0; 32 | list-style: none; 33 | } 34 | .ul li { 35 | display: inline-block; 36 | } 37 | 38 | a { 39 | transition: 0.5s; 40 | text-decoration: none; 41 | } 42 | 43 | img { 44 | max-width: 100%; 45 | height: auto; 46 | } 47 | .text-center { 48 | text-align: center; 49 | } 50 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_about.scss: -------------------------------------------------------------------------------- 1 | #about_area { 2 | .about_numbers { 3 | flex-basis: 50%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | justify-content: space-between; 7 | .child_about { 8 | flex-basis: 48%; 9 | text-align: center; 10 | background: $bgColor; 11 | padding: 40px; 12 | border-radius: 10px; 13 | margin-bottom: 25px; 14 | h4 { 15 | color: $bkColor; 16 | margin: 0; 17 | font: { 18 | size: 45px; 19 | weight: $fontWXL; 20 | } 21 | } 22 | h6 { 23 | color: $bkColor; 24 | font: { 25 | size: 16px; 26 | weight: $fontWMD; 27 | } 28 | line-height: 1em; 29 | margin: 0; 30 | } 31 | } 32 | } 33 | .about_info { 34 | flex-basis: 46%; 35 | justify-content: center; 36 | display: flex; 37 | flex-direction: column; 38 | h3 { 39 | color: $bkColor; 40 | line-height: 1em; 41 | font: { 42 | size: 35px; 43 | weight: $fontWXL; 44 | } 45 | text-transform: uppercase; 46 | } 47 | h6 { 48 | color: $bkColor; 49 | line-height: 1em; 50 | margin-bottom: 5px; 51 | font: { 52 | size: 20px; 53 | weight: $fontWXL; 54 | } 55 | text-transform: uppercase; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_about.scss: -------------------------------------------------------------------------------- 1 | #about_area { 2 | .about_numbers { 3 | flex-basis: 50%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | justify-content: space-between; 7 | .child_about { 8 | flex-basis: 48%; 9 | text-align: center; 10 | background: $bgColor; 11 | padding: 40px; 12 | border-radius: 10px; 13 | margin-bottom: 25px; 14 | h4 { 15 | color: $bkColor; 16 | margin: 0; 17 | font: { 18 | size: 45px; 19 | weight: $fontWXL; 20 | } 21 | } 22 | h6 { 23 | color: $bkColor; 24 | font: { 25 | size: 16px; 26 | weight: $fontWMD; 27 | } 28 | line-height: 1em; 29 | margin: 0; 30 | } 31 | } 32 | } 33 | .about_info { 34 | flex-basis: 46%; 35 | justify-content: center; 36 | display: flex; 37 | flex-direction: column; 38 | h3 { 39 | color: $bkColor; 40 | line-height: 1em; 41 | font: { 42 | size: 35px; 43 | weight: $fontWXL; 44 | } 45 | text-transform: uppercase; 46 | } 47 | h6 { 48 | color: $bkColor; 49 | line-height: 1em; 50 | margin-bottom: 5px; 51 | font: { 52 | size: 20px; 53 | weight: $fontWXL; 54 | } 55 | text-transform: uppercase; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_about.scss: -------------------------------------------------------------------------------- 1 | #about_area { 2 | .about_numbers { 3 | flex-basis: 50%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | justify-content: space-between; 7 | .child_about { 8 | flex-basis: 48%; 9 | text-align: center; 10 | background: $bgColor; 11 | padding: 40px; 12 | border-radius: 10px; 13 | margin-bottom: 25px; 14 | h4 { 15 | color: $bkColor; 16 | margin: 0; 17 | font: { 18 | size: 45px; 19 | weight: $fontWXL; 20 | } 21 | } 22 | h6 { 23 | color: $bkColor; 24 | font: { 25 | size: 16px; 26 | weight: $fontWMD; 27 | } 28 | line-height: 1em; 29 | margin: 0; 30 | } 31 | } 32 | } 33 | .about_info { 34 | flex-basis: 46%; 35 | justify-content: center; 36 | display: flex; 37 | flex-direction: column; 38 | h3 { 39 | color: $bkColor; 40 | line-height: 1em; 41 | font: { 42 | size: 35px; 43 | weight: $fontWXL; 44 | } 45 | text-transform: uppercase; 46 | } 47 | h6 { 48 | color: $bkColor; 49 | line-height: 1em; 50 | margin-bottom: 5px; 51 | font: { 52 | size: 20px; 53 | weight: $fontWXL; 54 | } 55 | text-transform: uppercase; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_projects.scss: -------------------------------------------------------------------------------- 1 | #projects_area { 2 | background: $whiteColor; 3 | .child_project { 4 | margin: 0; 5 | position: relative; 6 | overflow: hidden; 7 | img { 8 | width: 100%; 9 | height: 100%; 10 | } 11 | .project_info { 12 | position: absolute; 13 | width: 100%; 14 | height: 100%; 15 | text-align: center; 16 | top: 0; 17 | left: -9999px; 18 | z-index: 99; 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: center; 22 | transition: 0.3s; 23 | h3 { 24 | position: relative; 25 | z-index: 999; 26 | color: $whiteColor; 27 | } 28 | p { 29 | position: relative; 30 | z-index: 999; 31 | } 32 | &::after { 33 | background: $bkColor; 34 | width: 0%; 35 | height: 100%; 36 | content: ""; 37 | position: absolute; 38 | left: 0; 39 | top: 0; 40 | opacity: 0.5; 41 | transition: 0.3s; 42 | } 43 | &:hover::after { 44 | width: 100%; 45 | } 46 | } 47 | &:hover .project_info { 48 | left: 0; 49 | } 50 | } 51 | .project_x { 52 | grid-column: auto / span 2; 53 | } 54 | .project_y { 55 | grid-row: auto / span 2; 56 | } 57 | .project_xy { 58 | grid-column: auto / span 2; 59 | grid-row: auto / span 2; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_projects.scss: -------------------------------------------------------------------------------- 1 | #projects_area { 2 | background: $whiteColor; 3 | .child_project { 4 | margin: 0; 5 | position: relative; 6 | overflow: hidden; 7 | img { 8 | width: 100%; 9 | height: 100%; 10 | } 11 | .project_info { 12 | position: absolute; 13 | width: 100%; 14 | height: 100%; 15 | text-align: center; 16 | top: 0; 17 | left: -9999px; 18 | z-index: 99; 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: center; 22 | transition: 0.3s; 23 | h3 { 24 | position: relative; 25 | z-index: 999; 26 | color: $whiteColor; 27 | } 28 | p { 29 | position: relative; 30 | z-index: 999; 31 | } 32 | &::after { 33 | background: $bkColor; 34 | width: 0%; 35 | height: 100%; 36 | content: ""; 37 | position: absolute; 38 | left: 0; 39 | top: 0; 40 | opacity: 0.5; 41 | transition: 0.3s; 42 | } 43 | &:hover::after { 44 | width: 100%; 45 | } 46 | } 47 | &:hover .project_info { 48 | left: 0; 49 | } 50 | } 51 | .project_x { 52 | grid-column: auto / span 2; 53 | } 54 | .project_y { 55 | grid-row: auto / span 2; 56 | } 57 | .project_xy { 58 | grid-column: auto / span 2; 59 | grid-row: auto / span 2; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_projects.scss: -------------------------------------------------------------------------------- 1 | #projects_area { 2 | background: $whiteColor; 3 | .child_project { 4 | margin: 0; 5 | position: relative; 6 | overflow: hidden; 7 | img { 8 | display: block; 9 | width: 100%; 10 | height: 100%; 11 | } 12 | .project_info { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | text-align: center; 17 | top: 0; 18 | left: -9999px; 19 | z-index: 99; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | transition: 0.3s; 24 | h3 { 25 | position: relative; 26 | z-index: 999; 27 | color: $whiteColor; 28 | } 29 | p { 30 | position: relative; 31 | z-index: 999; 32 | } 33 | &::after { 34 | background: $bkColor; 35 | width: 0%; 36 | height: 100%; 37 | content: ""; 38 | position: absolute; 39 | left: 0; 40 | top: 0; 41 | opacity: 0.5; 42 | transition: 0.3s; 43 | } 44 | &:hover::after { 45 | width: 100%; 46 | } 47 | } 48 | &:hover .project_info { 49 | left: 0; 50 | } 51 | } 52 | .project_x { 53 | grid-column: auto / span 2; 54 | } 55 | .project_y { 56 | grid-row: auto / span 2; 57 | } 58 | .project_xy { 59 | grid-column: auto / span 2; 60 | grid-row: auto / span 2; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact_area { 2 | background: $whiteColor; 3 | .contact_info { 4 | flex-basis: 60%; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: space-between; 8 | div { 9 | background: $bgColor; 10 | flex-basis: 30%; 11 | flex-direction: column; 12 | justify-content: center; 13 | padding: 40px; 14 | text-align: center; 15 | border-radius: 10px; 16 | i { 17 | display: block; 18 | color: $pColor; 19 | font-size: 25px; 20 | margin-bottom: 20px; 21 | } 22 | p { 23 | color: $bkColor; 24 | font: { 25 | size: 15px; 26 | weight: $fontWMD; 27 | } 28 | text-transform: uppercase; 29 | } 30 | } 31 | iframe { 32 | width: 100%; 33 | border-radius: 10px; 34 | margin-top: 20px; 35 | border: 0; 36 | } 37 | } 38 | .contact_form { 39 | flex-basis: 38%; 40 | input, 41 | textarea { 42 | border: 1px solid #ddd; 43 | padding: 10px; 44 | border-radius: 5px; 45 | width: 100%; 46 | margin-bottom: 15px; 47 | font: { 48 | size: 15px; 49 | weight: $fontWSM; 50 | } 51 | } 52 | textarea { 53 | min-height: 150px; 54 | } 55 | input[type="submit"] { 56 | background: $pColor; 57 | width: 200px; 58 | border: 0; 59 | color: $whiteColor; 60 | font: { 61 | size: 15px; 62 | weight: $fontWSM; 63 | } 64 | padding: 15px; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact_area { 2 | background: $whiteColor; 3 | .contact_info { 4 | flex-basis: 60%; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: space-between; 8 | div { 9 | background: $bgColor; 10 | flex-basis: 30%; 11 | flex-direction: column; 12 | justify-content: center; 13 | padding: 40px; 14 | text-align: center; 15 | border-radius: 10px; 16 | i { 17 | display: block; 18 | color: $pColor; 19 | font-size: 25px; 20 | margin-bottom: 20px; 21 | } 22 | p { 23 | color: $bkColor; 24 | font: { 25 | size: 15px; 26 | weight: $fontWMD; 27 | } 28 | text-transform: uppercase; 29 | } 30 | } 31 | iframe { 32 | width: 100%; 33 | border-radius: 10px; 34 | margin-top: 20px; 35 | border: 0; 36 | } 37 | } 38 | .contact_form { 39 | flex-basis: 38%; 40 | input, 41 | textarea { 42 | border: 1px solid #ddd; 43 | padding: 15px; 44 | border-radius: 5px; 45 | width: 100%; 46 | margin-bottom: 15px; 47 | font: { 48 | size: 15px; 49 | weight: $fontWSM; 50 | } 51 | } 52 | textarea { 53 | min-height: 150px; 54 | } 55 | input[type="submit"] { 56 | background: $pColor; 57 | width: 200px; 58 | border: 0; 59 | color: $whiteColor; 60 | font: { 61 | size: 15px; 62 | weight: $fontWSM; 63 | } 64 | padding: 15px; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact_area { 2 | background: $whiteColor; 3 | .contact_info { 4 | flex-basis: 60%; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: space-between; 8 | div { 9 | background: $bgColor; 10 | flex-basis: 30%; 11 | flex-direction: column; 12 | justify-content: center; 13 | padding: 40px; 14 | text-align: center; 15 | border-radius: 10px; 16 | i { 17 | display: block; 18 | color: $pColor; 19 | font-size: 25px; 20 | margin-bottom: 20px; 21 | } 22 | p { 23 | color: $bkColor; 24 | font: { 25 | size: 15px; 26 | weight: $fontWMD; 27 | } 28 | text-transform: uppercase; 29 | } 30 | } 31 | iframe { 32 | width: 100%; 33 | border-radius: 10px; 34 | margin-top: 20px; 35 | border: 0; 36 | } 37 | } 38 | .contact_form { 39 | flex-basis: 38%; 40 | input, 41 | textarea { 42 | border: 1px solid #ddd; 43 | padding: 10px; 44 | border-radius: 5px; 45 | width: 100%; 46 | margin-bottom: 15px; 47 | font: { 48 | size: 15px; 49 | weight: $fontWSM; 50 | } 51 | } 52 | textarea { 53 | min-height: 150px; 54 | } 55 | input[type="submit"] { 56 | background: $pColor; 57 | width: 200px; 58 | border: 0; 59 | color: $whiteColor; 60 | font: { 61 | size: 15px; 62 | weight: $fontWSM; 63 | } 64 | padding: 15px; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_header.scss: -------------------------------------------------------------------------------- 1 | #header_area { 2 | // Top Header Area Style 3 | .top_header_area { 4 | background: $pColor; 5 | padding: $paddingSM; 6 | position: relative; 7 | .mobile_bars { 8 | display: none; 9 | } 10 | p { 11 | font: { 12 | size: 14px; 13 | weight: $fontWMD; 14 | } 15 | color: $whiteColor; 16 | margin: 8px 0 0; 17 | i { 18 | display: inline-block; 19 | margin-right: 8px; 20 | } 21 | } 22 | } 23 | 24 | // Main Header Area Style 25 | .main_header { 26 | background: $whiteColor; 27 | padding: 25px 0; 28 | .logo_area { 29 | flex-basis: 30%; 30 | } 31 | .main_menu { 32 | flex-basis: 70%; 33 | margin-top: 10px; 34 | ul { 35 | text-align: right; 36 | display: flex; 37 | justify-content: end; 38 | li { 39 | margin-left: 25px; 40 | a { 41 | color: $bkColor; 42 | font: { 43 | size: 16px; 44 | weight: $fontWMD; 45 | } 46 | &:hover { 47 | color: $pColor; 48 | } 49 | } 50 | } 51 | } 52 | } 53 | @media only screen and (min-width: $small) and (max-width: $medium) { 54 | .main_menu{ 55 | background: $pColor; 56 | position: absolute; 57 | width: 96%; 58 | left: -99999px; 59 | ul{ 60 | flex-direction: column; 61 | text-align: left; 62 | li{ 63 | margin-left: 0; 64 | margin-bottom: 5px; 65 | &:last-child{ 66 | margin-bottom: 0; 67 | } 68 | a{ 69 | color: $whiteColor; 70 | display: block; 71 | padding: 10px 15px; 72 | &:hover{ 73 | background: $bkColor; 74 | color: $whiteColor; 75 | } 76 | } 77 | } 78 | } 79 | &.open{ 80 | left: 10px; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_header.scss: -------------------------------------------------------------------------------- 1 | #header_area { 2 | // Top Header Area Style 3 | .top_header_area { 4 | background: $pColor; 5 | padding: $paddingSM; 6 | position: relative; 7 | .mobile_bars { 8 | display: none; 9 | } 10 | p { 11 | font: { 12 | size: 14px; 13 | weight: $fontWMD; 14 | } 15 | color: $whiteColor; 16 | margin: 8px 0 0; 17 | i { 18 | display: inline-block; 19 | margin-right: 8px; 20 | } 21 | } 22 | } 23 | 24 | // Main Header Area Style 25 | .main_header { 26 | background: $whiteColor; 27 | padding: 25px 0; 28 | .logo_area { 29 | flex-basis: 30%; 30 | } 31 | .main_menu { 32 | flex-basis: 70%; 33 | margin-top: 10px; 34 | ul { 35 | text-align: right; 36 | display: flex; 37 | justify-content: end; 38 | li { 39 | margin-left: 25px; 40 | a { 41 | color: $bkColor; 42 | font: { 43 | size: 16px; 44 | weight: $fontWMD; 45 | } 46 | &:hover { 47 | color: $pColor; 48 | } 49 | } 50 | } 51 | } 52 | } 53 | @media only screen and (min-width: $small) and (max-width: $medium) { 54 | .main_menu{ 55 | background: $pColor; 56 | position: absolute; 57 | width: 96%; 58 | left: -99999px; 59 | ul{ 60 | flex-direction: column; 61 | text-align: left; 62 | li{ 63 | margin-left: 0; 64 | margin-bottom: 5px; 65 | &:last-child{ 66 | margin-bottom: 0; 67 | } 68 | a{ 69 | color: $whiteColor; 70 | display: block; 71 | padding: 10px 15px; 72 | &:hover{ 73 | background: $bkColor; 74 | color: $whiteColor; 75 | } 76 | } 77 | } 78 | } 79 | &.open{ 80 | left: 10px; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_header.scss: -------------------------------------------------------------------------------- 1 | #header_area { 2 | // Top Header Area Style 3 | .top_header_area { 4 | background: $pColor; 5 | padding: $paddingSM; 6 | position: relative; 7 | .mobile_bars { 8 | display: none; 9 | } 10 | p { 11 | font: { 12 | size: 14px; 13 | weight: $fontWMD; 14 | } 15 | color: $whiteColor; 16 | margin: 8px 0 0; 17 | i { 18 | display: inline-block; 19 | margin-right: 8px; 20 | } 21 | } 22 | } 23 | 24 | // Main Header Area Style 25 | .main_header { 26 | background: $whiteColor; 27 | padding: 25px 0; 28 | .logo_area { 29 | flex-basis: 30%; 30 | } 31 | .main_menu { 32 | flex-basis: 70%; 33 | margin-top: 10px; 34 | ul { 35 | text-align: right; 36 | display: flex; 37 | justify-content: end; 38 | li { 39 | margin-left: 25px; 40 | a { 41 | color: $bkColor; 42 | font: { 43 | size: 16px; 44 | weight: $fontWMD; 45 | } 46 | &:hover { 47 | color: $pColor; 48 | } 49 | } 50 | } 51 | } 52 | } 53 | @media only screen and (min-width: $small) and (max-width: $medium) { 54 | .main_menu{ 55 | background: $pColor; 56 | position: absolute; 57 | width: 96%; 58 | left: -99999px; 59 | ul{ 60 | flex-direction: column; 61 | text-align: left; 62 | li{ 63 | margin-left: 0; 64 | margin-bottom: 5px; 65 | &:last-child{ 66 | margin-bottom: 0; 67 | } 68 | a{ 69 | color: $whiteColor; 70 | display: block; 71 | padding: 10px 15px; 72 | &:hover{ 73 | background: $bkColor; 74 | color: $whiteColor; 75 | } 76 | } 77 | } 78 | } 79 | &.open{ 80 | left: 10px; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Color 2 | $pColor: #eb7966; 3 | $sColor: #f4c9c2; 4 | $bgColor: #f9ebea; 5 | $whiteColor: #fff; 6 | $bkColor: #11184f; 7 | 8 | // Font Weight 9 | $fontWSM: 400; 10 | $fontWMD: 600; 11 | $fontWXL: 900; 12 | 13 | body, 14 | p { 15 | font: { 16 | size: 16px; 17 | weight: $fontWSM; 18 | } 19 | } 20 | p { 21 | margin: 0 0 15px; 22 | } 23 | h1, 24 | h2, 25 | h3, 26 | h4, 27 | h5, 28 | h6 { 29 | font-weight: $fontWXL; 30 | margin: 0 0 15px; 31 | line-height: 1.2em; 32 | } 33 | 34 | // Main Width 35 | $small: 200px; 36 | $medium: 767px; 37 | .container { 38 | width: 1400px; 39 | margin: 0 auto; 40 | @media only screen and (min-width: $small) and (max-width: $medium) { 41 | width: 96%; 42 | } 43 | } 44 | 45 | // Paddings 46 | $paddingSM: 10px 0; 47 | .paddingXL { 48 | padding: 60px 0; 49 | @media only screen and (min-width: $small) and (max-width: $medium) { 50 | padding: 25px 0; 51 | } 52 | } 53 | 54 | // Margin 55 | .m-top { 56 | margin-top: 45px; 57 | @media only screen and (min-width: $small) and (max-width: $medium) { 58 | margin-top: 25px; 59 | } 60 | } 61 | 62 | // Socila Area Style 63 | .socila_area { 64 | ul { 65 | text-align: right; 66 | li { 67 | margin-left: 15px; 68 | } 69 | a { 70 | display: block; 71 | background: $sColor; 72 | width: 40px; 73 | height: 40px; 74 | font-size: 15px; 75 | color: $bkColor; 76 | text-align: center; 77 | padding-top: 8px; 78 | border-radius: 30px; 79 | i { 80 | margin: 0; 81 | } 82 | &:hover { 83 | background: $bkColor; 84 | color: $sColor; 85 | } 86 | } 87 | } 88 | } 89 | 90 | // Call To Action Button 91 | .btn-cta { 92 | background: $pColor; 93 | color: $whiteColor; 94 | display: inline-block; 95 | padding: 12px 25px; 96 | font-weight: $fontWMD; 97 | border-radius: 5px; 98 | margin-top: 5px; 99 | &:hover { 100 | background: $bkColor; 101 | } 102 | } 103 | 104 | // Titile & Sub Title Style 105 | .title { 106 | font-size: 60px; 107 | line-height: 1em; 108 | margin-bottom: 10px; 109 | @media only screen and (min-width: $small) and (max-width: $medium) { 110 | font-size: 25px; 111 | } 112 | } 113 | .sub-title { 114 | font: { 115 | size: 25px; 116 | weight: $fontWMD; 117 | } 118 | line-height: 1em; 119 | margin-bottom: 0; 120 | @media only screen and (min-width: $small) and (max-width: $medium) { 121 | font-size: 15px; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Color 2 | $pColor: #eb7966; 3 | $sColor: #f4c9c2; 4 | $bgColor: #f9ebea; 5 | $whiteColor: #fff; 6 | $bkColor: #11184f; 7 | 8 | // Font Weight 9 | $fontWSM: 400; 10 | $fontWMD: 600; 11 | $fontWXL: 900; 12 | 13 | body, 14 | p { 15 | font: { 16 | size: 16px; 17 | weight: $fontWSM; 18 | } 19 | } 20 | p { 21 | margin: 0 0 15px; 22 | } 23 | h1, 24 | h2, 25 | h3, 26 | h4, 27 | h5, 28 | h6 { 29 | font-weight: $fontWXL; 30 | margin: 0 0 15px; 31 | line-height: 1.2em; 32 | } 33 | 34 | // Main Width 35 | $small: 200px; 36 | $medium: 767px; 37 | .container { 38 | width: 1400px; 39 | margin: 0 auto; 40 | @media only screen and (min-width: $small) and (max-width: $medium) { 41 | width: 96%; 42 | } 43 | } 44 | 45 | // Paddings 46 | $paddingSM: 10px 0; 47 | .paddingXL { 48 | padding: 60px 0; 49 | @media only screen and (min-width: $small) and (max-width: $medium) { 50 | padding: 25px 0; 51 | } 52 | } 53 | 54 | // Margin 55 | .m-top { 56 | margin-top: 45px; 57 | @media only screen and (min-width: $small) and (max-width: $medium) { 58 | margin-top: 25px; 59 | } 60 | } 61 | 62 | // Socila Area Style 63 | .socila_area { 64 | ul { 65 | text-align: right; 66 | li { 67 | margin-left: 15px; 68 | } 69 | a { 70 | display: block; 71 | background: $sColor; 72 | width: 40px; 73 | height: 40px; 74 | font-size: 15px; 75 | color: $bkColor; 76 | text-align: center; 77 | padding-top: 8px; 78 | border-radius: 30px; 79 | i { 80 | margin: 0; 81 | } 82 | &:hover { 83 | background: $bkColor; 84 | color: $sColor; 85 | } 86 | } 87 | } 88 | } 89 | 90 | // Call To Action Button 91 | .btn-cta { 92 | background: $pColor; 93 | color: $whiteColor; 94 | display: inline-block; 95 | padding: 12px 25px; 96 | font-weight: $fontWMD; 97 | border-radius: 5px; 98 | margin-top: 5px; 99 | &:hover { 100 | background: $bkColor; 101 | } 102 | } 103 | 104 | // Titile & Sub Title Style 105 | .title { 106 | font-size: 60px; 107 | line-height: 1em; 108 | margin-bottom: 10px; 109 | @media only screen and (min-width: $small) and (max-width: $medium) { 110 | font-size: 25px; 111 | } 112 | } 113 | .sub-title { 114 | font: { 115 | size: 25px; 116 | weight: $fontWMD; 117 | } 118 | line-height: 1em; 119 | margin-bottom: 0; 120 | @media only screen and (min-width: $small) and (max-width: $medium) { 121 | font-size: 15px; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_dark_theme.scss: -------------------------------------------------------------------------------- 1 | $darkBGColor: #1f1f1f; 2 | $darkSColor: #262626; 3 | 4 | body.dark { 5 | .socila_area { 6 | ul { 7 | li { 8 | a { 9 | &:hover { 10 | background: $whiteColor; 11 | } 12 | } 13 | } 14 | } 15 | } 16 | #header_area { 17 | .top_header_area { 18 | background: $darkBGColor; 19 | } 20 | .main_header { 21 | background: $darkSColor; 22 | .main_menu ul li a { 23 | color: $sColor; 24 | } 25 | } 26 | } 27 | #hero_area { 28 | background: $darkBGColor; 29 | .admin_info { 30 | h2, 31 | h5, 32 | p { 33 | color: $whiteColor; 34 | } 35 | } 36 | } 37 | #about_area { 38 | background: $darkSColor; 39 | .container.text-center { 40 | color: $whiteColor; 41 | } 42 | .about_numbers { 43 | .child_about { 44 | background: $darkBGColor; 45 | h4, 46 | h6 { 47 | color: $sColor; 48 | } 49 | } 50 | } 51 | .about_info { 52 | color: $whiteColor; 53 | h3, 54 | h6 { 55 | color: $whiteColor; 56 | } 57 | } 58 | } 59 | #service_area { 60 | background: $darkBGColor; 61 | .container.text-center { 62 | color: $whiteColor; 63 | } 64 | .child_service { 65 | background: $darkSColor; 66 | box-shadow: none; 67 | h4 { 68 | color: $sColor; 69 | } 70 | p { 71 | color: $whiteColor; 72 | } 73 | } 74 | } 75 | #projects_area { 76 | background: $darkSColor; 77 | .container.text-center { 78 | color: $whiteColor; 79 | } 80 | } 81 | #blog_area { 82 | background: $darkBGColor; 83 | .container.text-center { 84 | color: $whiteColor; 85 | } 86 | .child_blog { 87 | .blog_info { 88 | background: $darkSColor; 89 | h4 a, 90 | p { 91 | color: $whiteColor; 92 | } 93 | } 94 | } 95 | } 96 | #contact_area { 97 | background: $darkSColor; 98 | .container.text-center { 99 | color: $whiteColor; 100 | } 101 | .contact_info { 102 | div { 103 | background: $darkBGColor; 104 | p { 105 | color: $whiteColor; 106 | } 107 | } 108 | } 109 | .contact_form { 110 | input, 111 | textarea { 112 | background: $darkBGColor; 113 | border-color: $darkSColor; 114 | color: $whiteColor; 115 | } 116 | input[type="submit"] { 117 | background: $pColor; 118 | } 119 | } 120 | } 121 | #footer_area{ 122 | background: $darkBGColor; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Color 2 | $pColor: #eb7966; 3 | $sColor: #f4c9c2; 4 | $bgColor: #f9ebea; 5 | $whiteColor: #fff; 6 | $bkColor: #11184f; 7 | 8 | // Font Weight 9 | $fontWSM: 400; 10 | $fontWMD: 600; 11 | $fontWXL: 900; 12 | 13 | body, 14 | p { 15 | font: { 16 | size: 16px; 17 | weight: $fontWSM; 18 | } 19 | } 20 | p { 21 | margin: 0 0 15px; 22 | } 23 | h1, 24 | h2, 25 | h3, 26 | h4, 27 | h5, 28 | h6 { 29 | font-weight: $fontWXL; 30 | margin: 0 0 15px; 31 | line-height: 1.2em; 32 | } 33 | 34 | // Main Width 35 | $small: 200px; 36 | $medium: 767px; 37 | .container { 38 | width: 1400px; 39 | margin: 0 auto; 40 | @media only screen and (min-width: $small) and (max-width: $medium) { 41 | width: 96%; 42 | } 43 | } 44 | 45 | // Paddings 46 | $paddingSM: 10px 0; 47 | .paddingXL { 48 | padding: 60px 0; 49 | @media only screen and (min-width: $small) and (max-width: $medium) { 50 | padding: 25px 0; 51 | } 52 | } 53 | 54 | // Margin 55 | .m-top { 56 | margin-top: 45px; 57 | @media only screen and (min-width: $small) and (max-width: $medium) { 58 | margin-top: 25px; 59 | } 60 | } 61 | 62 | // Socila Area Style 63 | .socila_area { 64 | ul { 65 | text-align: right; 66 | li { 67 | margin-left: 15px; 68 | } 69 | a { 70 | display: block; 71 | background: $sColor; 72 | width: 40px; 73 | height: 40px; 74 | font-size: 15px; 75 | color: $bkColor; 76 | text-align: center; 77 | padding-top: 8px; 78 | border-radius: 30px; 79 | i { 80 | margin: 0; 81 | } 82 | &:hover { 83 | background: $bkColor; 84 | color: $sColor; 85 | } 86 | } 87 | i.fa-solid{ 88 | display: block; 89 | background: $sColor; 90 | width: 40px; 91 | height: 40px; 92 | font-size: 15px; 93 | color: $bkColor; 94 | text-align: center; 95 | padding-top: 12px; 96 | transition: 0.3s; 97 | cursor: pointer; 98 | border-radius: 30px; 99 | &:hover { 100 | background: $whiteColor; 101 | color: $sColor; 102 | } 103 | } 104 | } 105 | } 106 | 107 | // Call To Action Button 108 | .btn-cta { 109 | background: $pColor; 110 | color: $whiteColor; 111 | display: inline-block; 112 | padding: 12px 25px; 113 | font-weight: $fontWMD; 114 | border-radius: 5px; 115 | margin-top: 5px; 116 | &:hover { 117 | background: $bkColor; 118 | } 119 | } 120 | 121 | // Titile & Sub Title Style 122 | .title { 123 | font-size: 60px; 124 | line-height: 1em; 125 | margin-bottom: 10px; 126 | @media only screen and (min-width: $small) and (max-width: $medium) { 127 | font-size: 25px; 128 | } 129 | } 130 | .sub-title { 131 | font: { 132 | size: 25px; 133 | weight: $fontWMD; 134 | } 135 | line-height: 1em; 136 | margin-bottom: 0; 137 | @media only screen and (min-width: $small) and (max-width: $medium) { 138 | font-size: 15px; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /aliHossainhtml/scss/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media only screen and (min-width: $small) and (max-width: $medium) { 2 | // Header Area Style 3 | #header_area { 4 | .inner { 5 | display: block; 6 | } 7 | // Top Header Area Style 8 | .top_header_area { 9 | .address, 10 | .phone_number, 11 | .email_address { 12 | display: none; 13 | } 14 | .socila_area { 15 | ul { 16 | text-align: center; 17 | } 18 | } 19 | .mobile_bars { 20 | display: block; 21 | position: absolute; 22 | right: 10px; 23 | top: 10px; 24 | i { 25 | color: $whiteColor; 26 | font-size: 25px; 27 | cursor: pointer; 28 | } 29 | } 30 | } 31 | 32 | // Main Menu Style 33 | .main_header { 34 | .logo_area { 35 | width: 200px; 36 | margin: 0 auto; 37 | } 38 | } 39 | } 40 | 41 | // Hero Area Style 42 | #hero_area { 43 | .inner { 44 | flex-direction: column; 45 | } 46 | .admin_info { 47 | flex-basis: 100%; 48 | padding: 20px; 49 | order: 2; 50 | } 51 | .admin_image { 52 | order: 1; 53 | flex-basis: 100%; 54 | } 55 | } 56 | 57 | // About Area Style 58 | #about_area { 59 | .inner { 60 | flex-direction: column; 61 | } 62 | .about_numbers { 63 | flex-basis: 100%; 64 | .child_about { 65 | h4 { 66 | font-size: 25px; 67 | } 68 | h6 { 69 | font-size: 14px; 70 | } 71 | } 72 | } 73 | .about_info { 74 | flex-basis: 100%; 75 | padding: 20px; 76 | h3 { 77 | font-size: 25px; 78 | } 79 | h6 { 80 | font-size: 15px; 81 | } 82 | } 83 | } 84 | 85 | // Service Area Style 86 | #service_area { 87 | .inner { 88 | flex-direction: column; 89 | } 90 | .child_service { 91 | margin-bottom: 25px; 92 | padding: 20px; 93 | i { 94 | margin-bottom: 10px; 95 | } 96 | h4 { 97 | font-size: 22px; 98 | margin-bottom: 10px; 99 | } 100 | p { 101 | font-size: 14px; 102 | } 103 | } 104 | } 105 | 106 | // Projects Area Style 107 | #projects_area { 108 | .inner-grid { 109 | display: block; 110 | } 111 | .child_project { 112 | margin-bottom: 15px; 113 | } 114 | } 115 | 116 | // Blog Area Style 117 | #blog_area { 118 | .inner { 119 | flex-direction: column; 120 | } 121 | .child_blog { 122 | margin-bottom: 25px; 123 | } 124 | } 125 | 126 | // Contact Area Style 127 | #contact_area { 128 | .inner, 129 | .contact_info { 130 | flex-direction: column; 131 | } 132 | .contact_info { 133 | div { 134 | padding: 20px; 135 | margin-bottom: 20px; 136 | } 137 | iframe{ 138 | margin-top: 0; 139 | margin-bottom: 20px; 140 | } 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /aliHossain2.0.0/scss/_responsive.scss: -------------------------------------------------------------------------------- 1 | // Laptop Screen 2 | @media only screen and (min-width: 768px) and (max-width: 1410px) { 3 | .container { 4 | width: 1140px; 5 | } 6 | #projects_area { 7 | .project_x { 8 | grid-column: auto / span 1; 9 | } 10 | .project_y { 11 | grid-row: auto / span 1; 12 | } 13 | .project_xy { 14 | grid-column: auto / span 1; 15 | grid-row: auto / span 1; 16 | } 17 | } 18 | #contact_area .contact_info div { 19 | padding: 40px 25px; 20 | display: flex; 21 | } 22 | } 23 | 24 | // Tablet Screen 25 | @media only screen and (min-width: 768px) and (max-width: 1199px) { 26 | .container { 27 | width: 96%; 28 | } 29 | .socila_area ul li { 30 | margin-left: 5px; 31 | } 32 | #contact_area .contact_info div { 33 | padding: 20px 15px; 34 | } 35 | #header_area .top_header_area { 36 | .container.inner { 37 | div { 38 | flex-basis: 20%; 39 | &:first-child, 40 | &:last-child { 41 | flex-basis: 30%; 42 | } 43 | } 44 | } 45 | p { 46 | font-size: 13px; 47 | text-align: center; 48 | i { 49 | display: block; 50 | } 51 | } 52 | } 53 | #hero_area { 54 | .inner { 55 | flex-direction: column; 56 | } 57 | .admin_info { 58 | flex-basis: 100%; 59 | padding: 20px; 60 | order: 2; 61 | } 62 | .admin_image { 63 | order: 1; 64 | flex-basis: 100%; 65 | } 66 | } 67 | #about_area .about_numbers .child_about, 68 | #service_area .child_service { 69 | padding: 25px 20px; 70 | } 71 | // Contact Area Style 72 | #contact_area { 73 | .inner, 74 | .contact_info { 75 | flex-direction: column; 76 | } 77 | .contact_info { 78 | div { 79 | padding: 20px; 80 | margin-bottom: 20px; 81 | } 82 | iframe { 83 | margin-top: 0; 84 | margin-bottom: 20px; 85 | } 86 | } 87 | } 88 | } 89 | 90 | // Mobile Screen 91 | @media only screen and (min-width: $small) and (max-width: $medium) { 92 | // Header Area Style 93 | #header_area { 94 | .inner { 95 | display: block; 96 | } 97 | // Top Header Area Style 98 | .top_header_area { 99 | .address, 100 | .phone_number, 101 | .email_address { 102 | display: none; 103 | } 104 | .socila_area { 105 | ul { 106 | text-align: center; 107 | } 108 | } 109 | .mobile_bars { 110 | display: block; 111 | position: absolute; 112 | right: 10px; 113 | top: 10px; 114 | i { 115 | color: $whiteColor; 116 | font-size: 25px; 117 | cursor: pointer; 118 | } 119 | } 120 | } 121 | 122 | // Main Menu Style 123 | .main_header { 124 | .logo_area { 125 | width: 200px; 126 | margin: 0 auto; 127 | } 128 | } 129 | } 130 | 131 | // Hero Area Style 132 | #hero_area { 133 | .inner { 134 | flex-direction: column; 135 | } 136 | 137 | .admin_info { 138 | flex-basis: 100%; 139 | padding: 20px; 140 | order: 2; 141 | h2 { 142 | font-size: 45px; 143 | } 144 | } 145 | .admin_image { 146 | order: 1; 147 | flex-basis: 100%; 148 | } 149 | } 150 | 151 | // About Area Style 152 | #about_area { 153 | .inner { 154 | flex-direction: column; 155 | } 156 | .about_numbers { 157 | flex-basis: 100%; 158 | .child_about { 159 | h4 { 160 | font-size: 25px; 161 | } 162 | h6 { 163 | font-size: 14px; 164 | } 165 | } 166 | } 167 | .about_info { 168 | flex-basis: 100%; 169 | padding: 20px; 170 | h3 { 171 | font-size: 25px; 172 | } 173 | h6 { 174 | font-size: 15px; 175 | } 176 | } 177 | } 178 | 179 | // Service Area Style 180 | #service_area { 181 | .inner { 182 | flex-direction: column; 183 | } 184 | .child_service { 185 | margin-bottom: 25px; 186 | padding: 20px; 187 | i { 188 | margin-bottom: 10px; 189 | } 190 | h4 { 191 | font-size: 22px; 192 | margin-bottom: 10px; 193 | } 194 | p { 195 | font-size: 14px; 196 | } 197 | } 198 | } 199 | 200 | // Projects Area Style 201 | #projects_area { 202 | .inner-grid { 203 | display: block; 204 | } 205 | .child_project { 206 | margin-bottom: 15px; 207 | } 208 | } 209 | 210 | // Blog Area Style 211 | #blog_area { 212 | .inner { 213 | flex-direction: column; 214 | } 215 | .child_blog { 216 | margin-bottom: 25px; 217 | } 218 | } 219 | 220 | // Contact Area Style 221 | #contact_area { 222 | .inner, 223 | .contact_info { 224 | flex-direction: column; 225 | } 226 | .contact_info { 227 | div { 228 | padding: 20px; 229 | margin-bottom: 20px; 230 | } 231 | iframe { 232 | margin-top: 0; 233 | margin-bottom: 20px; 234 | } 235 | } 236 | } 237 | } 238 | -------------------------------------------------------------------------------- /aliHossain3.0.0/scss/_responsive.scss: -------------------------------------------------------------------------------- 1 | // Laptop Screen 2 | @media only screen and (min-width: 768px) and (max-width: 1410px) { 3 | .container { 4 | width: 1140px; 5 | } 6 | #projects_area { 7 | .project_x { 8 | grid-column: auto / span 1; 9 | } 10 | .project_y { 11 | grid-row: auto / span 1; 12 | } 13 | .project_xy { 14 | grid-column: auto / span 1; 15 | grid-row: auto / span 1; 16 | } 17 | } 18 | #contact_area .contact_info div { 19 | padding: 40px 25px; 20 | display: flex; 21 | } 22 | } 23 | 24 | // Tablet Screen 25 | @media only screen and (min-width: 768px) and (max-width: 1199px) { 26 | .container { 27 | width: 96%; 28 | } 29 | .socila_area ul li { 30 | margin-left: 5px; 31 | } 32 | #contact_area .contact_info div { 33 | padding: 20px 15px; 34 | } 35 | #header_area .top_header_area { 36 | .container.inner { 37 | div { 38 | flex-basis: 20%; 39 | &:first-child, 40 | &:last-child { 41 | flex-basis: 30%; 42 | } 43 | } 44 | } 45 | p { 46 | font-size: 13px; 47 | text-align: center; 48 | i { 49 | display: block; 50 | } 51 | } 52 | } 53 | #hero_area { 54 | .inner { 55 | flex-direction: column; 56 | } 57 | .admin_info { 58 | flex-basis: 100%; 59 | padding: 20px; 60 | order: 2; 61 | } 62 | .admin_image { 63 | order: 1; 64 | flex-basis: 100%; 65 | } 66 | } 67 | #about_area .about_numbers .child_about, 68 | #service_area .child_service { 69 | padding: 25px 20px; 70 | } 71 | // Contact Area Style 72 | #contact_area { 73 | .inner, 74 | .contact_info { 75 | flex-direction: column; 76 | } 77 | .contact_info { 78 | div { 79 | padding: 20px; 80 | margin-bottom: 20px; 81 | } 82 | iframe { 83 | margin-top: 0; 84 | margin-bottom: 20px; 85 | } 86 | } 87 | } 88 | } 89 | 90 | // Mobile Screen 91 | @media only screen and (min-width: $small) and (max-width: $medium) { 92 | // Header Area Style 93 | #header_area { 94 | .inner { 95 | display: block; 96 | } 97 | // Top Header Area Style 98 | .top_header_area { 99 | .address, 100 | .phone_number, 101 | .email_address { 102 | display: none; 103 | } 104 | .socila_area { 105 | ul { 106 | text-align: center; 107 | } 108 | } 109 | .mobile_bars { 110 | display: block; 111 | position: absolute; 112 | right: 10px; 113 | top: 10px; 114 | i { 115 | color: $whiteColor; 116 | font-size: 25px; 117 | cursor: pointer; 118 | } 119 | } 120 | } 121 | 122 | // Main Menu Style 123 | .main_header { 124 | .logo_area { 125 | width: 200px; 126 | margin: 0 auto; 127 | } 128 | } 129 | } 130 | 131 | // Hero Area Style 132 | #hero_area { 133 | .inner { 134 | flex-direction: column; 135 | } 136 | 137 | .admin_info { 138 | flex-basis: 100%; 139 | padding: 20px; 140 | order: 2; 141 | h2 { 142 | font-size: 45px; 143 | } 144 | } 145 | .admin_image { 146 | order: 1; 147 | flex-basis: 100%; 148 | } 149 | } 150 | 151 | // About Area Style 152 | #about_area { 153 | .inner { 154 | flex-direction: column; 155 | } 156 | .about_numbers { 157 | flex-basis: 100%; 158 | .child_about { 159 | h4 { 160 | font-size: 25px; 161 | } 162 | h6 { 163 | font-size: 14px; 164 | } 165 | } 166 | } 167 | .about_info { 168 | flex-basis: 100%; 169 | padding: 20px; 170 | h3 { 171 | font-size: 25px; 172 | } 173 | h6 { 174 | font-size: 15px; 175 | } 176 | } 177 | } 178 | 179 | // Service Area Style 180 | #service_area { 181 | .inner { 182 | flex-direction: column; 183 | } 184 | .child_service { 185 | margin-bottom: 25px; 186 | padding: 20px; 187 | i { 188 | margin-bottom: 10px; 189 | } 190 | h4 { 191 | font-size: 22px; 192 | margin-bottom: 10px; 193 | } 194 | p { 195 | font-size: 14px; 196 | } 197 | } 198 | } 199 | 200 | // Projects Area Style 201 | #projects_area { 202 | .inner-grid { 203 | display: block; 204 | } 205 | .child_project { 206 | margin-bottom: 15px; 207 | } 208 | } 209 | 210 | // Blog Area Style 211 | #blog_area { 212 | .inner { 213 | flex-direction: column; 214 | } 215 | .child_blog { 216 | margin-bottom: 25px; 217 | } 218 | } 219 | 220 | // Contact Area Style 221 | #contact_area { 222 | .inner, 223 | .contact_info { 224 | flex-direction: column; 225 | } 226 | .contact_info { 227 | div { 228 | padding: 20px; 229 | margin-bottom: 20px; 230 | } 231 | iframe { 232 | margin-top: 0; 233 | margin-bottom: 20px; 234 | } 235 | } 236 | } 237 | } 238 | -------------------------------------------------------------------------------- /aliHossainhtml/css/custom.min.css: -------------------------------------------------------------------------------- 1 | body,p{font-size:16px;font-weight:400}p{margin:0 0 15px}h1,h2,h3,h4,h5,h6{font-weight:900;margin:0 0 15px;line-height:1.2em}.container{width:1400px;margin:0 auto}@media only screen and (min-width: 200px)and (max-width: 767px){.container{width:96%}}.paddingXL{padding:60px 0}@media only screen and (min-width: 200px)and (max-width: 767px){.paddingXL{padding:25px 0}}.m-top{margin-top:45px}@media only screen and (min-width: 200px)and (max-width: 767px){.m-top{margin-top:25px}}.socila_area ul{text-align:right}.socila_area ul li{margin-left:15px}.socila_area ul a{display:block;background:#f4c9c2;width:40px;height:40px;font-size:15px;color:#11184f;text-align:center;padding-top:8px;border-radius:30px}.socila_area ul a i{margin:0}.socila_area ul a:hover{background:#11184f;color:#f4c9c2}.btn-cta{background:#eb7966;color:#fff;display:inline-block;padding:12px 25px;font-weight:600;border-radius:5px;margin-top:5px}.btn-cta:hover{background:#11184f}.title{font-size:60px;line-height:1em;margin-bottom:10px}@media only screen and (min-width: 200px)and (max-width: 767px){.title{font-size:25px}}.sub-title{font-size:25px;font-weight:600;line-height:1em;margin-bottom:0}@media only screen and (min-width: 200px)and (max-width: 767px){.sub-title{font-size:15px}}#header_area .top_header_area{background:#eb7966;padding:10px 0;position:relative}#header_area .top_header_area .mobile_bars{display:none}#header_area .top_header_area p{font-size:14px;font-weight:600;color:#fff;margin:8px 0 0}#header_area .top_header_area p i{display:inline-block;margin-right:8px}#header_area .main_header{background:#fff;padding:25px 0}#header_area .main_header .logo_area{flex-basis:30%}#header_area .main_header .main_menu{flex-basis:70%;margin-top:10px}#header_area .main_header .main_menu ul{text-align:right;display:flex;justify-content:end}#header_area .main_header .main_menu ul li{margin-left:25px}#header_area .main_header .main_menu ul li a{color:#11184f;font-size:16px;font-weight:600}#header_area .main_header .main_menu ul li a:hover{color:#eb7966}@media only screen and (min-width: 200px)and (max-width: 767px){#header_area .main_header .main_menu{background:#eb7966;position:absolute;width:96%;left:-99999px}#header_area .main_header .main_menu ul{flex-direction:column;text-align:left}#header_area .main_header .main_menu ul li{margin-left:0;margin-bottom:5px}#header_area .main_header .main_menu ul li:last-child{margin-bottom:0}#header_area .main_header .main_menu ul li a{color:#fff;display:block;padding:10px 15px}#header_area .main_header .main_menu ul li a:hover{background:#11184f;color:#fff}#header_area .main_header .main_menu.open{left:10px}}#hero_area{padding-top:60px;background:#f9ebea}#hero_area img{display:block}#hero_area .admin_info{flex-basis:40%;order:1;display:flex;flex-direction:column;justify-content:center}#hero_area .admin_info h2{font-size:65px;text-transform:uppercase;line-height:1em}#hero_area .admin_info h5{font-size:20px;font-weight:600;text-transform:uppercase;margin-bottom:0}#hero_area .admin_image{flex-basis:60%;order:2}#about_area .about_numbers{flex-basis:50%;display:flex;flex-wrap:wrap;justify-content:space-between}#about_area .about_numbers .child_about{flex-basis:48%;text-align:center;background:#f9ebea;padding:40px;border-radius:10px;margin-bottom:25px}#about_area .about_numbers .child_about h4{color:#11184f;margin:0;font-size:45px;font-weight:900}#about_area .about_numbers .child_about h6{color:#11184f;font-size:16px;font-weight:600;line-height:1em;margin:0}#about_area .about_info{flex-basis:46%;justify-content:center;display:flex;flex-direction:column}#about_area .about_info h3{color:#11184f;line-height:1em;font-size:35px;font-weight:900;text-transform:uppercase}#about_area .about_info h6{color:#11184f;line-height:1em;margin-bottom:5px;font-size:20px;font-weight:900;text-transform:uppercase}#service_area{background:#f9ebea}#service_area .child_service{padding:40px;background:#fff;flex-basis:32%;border-radius:10px;box-shadow:0 0 10px #ddd;transition:.5s}#service_area .child_service i{color:#eb7966;font-size:45px;margin-bottom:20px}#service_area .child_service h4{color:#11184f;font-size:25px;text-transform:uppercase}#service_area .child_service:hover{background:#11184f}#service_area .child_service:hover i{color:#f4c9c2}#service_area .child_service:hover h4,#service_area .child_service:hover p{color:#fff}#projects_area{background:#fff}#projects_area .child_project{margin:0;position:relative;overflow:hidden}#projects_area .child_project img{width:100%;height:100%}#projects_area .child_project .project_info{position:absolute;width:100%;height:100%;text-align:center;top:0;left:-9999px;z-index:99;display:flex;flex-direction:column;justify-content:center;transition:.3s}#projects_area .child_project .project_info h3{position:relative;z-index:999;color:#fff}#projects_area .child_project .project_info p{position:relative;z-index:999}#projects_area .child_project .project_info::after{background:#11184f;width:0%;height:100%;content:"";position:absolute;left:0;top:0;opacity:.5;transition:.3s}#projects_area .child_project .project_info:hover::after{width:100%}#projects_area .child_project:hover .project_info{left:0}#projects_area .project_x{grid-column:auto/span 2}#projects_area .project_y{grid-row:auto/span 2}#projects_area .project_xy{grid-column:auto/span 2;grid-row:auto/span 2}#blog_area{background:#f9ebea}#blog_area .child_blog{flex-basis:32%;transition:.3s}#blog_area .child_blog img{display:block}#blog_area .child_blog .blog_info{background:#fff;padding:25px}#blog_area .child_blog .blog_info h4{color:#11184f;font-size:25px;text-transform:uppercase}#contact_area{background:#fff}#contact_area .contact_info{flex-basis:60%;display:flex;flex-wrap:wrap;justify-content:space-between}#contact_area .contact_info div{background:#f9ebea;flex-basis:30%;flex-direction:column;justify-content:center;padding:40px;text-align:center;border-radius:10px}#contact_area .contact_info div i{display:block;color:#eb7966;font-size:25px;margin-bottom:20px}#contact_area .contact_info div p{color:#11184f;font-size:15px;font-weight:600;text-transform:uppercase}#contact_area .contact_info iframe{width:100%;border-radius:10px;margin-top:20px;border:0}#contact_area .contact_form{flex-basis:38%}#contact_area .contact_form input,#contact_area .contact_form textarea{border:1px solid #ddd;padding:10px;border-radius:5px;width:100%;margin-bottom:15px;font-size:15px;font-weight:400}#contact_area .contact_form textarea{min-height:150px}#contact_area .contact_form input[type=submit]{background:#eb7966;width:200px;border:0;color:#fff;font-size:15px;font-weight:400;padding:15px}#footer_area{background:#11184f;position:relative}#footer_area .top{cursor:pointer;position:absolute;bottom:10px;right:10px}#footer_area .top i{width:40px;height:40px;background:#eb7966;color:#fff;padding-top:12px;display:block;border-radius:5px;transition:.3s}#footer_area .top i:hover{background:#f4c9c2}#footer_area .logo_area{width:200px;margin:0 auto 20px}#footer_area .socila_area ul{text-align:center;margin-bottom:20px}#footer_area .copyright{color:#fff}#footer_area .copyright p{font-size:13px}#footer_area .copyright p span{color:red}@media only screen and (min-width: 200px)and (max-width: 767px){#header_area .inner{display:block}#header_area .top_header_area .address,#header_area .top_header_area .phone_number,#header_area .top_header_area .email_address{display:none}#header_area .top_header_area .socila_area ul{text-align:center}#header_area .top_header_area .mobile_bars{display:block;position:absolute;right:10px;top:10px}#header_area .top_header_area .mobile_bars i{color:#fff;font-size:25px;cursor:pointer}#header_area .main_header .logo_area{width:200px;margin:0 auto}#hero_area .inner{flex-direction:column}#hero_area .admin_info{flex-basis:100%;padding:20px;order:2}#hero_area .admin_image{order:1;flex-basis:100%}#about_area .inner{flex-direction:column}#about_area .about_numbers{flex-basis:100%}#about_area .about_numbers .child_about h4{font-size:25px}#about_area .about_numbers .child_about h6{font-size:14px}#about_area .about_info{flex-basis:100%;padding:20px}#about_area .about_info h3{font-size:25px}#about_area .about_info h6{font-size:15px}#service_area .inner{flex-direction:column}#service_area .child_service{margin-bottom:25px;padding:20px}#service_area .child_service i{margin-bottom:10px}#service_area .child_service h4{font-size:22px;margin-bottom:10px}#service_area .child_service p{font-size:14px}#projects_area .inner-grid{display:block}#projects_area .child_project{margin-bottom:15px}#blog_area .inner{flex-direction:column}#blog_area .child_blog{margin-bottom:25px}#contact_area .inner,#contact_area .contact_info{flex-direction:column}#contact_area .contact_info div{padding:20px;margin-bottom:20px}#contact_area .contact_info iframe{margin-top:0;margin-bottom:20px}} -------------------------------------------------------------------------------- /aliHossain2.0.0/css/custom.min.css: -------------------------------------------------------------------------------- 1 | body,p{font-size:16px;font-weight:400}p{margin:0 0 15px}h1,h2,h3,h4,h5,h6{font-weight:900;margin:0 0 15px;line-height:1.2em}.container{width:1400px;margin:0 auto}@media only screen and (min-width: 200px)and (max-width: 767px){.container{width:96%}}.paddingXL{padding:60px 0}@media only screen and (min-width: 200px)and (max-width: 767px){.paddingXL{padding:25px 0}}.m-top{margin-top:45px}@media only screen and (min-width: 200px)and (max-width: 767px){.m-top{margin-top:25px}}.socila_area ul{text-align:right}.socila_area ul li{margin-left:15px}.socila_area ul a{display:block;background:#f4c9c2;width:40px;height:40px;font-size:15px;color:#11184f;text-align:center;padding-top:8px;border-radius:30px}.socila_area ul a i{margin:0}.socila_area ul a:hover{background:#11184f;color:#f4c9c2}.btn-cta{background:#eb7966;color:#fff;display:inline-block;padding:12px 25px;font-weight:600;border-radius:5px;margin-top:5px}.btn-cta:hover{background:#11184f}.title{font-size:60px;line-height:1em;margin-bottom:10px}@media only screen and (min-width: 200px)and (max-width: 767px){.title{font-size:25px}}.sub-title{font-size:25px;font-weight:600;line-height:1em;margin-bottom:0}@media only screen and (min-width: 200px)and (max-width: 767px){.sub-title{font-size:15px}}#header_area .top_header_area{background:#eb7966;padding:10px 0;position:relative}#header_area .top_header_area .mobile_bars{display:none}#header_area .top_header_area p{font-size:14px;font-weight:600;color:#fff;margin:8px 0 0}#header_area .top_header_area p i{display:inline-block;margin-right:8px}#header_area .main_header{background:#fff;padding:25px 0}#header_area .main_header .logo_area{flex-basis:30%}#header_area .main_header .main_menu{flex-basis:70%;margin-top:10px}#header_area .main_header .main_menu ul{text-align:right;display:flex;justify-content:end}#header_area .main_header .main_menu ul li{margin-left:25px}#header_area .main_header .main_menu ul li a{color:#11184f;font-size:16px;font-weight:600}#header_area .main_header .main_menu ul li a:hover{color:#eb7966}@media only screen and (min-width: 200px)and (max-width: 767px){#header_area .main_header .main_menu{background:#eb7966;position:absolute;width:96%;left:-99999px}#header_area .main_header .main_menu ul{flex-direction:column;text-align:left}#header_area .main_header .main_menu ul li{margin-left:0;margin-bottom:5px}#header_area .main_header .main_menu ul li:last-child{margin-bottom:0}#header_area .main_header .main_menu ul li a{color:#fff;display:block;padding:10px 15px}#header_area .main_header .main_menu ul li a:hover{background:#11184f;color:#fff}#header_area .main_header .main_menu.open{left:10px}}#hero_area{padding-top:60px;background:#f9ebea}#hero_area img{display:block}#hero_area .admin_info{flex-basis:40%;order:1;display:flex;flex-direction:column;justify-content:center}#hero_area .admin_info h2{font-size:65px;text-transform:uppercase;line-height:1em}#hero_area .admin_info h5{font-size:20px;font-weight:600;text-transform:uppercase;margin-bottom:0}#hero_area .admin_image{flex-basis:60%;order:2}#about_area .about_numbers{flex-basis:50%;display:flex;flex-wrap:wrap;justify-content:space-between}#about_area .about_numbers .child_about{flex-basis:48%;text-align:center;background:#f9ebea;padding:40px;border-radius:10px;margin-bottom:25px}#about_area .about_numbers .child_about h4{color:#11184f;margin:0;font-size:45px;font-weight:900}#about_area .about_numbers .child_about h6{color:#11184f;font-size:16px;font-weight:600;line-height:1em;margin:0}#about_area .about_info{flex-basis:46%;justify-content:center;display:flex;flex-direction:column}#about_area .about_info h3{color:#11184f;line-height:1em;font-size:35px;font-weight:900;text-transform:uppercase}#about_area .about_info h6{color:#11184f;line-height:1em;margin-bottom:5px;font-size:20px;font-weight:900;text-transform:uppercase}#service_area{background:#f9ebea}#service_area .child_service{padding:40px;background:#fff;flex-basis:32%;border-radius:10px;box-shadow:0 0 10px #ddd;transition:.5s}#service_area .child_service i{color:#eb7966;font-size:45px;margin-bottom:20px}#service_area .child_service h4{color:#11184f;font-size:25px;text-transform:uppercase}#service_area .child_service:hover{background:#11184f}#service_area .child_service:hover i{color:#f4c9c2}#service_area .child_service:hover h4,#service_area .child_service:hover p{color:#fff}#projects_area{background:#fff}#projects_area .child_project{margin:0;position:relative;overflow:hidden}#projects_area .child_project img{width:100%;height:100%}#projects_area .child_project .project_info{position:absolute;width:100%;height:100%;text-align:center;top:0;left:-9999px;z-index:99;display:flex;flex-direction:column;justify-content:center;transition:.3s}#projects_area .child_project .project_info h3{position:relative;z-index:999;color:#fff}#projects_area .child_project .project_info p{position:relative;z-index:999}#projects_area .child_project .project_info::after{background:#11184f;width:0%;height:100%;content:"";position:absolute;left:0;top:0;opacity:.5;transition:.3s}#projects_area .child_project .project_info:hover::after{width:100%}#projects_area .child_project:hover .project_info{left:0}#projects_area .project_x{grid-column:auto/span 2}#projects_area .project_y{grid-row:auto/span 2}#projects_area .project_xy{grid-column:auto/span 2;grid-row:auto/span 2}#blog_area{background:#f9ebea}#blog_area .child_blog{flex-basis:32%;transition:.3s}#blog_area .child_blog img{display:block}#blog_area .child_blog .blog_info{background:#fff;padding:25px}#blog_area .child_blog .blog_info h4{color:#11184f;font-size:25px;text-transform:uppercase}#contact_area{background:#fff}#contact_area .contact_info{flex-basis:60%;display:flex;flex-wrap:wrap;justify-content:space-between}#contact_area .contact_info div{background:#f9ebea;flex-basis:30%;flex-direction:column;justify-content:center;padding:40px;text-align:center;border-radius:10px}#contact_area .contact_info div i{display:block;color:#eb7966;font-size:25px;margin-bottom:20px}#contact_area .contact_info div p{color:#11184f;font-size:15px;font-weight:600;text-transform:uppercase}#contact_area .contact_info iframe{width:100%;border-radius:10px;margin-top:20px;border:0}#contact_area .contact_form{flex-basis:38%}#contact_area .contact_form input,#contact_area .contact_form textarea{border:1px solid #ddd;padding:10px;border-radius:5px;width:100%;margin-bottom:15px;font-size:15px;font-weight:400}#contact_area .contact_form textarea{min-height:150px}#contact_area .contact_form input[type=submit]{background:#eb7966;width:200px;border:0;color:#fff;font-size:15px;font-weight:400;padding:15px}#footer_area{background:#11184f;position:relative}#footer_area .top{cursor:pointer;position:absolute;bottom:10px;right:10px}#footer_area .top i{width:40px;height:40px;background:#eb7966;color:#fff;padding-top:12px;display:block;border-radius:5px;transition:.3s}#footer_area .top i:hover{background:#f4c9c2}#footer_area .logo_area{width:200px;margin:0 auto 20px}#footer_area .socila_area ul{text-align:center;margin-bottom:20px}#footer_area .copyright{color:#fff}#footer_area .copyright p{font-size:13px}#footer_area .copyright p span{color:red}@media only screen and (min-width: 768px)and (max-width: 1410px){.container{width:1140px}#projects_area .project_x{grid-column:auto/span 1}#projects_area .project_y{grid-row:auto/span 1}#projects_area .project_xy{grid-column:auto/span 1;grid-row:auto/span 1}#contact_area .contact_info div{padding:40px 25px;display:flex}}@media only screen and (min-width: 768px)and (max-width: 1199px){.container{width:96%}.socila_area ul li{margin-left:5px}#contact_area .contact_info div{padding:20px 15px}#header_area .top_header_area .container.inner div{flex-basis:20%}#header_area .top_header_area .container.inner div:first-child,#header_area .top_header_area .container.inner div:last-child{flex-basis:30%}#header_area .top_header_area p{font-size:13px;text-align:center}#header_area .top_header_area p i{display:block}#hero_area .inner{flex-direction:column}#hero_area .admin_info{flex-basis:100%;padding:20px;order:2}#hero_area .admin_image{order:1;flex-basis:100%}#about_area .about_numbers .child_about,#service_area .child_service{padding:25px 20px}#contact_area .inner,#contact_area .contact_info{flex-direction:column}#contact_area .contact_info div{padding:20px;margin-bottom:20px}#contact_area .contact_info iframe{margin-top:0;margin-bottom:20px}}@media only screen and (min-width: 200px)and (max-width: 767px){#header_area .inner{display:block}#header_area .top_header_area .address,#header_area .top_header_area .phone_number,#header_area .top_header_area .email_address{display:none}#header_area .top_header_area .socila_area ul{text-align:center}#header_area .top_header_area .mobile_bars{display:block;position:absolute;right:10px;top:10px}#header_area .top_header_area .mobile_bars i{color:#fff;font-size:25px;cursor:pointer}#header_area .main_header .logo_area{width:200px;margin:0 auto}#hero_area .inner{flex-direction:column}#hero_area .admin_info{flex-basis:100%;padding:20px;order:2}#hero_area .admin_info h2{font-size:45px}#hero_area .admin_image{order:1;flex-basis:100%}#about_area .inner{flex-direction:column}#about_area .about_numbers{flex-basis:100%}#about_area .about_numbers .child_about h4{font-size:25px}#about_area .about_numbers .child_about h6{font-size:14px}#about_area .about_info{flex-basis:100%;padding:20px}#about_area .about_info h3{font-size:25px}#about_area .about_info h6{font-size:15px}#service_area .inner{flex-direction:column}#service_area .child_service{margin-bottom:25px;padding:20px}#service_area .child_service i{margin-bottom:10px}#service_area .child_service h4{font-size:22px;margin-bottom:10px}#service_area .child_service p{font-size:14px}#projects_area .inner-grid{display:block}#projects_area .child_project{margin-bottom:15px}#blog_area .inner{flex-direction:column}#blog_area .child_blog{margin-bottom:25px}#contact_area .inner,#contact_area .contact_info{flex-direction:column}#contact_area .contact_info div{padding:20px;margin-bottom:20px}#contact_area .contact_info iframe{margin-top:0;margin-bottom:20px}} -------------------------------------------------------------------------------- /aliHossain3.0.0/css/custom.min.css: -------------------------------------------------------------------------------- 1 | body,p{font-size:16px;font-weight:400}p{margin:0 0 15px}h1,h2,h3,h4,h5,h6{font-weight:900;margin:0 0 15px;line-height:1.2em}.container{width:1400px;margin:0 auto}@media only screen and (min-width: 200px)and (max-width: 767px){.container{width:96%}}.paddingXL{padding:60px 0}@media only screen and (min-width: 200px)and (max-width: 767px){.paddingXL{padding:25px 0}}.m-top{margin-top:45px}@media only screen and (min-width: 200px)and (max-width: 767px){.m-top{margin-top:25px}}.socila_area ul{text-align:right}.socila_area ul li{margin-left:15px}.socila_area ul a{display:block;background:#f4c9c2;width:40px;height:40px;font-size:15px;color:#11184f;text-align:center;padding-top:8px;border-radius:30px}.socila_area ul a i{margin:0}.socila_area ul a:hover{background:#11184f;color:#f4c9c2}.socila_area ul i.fa-solid{display:block;background:#f4c9c2;width:40px;height:40px;font-size:15px;color:#11184f;text-align:center;padding-top:12px;transition:.3s;cursor:pointer;border-radius:30px}.socila_area ul i.fa-solid:hover{background:#fff;color:#f4c9c2}.btn-cta{background:#eb7966;color:#fff;display:inline-block;padding:12px 25px;font-weight:600;border-radius:5px;margin-top:5px}.btn-cta:hover{background:#11184f}.title{font-size:60px;line-height:1em;margin-bottom:10px}@media only screen and (min-width: 200px)and (max-width: 767px){.title{font-size:25px}}.sub-title{font-size:25px;font-weight:600;line-height:1em;margin-bottom:0}@media only screen and (min-width: 200px)and (max-width: 767px){.sub-title{font-size:15px}}#header_area .top_header_area{background:#eb7966;padding:10px 0;position:relative}#header_area .top_header_area .mobile_bars{display:none}#header_area .top_header_area p{font-size:14px;font-weight:600;color:#fff;margin:8px 0 0}#header_area .top_header_area p i{display:inline-block;margin-right:8px}#header_area .main_header{background:#fff;padding:25px 0}#header_area .main_header .logo_area{flex-basis:30%}#header_area .main_header .main_menu{flex-basis:70%;margin-top:10px}#header_area .main_header .main_menu ul{text-align:right;display:flex;justify-content:end}#header_area .main_header .main_menu ul li{margin-left:25px}#header_area .main_header .main_menu ul li a{color:#11184f;font-size:16px;font-weight:600}#header_area .main_header .main_menu ul li a:hover{color:#eb7966}@media only screen and (min-width: 200px)and (max-width: 767px){#header_area .main_header .main_menu{background:#eb7966;position:absolute;width:96%;left:-99999px}#header_area .main_header .main_menu ul{flex-direction:column;text-align:left}#header_area .main_header .main_menu ul li{margin-left:0;margin-bottom:5px}#header_area .main_header .main_menu ul li:last-child{margin-bottom:0}#header_area .main_header .main_menu ul li a{color:#fff;display:block;padding:10px 15px}#header_area .main_header .main_menu ul li a:hover{background:#11184f;color:#fff}#header_area .main_header .main_menu.open{left:10px}}#hero_area{padding-top:60px;background:#f9ebea}#hero_area img{display:block}#hero_area .admin_info{flex-basis:40%;order:1;display:flex;flex-direction:column;justify-content:center}#hero_area .admin_info h2{font-size:65px;text-transform:uppercase;line-height:1em}#hero_area .admin_info h5{font-size:20px;font-weight:600;text-transform:uppercase;margin-bottom:0}#hero_area .admin_image{flex-basis:60%;order:2}#about_area .about_numbers{flex-basis:50%;display:flex;flex-wrap:wrap;justify-content:space-between}#about_area .about_numbers .child_about{flex-basis:48%;text-align:center;background:#f9ebea;padding:40px;border-radius:10px;margin-bottom:25px}#about_area .about_numbers .child_about h4{color:#11184f;margin:0;font-size:45px;font-weight:900}#about_area .about_numbers .child_about h6{color:#11184f;font-size:16px;font-weight:600;line-height:1em;margin:0}#about_area .about_info{flex-basis:46%;justify-content:center;display:flex;flex-direction:column}#about_area .about_info h3{color:#11184f;line-height:1em;font-size:35px;font-weight:900;text-transform:uppercase}#about_area .about_info h6{color:#11184f;line-height:1em;margin-bottom:5px;font-size:20px;font-weight:900;text-transform:uppercase}#service_area{background:#f9ebea}#service_area .child_service{padding:40px;background:#fff;flex-basis:32%;border-radius:10px;box-shadow:0 0 10px #ddd;transition:.5s}#service_area .child_service i{color:#eb7966;font-size:45px;margin-bottom:20px}#service_area .child_service h4{color:#11184f;font-size:25px;text-transform:uppercase}#service_area .child_service:hover{background:#11184f}#service_area .child_service:hover i{color:#f4c9c2}#service_area .child_service:hover h4,#service_area .child_service:hover p{color:#fff}#projects_area{background:#fff}#projects_area .child_project{margin:0;position:relative;overflow:hidden}#projects_area .child_project img{display:block;width:100%;height:100%}#projects_area .child_project .project_info{position:absolute;width:100%;height:100%;text-align:center;top:0;left:-9999px;z-index:99;display:flex;flex-direction:column;justify-content:center;transition:.3s}#projects_area .child_project .project_info h3{position:relative;z-index:999;color:#fff}#projects_area .child_project .project_info p{position:relative;z-index:999}#projects_area .child_project .project_info::after{background:#11184f;width:0%;height:100%;content:"";position:absolute;left:0;top:0;opacity:.5;transition:.3s}#projects_area .child_project .project_info:hover::after{width:100%}#projects_area .child_project:hover .project_info{left:0}#projects_area .project_x{grid-column:auto/span 2}#projects_area .project_y{grid-row:auto/span 2}#projects_area .project_xy{grid-column:auto/span 2;grid-row:auto/span 2}#blog_area{background:#f9ebea}#blog_area .child_blog{flex-basis:32%;transition:.3s}#blog_area .child_blog img{display:block}#blog_area .child_blog .blog_info{background:#fff;padding:25px}#blog_area .child_blog .blog_info h4{color:#11184f;font-size:25px;text-transform:uppercase}#contact_area{background:#fff}#contact_area .contact_info{flex-basis:60%;display:flex;flex-wrap:wrap;justify-content:space-between}#contact_area .contact_info div{background:#f9ebea;flex-basis:30%;flex-direction:column;justify-content:center;padding:40px;text-align:center;border-radius:10px}#contact_area .contact_info div i{display:block;color:#eb7966;font-size:25px;margin-bottom:20px}#contact_area .contact_info div p{color:#11184f;font-size:15px;font-weight:600;text-transform:uppercase}#contact_area .contact_info iframe{width:100%;border-radius:10px;margin-top:20px;border:0}#contact_area .contact_form{flex-basis:38%}#contact_area .contact_form input,#contact_area .contact_form textarea{border:1px solid #ddd;padding:15px;border-radius:5px;width:100%;margin-bottom:15px;font-size:15px;font-weight:400}#contact_area .contact_form textarea{min-height:150px}#contact_area .contact_form input[type=submit]{background:#eb7966;width:200px;border:0;color:#fff;font-size:15px;font-weight:400;padding:15px}#footer_area{background:#11184f;position:relative}#footer_area .top{cursor:pointer;position:absolute;bottom:10px;right:10px}#footer_area .top i{width:40px;height:40px;background:#eb7966;color:#fff;padding-top:12px;display:block;border-radius:5px;transition:.3s}#footer_area .top i:hover{background:#f4c9c2}#footer_area .logo_area{width:200px;margin:0 auto 20px}#footer_area .socila_area ul{text-align:center;margin-bottom:20px}#footer_area .copyright{color:#fff}#footer_area .copyright p{font-size:13px}#footer_area .copyright p span{color:red}@media only screen and (min-width: 768px)and (max-width: 1410px){.container{width:1140px}#projects_area .project_x{grid-column:auto/span 1}#projects_area .project_y{grid-row:auto/span 1}#projects_area .project_xy{grid-column:auto/span 1;grid-row:auto/span 1}#contact_area .contact_info div{padding:40px 25px;display:flex}}@media only screen and (min-width: 768px)and (max-width: 1199px){.container{width:96%}.socila_area ul li{margin-left:5px}#contact_area .contact_info div{padding:20px 15px}#header_area .top_header_area .container.inner div{flex-basis:20%}#header_area .top_header_area .container.inner div:first-child,#header_area .top_header_area .container.inner div:last-child{flex-basis:30%}#header_area .top_header_area p{font-size:13px;text-align:center}#header_area .top_header_area p i{display:block}#hero_area .inner{flex-direction:column}#hero_area .admin_info{flex-basis:100%;padding:20px;order:2}#hero_area .admin_image{order:1;flex-basis:100%}#about_area .about_numbers .child_about,#service_area .child_service{padding:25px 20px}#contact_area .inner,#contact_area .contact_info{flex-direction:column}#contact_area .contact_info div{padding:20px;margin-bottom:20px}#contact_area .contact_info iframe{margin-top:0;margin-bottom:20px}}@media only screen and (min-width: 200px)and (max-width: 767px){#header_area .inner{display:block}#header_area .top_header_area .address,#header_area .top_header_area .phone_number,#header_area .top_header_area .email_address{display:none}#header_area .top_header_area .socila_area ul{text-align:center}#header_area .top_header_area .mobile_bars{display:block;position:absolute;right:10px;top:10px}#header_area .top_header_area .mobile_bars i{color:#fff;font-size:25px;cursor:pointer}#header_area .main_header .logo_area{width:200px;margin:0 auto}#hero_area .inner{flex-direction:column}#hero_area .admin_info{flex-basis:100%;padding:20px;order:2}#hero_area .admin_info h2{font-size:45px}#hero_area .admin_image{order:1;flex-basis:100%}#about_area .inner{flex-direction:column}#about_area .about_numbers{flex-basis:100%}#about_area .about_numbers .child_about h4{font-size:25px}#about_area .about_numbers .child_about h6{font-size:14px}#about_area .about_info{flex-basis:100%;padding:20px}#about_area .about_info h3{font-size:25px}#about_area .about_info h6{font-size:15px}#service_area .inner{flex-direction:column}#service_area .child_service{margin-bottom:25px;padding:20px}#service_area .child_service i{margin-bottom:10px}#service_area .child_service h4{font-size:22px;margin-bottom:10px}#service_area .child_service p{font-size:14px}#projects_area .inner-grid{display:block}#projects_area .child_project{margin-bottom:15px}#blog_area .inner{flex-direction:column}#blog_area .child_blog{margin-bottom:25px}#contact_area .inner,#contact_area .contact_info{flex-direction:column}#contact_area .contact_info div{padding:20px;margin-bottom:20px}#contact_area .contact_info iframe{margin-top:0;margin-bottom:20px}}body.dark .socila_area ul li a:hover{background:#fff}body.dark #header_area .top_header_area{background:#1f1f1f}body.dark #header_area .main_header{background:#262626}body.dark #header_area .main_header .main_menu ul li a{color:#f4c9c2}body.dark #hero_area{background:#1f1f1f}body.dark #hero_area .admin_info h2,body.dark #hero_area .admin_info h5,body.dark #hero_area .admin_info p{color:#fff}body.dark #about_area{background:#262626}body.dark #about_area .container.text-center{color:#fff}body.dark #about_area .about_numbers .child_about{background:#1f1f1f}body.dark #about_area .about_numbers .child_about h4,body.dark #about_area .about_numbers .child_about h6{color:#f4c9c2}body.dark #about_area .about_info{color:#fff}body.dark #about_area .about_info h3,body.dark #about_area .about_info h6{color:#fff}body.dark #service_area{background:#1f1f1f}body.dark #service_area .container.text-center{color:#fff}body.dark #service_area .child_service{background:#262626;box-shadow:none}body.dark #service_area .child_service h4{color:#f4c9c2}body.dark #service_area .child_service p{color:#fff}body.dark #projects_area{background:#262626}body.dark #projects_area .container.text-center{color:#fff}body.dark #blog_area{background:#1f1f1f}body.dark #blog_area .container.text-center{color:#fff}body.dark #blog_area .child_blog .blog_info{background:#262626}body.dark #blog_area .child_blog .blog_info h4 a,body.dark #blog_area .child_blog .blog_info p{color:#fff}body.dark #contact_area{background:#262626}body.dark #contact_area .container.text-center{color:#fff}body.dark #contact_area .contact_info div{background:#1f1f1f}body.dark #contact_area .contact_info div p{color:#fff}body.dark #contact_area .contact_form input,body.dark #contact_area .contact_form textarea{background:#1f1f1f;border-color:#262626;color:#fff}body.dark #contact_area .contact_form input[type=submit]{background:#eb7966}body.dark #footer_area{background:#1f1f1f} -------------------------------------------------------------------------------- /aliHossainhtml/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ali Hossain | Web Developer 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |

123, Your Location, Country - 1234

35 |
36 |
37 |

0123 4567 89510

38 |
39 | 42 |
43 |
    44 |
    • 45 |
    • 46 |
    • 47 |
    • 48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | 56 |
57 | 67 |
68 |
69 |
70 | 71 | 72 |
73 |
74 |
75 |
This is me
76 |

Ali Hossain

77 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis harum minima, odit consequatur eaque 78 | aperiam.

79 |

Discover Now

80 |
81 |
82 | 83 |
84 |
85 |
86 | 87 | 88 |
89 |
90 |

About Me

91 |
Personal Details
92 |
93 |
94 |
95 |
96 |

5000

97 |
Projects Done
98 |
99 |
100 |

1200

101 |
Happy Clients
102 |
103 |
104 |

500

105 |
Cups of Coffee
106 |
107 |
108 |

584

109 |
Working Hours
110 |
111 |
112 |
113 |
About Me
114 |

A Web Developer based in Bangladesh

115 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nobis inventore quos id, veniam soluta.

116 |

Download CV

117 |
118 |
119 |
120 | 121 | 122 |
123 |
124 |

Services

125 |
What service I offer for you.
126 |
127 |
128 |
129 | 130 |

Web Development

131 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 132 |

133 |
134 |
135 | 136 |

Graphic Design

137 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 138 |

139 |
140 |
141 | 142 |

Mobile App Design

143 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 144 |

145 |
146 |
147 |
148 | 149 | 150 |
151 |
152 |

Projects

153 |
Checkout my Recent Client Work
154 |
155 |
156 |
157 | 158 |
159 |

Project Title

160 |

Learn More

161 |
162 |
163 |
164 | 165 |
166 |

Project Title

167 |

Learn More

168 |
169 |
170 |
171 | 172 |
173 |

Project Title

174 |

Learn More

175 |
176 |
177 |
178 | 179 |
180 |

Project Title

181 |

Learn More

182 |
183 |
184 |
185 | 186 |
187 |

Project Title

188 |

Learn More

189 |
190 |
191 |
192 |
193 | 194 | 195 |
196 |
197 |

Blog

198 |
Latest Story
199 |
200 |
201 |
202 | 203 |
204 |

Blog Title Here

205 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

206 | Read More 207 |
208 |
209 |
210 | 211 |
212 |

Blog Title Here

213 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

214 | Read More 215 |
216 |
217 |
218 | 219 |
220 |

Blog Title Here

221 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

222 | Read More 223 |
224 |
225 |
226 |
227 | 228 | 229 |
230 |
231 |

Contact

232 |
Get in Touch
233 |
234 |
235 |
236 |
237 |

123, Your Location, Country - 1234

238 |
239 |
240 |

0123 4567 89510

241 |
242 | 245 | 248 |
249 |
250 |
251 | 252 | 253 | 254 | 255 | 256 |
257 |
258 |
259 |
260 | 261 | 262 | 283 | 284 | 285 | 286 | 287 | -------------------------------------------------------------------------------- /aliHossain2.0.0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ali Hossain | Web Developer 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |

123, Your Location, Country - 1234

35 |
36 |
37 |

0123 4567 89510

38 |
39 | 42 |
43 |
    44 |
    • 45 |
    • 46 |
    • 47 |
    • 48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | 56 |
57 | 67 |
68 |
69 |
70 | 71 | 72 |
73 |
74 |
75 |
This is me
76 |

Ali Hossain

77 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis harum minima, odit consequatur eaque 78 | aperiam.

79 |

Discover Now

80 |
81 |
82 | 83 |
84 |
85 |
86 | 87 | 88 |
89 |
90 |

About Me

91 |
Personal Details
92 |
93 |
94 |
95 |
96 |

5000

97 |
Projects Done
98 |
99 |
100 |

1200

101 |
Happy Clients
102 |
103 |
104 |

500

105 |
Cups of Coffee
106 |
107 |
108 |

584

109 |
Working Hours
110 |
111 |
112 |
113 |
About Me
114 |

A Web Developer based in Bangladesh

115 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nobis inventore quos id, veniam soluta.

116 |

Download CV

117 |
118 |
119 |
120 | 121 | 122 |
123 |
124 |

Services

125 |
What service I offer for you.
126 |
127 |
128 |
129 | 130 |

Web Development

131 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 132 |

133 |
134 |
135 | 136 |

Graphic Design

137 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 138 |

139 |
140 |
141 | 142 |

Mobile App Design

143 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 144 |

145 |
146 |
147 |
148 | 149 | 150 |
151 |
152 |

Projects

153 |
Checkout my Recent Client Work
154 |
155 |
156 |
157 | 158 |
159 |

Project Title

160 |

Learn More

161 |
162 |
163 |
164 | 165 |
166 |

Project Title

167 |

Learn More

168 |
169 |
170 |
171 | 172 |
173 |

Project Title

174 |

Learn More

175 |
176 |
177 |
178 | 179 |
180 |

Project Title

181 |

Learn More

182 |
183 |
184 |
185 | 186 |
187 |

Project Title

188 |

Learn More

189 |
190 |
191 |
192 |
193 | 194 | 195 |
196 |
197 |

Blog

198 |
Latest Story
199 |
200 |
201 |
202 | 203 |
204 |

Blog Title Here

205 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

206 | Read More 207 |
208 |
209 |
210 | 211 |
212 |

Blog Title Here

213 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

214 | Read More 215 |
216 |
217 |
218 | 219 |
220 |

Blog Title Here

221 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

222 | Read More 223 |
224 |
225 |
226 |
227 | 228 | 229 |
230 |
231 |

Contact

232 |
Get in Touch
233 |
234 |
235 |
236 |
237 |

123, Your Location, Country - 1234

238 |
239 |
240 |

0123 4567 89510

241 |
242 | 245 | 248 |
249 |
250 |
251 | 252 | 253 | 254 | 255 | 256 |
257 |
258 |
259 |
260 | 261 | 262 | 283 | 284 | 285 | 286 | 287 | -------------------------------------------------------------------------------- /aliHossain3.0.0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ali Hossain | Web Developer 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |

123, Your Location, Country - 1234

35 |
36 |
37 |

0123 4567 89510

38 |
39 | 42 |
43 |
    44 |
    • 45 |
    • 46 |
    • 47 |
    • 48 |
    • 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 | 68 |
69 |
70 |
71 | 72 | 73 |
74 |
75 |
76 |
This is me
77 |

Ali Hossain

78 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis harum minima, odit consequatur eaque 79 | aperiam.

80 |

Discover Now

81 |
82 |
83 | 84 |
85 |
86 |
87 | 88 | 89 |
90 |
91 |

About Me

92 |
Personal Details
93 |
94 |
95 |
96 |
97 |

5000

98 |
Projects Done
99 |
100 |
101 |

1200

102 |
Happy Clients
103 |
104 |
105 |

500

106 |
Cups of Coffee
107 |
108 |
109 |

584

110 |
Working Hours
111 |
112 |
113 |
114 |
About Me
115 |

A Web Developer based in Bangladesh

116 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nobis inventore quos id, veniam soluta.

117 |

Download CV

118 |
119 |
120 |
121 | 122 | 123 |
124 |
125 |

Services

126 |
What service I offer for you.
127 |
128 |
129 |
130 | 131 |

Web Development

132 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 133 |

134 |
135 |
136 | 137 |

Graphic Design

138 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 139 |

140 |
141 |
142 | 143 |

Mobile App Design

144 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nobis ea exercitationem fuga sequi dolore? 145 |

146 |
147 |
148 |
149 | 150 | 151 |
152 |
153 |

Projects

154 |
Checkout my Recent Client Work
155 |
156 |
157 |
158 | 159 |
160 |

Project Title

161 |

Learn More

162 |
163 |
164 |
165 | 166 |
167 |

Project Title

168 |

Learn More

169 |
170 |
171 |
172 | 173 |
174 |

Project Title

175 |

Learn More

176 |
177 |
178 |
179 | 180 |
181 |

Project Title

182 |

Learn More

183 |
184 |
185 |
186 | 187 |
188 |

Project Title

189 |

Learn More

190 |
191 |
192 |
193 |
194 | 195 | 196 |
197 |
198 |

Blog

199 |
Latest Story
200 |
201 |
202 |
203 | 204 |
205 |

Blog Title Here

206 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

207 | Read More 208 |
209 |
210 |
211 | 212 |
213 |

Blog Title Here

214 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

215 | Read More 216 |
217 |
218 |
219 | 220 |
221 |

Blog Title Here

222 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ipsam ut et ipsa laborum aliquam.

223 | Read More 224 |
225 |
226 |
227 |
228 | 229 | 230 |
231 |
232 |

Contact

233 |
Get in Touch
234 |
235 |
236 |
237 |
238 |

123, Your Location, Country - 1234

239 |
240 |
241 |

0123 4567 89510

242 |
243 | 246 | 249 |
250 |
251 |
252 | 253 | 254 | 255 | 256 | 257 |
258 |
259 |
260 |
261 | 262 | 263 | 284 | 285 | 286 | 287 | 288 | --------------------------------------------------------------------------------