├── .DS_Store ├── .htaccess ├── 404.html ├── CNAME ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── README.md ├── about.html ├── assets ├── .DS_Store ├── css │ ├── darktheme.css │ └── style.css ├── img │ ├── 1.png │ ├── 11.svg │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 404.gif │ ├── Vecteezy_Diwali-Illustration_ba1020.jpg │ ├── about.svg │ ├── banner.png │ ├── bg.jpg │ ├── blog.jpg │ ├── blog.png │ ├── chinesefood.jpeg │ ├── chinesefood.jpg │ ├── contact.jpg │ ├── contact2.jpg │ ├── contact3.jpg │ ├── developer.png │ ├── email.png │ ├── fitness.png │ ├── food.png │ ├── google.png │ ├── hacktoberfest.png │ ├── hero-blog.jpg │ ├── home.svg │ ├── leaves.png │ ├── micro.jpg │ ├── phone-call.png │ ├── saudi.png │ ├── tmz.png │ ├── tree.jpeg │ └── user.png └── js │ ├── about.js │ ├── darktheme.js │ └── index.js ├── blogpost.html ├── contact.html ├── contributors.html └── index.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/.DS_Store -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | ErrorDocument 404 /404.html -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | DevBlog - NOT FOUND 13 | 14 | 15 | 16 |

17 |

18 |

19 |

20 |

21 |

22 |

404

23 | 24 | 25 |

26 | 27 |

28 |

29 | Look like you're lost 30 |

31 | 32 |

The page you are looking for is not avaible!

33 | 34 | Go back to Home 35 | 36 |

37 |

38 |

39 |

40 |

41 |

42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | devblog.jineshnagori.in -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Why is program documentation important? 2 | -> The main purpose of program documentation is to describe the design of your program.
3 | -> The documentation also provides the framework in which to place the code.
4 | -> as coding progresses, the code is inserted into the framework already created by the program documentation.
5 | -> Documentation is important to tell other programmers what the program does and how it works.
6 | -> In the "real world" and in some classes here at BGSU, programmers often work in teams to develop code.
7 | -> Documentation helps others on the team to understand your work.
8 | -> Maintenance and debugging are needed sooner or later for most programs and these are frequently done by someone other than the original programmer.
9 | -> Documentation can help the programmer who is making the modifications understand your code.
10 | -> Documenting your program during development helps you to maintain your sanity.

11 |

12 | 13 | ## When should program documentation be done? 14 | 15 | -> When designing your program, you must spend time thinking about how to structure your program, what modules are needed, and the algorithms and processes you will use in the modules.
16 | -> You must think about what sort of data structures and objects (e.g., arrays, files or linked lists) are needed.
17 | -> This thinking must be done before you start coding, or you will find yourself wasting time writing useless code that is full of errors.
18 | -> It is very important to record this creative process so that the programmers that follow you do not duplicate work that you have already done.
19 |
20 | -> Before writing the code, you should write the documentation to describe the design of each component of your program.
21 | -> Writing documentation for the modules before writing the code helps you define exactly what each module should do and how it will interact with other modules.
22 | -> Focusing on the design and the steps needed to solve the problem can help prevent errors in the completed program.

23 |

24 | 25 | ## What information should be in the program documentation? 26 | For an individual module, it is important to record
27 | (1) who has written the module,
28 | (2) when the module was written or modified,
29 | (3) why the module was written or modified,
30 | (4) how the module interacts with other modules,
31 | (5) what special algorithms were used, if any, and
32 | (6) acknowledge outside sources for ideas and algorithms.
33 |

-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![image](https://github.com/jineshnagori/hacktoberfest2023-WebDev/blob/main/assets/img/hacktoberfest.png) 2 | 3 |

Hacktoberfest 2023

4 | 5 |

6 | 7 | Link To HacktoberFest 2023 8 | 9 |

10 | 11 | ## Event details : 12 | 13 | - Hacktoberfest is a **month-long** challenge. It happens every year in October. 14 | - Hacktoberfest is open to everyone and it marks the celebration of Open Source. It's the biggest Open Source event that encourages newbies to participate in Open Source and create their 1st meaningful PR. 15 | - Hacktoberfest will be hosted by Digital Ocean for the 9th year in a row in partnership with GitHub and other companies. 16 | - Hacktoberfest® is **open to everyone** in our global community. Whether you’re a developer, a student learning to code, an event host, or a company of any size, you can help drive the growth of open source and make positive contributions to an ever-growing community. 17 | - All backgrounds and skill levels are encouraged to complete the challenge. 18 | - Hacktoberfest is a celebration open to everyone in our global community. 19 | - You can sign up **anytime between September 26 and October 31**. 20 | --- 21 | 22 | ## How to participate? 23 | 24 | ### Step - 1: 25 | 26 | Create a GitHub account, if you don't already have one. 27 | 28 | ### Step - 2: 29 | 30 | Register for Hacktoberfest: Navigate to the [Hacktoberfest registration page](https://hacktoberfest.com/) and follow the instructions. But, read the rules carefully before you do and then sign In using your GitHub credentials. 31 | 32 | ### Step - 3: 33 | 34 | Find good projects worth contributing to on the GitHub page. You can type `label:hactoberfest is:issue is:open` 35 | 36 | You can add a language label of your choice to filter open issues. If you are a beginner and can’t find good issues then there’s tag `label:good first issue` which filters out issues for beginners who want to contribute. 37 | 38 | Here's something beginner-friendly for you: 39 | 40 | - https://www.firsttimersonly.com/ 41 | - https://github.com/mungell/awesome-for-beginners 42 | 43 | ### Step - 4: 44 | 45 | Submit PRs: Try and submit at least **_4 PRs_** and wait for it to be verified. Make sure to submit quality PRs. 46 | 47 | --- 48 | 49 | ## HacktoberFest Rules : 50 | 51 | - To earn your Hacktoberfest tee or tree reward, you must **register** and make **four valid pull requests** (PRs) between October 1-31 (in any time zone). 52 | - Pull requests can be made in any participating GitHub or GitLab hosted repository/project. Look for the `hacktoberfest` topic to know if a repository/project is participating in Hacktoberfest. 53 | - Pull requests must be approved by a maintainer of the repository/project to count. 54 | - If a maintainer reports your pull request as spam or behavior not in line with the project’s code of conduct, you will be ineligible to participate. 55 | - This year, the first **40,000** participants who successfully complete the challenge will be eligible to receive a prize. 56 | 57 | For your PR to count it must be: 58 | 59 | - Submitted in a public repo, AND the PR is labelled as `hacktoberfest-accepted` by a maintainer. or 60 | - Submitted in a repo labelled `hacktoberfest` , AND Merged, OR Approved 61 | - You can opt not to receive a t-shirt and stickers and you can choose to have a tree planted in your name and help make Hacktoberfest 2023 more carbon neutral. 62 | 63 | --- 64 | 65 |

Whether it’s your first or fiftieth pull request, there’s always more to learn! We’ve put together a few resources that can help you create quality pull requests, keep your repositories pristine, and build on your open source knowledge.

66 | 67 | --- 68 | 69 |

70 | 71 | Join Discord Conversation 72 | 73 |

74 | 75 | --- 76 | 77 | ## Rules To Contribute To This Repo 78 | 79 | - You can write web development code in HTML, CSS, and JavaScript. 80 | - Follow file naming conventions for all your pull requests. 81 | - While adding any content it should be inside its appropiate directory. 82 | - If there is any problem with inaccurate solution create an issue! 83 | 84 | ## Steps For Contribution 85 | 86 | 1. Fork this repo 87 | 2. Star this repo 88 | 3. Add a file inside appropriate folder 89 | 4. Commit the code 90 | 5. Make pull request 91 | 92 | --- 93 | 94 | ### FEATURES 95 | 96 | 1. Beginner-friendly. 97 | 2. Targeted for developers, content writers, and programming enthusiasts. 98 | 3. Would also help participants who are not familiar with development but are eager to participate in open source. 99 | 100 | --- 101 | 102 | ```javascript 103 | 104 | _____ _ _ __ __ 105 | |_ _| |__ __ _ _ __ | | __ \ \ / /__ _ _ 106 | | | | '_ \ / _` | '_ \| |/ / \ V / _ \| | | | 107 | | | | | | | (_| | | | | < | | (_) | |_| | 108 | |_| |_| |_|\__,_|_| |_|_|\_\ |_|\___/ \__,_| 109 | 110 | 111 | ``` 112 | 113 | --- 114 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DevBlog | About 8 | 9 | 10 | 14 | 18 | 19 | 20 | 44 | 45 | 46 | 47 | 60 | 61 | 62 |

65 |

66 | 69 | 80 | 81 |

82 | 114 | 177 |

178 |

179 |

180 | 181 |

182 |

183 |

184 | 185 |

186 |

187 |

About DevBlog

188 |

189 |

190 |

191 |

At DevBlog,We're not just 192 | developers; we're passionate creators, problem solvers, and innovators, and we're here to share our 193 | insights, experiences, and knowledge with you. 194 |
195 | Our mission is to be your go-to resource for everything related to software development and 196 | technology. Whether you're a coding novice or an 197 | experienced developer looking to stay on the cutting edge, we've got something for you.
198 | Explore our deep dives into programming languages and frameworks and stay updated with the latest industry 199 | trends. 200 |
201 |
202 | Welcome to our dev community, and let's code, create, and innovate together! 203 | 204 | 205 | 206 |

207 |

208 | 209 |

210 | 211 |

212 | 213 | 214 |

215 |

216 |

217 |

218 |

219 |
220 |
221 | 222 |

223 |

224 | 225 |

Introduction

226 | 227 | 228 |

229 |

230 | We're a hosted version of the open source software, DevBlog. 231 | Because when you have the freedom to create, express yourself, 232 | and earn money online, the impossible becomes business as usual. 233 |

234 |

235 |

236 | 237 |
238 | 239 |

240 | 241 |

242 | Everyone has a voice and something to express 243 |

244 | 245 | 246 | 247 |

248 |

249 | Ideas don't belong behind high walls. Software and your posts 250 | shouldn't either. We're here to help you express yourself. 251 |

252 |

253 |

254 |
255 | 256 |

257 | 258 |

Freedom and Ownership

259 | 260 | 261 |

262 |

263 | Whether it's a blog, store, portfolio, or something entirely 264 | different, you have the freedom to create a site that fits you, 265 | and own all of your content and data too. 266 |

267 | 268 |

269 | 270 |

271 | 272 |
273 |

274 | 275 |

Real support from real people

276 | 277 | 278 |

279 |

280 | Customer service isn't something we offer. It's who we are. We 281 | call it Happiness—real support delivered by real human beings. 282 |

283 |

284 |

285 | 286 |

287 |

288 |
289 |
290 |
291 |
292 | 293 |

294 | 336 |

337 |

338 | 339 | 340 | 341 | 342 | 367 | 368 | 372 | 373 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/.DS_Store -------------------------------------------------------------------------------- /assets/css/darktheme.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&display=swap"); 3 | 4 | :root { 5 | --main-bg-color: #bd6418; 6 | /* --main-bg-color: black; */ 7 | --font1: "Baloo Bhaina 2", cursive; 8 | --font2: "Roboto", sans-serif; 9 | --articles-bg: rgb(18, 18, 18); 10 | --font-color: white; 11 | } 12 | 13 | ::-webkit-scrollbar-track { 14 | --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 15 | background-color: #f5f5f5; 16 | } 17 | 18 | ::-webkit-scrollbar { 19 | width: 10px; 20 | background-color: #f5f5f5; 21 | } 22 | 23 | ::-webkit-scrollbar-thumb { 24 | background-color: var(--main-bg-color); 25 | background-image: -webkit-linear-gradient(45deg, 26 | rgba(255, 255, 255, 0.2) 25%, 27 | transparent 25%, 28 | transparent 50%, 29 | rgba(255, 255, 255, 0.2) 50%, 30 | rgba(255, 255, 255, 0.2) 75%, 31 | transparent 75%, 32 | transparent); 33 | } 34 | 35 | /* changes */ 36 | 37 | .nav-icon { 38 | color: white; 39 | } 40 | 41 | .bg-light { 42 | background-color: #282d32 !important; 43 | } 44 | 45 | hr { 46 | color: white; 47 | } 48 | 49 | .nav-link { 50 | color: white !important; 51 | } 52 | 53 | #themeBtn { 54 | border: none; 55 | background-color: transparent; 56 | padding-left: 14px; 57 | } 58 | 59 | #themeBtn #sun { 60 | display: none; 61 | } 62 | 63 | .navbar-light .navbar-toggler { 64 | color: rgba(255,255,255,.55); 65 | border-color: rgba(255,255,255,.1); 66 | } 67 | 68 | .navbar-light .navbar-toggler-icon { 69 | background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); 70 | } 71 | 72 | 73 | /* changes */ 74 | 75 | body { 76 | margin: 0; 77 | padding: 0; 78 | box-sizing: border-box; 79 | background-color: var(--articles-bg); 80 | } 81 | 82 | .center { 83 | text-align: center; 84 | } 85 | 86 | .font1 { 87 | font-family: var(--font1); 88 | color: var(--font-color) !important; 89 | } 90 | 91 | .font2 { 92 | font-family: var(--font2); 93 | color: var(--font-color); 94 | } 95 | 96 | .max-width-1 { 97 | max-width: 90vw; 98 | } 99 | 100 | .max-width-2 { 101 | max-width: 60vw; 102 | } 103 | 104 | .m-auto { 105 | margin: auto; 106 | } 107 | 108 | .mt-8 { 109 | margin-top: 40px; 110 | } 111 | 112 | .mx-1 { 113 | margin-left: 23px; 114 | margin-right: 23px; 115 | } 116 | 117 | .my-2 { 118 | margin-top: 32px; 119 | margin-bottom: 32px; 120 | font-size: 1rem; 121 | } 122 | 123 | .featured { 124 | color: white; 125 | text-align: center; 126 | font-size: 1rem; 127 | } 128 | 129 | .btn { 130 | padding: 8px 16px; 131 | border: 2px solid transparent; 132 | border-radius: 50px; 133 | font-family: var(--font1); 134 | font-size: 16px; 135 | cursor: pointer; 136 | transition: all 0.3s ease-in-out; 137 | } 138 | 139 | .btn:hover { 140 | border: 2px solid white; 141 | background: transparent 142 | } 143 | 144 | .form-input { 145 | padding: 0px 5px; 146 | padding-top: 3px; 147 | font-size: 16px; 148 | border: 2px solid black; 149 | border-radius: 4px; 150 | margin: 0 13px; 151 | font-family: var(--font1); 152 | } 153 | 154 | .contact-content { 155 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 156 | border-radius: 18px; 157 | } 158 | 159 | .form-box input, 160 | textarea { 161 | width: 52vw; 162 | 163 | border-radius: 5px; 164 | background-color: #e7e7e7; 165 | } 166 | 167 | * { 168 | margin: 0; 169 | padding: 0; 170 | } 171 | 172 | .navigation { 173 | margin-top: 25px; 174 | font-family: var(--font1); 175 | /* height: 74px; */ 176 | display: flex; 177 | justify-content: space-between; 178 | align-items: center; 179 | } 180 | 181 | .nav-left { 182 | display: flex; 183 | } 184 | 185 | .nav-left span { 186 | font-size: 35px; 187 | padding-top: 10px; 188 | } 189 | 190 | .nav-left ul { 191 | display: flex; 192 | align-items: center; 193 | margin: 0 77px; 194 | font-size: 22px; 195 | padding-bottom: 23px; 196 | } 197 | 198 | .nav-left ul li { 199 | list-style: none; 200 | margin: 0 14px; 201 | font-family: var(--font2); 202 | transition: all 0.3s ease-in-out; 203 | } 204 | 205 | .nav-left ul li a { 206 | text-decoration: none; 207 | color: var(--font-color); 208 | } 209 | 210 | .nav-left ul li a:hover { 211 | color: var(--main-bg-color); 212 | font-weight: bolder; 213 | } 214 | 215 | .space { 216 | width: 100%; 217 | height: 5rem; 218 | } 219 | 220 | .content { 221 | display: flex; 222 | justify-content: space-between; 223 | margin-top: 40px !important; 224 | padding-top: 30px; 225 | padding: 9px; 226 | position: relative; 227 | } 228 | 229 | .content::after { 230 | content: ""; 231 | display: flex; 232 | justify-content: space-between; 233 | position: absolute; 234 | width: 100%; 235 | height: inherit; 236 | opacity: 0.15; 237 | } 238 | 239 | .content::before { 240 | content: ""; 241 | background-size: cover; 242 | position: absolute; 243 | top: 0px; 244 | right: 0px; 245 | bottom: 0px; 246 | left: 0px; 247 | /* background-image: url(../img/leaves.png); */ 248 | /* background-image: url(../img/bg.png); */ 249 | background-image: url(../img/bg.jpg); 250 | opacity: 0.45; 251 | } 252 | 253 | .content-left { 254 | font-family: var(--font1); 255 | display: flex; 256 | flex-direction: column; 257 | justify-content: center; 258 | padding: 49px; 259 | z-index: 1; 260 | } 261 | 262 | .content-left h1 { 263 | font-size: 5rem; 264 | line-height: 4.5rem; 265 | font-family: var(--font1); 266 | font-weight: 500; 267 | padding-bottom: 2rem; 268 | } 269 | 270 | .content-right { 271 | display: flex; 272 | align-items: center; 273 | justify-content: center; 274 | } 275 | 276 | .content-right img { 277 | height: 600px; 278 | width: 600px; 279 | z-index: 10; 280 | margin-top: 50px; 281 | margin-bottom: 30px; 282 | padding: 25px; 283 | border-radius: 50%; 284 | } 285 | 286 | /* contact */ 287 | #contact input[type="text"], 288 | #contact input[type="email"], 289 | #contact input[type="tel"], 290 | #contact input[type="url"], 291 | #contact textarea, 292 | #contact button[type="submit"] { 293 | font: 400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; 294 | } 295 | 296 | #contact { 297 | background: var(--articles-bg); 298 | padding-left: 200px; 299 | padding-right: 200px; 300 | margin: 50px 0; 301 | } 302 | 303 | #contact h3 { 304 | text-align: center; 305 | color: #f96; 306 | display: block; 307 | font-size: 30px; 308 | font-weight: 400; 309 | } 310 | 311 | #contact h4 { 312 | text-align: center; 313 | margin: 5px 0 15px; 314 | display: block; 315 | font-size: 13px; 316 | color: white; 317 | } 318 | 319 | fieldset { 320 | border: medium none !important; 321 | margin: 0 0 10px; 322 | min-width: 100%; 323 | padding: 0; 324 | width: 100%; 325 | } 326 | 327 | #contact input[type="text"], 328 | #contact input[type="email"], 329 | #contact input[type="tel"], 330 | #contact input[type="url"], 331 | #contact textarea { 332 | width: 100%; 333 | border: 1px solid #ccc; 334 | background: #fff; 335 | margin: 0 0 5px; 336 | padding: 10px; 337 | } 338 | 339 | #contact input[type="text"]:hover, 340 | #contact input[type="email"]:hover, 341 | #contact input[type="tel"]:hover, 342 | #contact input[type="url"]:hover, 343 | #contact textarea:hover { 344 | -webkit-transition: border-color 0.3s ease-in-out; 345 | -moz-transition: border-color 0.3s ease-in-out; 346 | transition: border-color 0.3s ease-in-out; 347 | border: 1px solid #aaa; 348 | } 349 | 350 | #contact textarea { 351 | height: 100px; 352 | max-width: 100%; 353 | resize: none; 354 | } 355 | 356 | #contact button[type="submit"] { 357 | cursor: pointer; 358 | width: 100%; 359 | border: none; 360 | background: #0cf; 361 | color: #fff; 362 | margin: 0 0 5px; 363 | padding: 10px; 364 | font-size: 15px; 365 | } 366 | 367 | #contact button[type="submit"]:hover { 368 | background: #09c; 369 | -webkit-transition: background 0.3s ease-in-out; 370 | -moz-transition: background 0.3s ease-in-out; 371 | transition: background-color 0.3s ease-in-out; 372 | } 373 | 374 | #contact button[type="submit"]:active { 375 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); 376 | } 377 | 378 | #contact input:focus, 379 | #contact textarea:focus { 380 | outline: 0; 381 | border: 1px solid #999; 382 | } 383 | 384 | .home-articles { 385 | padding: 18px; 386 | background-color: var(--articles-bg); 387 | margin-top: 23px; 388 | position: relative; 389 | } 390 | 391 | .year-box { 392 | position: absolute; 393 | right: 0px; 394 | top: 100px; 395 | width: 234px; 396 | height: 255px; 397 | font-size: 18px; 398 | } 399 | 400 | .year-box div { 401 | margin: 12px 0px; 402 | } 403 | 404 | .home-article { 405 | display: flex; 406 | margin: 25px; 407 | } 408 | 409 | .home-article img { 410 | width: 300px; 411 | } 412 | 413 | .home-article-content { 414 | align-self: center; 415 | padding: 25px; 416 | } 417 | 418 | .home-article-content a { 419 | text-decoration: none; 420 | color: var(--font-color); 421 | } 422 | 423 | /* .home-articles{} */ 424 | .footer { 425 | height: 50px; 426 | background-color: var(--main-bg-color); 427 | display: flex; 428 | align-items: center; 429 | justify-content: center; 430 | color: white; 431 | flex-direction: column; 432 | } 433 | 434 | .footer a { 435 | color: white; 436 | } 437 | 438 | @media screen and (max-width: 1214px) { 439 | .navigation { 440 | flex-direction: column; 441 | margin-bottom: 23px; 442 | } 443 | 444 | .nav-left { 445 | flex-direction: column; 446 | text-align: center; 447 | } 448 | 449 | .content-right { 450 | display: none; 451 | } 452 | 453 | .content-left h1 { 454 | font-size: 3rem; 455 | line-height: 2.5rem; 456 | font-family: var(--font1); 457 | font-weight: 400; 458 | padding-bottom: 2rem; 459 | } 460 | 461 | .home-article { 462 | flex-direction: column; 463 | } 464 | 465 | .home-article-img { 466 | text-align: center; 467 | } 468 | 469 | .year-box { 470 | top: 25px; 471 | left: 60vw; 472 | font-size: 11px; 473 | display: flex; 474 | } 475 | 476 | .year-box div { 477 | padding: 0 3px; 478 | margin: 0; 479 | } 480 | 481 | .home-article img { 482 | width: 70vw; 483 | } 484 | 485 | .form-input { 486 | width: 50%; 487 | } 488 | 489 | .form-box input, 490 | textarea { 491 | width: 66vw; 492 | } 493 | 494 | .row { 495 | flex-direction: column; 496 | } 497 | 498 | .social { 499 | padding: 0; 500 | } 501 | 502 | .post-img img { 503 | width: 100vw; 504 | height: auto; 505 | margin: 10px; 506 | } 507 | 508 | .adjust-year { 509 | position: static; 510 | height: auto; 511 | padding: 12px 0px; 512 | display: flex; 513 | justify-content: flex-end; 514 | width: 100%; 515 | } 516 | } 517 | 518 | .page_404 { 519 | padding: 40px 0; 520 | background: #fff; 521 | font-family: "Arvo", serif; 522 | } 523 | 524 | .page_404 img { 525 | width: 100%; 526 | } 527 | 528 | .four_zero_four_bg { 529 | background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif); 530 | height: 400px; 531 | background-position: center; 532 | } 533 | 534 | .four_zero_four_bg h1 { 535 | font-size: 80px; 536 | } 537 | 538 | .four_zero_four_bg h3 { 539 | font-size: 80px; 540 | } 541 | 542 | .link_404 { 543 | color: #fff !important; 544 | padding: 10px 20px; 545 | background: #39ac31; 546 | margin: 20px 0; 547 | display: inline-block; 548 | } 549 | 550 | .contant_box_404 { 551 | margin-top: -50px; 552 | } 553 | 554 | .footer-dark { 555 | width: 100%; 556 | padding: 70px; 557 | color: #f0f9ff; 558 | background-color: #282d32; 559 | padding-bottom: 50px; 560 | } 561 | 562 | .footer-dark h3 { 563 | margin-top: 0; 564 | margin-bottom: 12px; 565 | font-weight: bold; 566 | font-size: 16px; 567 | } 568 | 569 | .footer-dark ul { 570 | padding: 0; 571 | list-style: none; 572 | line-height: 1.6; 573 | font-size: 14px; 574 | margin-bottom: 0; 575 | } 576 | 577 | .footer-dark ul a { 578 | color: inherit; 579 | text-decoration: none; 580 | opacity: 0.6; 581 | } 582 | 583 | .footer-dark ul a:hover { 584 | opacity: 0.8; 585 | } 586 | 587 | @media (max-width: 767px) { 588 | .footer-dark .item:not(.social) { 589 | text-align: center; 590 | padding-bottom: 20px; 591 | } 592 | 593 | .about-page { 594 | margin-top: -11%; 595 | } 596 | } 597 | 598 | .footer-dark .item.text { 599 | margin-bottom: 36px; 600 | } 601 | 602 | @media (max-width: 767px) { 603 | .footer-dark .item.text { 604 | margin-bottom: 0; 605 | } 606 | 607 | .about-page { 608 | margin-top: -11%; 609 | } 610 | } 611 | 612 | .footer-dark .item.text p { 613 | opacity: 0.6; 614 | margin-bottom: 0; 615 | } 616 | 617 | .footer-dark .item.social { 618 | text-align: center; 619 | } 620 | 621 | @media (max-width: 991px) { 622 | .footer-dark .item.social { 623 | text-align: center; 624 | margin-top: 20px; 625 | } 626 | 627 | .about-page { 628 | margin-top: -5%; 629 | } 630 | } 631 | 632 | /* Footer responsive and style add here START*/ 633 | @media screen and (max-width: 1214px) { 634 | .row { 635 | flex-direction: row; 636 | } 637 | 638 | .container { 639 | width: 90%; 640 | } 641 | } 642 | 643 | @media screen and (max-width: 576px) { 644 | div.col-sm-6 ul li { 645 | list-style-type: none !important; 646 | } 647 | 648 | .container { 649 | width: 90%; 650 | } 651 | } 652 | 653 | h3#footer-heading { 654 | font-size: 150%; 655 | } 656 | 657 | div.col-sm-6 ul { 658 | padding: 0%; 659 | } 660 | 661 | div.col-md-6 p { 662 | padding: 0%; 663 | } 664 | 665 | div.col-sm-6 ul li { 666 | list-style-type: disc; 667 | padding: 0%; 668 | font-size: medium; 669 | } 670 | 671 | div.col-sm-6 ul li a { 672 | transition: all 0.3s; 673 | } 674 | 675 | div.col-sm-6 ul li a:hover { 676 | margin-left: 15px; 677 | transition: all 0.3s; 678 | } 679 | 680 | /* Footer responsive and style add here END */ 681 | 682 | @media screen and (min-width: 991px) { 683 | .navbar-collapse { 684 | justify-content: inherit; 685 | } 686 | } 687 | 688 | .footer-dark .item.social>a { 689 | font-size: 20px; 690 | width: 36px; 691 | height: 36px; 692 | line-height: 36px; 693 | display: inline-block; 694 | text-align: center; 695 | border-radius: 50%; 696 | box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); 697 | margin: 0 8px; 698 | color: #fff; 699 | opacity: 0.75; 700 | } 701 | 702 | .footer-dark .item.social>a:hover { 703 | opacity: 0.9; 704 | } 705 | 706 | .footer-dark .copyright { 707 | text-align: center; 708 | padding-top: 24px; 709 | /* opacity: 0.3; */ 710 | font-size: 13px; 711 | margin-bottom: 0; 712 | } 713 | 714 | .faq-heading { 715 | border-bottom: #fff; 716 | } 717 | 718 | .faq-container { 719 | display: flex; 720 | justify-content: center; 721 | flex-direction: column; 722 | margin-top: -20px; 723 | } 724 | 725 | .hr-line { 726 | width: 60%; 727 | margin: auto; 728 | color: #9dabff; 729 | } 730 | 731 | /* Style the buttons that are used to open and close the faq-page body */ 732 | .faq-page { 733 | background-color: #1e1e1e; 734 | color: #fff; 735 | border-radius: 10px; 736 | font-size: 25px; 737 | cursor: pointer; 738 | padding: 25px 20px; 739 | width: 60%; 740 | border: none; 741 | outline: none; 742 | transition: 0.4s; 743 | margin: auto; 744 | } 745 | 746 | .faq-body { 747 | border-bottom-left-radius: 10px; 748 | border-bottom-right-radius: 10px; 749 | margin: auto; 750 | /* text-align: center; */ 751 | width: 60%; 752 | padding: auto; 753 | } 754 | 755 | .faq-body p { 756 | font-size: large; 757 | padding-top: 20px; 758 | padding-bottom: 30px; 759 | } 760 | 761 | /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 762 | .active{ 763 | background-color: #338AFF; 764 | border-radius: 20px; 765 | cursor: pointer; 766 | transition: all 0.3s ease-in-out; 767 | height: 45px; 768 | } 769 | /* Add a background color to the faq if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 770 | .activefaq{ 771 | background-color: #353535; 772 | cursor: pointer; 773 | border-top-right-radius: 10px; 774 | border-top-left-radius: 10px; 775 | border-bottom-left-radius: 0px; 776 | border-bottom-right-radius: 0px; 777 | } 778 | /* .activefaq:hover{ 779 | background-color: #1e1e1e; 780 | } */ 781 | 782 | /* Style the faq-page panel. Note: hidden by default */ 783 | .faq-body { 784 | padding: 0 18px; 785 | background-color: #353535; 786 | display: none; 787 | overflow: hidden; 788 | } 789 | 790 | .faq-page:after { 791 | content: "\02795"; 792 | /* Unicode character for "plus" sign (+) */ 793 | font-size: 13px; 794 | color: #eee; 795 | float: right; 796 | margin-left: 5px; 797 | } 798 | 799 | .about-flex { 800 | height: 100vh; 801 | width: 100vw; 802 | overflow: auto; 803 | color: white !important; 804 | } 805 | 806 | .heading h1 { 807 | color: white; 808 | font-size: 3rem; 809 | text-align: center; 810 | margin-top: 4rem; 811 | } 812 | 813 | .about-container { 814 | 815 | display: flex; 816 | justify-content: center; 817 | align-items: center; 818 | width: 90%; 819 | margin: 65px; 820 | 821 | } 822 | 823 | .hero-content { 824 | flex: 1; 825 | width: 600px; 826 | margin: 0px 25px; 827 | animation: fadeInUp 2s ease; 828 | 829 | 830 | } 831 | 832 | .hero-content h2 { 833 | font-size: 38px; 834 | margin-bottom: 20px; 835 | color: #333; 836 | } 837 | 838 | .hero-content p { 839 | font-size: 24px; 840 | line-height: 1.5; 841 | margin-bottom: 40px; 842 | color: #666; 843 | } 844 | 845 | .hero-content button { 846 | display: inline-block; 847 | background-color: #9dabff; 848 | color: black; 849 | padding: 12px 24px; 850 | border-radius: 5px; 851 | font-size: 20px; 852 | border: none; 853 | cursor: pointer; 854 | transition: 0.3s ease; 855 | } 856 | 857 | .hero-content button:hover { 858 | background-color: #4c7dfe; 859 | transform: scale(1.1); 860 | 861 | } 862 | 863 | .text-big { 864 | color: black !important; 865 | font-size: 50px !important; 866 | } 867 | 868 | .hero { 869 | margin-top: 0rem; 870 | margin-bottom: 1rem; 871 | display: grid; 872 | grid-template-columns: 1fr; 873 | place-items: center; 874 | min-height: 82vh; 875 | gap: 3rem; 876 | } 877 | 878 | .hero-text { 879 | place-self: center; 880 | text-align: center; 881 | padding: 0 1rem; 882 | display: flex; 883 | justify-content: center; 884 | flex-direction: column; 885 | gap: 2rem; 886 | } 887 | 888 | .hero-text h1 { 889 | font-size: 2.5rem; 890 | line-height: 1.5; 891 | } 892 | 893 | .hero-text p { 894 | line-height: 1.5; 895 | font-size: 1rem; 896 | color: var(--neutral-500); 897 | } 898 | 899 | .hero-image { 900 | padding-inline: 1rem; 901 | width: 100%; 902 | height: 100%; 903 | max-width: 1100px; 904 | max-height: 500px; 905 | } 906 | 907 | .hero-image img { 908 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 909 | border-radius: 1rem; 910 | width: 100%; 911 | height: 100%; 912 | } 913 | 914 | .hero-about-image { 915 | flex: 1; 916 | width: 600px; 917 | margin: auto; 918 | animation: fadeInRight 2s ease; 919 | 920 | } 921 | 922 | .about-img { 923 | width: 100%; 924 | height: auto; 925 | border-radius: 10px; 926 | } 927 | 928 | .hero-text h1 { 929 | font-size: 3rem; 930 | } 931 | 932 | .hero-text p { 933 | font-size: 1.2rem; 934 | padding-inline: 2rem; 935 | } 936 | 937 | .hero-text h1 { 938 | font-size: 4.5rem; 939 | } 940 | 941 | .hero-text p { 942 | font-size: 1.2rem; 943 | padding-inline: 4rem; 944 | } 945 | 946 | div.about-style { 947 | background-color: rgb(180, 196, 220); 948 | border-style: line; 949 | width: 800px; 950 | border: 15px solid rgb(48, 94, 193); 951 | padding: 20px; 952 | margin: 20px; 953 | } 954 | 955 | 956 | 957 | @media (max-width: 767px) { 958 | .footer-dark .item:not(.social) { 959 | text-align: center; 960 | padding-bottom: 20px; 961 | } 962 | 963 | .about-page { 964 | margin-top: -11%; 965 | } 966 | } 967 | 968 | .footer-dark .item.text { 969 | margin-bottom: 36px; 970 | } 971 | 972 | @media (max-width: 767px) { 973 | .footer-dark .item.text { 974 | margin-bottom: 0; 975 | } 976 | 977 | .about-page { 978 | margin-top: -11%; 979 | } 980 | } 981 | 982 | @media (max-width: 991px) { 983 | .footer-dark .item.social { 984 | text-align: center; 985 | margin-top: 20px; 986 | } 987 | 988 | .about-page { 989 | margin-top: -5%; 990 | } 991 | } 992 | 993 | @media (max-width: 767px) { 994 | .footer-dark .item:not(.social) { 995 | text-align: center; 996 | padding-bottom: 20px; 997 | } 998 | 999 | .about-page { 1000 | margin-top: -11%; 1001 | } 1002 | } 1003 | 1004 | .footer-dark .item.text { 1005 | margin-bottom: 36px; 1006 | } 1007 | 1008 | @media (max-width: 767px) { 1009 | .footer-dark .item.text { 1010 | margin-bottom: 0; 1011 | } 1012 | 1013 | .about-page { 1014 | margin-top: -11%; 1015 | } 1016 | } 1017 | 1018 | @media (max-width: 991px) { 1019 | .footer-dark .item.social { 1020 | text-align: center; 1021 | margin-top: 20px; 1022 | } 1023 | 1024 | .about-page { 1025 | margin-top: -5%; 1026 | } 1027 | } 1028 | 1029 | @media only screen and (max-width: 600px) { 1030 | .blogForm { 1031 | margin-top: 20%; 1032 | } 1033 | 1034 | div.about-style { 1035 | width: 376px !important; 1036 | } 1037 | 1038 | .text-big { 1039 | font-size: 30px !important; 1040 | } 1041 | } 1042 | 1043 | h1.faq-page { 1044 | color: white; 1045 | } 1046 | 1047 | .wrapper { 1048 | overflow: hidden; 1049 | max-width: 390px; 1050 | background: #3c1053ff; 1051 | padding: 30px; 1052 | border-radius: 5px; 1053 | box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1); 1054 | margin-top: 80px; 1055 | margin-bottom: 10px; 1056 | } 1057 | 1058 | .wrapper .title-text { 1059 | display: flex; 1060 | width: 200%; 1061 | } 1062 | 1063 | .wrapper .title { 1064 | width: 50%; 1065 | font-size: 35px; 1066 | font-weight: 600; 1067 | text-align: center; 1068 | transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1069 | } 1070 | 1071 | .wrapper .slide-controls { 1072 | position: relative; 1073 | display: flex; 1074 | height: 50px; 1075 | width: 100%; 1076 | overflow: hidden; 1077 | margin: 30px 0 10px 0; 1078 | justify-content: space-between; 1079 | border: 1px solid lightgrey; 1080 | border-radius: 5px; 1081 | } 1082 | 1083 | .slide-controls .slide { 1084 | height: 100%; 1085 | width: 100%; 1086 | color: #fff; 1087 | font-size: 18px; 1088 | font-weight: 500; 1089 | text-align: center; 1090 | line-height: 48px; 1091 | cursor: pointer; 1092 | z-index: 1; 1093 | transition: all 0.6s ease; 1094 | } 1095 | 1096 | .slide-controls label.signup { 1097 | color: #000; 1098 | } 1099 | 1100 | .slide-controls .slider-tab { 1101 | position: absolute; 1102 | height: 100%; 1103 | width: 50%; 1104 | left: 0; 1105 | z-index: 0; 1106 | border-radius: 5px; 1107 | background: -webkit-linear-gradient(left, #a445b2, #fa4299); 1108 | transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1109 | } 1110 | 1111 | input[type="radio"] { 1112 | display: none; 1113 | } 1114 | 1115 | #signup:checked~.slider-tab { 1116 | left: 50%; 1117 | } 1118 | 1119 | #signup:checked~label.signup { 1120 | color: #fff; 1121 | cursor: default; 1122 | user-select: none; 1123 | } 1124 | 1125 | #signup:checked~label.login { 1126 | color: #000; 1127 | } 1128 | 1129 | #login:checked~label.signup { 1130 | color: #000; 1131 | } 1132 | 1133 | #login:checked~label.login { 1134 | cursor: default; 1135 | user-select: none; 1136 | } 1137 | 1138 | @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap"); 1139 | 1140 | * { 1141 | margin: 0; 1142 | padding: 0; 1143 | box-sizing: border-box; 1144 | font-family: "Poppins", sans-serif; 1145 | } 1146 | 1147 | html, 1148 | body { 1149 | display: grid; 1150 | height: 100%; 1151 | width: 100%; 1152 | place-items: center; 1153 | } 1154 | 1155 | ::selection { 1156 | background: white; 1157 | color: #fff; 1158 | } 1159 | 1160 | .wrapper .form-container { 1161 | width: 100%; 1162 | overflow: hidden; 1163 | } 1164 | 1165 | .form-container .form-inner { 1166 | display: flex; 1167 | width: 200%; 1168 | } 1169 | 1170 | .form-container .form-inner form { 1171 | width: 50%; 1172 | transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1173 | } 1174 | 1175 | .form-inner form .field { 1176 | height: 50px; 1177 | width: 100%; 1178 | margin-top: 20px; 1179 | } 1180 | 1181 | .form-inner form .field input { 1182 | height: 100%; 1183 | width: 100%; 1184 | outline: none; 1185 | padding-left: 15px; 1186 | border-radius: 5px; 1187 | border: 1px solid lightgrey; 1188 | border-bottom-width: 2px; 1189 | font-size: 17px; 1190 | transition: all 0.3s ease; 1191 | } 1192 | 1193 | .form-inner form .field input:focus { 1194 | border-color: #fc83bb; 1195 | /* box-shadow: inset 0 0 3px #fb6aae; */ 1196 | } 1197 | 1198 | .form-inner form .field input::placeholder { 1199 | color: #999; 1200 | transition: all 0.3s ease; 1201 | } 1202 | 1203 | form .field input:focus::placeholder { 1204 | color: #b3b3b3; 1205 | } 1206 | 1207 | .form-inner form .pass-link { 1208 | margin-top: 5px; 1209 | } 1210 | 1211 | .form-inner form .signup-link { 1212 | text-align: center; 1213 | margin-top: 30px; 1214 | } 1215 | 1216 | .form-inner form .pass-link a, 1217 | .form-inner form .signup-link a { 1218 | color: #fa4299; 1219 | text-decoration: none; 1220 | } 1221 | 1222 | .form-inner form .pass-link a:hover, 1223 | .form-inner form .signup-link a:hover { 1224 | text-decoration: underline; 1225 | } 1226 | 1227 | form .btn { 1228 | height: 50px; 1229 | width: 100%; 1230 | border-radius: 5px; 1231 | position: relative; 1232 | overflow: hidden; 1233 | } 1234 | 1235 | form .btn .btn-layer { 1236 | height: 100%; 1237 | width: 300%; 1238 | position: absolute; 1239 | left: -100%; 1240 | background: -webkit-linear-gradient(right, 1241 | #a445b2, 1242 | #fa4299, 1243 | #a445b2, 1244 | #fa4299); 1245 | border-radius: 5px; 1246 | transition: all 0.4s ease; 1247 | } 1248 | 1249 | form .btn:hover .btn-layer { 1250 | left: 0; 1251 | } 1252 | 1253 | form .btn input[type="submit"] { 1254 | height: 100%; 1255 | width: 100%; 1256 | z-index: 1; 1257 | position: relative; 1258 | background: none; 1259 | border: none; 1260 | color: #fff; 1261 | padding-left: 0; 1262 | border-radius: 5px; 1263 | font-size: 20px; 1264 | font-weight: 500; 1265 | cursor: pointer; 1266 | } -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&display=swap"); 3 | 4 | :root { 5 | --main-bg-color: #bd6418; 6 | --font1: "Baloo Bhaina 2", cursive; 7 | --font2: "Roboto", sans-serif; 8 | } 9 | 10 | ::-webkit-scrollbar-track { 11 | --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 12 | background-color: #f5f5f5; 13 | } 14 | 15 | ::-webkit-scrollbar { 16 | width: 10px; 17 | background-color: #f5f5f5; 18 | } 19 | 20 | ::-webkit-scrollbar-thumb { 21 | background-color: var(--main-bg-color); 22 | background-image: -webkit-linear-gradient(45deg, 23 | rgba(255, 255, 255, 0.2) 25%, 24 | transparent 25%, 25 | transparent 50%, 26 | rgba(255, 255, 255, 0.2) 50%, 27 | rgba(255, 255, 255, 0.2) 75%, 28 | transparent 75%, 29 | transparent); 30 | } 31 | 32 | #themeBtn { 33 | border: none; 34 | background-color: transparent; 35 | padding-left: 10px; 36 | } 37 | 38 | #themeBtn #moon { 39 | display: none; 40 | } 41 | 42 | body { 43 | margin: 0; 44 | padding: 0; 45 | box-sizing: border-box; 46 | } 47 | 48 | .center { 49 | text-align: center; 50 | } 51 | 52 | .font1 { 53 | font-family: var(--font1); 54 | } 55 | 56 | .font2 { 57 | font-family: var(--font2); 58 | } 59 | 60 | .max-width-1 { 61 | max-width: 90vw; 62 | } 63 | 64 | .max-width-2 { 65 | max-width: 60vw; 66 | } 67 | 68 | .m-auto { 69 | margin: auto; 70 | } 71 | 72 | .mt-8 { 73 | margin-top: 40px; 74 | } 75 | 76 | .mx-1 { 77 | margin-left: 23px; 78 | margin-right: 23px; 79 | } 80 | 81 | .my-2 { 82 | margin-top: 32px; 83 | margin-bottom: 32px; 84 | } 85 | 86 | .btn { 87 | background-color: #338aff; 88 | padding: 8px 16px; 89 | border-radius: 20px; 90 | border: 2px solid transparent; 91 | font-family: var(--font1); 92 | font-size: 16px; 93 | cursor: pointer; 94 | transition: all 0.3s ease-in-out; 95 | } 96 | 97 | .btn:hover { 98 | color: #338aff; 99 | border: 2px solid #338aff; 100 | background-color: transparent; 101 | } 102 | 103 | .form-input { 104 | padding: 3px 5px; 105 | font-size: 16px; 106 | border: 2px solid black; 107 | border-radius: 4px; 108 | margin: 0 13px; 109 | font-family: var(--font1); 110 | } 111 | 112 | .contact-content { 113 | margin-top: 100px !important; 114 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 115 | border-radius: 18px; 116 | padding: 49px; 117 | background-image: url("../img/bg.jpg"); 118 | } 119 | 120 | .contact-content h2 { 121 | font-family: var(--font1); 122 | font-size: 40px; 123 | } 124 | 125 | .login-text { 126 | font-weight: bold; 127 | font-size: 1.5rem; 128 | color: #0d6efd; 129 | } 130 | 131 | .form-box input { 132 | margin: 5px; 133 | width: 52vw; 134 | border-radius: 5px; 135 | background-color: #e7e7e7; 136 | } 137 | 138 | .form-box textarea { 139 | margin: 5px; 140 | width: 52vw; 141 | border-radius: 5px; 142 | background-color: #e7e7e7; 143 | } 144 | 145 | .form-box button { 146 | margin: 5px; 147 | border-radius: 5px; 148 | background-color: #e7e7e7; 149 | } 150 | 151 | * { 152 | margin: 0; 153 | padding: 0; 154 | } 155 | 156 | #DevBlog { 157 | font-size: 1.5rem; 158 | 159 | } 160 | 161 | .navigation { 162 | margin-top: 25px; 163 | font-family: var(--font1); 164 | /* height: 74px; */ 165 | display: flex; 166 | justify-content: space-between; 167 | align-items: center; 168 | } 169 | 170 | .nav-left { 171 | display: flex; 172 | } 173 | 174 | .nav-left span { 175 | font-size: 35px; 176 | padding-top: 10px; 177 | } 178 | 179 | .nav-left ul { 180 | display: flex; 181 | align-items: center; 182 | margin: 0 77px; 183 | font-size: 22px; 184 | padding-bottom: 23px; 185 | } 186 | 187 | .nav-left ul li { 188 | list-style: none; 189 | margin: 0 14px; 190 | font-family: var(--font2); 191 | transition: all 0.3s ease-in-out; 192 | } 193 | 194 | .nav-left ul li a { 195 | text-decoration: none; 196 | color: black; 197 | } 198 | 199 | .nav-left ul li a:hover { 200 | color: var(--main-bg-color); 201 | font-weight: bolder; 202 | } 203 | 204 | .nav-item { 205 | display: flex; 206 | justify-content: center; 207 | align-items: center; 208 | font-size: 17px; 209 | } 210 | 211 | .space { 212 | width: 100%; 213 | height: 5rem; 214 | } 215 | 216 | .cd-top { 217 | background-color: rgb(29, 100, 54); 218 | color: white; 219 | } 220 | 221 | .cd-top:hover { 222 | background-color: rgb(190, 154, 23); 223 | color: rgb(19, 12, 12); 224 | } 225 | 226 | .cd { 227 | background-color: rgb(29, 100, 54); 228 | padding: 0.2rem; 229 | } 230 | 231 | .cd:hover { 232 | background-color: rgb(190, 154, 23); 233 | } 234 | 235 | .content { 236 | display: flex; 237 | justify-content: space-between; 238 | margin-top: 40px !important; 239 | padding-top: 30px; 240 | padding: 9px; 241 | position: relative; 242 | } 243 | 244 | .content::after { 245 | content: ""; 246 | display: flex; 247 | justify-content: space-between; 248 | position: absolute; 249 | width: 100%; 250 | height: inherit; 251 | opacity: 0.15; 252 | } 253 | 254 | .content::before { 255 | content: ""; 256 | background-size: cover; 257 | position: absolute; 258 | top: 0px; 259 | right: 0px; 260 | bottom: 0px; 261 | left: 0px; 262 | /* background-image: url(../img/leaves.png); */ 263 | /* background-image: url(../img/bg.png); */ 264 | background-image: url(../img/bg.jpg); 265 | opacity: 0.15; 266 | } 267 | 268 | .content-left { 269 | font-family: var(--font1); 270 | display: flex; 271 | flex-direction: column; 272 | justify-content: center; 273 | padding: 49px; 274 | z-index: 1; 275 | } 276 | 277 | .content-left h1 { 278 | font-size: 5rem; 279 | line-height: 4.5rem; 280 | font-family: var(--font1); 281 | font-weight: 500; 282 | padding-bottom: 2rem; 283 | } 284 | 285 | .content-right { 286 | display: flex; 287 | align-items: center; 288 | justify-content: center; 289 | } 290 | 291 | .content-right img { 292 | height: 600px; 293 | width: 600px; 294 | z-index: 10; 295 | margin-top: 50px; 296 | margin-bottom: 30px; 297 | padding: 25px; 298 | border-radius: 50%; 299 | } 300 | 301 | .home-articles { 302 | padding: 18px; 303 | background-color: rgb(248, 239, 239, 0.5); 304 | margin-top: 23px; 305 | position: relative; 306 | } 307 | 308 | .year-box { 309 | position: absolute; 310 | right: 0px; 311 | top: 100px; 312 | width: 234px; 313 | height: 255px; 314 | font-size: 18px; 315 | } 316 | 317 | .year-box div { 318 | margin: 12px 0px; 319 | } 320 | 321 | .home-article { 322 | display: flex; 323 | margin: 25px; 324 | } 325 | 326 | .home-article img { 327 | width: 30vw; 328 | height: 34vh; 329 | } 330 | 331 | .home-article-content { 332 | align-self: center; 333 | padding: 25px; 334 | } 335 | 336 | .home-article-content { 337 | & a { 338 | & h3 { 339 | color: black; 340 | font-weight: bolder; 341 | font-size: 1.8rem; 342 | } 343 | } 344 | 345 | & div { 346 | color: rgb(72, 72, 72); 347 | font-weight: bold; 348 | font-size: 1.5rem; 349 | } 350 | 351 | & span { 352 | color: rgb(72, 72, 72); 353 | font-weight: bold; 354 | font-size: 1.2rem; 355 | } 356 | } 357 | 358 | /* .home-articles{} */ 359 | .footer { 360 | height: 50px; 361 | background-color: var(--main-bg-color); 362 | display: flex; 363 | align-items: center; 364 | justify-content: center; 365 | color: white; 366 | flex-direction: column; 367 | } 368 | 369 | .footer a { 370 | color: white; 371 | } 372 | 373 | .about-flex { 374 | height: 100vh; 375 | width: 100vw; 376 | overflow: auto; 377 | } 378 | 379 | @media screen and (max-width: 1214px) { 380 | .navigation { 381 | flex-direction: column; 382 | margin-bottom: 23px; 383 | } 384 | 385 | .nav-left { 386 | flex-direction: column; 387 | text-align: center; 388 | } 389 | 390 | .content-right { 391 | display: none; 392 | } 393 | 394 | .content-left h1 { 395 | font-size: 3rem; 396 | line-height: 2.5rem; 397 | font-family: var(--font1); 398 | font-weight: 400; 399 | padding-bottom: 2rem; 400 | } 401 | 402 | .home-article { 403 | flex-direction: column; 404 | } 405 | 406 | .home-article-img { 407 | text-align: center; 408 | } 409 | 410 | .year-box { 411 | top: 25px; 412 | left: 60vw; 413 | font-size: 11px; 414 | display: flex; 415 | } 416 | 417 | .year-box div { 418 | padding: 0 3px; 419 | margin: 0; 420 | } 421 | 422 | .home-article img { 423 | width: 70vw; 424 | } 425 | 426 | .form-input { 427 | width: 50%; 428 | } 429 | 430 | .form-box input, 431 | textarea { 432 | width: 66vw; 433 | } 434 | 435 | .row { 436 | flex-direction: column; 437 | } 438 | 439 | .social { 440 | padding: 0; 441 | } 442 | 443 | 444 | .adjust-year { 445 | position: static; 446 | height: auto; 447 | padding: 12px 0px; 448 | display: flex; 449 | justify-content: flex-end; 450 | width: 100%; 451 | } 452 | } 453 | 454 | .post-img img { 455 | /* max-width: 780px; 456 | */ 457 | /* max-width: 1100px; */ 458 | width: 95vw; 459 | height: 50vh; 460 | margin: 10px; 461 | object-fit: cover; 462 | } 463 | 464 | @media screen and (min-width:1200px) { 465 | .post-img img { 466 | width: 80vw; 467 | height: 60vh; 468 | } 469 | } 470 | 471 | .page_404 { 472 | padding: 40px 0; 473 | background: #fff; 474 | font-family: "Arvo", serif; 475 | } 476 | 477 | .page_404 img { 478 | width: 100%; 479 | } 480 | 481 | .four_zero_four_bg { 482 | background-image: url(../img/404.gif); 483 | height: 400px; 484 | background-position: center; 485 | } 486 | 487 | .four_zero_four_bg h1 { 488 | font-size: 80px; 489 | } 490 | 491 | .four_zero_four_bg h3 { 492 | font-size: 80px; 493 | } 494 | 495 | .link_404 { 496 | color: #fff !important; 497 | padding: 10px 20px; 498 | background: #39ac31; 499 | margin: 20px 0; 500 | display: inline-block; 501 | } 502 | 503 | .contant_box_404 { 504 | margin-top: -50px; 505 | } 506 | 507 | .contact-heading { 508 | margin-top: 10vh; 509 | text-align: center; 510 | } 511 | 512 | .contact-form { 513 | display: flex; 514 | align-items: center; 515 | justify-content: center; 516 | flex-direction: column; 517 | padding: 3vmax; 518 | } 519 | 520 | .contact-form>div { 521 | margin: 1vmax; 522 | padding: 0.3vmax; 523 | border-radius: 10px; 524 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 525 | } 526 | 527 | .contact-form img { 528 | height: 1.5vmax; 529 | width: 1.5vmax; 530 | margin-left: 10px; 531 | } 532 | 533 | .contact-form input, 534 | .contact-form textarea { 535 | padding: 0.5vmax; 536 | border: none; 537 | background: none; 538 | outline: none; 539 | } 540 | 541 | .contact-form .submit-form-box { 542 | box-shadow: none; 543 | } 544 | 545 | /* Footer responsive and style add here START*/ 546 | @media screen and (max-width: 1214px) { 547 | .row { 548 | flex-direction: row; 549 | } 550 | 551 | .container { 552 | width: 90%; 553 | } 554 | } 555 | 556 | @media screen and (max-width: 576px) { 557 | div.col-sm-6 ul li { 558 | list-style-type: none !important; 559 | } 560 | 561 | .container { 562 | width: 90%; 563 | } 564 | } 565 | 566 | h3#footer-heading { 567 | font-size: 150%; 568 | } 569 | 570 | div.col-sm-6 ul { 571 | padding: 0%; 572 | } 573 | 574 | div.col-md-6 p { 575 | padding: 0%; 576 | } 577 | 578 | div.col-sm-6 ul li { 579 | list-style-type: disc; 580 | padding: 0%; 581 | font-size: medium; 582 | } 583 | 584 | div.col-sm-6 ul li a { 585 | transition: all 0.3s; 586 | } 587 | 588 | div.col-sm-6 ul li a:hover { 589 | margin-left: 15px; 590 | transition: all 0.3s; 591 | } 592 | 593 | /* Footer responsive and style add here END */ 594 | 595 | .footer-dark { 596 | padding: 70px; 597 | color: #f0f9ff; 598 | background-color: #282d32; 599 | padding-bottom: 10px; 600 | } 601 | 602 | .footer-dark h3 { 603 | margin-top: 0; 604 | margin-bottom: 12px; 605 | font-weight: bold; 606 | font-size: 16px; 607 | } 608 | 609 | .footer-dark ul { 610 | padding: 0; 611 | list-style: none; 612 | line-height: 1.6; 613 | font-size: 14px; 614 | margin-bottom: 0; 615 | } 616 | 617 | .footer-dark ul a { 618 | color: inherit; 619 | text-decoration: none; 620 | opacity: 0.6; 621 | } 622 | 623 | .footer-dark ul a:hover { 624 | opacity: 0.8; 625 | } 626 | 627 | @media (max-width: 767px) { 628 | .footer-dark .item:not(.social) { 629 | text-align: center; 630 | padding-bottom: 20px; 631 | } 632 | 633 | .about-page { 634 | margin-top: -11%; 635 | } 636 | 637 | .container { 638 | width: 90%; 639 | } 640 | } 641 | 642 | .footer-dark .item.text { 643 | margin-bottom: 36px; 644 | } 645 | 646 | @media (max-width: 767px) { 647 | .footer-dark .item.text { 648 | margin-bottom: 0; 649 | } 650 | 651 | .about-page { 652 | margin-top: -11%; 653 | } 654 | 655 | .container { 656 | width: 90%; 657 | } 658 | } 659 | 660 | .footer-dark .item.text p { 661 | opacity: 0.6; 662 | margin-bottom: 0; 663 | } 664 | 665 | .footer-dark .item.social { 666 | text-align: center; 667 | } 668 | 669 | @media (max-width: 991px) { 670 | .footer-dark .item.social { 671 | text-align: center; 672 | margin-top: 20px; 673 | } 674 | 675 | .about-page { 676 | margin-top: -5%; 677 | } 678 | } 679 | 680 | @media screen and (min-width: 991px) { 681 | .navbar-collapse { 682 | justify-content: inherit; 683 | } 684 | } 685 | 686 | .footer-dark .item.social>a { 687 | font-size: 20px; 688 | width: 36px; 689 | height: 36px; 690 | line-height: 36px; 691 | display: inline-block; 692 | text-align: center; 693 | border-radius: 50%; 694 | box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); 695 | margin: 0 8px; 696 | color: #fff; 697 | opacity: 0.75; 698 | } 699 | 700 | .footer-dark .item.social>a:hover { 701 | opacity: 0.9; 702 | } 703 | 704 | .footer-dark .copyright { 705 | text-align: center; 706 | padding-top: 24px; 707 | /* opacity: 0.3; */ 708 | font-size: 13px; 709 | margin-bottom: 0; 710 | color: whitesmoke; 711 | } 712 | 713 | .contact { 714 | display: flex; 715 | justify-content: center; 716 | text-align: center; 717 | } 718 | 719 | .contact input, 720 | textarea { 721 | padding: 2px 10px; 722 | } 723 | 724 | /* .wrapper { 725 | position: relative; 726 | top: 100px; 727 | display: flex; 728 | justify-content: center; 729 | text-align: center; 730 | margin-bottom: 100px; 731 | } */ 732 | /* Register form CSS */ 733 | @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap"); 734 | 735 | * { 736 | margin: 0; 737 | padding: 0; 738 | box-sizing: border-box; 739 | font-family: "Poppins", sans-serif; 740 | } 741 | 742 | html, 743 | body { 744 | display: grid; 745 | height: 100%; 746 | width: 100%; 747 | place-items: center; 748 | background-color: #F5F4FE !important; 749 | } 750 | 751 | ::selection { 752 | background: white; 753 | color: #fff; 754 | } 755 | 756 | .wrapper { 757 | overflow: hidden; 758 | max-width: 390px; 759 | background: #3c1053ff; 760 | padding: 30px; 761 | border-radius: 5px; 762 | box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1); 763 | margin-top: 80px; 764 | margin-bottom: 10px; 765 | } 766 | 767 | .wrapper .title-text { 768 | display: flex; 769 | width: 200%; 770 | } 771 | 772 | .wrapper .title { 773 | width: 50%; 774 | font-size: 35px; 775 | font-weight: 600; 776 | text-align: center; 777 | transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 778 | } 779 | 780 | .wrapper .slide-controls { 781 | position: relative; 782 | display: flex; 783 | height: 50px; 784 | width: 100%; 785 | overflow: hidden; 786 | margin: 30px 0 10px 0; 787 | justify-content: space-between; 788 | border: 1px solid lightgrey; 789 | border-radius: 5px; 790 | } 791 | 792 | .slide-controls .slide { 793 | height: 100%; 794 | width: 100%; 795 | color: #fff; 796 | font-size: 18px; 797 | font-weight: 500; 798 | text-align: center; 799 | line-height: 48px; 800 | cursor: pointer; 801 | z-index: 1; 802 | transition: all 0.6s ease; 803 | } 804 | 805 | .slide-controls label.signup { 806 | color: #000; 807 | } 808 | 809 | .slide-controls .slider-tab { 810 | position: absolute; 811 | height: 100%; 812 | width: 50%; 813 | left: 0; 814 | z-index: 0; 815 | border-radius: 5px; 816 | background: -webkit-linear-gradient(left, #a445b2, #fa4299); 817 | transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 818 | } 819 | 820 | input[type="radio"] { 821 | display: none; 822 | } 823 | 824 | #signup:checked~.slider-tab { 825 | left: 50%; 826 | } 827 | 828 | #signup:checked~label.signup { 829 | color: #fff; 830 | cursor: default; 831 | user-select: none; 832 | } 833 | 834 | #signup:checked~label.login { 835 | color: #000; 836 | } 837 | 838 | #login:checked~label.signup { 839 | color: #000; 840 | } 841 | 842 | #login:checked~label.login { 843 | cursor: default; 844 | user-select: none; 845 | } 846 | 847 | .wrapper .form-container { 848 | width: 100%; 849 | overflow: hidden; 850 | } 851 | 852 | .form-container .form-inner { 853 | display: flex; 854 | width: 200%; 855 | } 856 | 857 | .form-container .form-inner form { 858 | width: 50%; 859 | transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 860 | } 861 | 862 | .form-inner form .field { 863 | height: 50px; 864 | width: 100%; 865 | margin-top: 20px; 866 | } 867 | 868 | .form-inner form .field input { 869 | height: 100%; 870 | width: 100%; 871 | outline: none; 872 | padding-left: 15px; 873 | border-radius: 5px; 874 | border: 1px solid lightgrey; 875 | border-bottom-width: 2px; 876 | font-size: 17px; 877 | transition: all 0.3s ease; 878 | } 879 | 880 | .form-inner form .field input:focus { 881 | border-color: #fc83bb; 882 | /* box-shadow: inset 0 0 3px #fb6aae; */ 883 | } 884 | 885 | .form-inner form .field input::placeholder { 886 | color: #999; 887 | transition: all 0.3s ease; 888 | } 889 | 890 | form .field input:focus::placeholder { 891 | color: #b3b3b3; 892 | } 893 | 894 | .form-inner form .pass-link { 895 | margin-top: 5px; 896 | } 897 | 898 | .form-inner form .signup-link { 899 | text-align: center; 900 | margin-top: 30px; 901 | } 902 | 903 | .form-inner form .pass-link a, 904 | .form-inner form .signup-link a { 905 | color: #fa4299; 906 | text-decoration: none; 907 | } 908 | 909 | .form-inner form .pass-link a:hover, 910 | .form-inner form .signup-link a:hover { 911 | text-decoration: underline; 912 | } 913 | 914 | form .btn { 915 | height: 50px; 916 | width: 100%; 917 | border-radius: 5px; 918 | position: relative; 919 | overflow: hidden; 920 | } 921 | 922 | form .btn .btn-layer { 923 | height: 100%; 924 | width: 300%; 925 | position: absolute; 926 | left: -100%; 927 | background: -webkit-linear-gradient(right, 928 | #a445b2, 929 | #fa4299, 930 | #a445b2, 931 | #fa4299); 932 | border-radius: 5px; 933 | transition: all 0.4s ease; 934 | } 935 | 936 | form .btn:hover .btn-layer { 937 | left: 0; 938 | } 939 | 940 | form .btn input[type="submit"] { 941 | height: 100%; 942 | width: 100%; 943 | z-index: 1; 944 | position: relative; 945 | background: none; 946 | border: none; 947 | color: #fff; 948 | padding-left: 0; 949 | border-radius: 5px; 950 | font-size: 20px; 951 | font-weight: 500; 952 | cursor: pointer; 953 | } 954 | 955 | .faq-heading { 956 | border-bottom: #fff; 957 | } 958 | 959 | .faq-container { 960 | display: flex; 961 | justify-content: center; 962 | flex-direction: column; 963 | margin-top: -20px; 964 | } 965 | 966 | .hr-line { 967 | width: 60%; 968 | margin: auto; 969 | } 970 | 971 | /* Style the buttons that are used to open and close the faq-page body */ 972 | .faq-page { 973 | /* background-color: #eee; */ 974 | background-color: white ; 975 | font-size: 25px; 976 | border-radius: 10px; 977 | cursor: pointer; 978 | padding: 25px 20px; 979 | width: 60%; 980 | border: none; 981 | outline: none; 982 | transition: 0.4s; 983 | margin: auto; 984 | } 985 | 986 | .faq-body { 987 | border-bottom-left-radius: 10px; 988 | border-bottom-right-radius: 10px; 989 | background-color: white ; 990 | margin: auto; 991 | /* text-align: center; */ 992 | width: 60%; 993 | padding: auto; 994 | } 995 | 996 | .faq-body p { 997 | font-size: large; 998 | padding-top: 20px; 999 | padding-bottom: 30px; 1000 | } 1001 | 1002 | /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 1003 | .active{ 1004 | background-color: #338AFF; 1005 | border-radius: 20px; 1006 | cursor: pointer; 1007 | transition: all 0.3s ease-in-out; 1008 | height: 45px; 1009 | } 1010 | 1011 | /* Add the white color of the active button in navbar 1012 | you can change it to your own color of choice later 1013 | */ 1014 | 1015 | .active .nav-link { 1016 | color: #fff !important; 1017 | } 1018 | 1019 | .activefaq{ 1020 | border-top-right-radius: 10px; 1021 | border-top-left-radius: 10px; 1022 | border-bottom-left-radius: 0px; 1023 | border-bottom-right-radius: 0px; 1024 | } 1025 | /* Style the faq-page panel. Note: hidden by default */ 1026 | .faq-body { 1027 | padding: 0 18px; 1028 | background-color: white; 1029 | display: none; 1030 | overflow: hidden; 1031 | } 1032 | 1033 | .faq-page:after { 1034 | content: "\02795"; 1035 | /* Unicode character for "plus" sign (+) */ 1036 | font-size: 13px; 1037 | color: #eee; 1038 | float: right; 1039 | margin-left: 5px; 1040 | } 1041 | 1042 | @import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&family=Ubuntu:wght@500&display=swap"); 1043 | 1044 | :root { 1045 | --neutral-100: #fff; 1046 | --neutral-500: #b1b1b1; 1047 | --black-100: #08080a; 1048 | --black-500: #03111c; 1049 | --pink-500: #dc3545; 1050 | --ubuntuMono: "Ubuntu Mono", monospace; 1051 | --ubuntu: "Ubuntu", sans-serif; 1052 | } 1053 | 1054 | *, 1055 | *::after, 1056 | *::before { 1057 | box-sizing: border-box; 1058 | margin: 0; 1059 | padding: 0; 1060 | } 1061 | 1062 | html { 1063 | font-size: 100%; 1064 | } 1065 | 1066 | body { 1067 | font-family: var(--ubuntuMono); 1068 | 1069 | } 1070 | 1071 | li { 1072 | list-style: none; 1073 | transition: 0.3s; 1074 | } 1075 | 1076 | .navbar-links li:hover { 1077 | padding: 5spx; 1078 | border-radius: 5px; 1079 | background-color: #dc3545; 1080 | } 1081 | 1082 | a { 1083 | text-decoration: none; 1084 | color: var(--neutral-100); 1085 | } 1086 | 1087 | img { 1088 | -o-object-fit: cover; 1089 | object-fit: cover; 1090 | } 1091 | 1092 | h1, 1093 | h2, 1094 | h3, 1095 | p { 1096 | font-size: 1rem; 1097 | } 1098 | 1099 | .logo h1 { 1100 | display: inline-block; 1101 | font-size: 2rem; 1102 | position: relative; 1103 | } 1104 | 1105 | .logo h1::after { 1106 | content: ""; 1107 | position: absolute; 1108 | top: 50%; 1109 | right: -0.5rem; 1110 | translate: 0 -50%; 1111 | width: 2rem; 1112 | aspect-ratio: 1/1; 1113 | background-color: var(--pink-500); 1114 | border-radius: 10rem; 1115 | z-index: -1; 1116 | } 1117 | 1118 | .btn-register, 1119 | .btn-apply { 1120 | display: flex; 1121 | align-items: center; 1122 | flex-direction: row; 1123 | gap: 0.5rem; 1124 | background-color: var(--pink-500); 1125 | padding: 0.5rem; 1126 | border-radius: 0.5rem; 1127 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 1128 | transition: all 0.4s ease-in-out; 1129 | } 1130 | 1131 | .btn-register img, 1132 | .btn-apply img { 1133 | width: 1.5rem; 1134 | } 1135 | 1136 | .btn-register span, 1137 | .btn-apply span { 1138 | display: none; 1139 | font-size: 1.3rem; 1140 | } 1141 | 1142 | .btn-register:hover, 1143 | .btn-register:focus, 1144 | .btn-apply:hover, 1145 | .btn-apply:focus { 1146 | scale: 1.09; 1147 | } 1148 | 1149 | .main-header-container { 1150 | margin: 1rem; 1151 | display: flex; 1152 | align-items: center; 1153 | justify-content: space-between; 1154 | } 1155 | 1156 | .main-header .navbar { 1157 | position: absolute; 1158 | top: 5rem; 1159 | right: 1rem; 1160 | background-color: var(--neutral-100); 1161 | padding: 1rem 2.8rem; 1162 | translate: 0 -400px; 1163 | z-index: 999; 1164 | transition: all 1s ease-in-out; 1165 | border-radius: 0.5rem; 1166 | } 1167 | 1168 | .main-header .navbar-links { 1169 | display: flex; 1170 | align-items: center; 1171 | flex-direction: column; 1172 | gap: 2rem; 1173 | } 1174 | 1175 | .main-header .navbar-links li { 1176 | font-size: 1.4rem; 1177 | } 1178 | 1179 | .main-header .navbar-links li a { 1180 | color: var(--black-500); 1181 | font-weight: 700; 1182 | } 1183 | 1184 | .main-header .navbar-links li a:hover, 1185 | .main-header .navbar-links li a:focus { 1186 | opacity: 80%; 1187 | } 1188 | 1189 | .main-header .navbar-btns { 1190 | display: flex; 1191 | align-items: center; 1192 | flex-direction: row; 1193 | gap: 1rem; 1194 | } 1195 | 1196 | .main-header .navbar.active { 1197 | translate: 0 0; 1198 | } 1199 | 1200 | .hamburger { 1201 | display: flex; 1202 | flex-direction: column; 1203 | gap: 0.3rem; 1204 | cursor: pointer; 1205 | } 1206 | 1207 | .hamburger .line { 1208 | width: 2rem; 1209 | height: 0.3rem; 1210 | background-color: var(--neutral-100); 1211 | opacity: 80%; 1212 | border-radius: 50px; 1213 | transition: all 0.8s ease-in-out; 1214 | transform-origin: 9px 2px; 1215 | } 1216 | 1217 | .hamburger .line-2 { 1218 | opacity: 50%; 1219 | } 1220 | 1221 | .hamburger.active .line-2 { 1222 | display: none; 1223 | } 1224 | 1225 | .hamburger.active .line-1 { 1226 | rotate: 405deg; 1227 | } 1228 | 1229 | .hamburger.active .line-3 { 1230 | rotate: -405deg; 1231 | } 1232 | 1233 | .btn-apply { 1234 | width: -webkit-max-content; 1235 | width: -moz-max-content; 1236 | width: max-content; 1237 | margin-inline: auto; 1238 | font-size: 1.5rem; 1239 | padding: 0.5rem 2rem; 1240 | } 1241 | 1242 | .hero { 1243 | margin-top: 0rem; 1244 | margin-bottom: 1rem; 1245 | display: grid; 1246 | grid-template-columns: 1fr; 1247 | place-items: center; 1248 | min-height: 82vh; 1249 | gap: 3rem; 1250 | } 1251 | 1252 | .hero-text { 1253 | place-self: center; 1254 | text-align: center; 1255 | padding: 0 1rem; 1256 | display: flex; 1257 | justify-content: center; 1258 | flex-direction: column; 1259 | gap: 2rem; 1260 | } 1261 | 1262 | .hero-text h1 { 1263 | font-size: 2.5rem; 1264 | line-height: 1.5; 1265 | } 1266 | 1267 | .hero-text p { 1268 | line-height: 1.5; 1269 | font-size: 1rem; 1270 | color: var(--neutral-500); 1271 | } 1272 | 1273 | .hero-image { 1274 | padding-inline: 1rem; 1275 | width: 100%; 1276 | height: 100%; 1277 | max-width: 1100px; 1278 | max-height: 500px; 1279 | } 1280 | 1281 | .hero-image img { 1282 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 1283 | border-radius: 1rem; 1284 | width: 100%; 1285 | height: 100%; 1286 | } 1287 | 1288 | footer { 1289 | /* margin-block: 2rem; */ 1290 | margin-top: 0rem; 1291 | } 1292 | 1293 | /* .footer-container { 1294 | background-color: rgb(7, 7, 78); 1295 | margin-inline: auto; 1296 | padding-top: 10px; 1297 | display: grid; 1298 | place-items: center; 1299 | width: 100%; 1300 | max-width: 1800px; 1301 | height: 150px; 1302 | } 1303 | .footer-container-links { 1304 | display: flex; 1305 | align-items: center; 1306 | flex-direction: row; 1307 | gap: 1rem; 1308 | } 1309 | .footer-container-links li a { 1310 | font-size: 1rem; 1311 | color: var(--neutral-100); 1312 | transition: all 0.4s ease-in-out; 1313 | } 1314 | .footer-container-links li a:hover { 1315 | color: var(--pink-500); 1316 | } 1317 | 1318 | .copyright { 1319 | font-size: 1.2rem; 1320 | text-align: center; 1321 | color: var(--neutral-500); 1322 | } 1323 | .copyright a { 1324 | color: var(--pink-500); 1325 | font-weight: 700; 1326 | } */ 1327 | 1328 | @media (min-width: 610px) { 1329 | .btn-register { 1330 | padding: 0.5rem 1.5rem; 1331 | } 1332 | 1333 | .btn-register span { 1334 | display: inline-block; 1335 | } 1336 | 1337 | .main-header-container { 1338 | margin: 1.5rem; 1339 | } 1340 | 1341 | .main-header .navbar { 1342 | right: 2rem; 1343 | } 1344 | 1345 | .hero-text h1 { 1346 | font-size: 3rem; 1347 | } 1348 | 1349 | .hero-text p { 1350 | font-size: 1.2rem; 1351 | padding-inline: 2rem; 1352 | } 1353 | 1354 | .footer-container-links li a { 1355 | font-size: 1.2rem; 1356 | } 1357 | } 1358 | 1359 | @media (min-width: 1026px) { 1360 | .main-header-container { 1361 | margin: 2rem 4rem; 1362 | } 1363 | 1364 | .main-header .navbar { 1365 | position: static; 1366 | translate: 0 0; 1367 | background-color: transparent; 1368 | transition: 0; 1369 | } 1370 | 1371 | .main-header .navbar-links { 1372 | display: flex; 1373 | align-items: center; 1374 | flex-direction: row; 1375 | gap: 2rem; 1376 | } 1377 | 1378 | .main-header .navbar-links li { 1379 | font-size: 1.2rem; 1380 | font-weight: 400; 1381 | } 1382 | 1383 | .main-header .navbar-links li a { 1384 | color: var(--neutral-100); 1385 | } 1386 | 1387 | .main-header .navbar-links li a:hover, 1388 | .main-header .navbar-links li a:focus { 1389 | opacity: 80%; 1390 | } 1391 | 1392 | .main-header .hamburger { 1393 | display: none; 1394 | } 1395 | 1396 | .hero-text h1 { 1397 | font-size: 4.5rem; 1398 | } 1399 | 1400 | .hero-text p { 1401 | font-size: 1.2rem; 1402 | padding-inline: 4rem; 1403 | } 1404 | 1405 | .footer-container-links li a { 1406 | font-size: 1.2rem; 1407 | } 1408 | } 1409 | 1410 | /* contact */ 1411 | #contact input[type="text"], 1412 | #contact input[type="email"], 1413 | #contact input[type="tel"], 1414 | #contact input[type="url"], 1415 | #contact textarea, 1416 | #contact button[type="submit"] { 1417 | font: 400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; 1418 | } 1419 | 1420 | #contact { 1421 | background: #f9f9f9; 1422 | padding-left: 200px; 1423 | padding-right: 200px; 1424 | margin: 90px 0; 1425 | } 1426 | 1427 | 1428 | @media (max-width: 768px) { 1429 | #contact { 1430 | padding-left: 1rem; 1431 | padding-right: 1rem; 1432 | } 1433 | } 1434 | 1435 | #contact h3 { 1436 | text-align: center; 1437 | color: #f96; 1438 | display: block; 1439 | font-size: 30px; 1440 | font-weight: 400; 1441 | } 1442 | 1443 | #contact h4 { 1444 | text-align: center; 1445 | margin: 5px 0 15px; 1446 | display: block; 1447 | font-size: 13px; 1448 | } 1449 | 1450 | fieldset { 1451 | border: medium none !important; 1452 | margin: 0 0 10px; 1453 | min-width: 100%; 1454 | padding: 0; 1455 | width: 100%; 1456 | } 1457 | 1458 | #contact input[type="text"], 1459 | #contact input[type="email"], 1460 | #contact input[type="tel"], 1461 | #contact input[type="url"], 1462 | #contact textarea { 1463 | width: 100%; 1464 | border: 1px solid #ccc; 1465 | background: #fff; 1466 | margin: 0 0 5px; 1467 | padding: 10px; 1468 | } 1469 | 1470 | #contact input[type="text"]:hover, 1471 | #contact input[type="email"]:hover, 1472 | #contact input[type="tel"]:hover, 1473 | #contact input[type="url"]:hover, 1474 | #contact textarea:hover { 1475 | -webkit-transition: border-color 0.3s ease-in-out; 1476 | -moz-transition: border-color 0.3s ease-in-out; 1477 | transition: border-color 0.3s ease-in-out; 1478 | border: 1px solid #aaa; 1479 | } 1480 | 1481 | #contact textarea { 1482 | height: 100px; 1483 | max-width: 100%; 1484 | resize: none; 1485 | } 1486 | 1487 | #contact button[type="submit"] { 1488 | cursor: pointer; 1489 | width: 100%; 1490 | border: none; 1491 | background: #0cf; 1492 | color: #fff; 1493 | margin: 0 0 5px; 1494 | padding: 10px; 1495 | font-size: 15px; 1496 | } 1497 | 1498 | #contact button[type="submit"]:hover { 1499 | background: #09c; 1500 | -webkit-transition: background 0.3s ease-in-out; 1501 | -moz-transition: background 0.3s ease-in-out; 1502 | transition: background-color 0.3s ease-in-out; 1503 | } 1504 | 1505 | #contact button[type="submit"]:active { 1506 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); 1507 | } 1508 | 1509 | #contact input:focus, 1510 | #contact textarea:focus { 1511 | outline: 0; 1512 | border: 1px solid #999; 1513 | } 1514 | 1515 | ::-webkit-input-placeholder { 1516 | color: #888; 1517 | } 1518 | 1519 | :-moz-placeholder { 1520 | color: #888; 1521 | } 1522 | 1523 | ::-moz-placeholder { 1524 | color: #888; 1525 | } 1526 | 1527 | :-ms-input-placeholder { 1528 | color: #888; 1529 | } 1530 | 1531 | /* navbar n footer */ 1532 | 1533 | .navigation { 1534 | margin-top: 25px; 1535 | font-family: var(--font1); 1536 | height: 74px; 1537 | display: flex; 1538 | justify-content: space-between; 1539 | align-items: center; 1540 | } 1541 | 1542 | .nav-left { 1543 | display: flex; 1544 | } 1545 | 1546 | .nav-left span { 1547 | font-size: 35px; 1548 | padding-top: 10px; 1549 | } 1550 | 1551 | .nav-left ul { 1552 | display: flex; 1553 | align-items: center; 1554 | margin: 0 77px; 1555 | font-size: 22px; 1556 | padding-bottom: 23px; 1557 | } 1558 | 1559 | .nav-left ul li { 1560 | list-style: none; 1561 | margin: 0 14px; 1562 | font-family: var(--font2); 1563 | transition: all 0.3s ease-in-out; 1564 | } 1565 | 1566 | .nav-left ul li a { 1567 | text-decoration: none; 1568 | color: black; 1569 | } 1570 | 1571 | .nav-left ul li a:hover { 1572 | color: var(--main-bg-color); 1573 | font-weight: bolder; 1574 | } 1575 | 1576 | .space { 1577 | width: 100%; 1578 | height: 5rem; 1579 | } 1580 | 1581 | .footer { 1582 | height: 50px; 1583 | background-color: var(--main-bg-color); 1584 | display: flex; 1585 | align-items: center; 1586 | justify-content: center; 1587 | color: white; 1588 | flex-direction: column; 1589 | } 1590 | 1591 | #footer a:hover { 1592 | color: rgb(236, 92, 92) !important; 1593 | } 1594 | 1595 | .about-flex { 1596 | height: 100vh; 1597 | width: 100vw; 1598 | overflow: auto; 1599 | } 1600 | 1601 | #footer-container { 1602 | margin: 0px; 1603 | padding: 0px; 1604 | } 1605 | 1606 | #buttondeftop { 1607 | text-transform: uppercase; 1608 | letter-spacing: 0.05rem; 1609 | font-weight: 700; 1610 | font-size: 0.85rem; 1611 | border-radius: 0.5rem; 1612 | overflow: hidden; 1613 | color: #ca8346; 1614 | background-color: var(--btn-bg-color-hover); 1615 | } 1616 | 1617 | #buttondeftop:hover { 1618 | color: #0cf; 1619 | } 1620 | 1621 | #buttondeftop { 1622 | pointer-events: auto; 1623 | cursor: pointer; 1624 | background: var(--btn-bg-color); 1625 | border: none; 1626 | padding: 1.5rem 3rem; 1627 | margin: 0; 1628 | font-family: inherit; 1629 | font-size: inherit; 1630 | position: relative; 1631 | display: inline-block; 1632 | } 1633 | 1634 | @media screen and (max-width: 1214px) { 1635 | .navigation { 1636 | flex-direction: column; 1637 | margin-bottom: 23px; 1638 | } 1639 | 1640 | .nav-left { 1641 | flex-direction: column; 1642 | text-align: center; 1643 | } 1644 | } 1645 | 1646 | .footer-dark { 1647 | width: 100%; 1648 | padding-bottom: 50px; 1649 | color: #f0f9ff; 1650 | background-color: #000000; 1651 | } 1652 | 1653 | .footer-dark h3 { 1654 | margin-top: 0; 1655 | margin-bottom: 12px; 1656 | font-weight: bold; 1657 | font-size: 16px; 1658 | } 1659 | 1660 | .footer-dark ul { 1661 | padding: 0; 1662 | list-style: none; 1663 | line-height: 1.6; 1664 | font-size: 14px; 1665 | margin-bottom: 0; 1666 | } 1667 | 1668 | .footer-dark ul a { 1669 | color: inherit; 1670 | text-decoration: none; 1671 | opacity: 0.6; 1672 | } 1673 | 1674 | .footer-dark ul a:hover { 1675 | opacity: 0.8; 1676 | } 1677 | 1678 | @media (max-width: 767px) { 1679 | .footer-dark .item:not(.social) { 1680 | text-align: center; 1681 | padding-bottom: 20px; 1682 | } 1683 | 1684 | .about-page { 1685 | margin-top: -11%; 1686 | } 1687 | } 1688 | 1689 | .footer-dark .item.text { 1690 | margin-bottom: 36px; 1691 | } 1692 | 1693 | @media (max-width: 767px) { 1694 | .footer-dark .item.text { 1695 | margin-bottom: 0; 1696 | } 1697 | 1698 | .about-page { 1699 | margin-top: -11%; 1700 | } 1701 | } 1702 | 1703 | .footer-dark .item.text p { 1704 | opacity: 0.6; 1705 | margin-bottom: 0; 1706 | } 1707 | 1708 | .footer-dark .item.social { 1709 | text-align: center; 1710 | } 1711 | 1712 | @media (max-width: 991px) { 1713 | .footer-dark .item.social { 1714 | text-align: center; 1715 | margin-top: 20px; 1716 | } 1717 | 1718 | .about-page { 1719 | margin-top: -5%; 1720 | } 1721 | 1722 | 1723 | } 1724 | 1725 | @media screen and (min-width: 991px) { 1726 | .navbar-collapse { 1727 | justify-content: inherit; 1728 | } 1729 | 1730 | } 1731 | 1732 | .footer-dark .item.social>a { 1733 | font-size: 20px; 1734 | width: 36px; 1735 | height: 36px; 1736 | line-height: 36px; 1737 | display: inline-block; 1738 | text-align: center; 1739 | border-radius: 50%; 1740 | box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); 1741 | margin: 0 8px; 1742 | color: #fff; 1743 | opacity: 0.75; 1744 | } 1745 | 1746 | .footer-dark .item.social>a:hover { 1747 | opacity: 0.9; 1748 | } 1749 | 1750 | .footer-dark .copyright { 1751 | text-align: center; 1752 | padding-top: 24px; 1753 | /* opacity: 0.3; */ 1754 | font-size: 13px; 1755 | margin-bottom: 0; 1756 | color: whitesmoke; 1757 | } 1758 | 1759 | .copyrigh { 1760 | text-align: center; 1761 | padding-top: 24px; 1762 | /* opacity: 0.3; */ 1763 | font-size: 13px; 1764 | margin-bottom: 0; 1765 | color: whitesmoke; 1766 | } 1767 | 1768 | .blogForm { 1769 | margin-top: 5%; 1770 | margin-bottom: 30px; 1771 | } 1772 | 1773 | .text-big { 1774 | font-size: 50px; 1775 | } 1776 | 1777 | @media only screen and (max-width: 600px) { 1778 | .blogForm { 1779 | margin-top: 20%; 1780 | } 1781 | 1782 | div.about-style { 1783 | width: 376px !important; 1784 | } 1785 | 1786 | .text-big { 1787 | font-size: 30px !important; 1788 | } 1789 | 1790 | #circle { 1791 | position: absolute; 1792 | transform: translate(-50%, -50%); 1793 | border: 1px solid #fff; 1794 | width: 30px; 1795 | background-color: rgb(177, 170, 161); 1796 | height: 30px; 1797 | border-radius: 50%; 1798 | pointer-events: none; 1799 | } 1800 | 1801 | } 1802 | 1803 | h1.faq-page { 1804 | color: black; 1805 | } 1806 | 1807 | 1808 | .container { 1809 | width: 90%; 1810 | } 1811 | 1812 | .container2 { 1813 | padding-top: 80px; 1814 | padding-bottom: 40px; 1815 | max-width: 800px; 1816 | /* Set a maximum width for the container */ 1817 | margin: 0 auto; 1818 | /* Center the container horizontally */ 1819 | } 1820 | 1821 | /* Contact Form */ 1822 | #contact-form { 1823 | padding: 20px; 1824 | } 1825 | 1826 | /* Adjust form elements for smaller screens */ 1827 | @media (max-width: 768px) { 1828 | .container2 { 1829 | padding-top: 20px; 1830 | padding-bottom: 20px; 1831 | } 1832 | 1833 | input[type="text"], 1834 | input[type="email"], 1835 | input[type="tel"], 1836 | input[type="url"], 1837 | textarea { 1838 | width: 100%; 1839 | margin-bottom: 10px; 1840 | /* Add some space between form fields */ 1841 | } 1842 | 1843 | button[type="submit"] { 1844 | width: 100%; 1845 | } 1846 | } 1847 | 1848 | .about-hero { 1849 | 1850 | /*background-color: #fff; */ 1851 | overflow: hidden; 1852 | margin-bottom: 1rem; 1853 | 1854 | } 1855 | 1856 | .heading h1 { 1857 | color: #282d32; 1858 | font-size: 3rem; 1859 | text-align: center; 1860 | margin-top: 4rem; 1861 | } 1862 | 1863 | .about-container { 1864 | 1865 | display: flex; 1866 | justify-content: center; 1867 | align-items: center; 1868 | width: 90%; 1869 | margin: 65px; 1870 | 1871 | } 1872 | 1873 | .hero-content { 1874 | flex: 1; 1875 | width: 600px; 1876 | margin: 0px 25px; 1877 | animation: fadeInUp 2s ease; 1878 | 1879 | 1880 | } 1881 | 1882 | .hero-content h2 { 1883 | font-size: 38px; 1884 | margin-bottom: 20px; 1885 | color: #333; 1886 | } 1887 | 1888 | .hero-content p { 1889 | font-size: 24px; 1890 | line-height: 1.5; 1891 | margin-bottom: 40px; 1892 | color: #666; 1893 | } 1894 | 1895 | .hero-content button { 1896 | display: inline-block; 1897 | background-color: #282d32; 1898 | color: #fff; 1899 | padding: 12px 24px; 1900 | border-radius: 5px; 1901 | font-size: 20px; 1902 | border: none; 1903 | cursor: pointer; 1904 | transition: 0.3s ease; 1905 | } 1906 | 1907 | .hero-content button:hover { 1908 | background-color: #282d32; 1909 | transform: scale(1.1); 1910 | } 1911 | 1912 | .hero-about-image { 1913 | flex: 1; 1914 | width: 600px; 1915 | margin: auto; 1916 | animation: fadeInRight 2s ease; 1917 | 1918 | } 1919 | 1920 | .about-img { 1921 | width: 100%; 1922 | height: auto; 1923 | border-radius: 10px; 1924 | } 1925 | 1926 | @media screen and (max-width: 768px) { 1927 | .heading h1 { 1928 | font-size: 45px; 1929 | margin-top: 30px; 1930 | } 1931 | 1932 | .about-hero { 1933 | margin: 0px; 1934 | margin-top: 3rem; 1935 | } 1936 | 1937 | .about-container { 1938 | width: 100%; 1939 | flex-direction: column; 1940 | margin: 0px; 1941 | padding: 0px 40px; 1942 | } 1943 | 1944 | .hero-content { 1945 | width: 100%; 1946 | margin: 35px 0px; 1947 | } 1948 | 1949 | .hero-content h2 { 1950 | font-size: 30px; 1951 | } 1952 | 1953 | .hero-content p { 1954 | font-size: 18px; 1955 | margin-bottom: 20px; 1956 | } 1957 | 1958 | .hero-content button { 1959 | font-size: 16px; 1960 | padding: 8px 16px; 1961 | } 1962 | 1963 | .hero-about-image { 1964 | width: 100%; 1965 | margin: 2rem auto; 1966 | } 1967 | 1968 | } 1969 | 1970 | @keyframes fadeInUp { 1971 | 0% { 1972 | opacity: 0; 1973 | transform: translateY(50px); 1974 | } 1975 | 1976 | 100% { 1977 | opacity: 1; 1978 | transform: translateY(0px); 1979 | } 1980 | 1981 | } 1982 | 1983 | @keyframes fadeInRight { 1984 | 0% { 1985 | opacity: 0; 1986 | transform: translateX(-50px); 1987 | } 1988 | 1989 | 100% { 1990 | opacity: 1; 1991 | transform: translateX(0px); 1992 | } 1993 | 1994 | } -------------------------------------------------------------------------------- /assets/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/1.png -------------------------------------------------------------------------------- /assets/img/11.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 229 | -------------------------------------------------------------------------------- /assets/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/2.png -------------------------------------------------------------------------------- /assets/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/3.png -------------------------------------------------------------------------------- /assets/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/4.png -------------------------------------------------------------------------------- /assets/img/404.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/404.gif -------------------------------------------------------------------------------- /assets/img/Vecteezy_Diwali-Illustration_ba1020.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/Vecteezy_Diwali-Illustration_ba1020.jpg -------------------------------------------------------------------------------- /assets/img/about.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/banner.png -------------------------------------------------------------------------------- /assets/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/bg.jpg -------------------------------------------------------------------------------- /assets/img/blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/blog.jpg -------------------------------------------------------------------------------- /assets/img/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/blog.png -------------------------------------------------------------------------------- /assets/img/chinesefood.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/chinesefood.jpeg -------------------------------------------------------------------------------- /assets/img/chinesefood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/chinesefood.jpg -------------------------------------------------------------------------------- /assets/img/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/contact.jpg -------------------------------------------------------------------------------- /assets/img/contact2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/contact2.jpg -------------------------------------------------------------------------------- /assets/img/contact3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/contact3.jpg -------------------------------------------------------------------------------- /assets/img/developer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/developer.png -------------------------------------------------------------------------------- /assets/img/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/email.png -------------------------------------------------------------------------------- /assets/img/fitness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/fitness.png -------------------------------------------------------------------------------- /assets/img/food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/food.png -------------------------------------------------------------------------------- /assets/img/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/google.png -------------------------------------------------------------------------------- /assets/img/hacktoberfest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/hacktoberfest.png -------------------------------------------------------------------------------- /assets/img/hero-blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/hero-blog.jpg -------------------------------------------------------------------------------- /assets/img/leaves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/leaves.png -------------------------------------------------------------------------------- /assets/img/micro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/micro.jpg -------------------------------------------------------------------------------- /assets/img/phone-call.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/phone-call.png -------------------------------------------------------------------------------- /assets/img/saudi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/saudi.png -------------------------------------------------------------------------------- /assets/img/tmz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/tmz.png -------------------------------------------------------------------------------- /assets/img/tree.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/tree.jpeg -------------------------------------------------------------------------------- /assets/img/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jineshnagori/DevBlog/00de0af760fe8429d30ea3eb4366fa4617aab72f/assets/img/user.png -------------------------------------------------------------------------------- /assets/js/about.js: -------------------------------------------------------------------------------- 1 | var faq = document.getElementsByClassName("faq-page"); 2 | var i; 3 | 4 | for (i = 0; i < faq.length; i++) { 5 | faq[i].addEventListener("click", function () { 6 | /* Toggle between adding and removing the "active" class, 7 | to highlight the button that controls the panel */ 8 | this.classList.toggle("activefaq"); 9 | 10 | /* Toggle between hiding and showing the active panel */ 11 | var body = this.nextElementSibling; 12 | if (body.style.display === "block") { 13 | body.style.display = "none"; 14 | } else { 15 | body.style.display = "block"; 16 | } 17 | }); 18 | } -------------------------------------------------------------------------------- /assets/js/darktheme.js: -------------------------------------------------------------------------------- 1 | var themeBtn = document.querySelector("#themeBtn"); 2 | var themeSheet = document.querySelector("#theme-sheet"); 3 | 4 | function theme() { 5 | console.log("background changed"); 6 | if (themeSheet.getAttribute("href") == "assets/css/style.css") { 7 | themeSheet.href = "assets/css/darktheme.css"; 8 | } else { 9 | themeSheet.href = "assets/css/style.css"; 10 | } 11 | document.cookie = themeSheet; 12 | } 13 | -------------------------------------------------------------------------------- /assets/js/index.js: -------------------------------------------------------------------------------- 1 | 2 | const loginText = document.querySelector(".title-text .login"); 3 | const loginForm = document.querySelector("form.login"); 4 | const loginBtn = document.querySelector("label.login"); 5 | const signupBtn = document.querySelector("label.signup"); 6 | const signupLink = document.querySelector("form .signup-link a"); 7 | signupBtn.onclick = (() => { 8 | loginForm.style.marginLeft = "-50%"; 9 | loginText.style.marginLeft = "-50%"; 10 | }); 11 | loginBtn.onclick = (() => { 12 | loginForm.style.marginLeft = "0%"; 13 | loginText.style.marginLeft = "0%"; 14 | }); 15 | signupLink.onclick = (() => { 16 | signupBtn.click(); 17 | return false; 18 | }); 19 | 20 | let follower = document.getElementById("circle"); 21 | 22 | window.addEventListener("mousemove", function (details) { 23 | let y = details.clientY; 24 | let x = details.clientX; 25 | setTimeout(function () { 26 | follower.style.top = `${y}px`; 27 | follower.style.left = `${x}px`; 28 | }, 50); 29 | }); 30 | -------------------------------------------------------------------------------- /blogpost.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | 20 | 21 | 22 | iBlog - Heaven for bloggers 23 | 24 | 25 | 26 | 27 |

30 |

31 | 34 | 45 | 46 |

47 | 71 | 103 | 129 |

130 |

131 |

132 |

133 |

134 |

135 |

136 |

137 |

138 |

139 |

The heaven for bloggers

140 |

141 |

142 |

143 | Kyle Wiggers 144 |

145 |

28 September | 10 min read

146 |

147 | 179 |

180 |

181 | One excellent example of the benefits of multithreading is, without a 182 | doubt, the use of multiple threads to download multiple images or files. 183 | This is, actually, one of the best use cases for multithreading due to 184 | the blocking nature of I/O. We are going to retrieve 10 different images 185 | from https://picsum.photos/200/300, which is a free API that delivers a 186 | different image every time you hit that link. We’ll then store these 10 187 | different images within a temp folder. Concurrent Download It’s time to 188 | write a quick program that will concurrently download all the images 189 | that we require. We’ll be going over creating and starting threads. The 190 | key point of this is to realize the potential performance gains to be 191 | had by writing programs concurrently: Google has experimented with news 192 | translation before, three years ago adding the ability to display 193 | content in two languages together within the Google News app feed. But 194 | for the most part, the search giant has left it to users to translate 195 | content via tools like Chrome’s translate button and Google Translate. 196 | Presumably, should the Google Search news translation feature be well 197 | received, that’ll change for more languages in the future. 198 |

199 |

200 | 201 |

202 |

203 |

204 |

205 |

People who read this also read

206 |

207 |

208 |

209 |

210 |

211 |

212 | 213 |

214 | Google Search will soon begin translating local press coverage 215 |

216 | 217 | 218 |

Kyle Wiggers

219 | 28 September | 10 min read 220 |

221 |

222 |

223 |

224 |

225 |

226 |

227 | 228 |

229 | Saudi Arabia condemns Russia’s annexation moves inside Ukraine 230 |

231 | 232 | 233 |

Anonymous

234 | 10 October | 6 min read 235 |

236 |

237 |

238 |

239 |

240 |

241 |

242 | 243 |

244 | Pre- work out nutrition is necessary for good gym results know 245 | useful tips from fitness expert Faisal Khan 246 |

247 | 248 | 249 |

INDIA TV

250 | 12 October | 8 min read 251 |

252 |

253 | 254 | 255 | 256 |

257 |

258 |

259 |

260 |

261 | 262 |

263 | Treehugger is a green consumer blog with a mission to bring a 264 | sustainable lifestyle to the masses. 265 |

266 | 267 | 268 |

TreeHugger.tv

269 | 14 October | 4 min read 270 |

271 |

272 | 273 |

274 |

275 |

276 |

277 |

278 | 279 |

280 | Microsiervos, which began in 2001, took its name from Douglas 281 | Coupland's novel Microserfs, a diary entry-style novel about 282 | internet pioneers. 283 |

284 | 285 | 286 |

microsiervos.com

287 | 14 October | 6 min read 288 |

289 |

290 | 291 |

292 |

293 |

294 |

295 |

296 | 297 |

298 | You want relentless celebrity gossip on tap? TMZ will provide 299 | it, and when we say relentless, we mean relentless. 300 |

301 | 302 | 303 |

TMZ.com

304 | 17 October | 9 min read 305 |

306 |

307 |

308 |

309 | 310 |

311 | 355 |

356 | 357 | 362 | 367 | 372 | 373 | 398 | 399 | 403 | 404 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | 20 | 21 | 22 | 23 | DevBlog - Blog for Developers 24 | 25 | 26 | 27 | 28 | 29 |

32 |

33 | 36 | 47 | 48 |

49 | 81 | 143 |

144 |

145 |

146 | 147 |

148 | 202 |

203 | 204 | 205 | 206 |

207 | 253 |

254 | 255 | 256 | 257 | 282 | 283 | 284 | 288 | 289 | -------------------------------------------------------------------------------- /contributors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 16 | 20 | 21 | 22 | 23 | DevBlog - Blog for Developers 24 | 25 | 26 | 98 | 99 | 100 | 101 | 102 |

105 |

106 | 109 | 120 | 121 |

122 | 154 | 216 |

217 |

218 |

219 | 220 |

221 |

222 |

223 |

224 |

225 | 226 | 227 |

228 | 274 |

275 | 276 | 277 | 278 | 279 | 307 | 332 | 333 | 337 | 338 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | DevBlog - Blog for Developers 16 | 17 | 18 | 19 | 20 | 21 | 34 | 35 | 36 |

37 |

38 | 41 | 46 | 47 | 48 | 49 | 62 | 63 | 64 |

65 |

66 |

67 | 70 | 75 | 76 |

77 |

79 | Home 82 |
84 | About 87 |
91 | Contact 94 |
97 | Contributors 100 |

102 | 145 |

146 |

147 |

148 | 149 | 150 | 165 | 166 |

167 |

168 |

169 |

170 |

171 |

The heaven for bloggers

172 |

173 | iBlog is a website which lets you submit an article which you like to 174 | upload and after approval it will be on our website and you can get a 175 | good amount of reach from here ! 176 |

177 |
178 |

179 | My Halloween decorations are staying in the box this year. To be 180 | honest, they didn't make it out of the box last year either. My 181 | Halloween spirit has officially been bludgeoned to death by teenagers 182 | who no longer care and a persistent October fear of the Northern 183 | California wildfires. And speaking of fear, isn't there more than 184 | enough of that going around? Maybe all of us can pretend that 185 | Halloween isn't even happening this year? 186 |

187 |

188 |

189 | 190 |

191 |

192 |

193 | 194 | 195 | 196 |

404

29 | Look like you're lost 30 |

Hacktoberfest 2023

6 | 7 | Link To HacktoberFest 2023 8 | 9 |

Whether it’s your first or fiftieth pull request, there’s always more to learn! We’ve put together a few resources that can help you create quality pull requests, keep your repositories pristine, and build on your open source knowledge.

70 | 71 | Join Discord Conversation 72 | 73 |

About DevBlog

Introduction

242 | Everyone has a voice and something to express 243 |

Freedom and Ownership

Real support from real people

The heaven for bloggers

People who read this also read

214 | Google Search will soon begin translating local press coverage 215 |

229 | Saudi Arabia condemns Russia’s annexation moves inside Ukraine 230 |

244 | Pre- work out nutrition is necessary for good gym results know 245 | useful tips from fitness expert Faisal Khan 246 |

263 | Treehugger is a green consumer blog with a mission to bring a 264 | sustainable lifestyle to the masses. 265 |

280 | Microsiervos, which began in 2001, took its name from Douglas 281 | Coupland's novel Microserfs, a diary entry-style novel about 282 | internet pioneers. 283 |

298 | You want relentless celebrity gossip on tap? TMZ will provide 299 | it, and when we say relentless, we mean relentless. 300 |

Quick Contact

Contact us today and get the chance to collaborate with us.

Migrate your Kubernetes (From AKS to EKS). How?

Become a Master in Linux. How?

The Ultimate guide to Center a Div

Is HTML a programming language?

How to stay updated with the Javascript Libraries

Creating your own Ecommerce Platform

Is CSS the hardest programming language?

Getting started with Web Development