├── Screenshots
└── hackbotone.png
├── src
├── app
│ ├── icons
│ │ ├── app_logo.png
│ │ ├── ic_date.png
│ │ ├── ic_account.png
│ │ ├── ic_reddit.png
│ │ ├── ic_search.png
│ │ ├── hackbotone_logo.png
│ │ ├── ic_reddit_black.png
│ │ ├── ic_facebook_black.png
│ │ ├── ic_hackbot_banner.png
│ │ ├── ic_linkedin_black.png
│ │ ├── ic_twitter_black.png
│ │ ├── ic_whatsapp_black.png
│ │ ├── ic_facebook_black_large.png
│ │ ├── ic_github_black_large.png
│ │ ├── ic_linkedin_black_large.png
│ │ ├── ic_twitter_black_large.png
│ │ └── ic_youtube_black_large.png
│ ├── component
│ │ ├── App
│ │ │ ├── App.css
│ │ │ ├── App.js
│ │ │ └── routes.js
│ │ ├── Utils
│ │ │ ├── Constants.js
│ │ │ └── Footer.js
│ │ ├── NavBar
│ │ │ └── NavBar.js
│ │ ├── Blog
│ │ │ ├── BlogErrorPage.js
│ │ │ ├── BlogFooter.js
│ │ │ ├── BlogList.js
│ │ │ ├── Blogs.js
│ │ │ ├── BlogDetails.js
│ │ │ └── BlogHeader.js
│ │ ├── Search
│ │ │ └── Search.js
│ │ ├── About
│ │ │ ├── AboutPage.js
│ │ │ ├── About.js
│ │ │ └── AboutContent.js
│ │ └── SocialMedia
│ │ │ └── SocialMedia.js
│ └── css
│ │ └── index.css
├── client
│ └── index.js
└── server
│ ├── blogs
│ ├── blogs.js
│ └── blogcontroller.js
│ └── index.js
├── LICENSE
├── README.md
├── package.json
├── webpack.config.js
└── dummy_data.json
/Screenshots/hackbotone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/Screenshots/hackbotone.png
--------------------------------------------------------------------------------
/src/app/icons/app_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/app_logo.png
--------------------------------------------------------------------------------
/src/app/icons/ic_date.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_date.png
--------------------------------------------------------------------------------
/src/app/icons/ic_account.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_account.png
--------------------------------------------------------------------------------
/src/app/icons/ic_reddit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_reddit.png
--------------------------------------------------------------------------------
/src/app/icons/ic_search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_search.png
--------------------------------------------------------------------------------
/src/app/component/App/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | img {
6 | max-width: 100%;
7 | height: auto;
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/icons/hackbotone_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/hackbotone_logo.png
--------------------------------------------------------------------------------
/src/app/icons/ic_reddit_black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_reddit_black.png
--------------------------------------------------------------------------------
/src/app/component/Utils/Constants.js:
--------------------------------------------------------------------------------
1 | export const BASE_URL = "http://localhost:9000";
2 | export const DOMAIN_URL = "https://hackbotone.com";
3 |
--------------------------------------------------------------------------------
/src/app/icons/ic_facebook_black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_facebook_black.png
--------------------------------------------------------------------------------
/src/app/icons/ic_hackbot_banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_hackbot_banner.png
--------------------------------------------------------------------------------
/src/app/icons/ic_linkedin_black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_linkedin_black.png
--------------------------------------------------------------------------------
/src/app/icons/ic_twitter_black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_twitter_black.png
--------------------------------------------------------------------------------
/src/app/icons/ic_whatsapp_black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_whatsapp_black.png
--------------------------------------------------------------------------------
/src/app/icons/ic_facebook_black_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_facebook_black_large.png
--------------------------------------------------------------------------------
/src/app/icons/ic_github_black_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_github_black_large.png
--------------------------------------------------------------------------------
/src/app/icons/ic_linkedin_black_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_linkedin_black_large.png
--------------------------------------------------------------------------------
/src/app/icons/ic_twitter_black_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_twitter_black_large.png
--------------------------------------------------------------------------------
/src/app/icons/ic_youtube_black_large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anshumanpattnaik/hackbotone-mern-website/HEAD/src/app/icons/ic_youtube_black_large.png
--------------------------------------------------------------------------------
/src/client/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "react-dom";
3 | import { BrowserRouter } from "react-router-dom";
4 | import App from "../app/component/App/App";
5 |
6 | render(
7 |
8 | ,
10 | document.getElementById("root")
11 | );
12 |
--------------------------------------------------------------------------------
/src/app/component/App/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Switch, Route } from "react-router-dom";
3 | import routes from "./routes";
4 | import "./App.css";
5 |
6 | const App = () => {
7 | return (
8 |
9 | {routes.map((route, i) => (
10 |
13 | );
14 | };
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/app/component/NavBar/NavBar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import "../../css/index.css";
3 | import HackbotOne from "../../icons/app_logo.png";
4 |
5 | class NavBar extends Component {
6 | render() {
7 | return (
8 |
16 | );
17 | }
18 | }
19 | export default NavBar;
20 |
--------------------------------------------------------------------------------
/src/app/component/Blog/BlogErrorPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | class BlogErrorPage extends Component {
4 | render() {
5 | return (
6 |
7 |
10 |
11 |
12 | Oops! We can't seem to find the page you're looking for.
13 |
14 |
15 |
13 |
14 |
15 |
16 |
19 |
20 |
21 |
23 |
24 |
26 |
27 |
28 |
29 |
7 |
8 | Like us on Facebook
9 |
10 |
11 |
24 |
25 |
25 | https://hackbotone.com/blog/hackbotone-full-stack-application
26 |
27 |
28 | https://youtu.be/jUiYl1Bqe7s
29 |
30 |
31 | ### License
32 | This project is licensed under the [MIT License](LICENSE)
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-ssr",
3 | "version": "0.1.0",
4 | "description": "",
5 | "main": "server.js",
6 | "scripts": {
7 | "start-dev": "NODE_ENV=development webpack -w & NODE_ENV=development node server.js",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "cors": "^2.8.5",
15 | "express": "^4.15.3",
16 | "flatlist-react": "^1.3.1",
17 | "isomorphic-fetch": "^2.2.1",
18 | "lodash": "^4.17.15",
19 | "lodash.orderby": "^4.6.0",
20 | "mongodb": "^3.2.7",
21 | "mongoose": "^5.6.9",
22 | "mongoose-paginate": "^5.0.3",
23 | "mongoose-paginate-v2": "^1.2.1",
24 | "node-time-ago": "^1.0.0",
25 | "react": "^15.6.1",
26 | "react-dom": "^15.6.1",
27 | "react-facebook": "^8.1.4",
28 | "react-helmet": "^5.2.1",
29 | "react-html-markup": "^1.0.6",
30 | "react-router-dom": "^5.1.2",
31 | "serialize-javascript": ">=3.1.0"
32 | },
33 | "devDependencies": {
34 | "autoprefixer": "^7.1.2",
35 | "babel-core": "^6.25.0",
36 | "babel-loader": "^7.1.1",
37 | "babel-preset-react-app": "^3.0.1",
38 | "css-loader": "^0.28.4",
39 | "extract-text-webpack-plugin": "^2.1.2",
40 | "file-loader": "^0.11.2",
41 | "postcss-loader": "^2.0.6",
42 | "webpack": "^3.1.0",
43 | "webpack-node-externals": "^1.7.2"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/server/blogs/blogcontroller.js:
--------------------------------------------------------------------------------
1 | var express = require("express");
2 | var router = express.Router();
3 | var mongoose = require("mongoose");
4 |
5 | var Blog = require("./blogs");
6 | mongoose.connect("mongodb://127.0.0.1:27017/blogs");
7 |
8 | /* GET blogs listing. */
9 | router.get("/getAllBlogs", (req, res) => {
10 | const { page, perPage } = req.query;
11 | const options = {
12 | sort: { date: -1 },
13 | page: parseInt(page, 6) || 1,
14 | limit: parseInt(perPage, 6) || 6
15 | };
16 |
17 | Blog.paginate({}, options).then(function(result) {
18 | res.json(result);
19 | });
20 | });
21 |
22 | router.get("/searchblog", (req, res) => {
23 | var search = req.query.search;
24 | const { page, perPage } = req.query;
25 | const options = {
26 | sort: { date: -1 },
27 | page: parseInt(page, 6) || 1,
28 | limit: parseInt(perPage, 6) || 6
29 | };
30 |
31 | if (search == "") {
32 | Blog.paginate({}, options).then(function(result) {
33 | res.json(result);
34 | });
35 | } else {
36 | Blog.paginate(
37 | { $text: { $search: search, $caseSensitive: false } },
38 | options
39 | ).then(function(result) {
40 | res.json(result);
41 | });
42 | }
43 | });
44 |
45 | router.get("/blog/:short_title", (req, res) => {
46 | const short_title = req.params.short_title;
47 |
48 | Blog.findOne({ short_title: short_title }, function(err, result) {
49 | if (err) {
50 | console.log("Error in Fetching record");
51 | } else {
52 | res.json(result);
53 | }
54 | });
55 | });
56 |
57 | module.exports = router;
58 |
--------------------------------------------------------------------------------
/src/app/component/Blog/BlogFooter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | class BlogFooter extends Component {
4 | render() {
5 | return (
6 |
7 |
15 |
16 |
17 | Anshuman Pattnaik
18 |
19 |
20 | Hi there! I am the creator of HackbotOne website and my Youtube
21 | channel. I have around 5+ years of experience in the software
22 | industry and having specialized skills sets on Android, Unity3d,
23 | Node.js, MongoDB, Go, Reactjs, React-Native and many more and love
24 | to do bug bounty on my free time.
25 |
26 |
27 |
28 | If you want to know more about me then don't forget to follow me
29 | on twitter{" "}
30 |
36 | @anspattnaik
37 |
38 |
39 |
40 |
41 |
66 |
70 | );
71 | }
72 | }
73 |
74 | export default BlogList;
75 |
--------------------------------------------------------------------------------
/src/app/component/Utils/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import "../../css/index.css";
3 | import facebook from "../../icons/ic_facebook_black_large.png";
4 | import twitter from "../../icons/ic_twitter_black_large.png";
5 | import linkedin from "../../icons/ic_linkedin_black_large.png";
6 | import github from "../../icons/ic_github_black_large.png";
7 | import youtube from "../../icons/ic_youtube_black_large.png";
8 |
9 | class Footer extends Component {
10 | render() {
11 | return (
12 |
13 |
52 |
53 |
54 | © 2019 HACKBOTONE. ALL RIGHTS RESERVED.
55 |
56 |
57 |
29 | PREVIOUS
30 |
31 | );
32 | }
33 | }
34 | }
35 |
36 | loadNextPage() {
37 | if (this.props.blogs && this.props.blogs.docs.length > 0) {
38 | var totalPages = this.props.blogs.pages;
39 | var activePage = this.props.blogs.page;
40 | var pageNo;
41 |
42 | if (activePage === totalPages) {
43 | pageNo = totalPages;
44 | } else {
45 | pageNo = activePage + 1;
46 | }
47 | var pageUrl = "/page/" + pageNo;
48 | if (activePage !== totalPages) {
49 | return (
50 |
51 | NEXT
52 |
53 | );
54 | }
55 | }
56 | }
57 |
58 | renderBlogHeader() {
59 | if (this.props.blogs.docs.length > 0) {
60 | const blogs = this.props.blogs.docs;
61 | return (
62 |
63 | {blogs &&
64 | blogs.map(post => (
65 |
66 |
78 | ))}
79 |
89 |
90 |
91 | {this.renderBlogHeader()}
92 |
93 |
94 | {this.loadPreviousPage()}
95 |
96 |
97 | {this.loadNextPage()}
98 |
99 |
100 |
101 |
102 |
103 |
105 |
108 |
109 |
111 |
112 |
7 |
8 | About
9 |
10 |
11 |
19 |
20 |
25 |
26 |
38 |
50 |
62 |
74 |
86 |
87 |
88 |
89 |
72 |
73 |
74 |
75 |
76 | {this.state.posts ? (
77 |
95 | ) : (
96 |
97 | )}
98 |
99 |
100 |
101 |
103 |
106 |
107 |
109 |
110 |
111 |
112 |
{this.renderBlogDetails()}
;
118 | }
119 | }
120 | export default BlogDetails;
121 |
--------------------------------------------------------------------------------
/src/app/component/Blog/BlogHeader.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import Markup from "react-html-markup";
3 | import * as baseUrl from "../Utils/Constants";
4 | import twiiter from "../../icons/ic_twitter_black.png";
5 | import reddit from "../../icons/ic_reddit_black.png";
6 | import facebook from "../../icons/ic_facebook_black.png";
7 | import whatsapp from "../../icons/ic_whatsapp_black.png";
8 |
9 | class BlogHeader extends Component {
10 | renderDescription() {
11 | if (this.props.isDescription) {
12 | return
16 | {this.props.short_description}
17 |
18 | );
19 | }
20 | }
21 |
22 | renderblogThumb() {
23 | const blogUrl = "/blog/" + this.props.short_title;
24 | if (this.props.short_title) {
25 | return (
26 |
27 |
29 | );
30 | } else {
31 | return
40 | {this.props.title}
41 |
42 | );
43 | } else {
44 | return {this.props.title}
;
45 | }
46 | }
47 |
48 | renderblogShare() {
49 | if (this.props.isDescription) {
50 | const blogUrl = "/blog/" + this.props.id;
51 | const blogTitle = this.props.title;
52 | return (
53 |
95 | );
96 | }
97 | }
98 |
99 | render() {
100 | return (
101 |
102 |
103 | {this.renderblogThumb()}
104 |
105 | {this.renderblogTitle()}
106 |
107 |
114 | {this.renderblogShare()}
115 |
116 |
117 | {this.renderDescription()}
118 |
119 |
120 | {this.props.keyword}
121 |
122 |
123 |
Kali Linux is a Debian-based Linux distribution operating system and it is widely used for Penetration Testing and Security Auditing. Kali contains many several tools which are mostly used for various information security tasks, such as Penetration Testing, Security research, Computer Forensics and Reverse Engineering. Kali Linux is developed, funded and maintained by Offensive Security.
VIDEO
Free to download
Kali Linux is free to download from the official website. Kali Linux image files make a fresh release every few months, which is always available for download. For more information, you can visit their official website Kali Linux Downloads
Installation Requirements
A minimum of 20 GB disk space for the Kali Linux install.
1. RAM for i386 and amd64 architectures,
2. Minimum: 1GB, recommended: 2GB or more.
3. CD-DVD Drive / USB boot support.
A minimum of 20 GB disk space for the Kali Linux install.
For more information on install Kali Linux, you can visit their official website Kali Linux Hard Disk Installation
More than 600 penetration testing tools
Kali Linux has around more than 600 penetration testing tools from various domains and it will be very helpful for ethical hackers to penetrate a network. The tools are categorized from these domains such as
Information Gathering, Vulnerability Analysis, Wireless Attacks, Web Applications, Exploitation Tools, Stress Testing, Forensics Tools, Sniffing & Spoofing, Password Attacks, Maintaining Access, Reverse Engineering, Reporting Tools and Hardware Hacking.
Open source Git tree
Kali Linux development tree open source by the community for all. The complete source code of Kali Linux is available for anyone who ever wants to do some modifications or rebuild the packages as per their needs. For information on Kali Git tree please visit their official website Kali Linux Git
For more information on Kali Linux
If you want to know more about Kali Linux then please visit their related articles section.
1. Should I Use Kali Linux? -
2. Kali Community Support -
3. Customizing Kali Linux -
I hope you guys like this post-bye bye for now
Happy Hacking :)
",
9 | "date": "10/11/2019",
10 | "formatted_date": "November 10, 2019",
11 | "author": "BY ANSHUMAN",
12 | "__v": 0
13 | }
14 | ]
15 |
--------------------------------------------------------------------------------
/src/app/component/About/AboutContent.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import "../../css/index.css";
3 |
4 | class AboutContent extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
13 |
14 |
15 |
Anshuman Pattnaik
16 |
17 |
71 |
72 |
73 | I am the creator of HackbotOne website and my{" "}
74 |
80 | Youtube channel
81 | {" "}
82 | and both of these platforms produce contents from various domains
83 | such as Web Hacking, Bug Bounty, Application Development & Game
84 | Development. This was my plan from quite a long time to make
85 | contents on these domains which will be helpful for those who are
86 | beginners and also those who have interest and passion in these
87 | areas. And now I have the platform to share my knowledge and
88 | experience to the world.
89 |
90 |
91 | Just to share my background I have around 5+ years of experience in
92 | the software industry and worked on many domains both Mobile & Web
93 | platforms but I would say it's just the beginning of my career lots
94 | more things to learn and explore in this industry and I always love
95 | Twitter because whenever I need to find an answer I'll tweet or else
96 | I'll search through #hashtags and I'll get my answer because I found
97 | Twitter is a platform where we can join to many communities and
98 | share ideas and experience.
99 |
100 |
101 | I love to do bug bounty on my free time and it's quite fun and
102 | exciting to hack on a live website and earn some bounty and I would
103 | like to thank all of these companies for running Bug Bounty programs
104 | because by this I can improve my skills sets in security.
105 |
106 |
107 | As a hobby, I love to play Playstation 4 games (Watchdog 2 ) is one
108 | of my favourite game of all the time and also love to watch Movies &
109 | TV shows on Netflix.
110 |
111 |
112 | Don't forget to follow me on twitter{" "}
113 |
119 | @anspattnaik
120 |
121 |
122 |
Thank you
123 |
124 |
60 |
62 | );
63 |
64 | var response = JSON.stringify(initialData);
65 | var title;
66 | var thumb;
67 | var description;
68 | var blog_link;
69 | if (
70 | routerUrl == "/" ||
71 | routerUrl.includes("/?search") ||
72 | routerUrl.includes("/page/")
73 | ) {
74 | title =
75 | "HackbotOne - Game Development, App Development & Ethical Hacking Tutorials";
76 | thumb =
77 | "https://assets.hackbotone.com/images/icons/hackbotone_logo.png";
78 | description =
79 | "HackbotOne website produces contents from various domains such as Web Hacking, Bug Bounty, Application Development & Game Development. ";
80 | blog_link = site_url;
81 | } else if (routerUrl.includes("/about")) {
82 | title = "About Me";
83 | thumb =
84 | "https://assets.hackbotone.com/images/icons/anshuman_pattnaik.jpg";
85 | description =
86 | "I am the creator of HackbotOne website and my Youtube channel and both of these platforms produce contents from various domains such as Web Hacking, Bug Bounty, Application Development & Game Development. This was my plan from quite a long time to make contents on these domains which will be helpful for those who are beginners and also those who have interest and passion in these areas. And now I have the platform to share my knowledge and experience to the world.";
87 | blog_link = site_url + "/about";
88 | } else if (routerUrl.includes("/blog")) {
89 | var results = JSON.parse(response);
90 | if (results != null) {
91 | title = results.title;
92 | thumb = results.thumb;
93 | description = results.short_description;
94 | blog_link = site_url + "/blog/" + results.short_title;
95 | } else {
96 | title =
97 | "404 - Oops! We can't seem to find the page you're looking for.";
98 | description =
99 | "404 - Oops! We can't seem to find the page you're looking for.";
100 | }
101 | }
102 |
103 | res.send(`
104 |
105 |
106 |
107 | ${title}
111 | ${markup}
136 |
137 |
138 | `);
139 | })
140 | .catch(next);
141 | }
142 | });
143 |
144 | app.listen(process.env.PORT || 9000, () => {
145 | console.log("Server is listening");
146 | });
147 |
--------------------------------------------------------------------------------
/src/app/css/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap");
2 |
3 | body {
4 | font-family: "Roboto Condensed", sans-serif;
5 | margin: 0;
6 | overflow-x: hidden;
7 | }
8 |
9 | a {
10 | text-decoration: none;
11 | }
12 |
13 | /***********************Header Styles***********************/
14 | .header-div-container {
15 | width: 100%;
16 | height: 5.8em;
17 | line-height: 5.8em;
18 | position: fixed;
19 | background: #ffffff;
20 | display: grid;
21 | grid-template-columns: 20% 70%;
22 | top: 0;
23 | border-bottom: 0.5px solid #dfdfdf;
24 | }
25 | .app-logo {
26 | max-width: auto;
27 | max-height: auto;
28 | vertical-align: middle;
29 | }
30 | /***********************************************************/
31 |
32 | /*************************Blog List Container Styles**********************/
33 | .blog-parent-container {
34 | display: grid;
35 | grid-template-columns: 20% 40% 40%;
36 | margin-top: 8em;
37 | }
38 | .blog-left-container {
39 | padding: 1em;
40 | }
41 | .blog-middle-container {
42 | padding: 1em;
43 | }
44 | .blog-right-container {
45 | padding: 1em;
46 | }
47 | .blog-post-container {
48 | width: 100%;
49 | }
50 | .blog-post-date-author-keyword-container {
51 | display: grid;
52 | grid-template-columns: 15% 12% 18%;
53 | }
54 | .blog-post-author-container {
55 | line-height: 30px;
56 | }
57 | .blog-post-date-container {
58 | line-height: 30px;
59 | }
60 | .blog-post-keyword-container {
61 | line-height: 30px;
62 | }
63 | .keyword-container {
64 | height: 30px;
65 | border-radius: 5px;
66 | background: #f2f2f2;
67 | }
68 | .blog-post-thumb {
69 | width: 100%;
70 | height: 100%;
71 | }
72 | .blog-post-thumb-zoom {
73 | height: 100%;
74 | overflow: hidden;
75 | }
76 |
77 | .blog-post-thumb-zoom img {
78 | transition: transform 0.5s, filter 1.5s ease-in-out;
79 | }
80 | .blog-post-thumb-zoom:hover img {
81 | transform: scale(1.1);
82 | }
83 | .blog-pagination-container {
84 | width: 100%;
85 | height: 5em;
86 | line-height: 5em;
87 | padding: 1em;
88 | display: flex;
89 | }
90 | .blog-pagination-previous-container {
91 | width: 50%;
92 | height: 5em;
93 | line-height: 5em;
94 | display: flex;
95 | justify-content: flex-start;
96 | }
97 | .blog-pagination-next-container {
98 | width: 50%;
99 | height: 5em;
100 | line-height: 5em;
101 | display: flex;
102 | justify-content: flex-end;
103 | }
104 | .blog-pagination-button {
105 | width: 6em;
106 | height: 3em;
107 | border: none;
108 | outline: none;
109 | cursor: pointer;
110 | font-family: "Roboto Condensed", sans-serif;
111 | font-size: 0.98rem;
112 | font-weight: 500;
113 | color: #fff9f9;
114 | background: #1b1b1b;
115 | border-radius: 0.1em;
116 | }
117 | .blog-pagination-button:hover {
118 | width: 6em;
119 | height: 3em;
120 | border: none;
121 | outline: none;
122 | cursor: pointer;
123 | font-family: "Roboto Condensed", sans-serif;
124 | font-size: 0.98rem;
125 | font-weight: 500;
126 | color: #fff9f9;
127 | background: #2e2e2e;
128 | border-radius: 0.1em;
129 | }
130 | /*************************************************************************/
131 |
132 | /**********************Blog Header Styles**************************/
133 | .blog-header-container {
134 | width: 100%;
135 | height: auto;
136 | padding: 1em;
137 | }
138 | .blog-header-no-link-title {
139 | font-family: "Roboto Condensed", sans-serif;
140 | font-size: 2rem;
141 | font-weight: 700;
142 | text-shadow: 0.2px 0.2px #5e5d5d;
143 | color: #3b3a3a;
144 | }
145 | .blog-header-title {
146 | font-family: "Roboto Condensed", sans-serif;
147 | font-size: 2rem;
148 | font-weight: 700;
149 | text-shadow: 0.2px 0.2px #5e5d5d;
150 | color: #3b3a3a;
151 | }
152 | .blog-header-title:hover {
153 | font-family: "Roboto Condensed", sans-serif;
154 | font-size: 2rem;
155 | font-weight: 700;
156 | color: #fc4c00;
157 | cursor: pointer;
158 | }
159 | .blog-header-short-description-container {
160 | width: 100%;
161 | height: auto;
162 | }
163 | .blog-header-short-description {
164 | font-family: "Roboto Condensed", sans-serif;
165 | font-size: 1.01rem;
166 | font-weight: 100;
167 | line-height: 1.7em;
168 | color: #6b6a6a;
169 | }
170 | .blog-header-child-section {
171 | width: 100%;
172 | height: 2.5em;
173 | line-height: 2.5em;
174 | display: grid;
175 | grid-template-columns: 75% 25%;
176 | }
177 | .blog-header-author {
178 | font-family: "Roboto Condensed", sans-serif;
179 | font-size: 0.9rem;
180 | font-weight: 500;
181 | color: #4b4b4b;
182 | vertical-align: middle;
183 | }
184 | .blog-header-author:hover {
185 | font-family: "Roboto Condensed", sans-serif;
186 | font-size: 0.9rem;
187 | font-weight: 500;
188 | color: #fc4c00;
189 | vertical-align: middle;
190 | }
191 | .blog-header-date {
192 | font-family: "Roboto Condensed", sans-serif;
193 | font-size: 0.9rem;
194 | font-weight: 500;
195 | color: #4b4b4b;
196 | vertical-align: middle;
197 | }
198 | .blog-header-keyword-container {
199 | margin-top: 2em;
200 | }
201 | .blog-header-keyword {
202 | font-family: "Roboto Condensed", sans-serif;
203 | font-size: 0.6rem;
204 | font-weight: 700;
205 | color: #4b4b4b;
206 | padding: 0.5em;
207 | border: 0.1em solid #bdbaba;
208 | }
209 | .blog-header-share-icon-container {
210 | display: flex;
211 | height: 2em;
212 | }
213 | .blog-header-icon-container {
214 | width: 2.5em;
215 | height: 2.5em;
216 | display: flex;
217 | justify-content: center;
218 | align-items: center;
219 | }
220 | .blog-header-icon-container:hover {
221 | width: 2.5em;
222 | height: 2.5em;
223 | display: flex;
224 | justify-content: center;
225 | align-items: center;
226 | background: #f2f2f2;
227 | }
228 | .blog-header-share-icon {
229 | width: 1.2em;
230 | height: 1.2em;
231 | vertical-align: middle;
232 | }
233 | .blog-header-thumb-container {
234 | width: 100%;
235 | height: 100%;
236 | }
237 | .blog-header-thumb {
238 | width: 100%;
239 | height: 100%;
240 | }
241 | .blog-header-divider {
242 | width: 100%;
243 | height: 1px;
244 | margin-top: 2.5em;
245 | background: #d8d8d8;
246 | }
247 | /****************************************************************/
248 |
249 | /**********************Blog Error Page Styles**********************/
250 | .blog-error-page-container {
251 | width: 100%;
252 | height: auto;
253 | padding: 1em;
254 | }
255 | .blog-404-container {
256 | width: 100%;
257 | height: 3.5em;
258 | margin-top: 3em;
259 | display: flex;
260 | justify-content: center;
261 | align-items: center;
262 | }
263 | .blog-404-label {
264 | font-family: "Roboto Condensed", sans-serif;
265 | font-size: 8rem;
266 | font-weight: 700;
267 | color: #3b3a3a;
268 | }
269 | .blog-oops-container {
270 | width: 100%;
271 | height: 10em;
272 | display: flex;
273 | justify-content: center;
274 | align-items: center;
275 | }
276 | .blog-oops-label {
277 | font-family: "Roboto Condensed", sans-serif;
278 | font-size: 1.5rem;
279 | font-weight: 100;
280 | color: #3b3a3a;
281 | }
282 | /******************************************************************/
283 |
284 | /**************************Blog Footer Styles*****************************/
285 | .blog-footer-container {
286 | width: 100%;
287 | height: auto;
288 | display: flex;
289 | }
290 | .blog-footer-author-container {
291 | width: 15em;
292 | height: auto;
293 | padding: 0.5em;
294 | }
295 | .blog-footer-author-pic {
296 | border-radius: 10em;
297 | }
298 | .blog-footer-name-twitter-container {
299 | padding: 0.5em;
300 | }
301 | .blog-footer-name {
302 | font-family: "Roboto Condensed", sans-serif;
303 | font-size: 1rem;
304 | font-weight: 700;
305 | color: #3b3a3a;
306 | }
307 | .blog-footer-bio {
308 | font-family: "Roboto Condensed", sans-serif;
309 | font-size: 1.05rem;
310 | line-height: 1.5em;
311 | color: #6b6a6a;
312 | }
313 | .blog-footer-twitter {
314 | font-family: "Roboto Condensed", sans-serif;
315 | font-size: 1.05rem;
316 | color: #fc4c00;
317 | }
318 | /*************************************************************************/
319 |
320 | /*************************Search Container Styles**********************/
321 | .blog-search-container {
322 | width: 19em;
323 | padding: 1em;
324 | }
325 | .search-container {
326 | width: 19em;
327 | height: 3.2em;
328 | display: grid;
329 | grid-template-columns: 80% 10%;
330 | border: 1px solid #dfdfdf;
331 | }
332 | .search-input-div {
333 | width: 16em;
334 | line-height: 3em;
335 | }
336 | .search-input {
337 | width: 95%;
338 | text-indent: 1em;
339 | font-family: "Roboto Condensed", sans-serif;
340 | font-size: 0.95rem;
341 | color: #807f7f;
342 | border: none;
343 | outline: none;
344 | }
345 | .search-btn-div {
346 | width: 3.8em;
347 | height: auto;
348 | display: flex;
349 | border: none;
350 | outline: none;
351 | cursor: pointer;
352 | justify-content: center;
353 | align-items: center;
354 | background: #ffffff;
355 | }
356 | .search-icon {
357 | width: 1.2em;
358 | height: 1.2em;
359 | vertical-align: middle;
360 | }
361 | .search-results-center-div {
362 | padding: 1em;
363 | }
364 | .search-results-label-span {
365 | font-family: "Roboto Condensed", sans-serif;
366 | font-size: 1.1rem;
367 | font-weight: bold;
368 | color: #000;
369 | }
370 | /**********************************************************************/
371 |
372 | /*************************About Container Styles**********************/
373 | .blog-about-container {
374 | width: 19em;
375 | line-height: 3.2em;
376 | padding: 1em;
377 | }
378 | .about-container {
379 | width: 19em;
380 | height: 10em;
381 | display: grid;
382 | grid-template-columns: 100%;
383 | }
384 | .about-me-container {
385 | width: 100%;
386 | height: 3em;
387 | line-height: 3em;
388 | border-bottom: 0.5px solid #fc4c00;
389 | }
390 | .about-label {
391 | font-family: "Roboto Condensed", sans-serif;
392 | font-size: 1.3rem;
393 | font-weight: 700;
394 | color: #3b3a3a;
395 | }
396 | .about-profile-container {
397 | width: 100%;
398 | height: 5em;
399 | display: grid;
400 | grid-template-columns: 28% 70%;
401 | }
402 | .about-profile-pic-container {
403 | width: 7em;
404 | height: auto;
405 | }
406 | .about-profile-pic {
407 | width: 5em;
408 | height: auto;
409 | vertical-align: middle;
410 | border-radius: 10em;
411 | }
412 | .about-profile-details-container {
413 | width: 14em;
414 | height: auto;
415 | display: grid;
416 | grid-template-columns: 100%;
417 | }
418 | .about-profile-name-div {
419 | height: 2.5em;
420 | line-height: 2.5em;
421 | }
422 | .about-profile-name {
423 | font-family: "Roboto Condensed", sans-serif;
424 | font-size: 1.2rem;
425 | font-weight: 600;
426 | color: #3b3a3a;
427 | margin-left: 0.5em;
428 | }
429 | .about-social-profile-div {
430 | display: flex;
431 | height: 2.5em;
432 | line-height: 2.5em;
433 | }
434 | .about-social-media-icon-div {
435 | width: 2.5em;
436 | height: 2.5em;
437 | line-height: 2.5em;
438 | margin-left: 0.2em;
439 | }
440 | .about-social-media-icon-size {
441 | width: 2em;
442 | height: 2em;
443 | }
444 | /*********************************************************************/
445 |
446 | /*************************Social Media Container Styles**********************/
447 | .blog-social-media-container {
448 | width: 19em;
449 | height: auto;
450 | padding: 1em;
451 | }
452 | .social-media-container {
453 | width: 19em;
454 | height: auto;
455 | display: grid;
456 | grid-template-columns: 100%;
457 | }
458 | .social-media-label-container {
459 | width: 100%;
460 | height: 3em;
461 | line-height: 3em;
462 | border-bottom: 0.5px solid #fc4c00;
463 | }
464 | .social-media-label {
465 | font-family: "Roboto Condensed", sans-serif;
466 | font-size: 1.3rem;
467 | font-weight: 700;
468 | color: #3b3a3a;
469 | }
470 | .social-media-fb-container {
471 | width: 19em;
472 | height: auto;
473 | margin-top: 2em;
474 | }
475 | .social-media-iframe {
476 | overflow: hidden;
477 | }
478 | /****************************************************************************/
479 |
480 | /*************************About Page Container Styles**********************/
481 | .about-page-parent-container {
482 | display: grid;
483 | grid-template-columns: 20% 40% 40%;
484 | margin-top: 8em;
485 | }
486 | .about-page-left-container {
487 | padding: 1em;
488 | }
489 | .about-page-middle-container {
490 | padding: 1em;
491 | }
492 | .about-page-right-container {
493 | padding: 1em;
494 | }
495 | .about-author-pic-container {
496 | width: 100%;
497 | height: auto;
498 | display: flex;
499 | justify-content: center;
500 | align-items: center;
501 | }
502 | .about-author-pic {
503 | width: 6em;
504 | height: auto;
505 | border-radius: 10em;
506 | }
507 | .about-author-name-container {
508 | width: 100%;
509 | height: auto;
510 | display: flex;
511 | justify-content: center;
512 | align-items: center;
513 | }
514 | .about-author-name {
515 | font-family: "Roboto Condensed", sans-serif;
516 | font-size: 1.2em;
517 | font-weight: 700;
518 | color: #3b3a3a;
519 | }
520 | .about-message-container {
521 | margin-top: 2em;
522 | }
523 | .about-message-label {
524 | font-family: "Roboto Condensed", sans-serif;
525 | font-size: 1rem;
526 | line-height: 2rem;
527 | color: #6b6a6a;
528 | }
529 | .about-message-link {
530 | font-family: "Roboto Condensed", sans-serif;
531 | font-size: 1rem;
532 | color: #fc4c00;
533 | text-decoration: none;
534 | }
535 | .about-message-link:hover {
536 | font-family: "Roboto Condensed", sans-serif;
537 | font-size: 1rem;
538 | color: #fc4c00;
539 | text-decoration: underline;
540 | }
541 | .about-social-media-container {
542 | width: 100%;
543 | height: 3em;
544 | display: flex;
545 | justify-content: center;
546 | align-items: center;
547 | }
548 | .about-social-media-icon-container {
549 | width: 15em;
550 | height: 3em;
551 | display: flex;
552 | }
553 | .social-media-share-icon-large-size {
554 | width: 2em;
555 | height: 2em;
556 | margin: 0.5em;
557 | }
558 | /****************************************************************************/
559 |
560 | /*********************************Footer Styles******************************/
561 | .footer-container {
562 | width: 100%;
563 | height: 10em;
564 | background: #000000;
565 | }
566 | .footer-social-media-container {
567 | width: 100%;
568 | height: 5em;
569 | display: flex;
570 | justify-content: center;
571 | align-items: center;
572 | }
573 | .footer-social-media-icon-container {
574 | width: 40%;
575 | height: 5em;
576 | line-height: 5em;
577 | display: flex;
578 | justify-content: center;
579 | align-items: center;
580 | border-bottom: 0.1px solid #2c2c2c;
581 | }
582 | .footer-social-media-icon-size {
583 | width: 2.5em;
584 | height: auto;
585 | margin: 0.5em;
586 | vertical-align: middle;
587 | }
588 | .footer-copyright-container {
589 | width: 100%;
590 | height: 5em;
591 | display: flex;
592 | justify-content: center;
593 | align-items: center;
594 | }
595 | .footer-copyright-label {
596 | font-family: "Roboto Condensed", sans-serif;
597 | font-size: 0.95rem;
598 | text-shadow: 0.2px 0.2px #5e5d5d;
599 | color: #555353;
600 | }
601 | /************************************************************************/
602 |
603 | @media only screen and (max-width: 1000px) {
604 | /***********************Header Styles***********************/
605 | .header-div-container {
606 | width: 100%;
607 | height: 5.8em;
608 | line-height: 5.8em;
609 | position: fixed;
610 | background: #ffffff;
611 | display: grid;
612 | grid-template-columns: 100%;
613 | top: 0;
614 | border-bottom: 0.5px solid #dfdfdf;
615 | }
616 | .app-logo {
617 | max-width: auto;
618 | max-height: auto;
619 | vertical-align: middle;
620 | }
621 | /***********************************************************/
622 |
623 | /*************************Blog List Container Styles**********************/
624 | .blog-parent-container {
625 | display: grid;
626 | grid-template-columns: 100%;
627 | margin-top: 5em;
628 | }
629 | .blog-left-container {
630 | padding: 1em;
631 | }
632 | .blog-middle-container {
633 | padding: 1em;
634 | }
635 | .blog-right-container {
636 | padding: 1em;
637 | }
638 | .blog-post-container {
639 | }
640 | .blog-post-date-author-keyword-container {
641 | display: grid;
642 | grid-template-columns: 25% 20% 20%;
643 | }
644 | .blog-post-author-container {
645 | line-height: 50px;
646 | }
647 | .blog-post-date-container {
648 | line-height: 50px;
649 | }
650 | .blog-post-keyword-container {
651 | line-height: 50px;
652 | }
653 | .keyword-container {
654 | height: 50px;
655 | border-radius: 5px;
656 | background: #f2f2f2;
657 | }
658 | .blog-post-thumb {
659 | width: 100%;
660 | height: 100%;
661 | }
662 | .blog-post-thumb-zoom {
663 | height: 100%;
664 | overflow: hidden;
665 | }
666 |
667 | .blog-post-thumb-zoom img {
668 | transition: transform 0.5s, filter 1.5s ease-in-out;
669 | }
670 | .blog-post-thumb-zoom:hover img {
671 | transform: scale(1.1);
672 | }
673 | .blog-pagination-container {
674 | width: 100%;
675 | height: 5em;
676 | line-height: 5em;
677 | padding: 1;
678 | display: flex;
679 | }
680 | .blog-pagination-previous-container {
681 | width: 50%;
682 | height: 5em;
683 | line-height: 5em;
684 | display: flex;
685 | justify-content: flex-start;
686 | }
687 | .blog-pagination-next-container {
688 | width: 50%;
689 | height: 5em;
690 | line-height: 5em;
691 | display: flex;
692 | justify-content: flex-end;
693 | }
694 | .blog-pagination-button {
695 | width: 6em;
696 | height: 3em;
697 | border: none;
698 | outline: none;
699 | cursor: pointer;
700 | font-family: "Roboto Condensed", sans-serif;
701 | font-size: 0.98rem;
702 | font-weight: 500;
703 | color: #fff9f9;
704 | background: #1b1b1b;
705 | border-radius: 0.1em;
706 | }
707 | .blog-pagination-button:hover {
708 | width: 6em;
709 | height: 3em;
710 | border: none;
711 | outline: none;
712 | cursor: pointer;
713 | font-family: "Roboto Condensed", sans-serif;
714 | font-size: 0.98rem;
715 | font-weight: 500;
716 | color: #fff9f9;
717 | background: #2e2e2e;
718 | border-radius: 0.1em;
719 | }
720 | /*************************************************************************/
721 |
722 | /**********************Blog Error Page Styles**********************/
723 | .blog-error-page-container {
724 | width: 100%;
725 | height: auto;
726 | padding: 1em;
727 | }
728 | .blog-404-container {
729 | width: 100%;
730 | height: 3.5em;
731 | margin-top: 3em;
732 | display: flex;
733 | justify-content: center;
734 | align-items: center;
735 | }
736 | .blog-404-label {
737 | font-family: "Roboto Condensed", sans-serif;
738 | font-size: 8rem;
739 | font-weight: 700;
740 | color: #3b3a3a;
741 | }
742 | .blog-oops-container {
743 | width: 100%;
744 | height: 10em;
745 | display: flex;
746 | justify-content: center;
747 | align-items: center;
748 | }
749 | .blog-oops-label {
750 | font-family: "Roboto Condensed", sans-serif;
751 | font-size: 1.5rem;
752 | font-weight: 100;
753 | color: #3b3a3a;
754 | }
755 | /******************************************************************/
756 |
757 | /**********************Blog Header Styles**************************/
758 | .blog-header-container {
759 | width: 100%;
760 | height: auto;
761 | padding: 1em;
762 | }
763 | .blog-header-no-link-title {
764 | font-family: "Roboto Condensed", sans-serif;
765 | font-size: 2rem;
766 | font-weight: 700;
767 | text-shadow: 0.2px 0.2px #5e5d5d;
768 | color: #3b3a3a;
769 | }
770 | .blog-header-title {
771 | font-family: "Roboto Condensed", sans-serif;
772 | font-size: 2rem;
773 | font-weight: 700;
774 | text-shadow: 0.2px 0.2px #5e5d5d;
775 | color: #3b3a3a;
776 | }
777 | .blog-header-title:hover {
778 | font-family: "Roboto Condensed", sans-serif;
779 | font-size: 2rem;
780 | font-weight: 700;
781 | color: #fc4c00;
782 | cursor: pointer;
783 | }
784 | .blog-header-short-description-container {
785 | width: 100%;
786 | height: auto;
787 | }
788 | .blog-header-short-description {
789 | font-family: "Roboto Condensed", sans-serif;
790 | font-size: 1.01rem;
791 | font-weight: 100;
792 | line-height: 1.7em;
793 | color: #6b6a6a;
794 | }
795 | .blog-header-child-section {
796 | width: 100%;
797 | height: 2em;
798 | line-height: 2em;
799 | display: grid;
800 | grid-template-columns: 70% 32%;
801 | }
802 | .blog-header-author-date {
803 | font-family: "Roboto Condensed", sans-serif;
804 | font-size: 0.9rem;
805 | font-weight: 500;
806 | color: #4b4b4b;
807 | }
808 | .blog-header-keyword-container {
809 | margin-top: 2em;
810 | }
811 | .blog-header-keyword {
812 | font-family: "Roboto Condensed", sans-serif;
813 | font-size: 0.6rem;
814 | font-weight: 700;
815 | color: #4b4b4b;
816 | padding: 0.5em;
817 | border: 0.1em solid #bdbaba;
818 | }
819 | .blog-header-share-icon-container {
820 | display: flex;
821 | height: 2em;
822 | }
823 | .blog-header-icon-container {
824 | width: 2.5em;
825 | height: 2.5em;
826 | display: flex;
827 | flex-direction: column;
828 | justify-content: center;
829 | align-items: center;
830 | }
831 | .blog-header-icon-container:hover {
832 | width: 2.5em;
833 | height: 2.5em;
834 | display: flex;
835 | justify-content: center;
836 | align-items: center;
837 | background: #f2f2f2;
838 | }
839 | .blog-header-share-icon {
840 | width: 1.1em;
841 | height: 1.1em;
842 | vertical-align: middle;
843 | }
844 | .blog-header-thumb-container {
845 | width: 100%;
846 | height: 100%;
847 | }
848 | .blog-header-thumb {
849 | width: 100%;
850 | height: 100%;
851 | }
852 | .blog-header-divider {
853 | width: 100%;
854 | height: 1px;
855 | margin-top: 2.5em;
856 | background: #d8d8d8;
857 | }
858 | /****************************************************************/
859 |
860 | /**************************Blog Footer Styles*****************************/
861 | .blog-footer-container {
862 | width: 100%;
863 | height: auto;
864 | display: flex;
865 | }
866 | .blog-footer-author-container {
867 | width: 15em;
868 | height: auto;
869 | padding: 0.5em;
870 | }
871 | .blog-footer-author-pic {
872 | border-radius: 10em;
873 | }
874 | .blog-footer-name-twitter-container {
875 | padding: 0.5em;
876 | }
877 | .blog-footer-name {
878 | font-family: "Roboto Condensed", sans-serif;
879 | font-size: 0.9rem;
880 | font-weight: 700;
881 | color: #3b3a3a;
882 | }
883 | .blog-footer-bio {
884 | font-family: "Roboto Condensed", sans-serif;
885 | font-size: 0.9rem;
886 | line-height: 1.5em;
887 | color: #6b6a6a;
888 | }
889 | .blog-footer-twitter {
890 | font-family: "Roboto Condensed", sans-serif;
891 | font-size: 0.9rem;
892 | color: #fc4c00;
893 | }
894 | /*************************************************************************/
895 |
896 | /*************************Search Container Styles**********************/
897 | .blog-search-container {
898 | width: 100%;
899 | line-height: 3.2em;
900 | }
901 | .search-container {
902 | width: 19em;
903 | height: 3.2em;
904 | display: grid;
905 | margin: 0 auto;
906 | grid-template-columns: 80% 10%;
907 | border: 1px solid #dfdfdf;
908 | }
909 | .search-input-div {
910 | width: 16em;
911 | line-height: 3em;
912 | }
913 | .search-input {
914 | width: 95%;
915 | text-indent: 1em;
916 | font-family: "Roboto Condensed", sans-serif;
917 | font-size: 0.95rem;
918 | color: #807f7f;
919 | border: none;
920 | outline: none;
921 | }
922 | .search-btn-div {
923 | width: 3.8em;
924 | height: auto;
925 | display: flex;
926 | border: none;
927 | outline: none;
928 | cursor: pointer;
929 | justify-content: center;
930 | align-items: center;
931 | background: #ffffff;
932 | }
933 | .search-icon {
934 | width: 1.2em;
935 | height: 1.2em;
936 | vertical-align: middle;
937 | }
938 | .search-results-center-div {
939 | padding: 1em;
940 | }
941 | .search-results-label-span {
942 | font-family: "Roboto Condensed", sans-serif;
943 | font-size: 1.1rem;
944 | font-weight: bold;
945 | color: #000;
946 | }
947 | /**********************************************************************/
948 |
949 | /*************************About Container Styles**********************/
950 | .blog-about-container {
951 | width: 100%;
952 | line-height: 3.2em;
953 | padding: 1em;
954 | margin: 0 auto;
955 | }
956 | .about-container {
957 | width: 19em;
958 | height: 10em;
959 | margin: 0 auto;
960 | display: grid;
961 | grid-template-columns: 100%;
962 | }
963 | .about-me-container {
964 | width: 100%;
965 | height: 3em;
966 | line-height: 3em;
967 | border-bottom: 0.5px solid #fc4c00;
968 | }
969 | .about-label {
970 | font-family: "Roboto Condensed", sans-serif;
971 | font-size: 1.3rem;
972 | font-weight: 700;
973 | color: #3b3a3a;
974 | }
975 | .about-profile-container {
976 | width: 100%;
977 | height: 5em;
978 | display: grid;
979 | grid-template-columns: 28% 70%;
980 | }
981 | .about-profile-pic-container {
982 | width: 7em;
983 | height: auto;
984 | }
985 | .about-profile-pic {
986 | width: 4.5em;
987 | height: auto;
988 | vertical-align: middle;
989 | border-radius: 10em;
990 | }
991 | .about-profile-details-container {
992 | width: 14em;
993 | height: auto;
994 | display: grid;
995 | grid-template-columns: 100%;
996 | }
997 | .about-profile-name-div {
998 | height: 2.5em;
999 | line-height: 2.5em;
1000 | }
1001 | .about-profile-name {
1002 | font-family: "Roboto Condensed", sans-serif;
1003 | font-size: 1rem;
1004 | font-weight: 600;
1005 | color: #3b3a3a;
1006 | margin-left: 0.5em;
1007 | }
1008 | .about-social-profile-div {
1009 | display: flex;
1010 | height: 2.5em;
1011 | line-height: 2.5em;
1012 | }
1013 | .about-social-media-icon-div {
1014 | width: 2.5em;
1015 | height: 2.5em;
1016 | line-height: 2.5em;
1017 | margin-left: 0.2em;
1018 | }
1019 | .about-social-media-icon-size {
1020 | width: 2em;
1021 | height: 2em;
1022 | }
1023 | /*********************************************************************/
1024 |
1025 | /*************************Social Media Container Styles**********************/
1026 | .blog-social-media-container {
1027 | width: 100%;
1028 | height: auto;
1029 | padding: 1em;
1030 | margin: 0 auto;
1031 | }
1032 | .social-media-container {
1033 | width: 19em;
1034 | height: auto;
1035 | margin: 0 auto;
1036 | display: grid;
1037 | grid-template-columns: 100%;
1038 | }
1039 | .social-media-label-container {
1040 | width: 100%;
1041 | height: 3em;
1042 | line-height: 3em;
1043 | border-bottom: 0.5px solid #fc4c00;
1044 | }
1045 | .social-media-label {
1046 | font-family: "Roboto Condensed", sans-serif;
1047 | font-size: 1.3rem;
1048 | font-weight: 700;
1049 | color: #3b3a3a;
1050 | }
1051 | .social-media-fb-container {
1052 | width: 19em;
1053 | height: auto;
1054 | margin-top: 2em;
1055 | }
1056 | .social-media-iframe {
1057 | overflow: hidden;
1058 | }
1059 | /****************************************************************************/
1060 |
1061 | /*************************About Page Container Styles**********************/
1062 | .about-page-parent-container {
1063 | display: grid;
1064 | grid-template-columns: 100%;
1065 | margin-top: 5em;
1066 | }
1067 | .about-page-left-container {
1068 | padding: 1em;
1069 | }
1070 | .about-page-middle-container {
1071 | padding: 1em;
1072 | }
1073 | .about-page-right-container {
1074 | padding: 1em;
1075 | }
1076 | .about-author-pic-container {
1077 | width: 100%;
1078 | height: auto;
1079 | display: flex;
1080 | justify-content: center;
1081 | align-items: center;
1082 | }
1083 | .about-author-pic {
1084 | width: 6em;
1085 | height: auto;
1086 | border-radius: 10em;
1087 | }
1088 | .about-author-name-container {
1089 | width: 100%;
1090 | height: auto;
1091 | display: flex;
1092 | justify-content: center;
1093 | align-items: center;
1094 | }
1095 | .about-author-name {
1096 | font-family: "Roboto Condensed", sans-serif;
1097 | font-size: 1.2em;
1098 | font-weight: 700;
1099 | color: #3b3a3a;
1100 | }
1101 | .about-message-container {
1102 | margin-top: 2em;
1103 | }
1104 | .about-message-label {
1105 | font-family: "Roboto Condensed", sans-serif;
1106 | font-size: 1rem;
1107 | line-height: 2rem;
1108 | color: #6b6a6a;
1109 | }
1110 | .about-message-link {
1111 | font-family: "Roboto Condensed", sans-serif;
1112 | font-size: 1rem;
1113 | color: #fc4c00;
1114 | text-decoration: none;
1115 | }
1116 |
1117 | .about-message-link:hover {
1118 | font-family: "Roboto Condensed", sans-serif;
1119 | font-size: 1rem;
1120 | color: #fc4c00;
1121 | text-decoration: underline;
1122 | }
1123 | .about-social-media-container {
1124 | width: 100%;
1125 | height: 3em;
1126 | display: flex;
1127 | justify-content: center;
1128 | align-items: center;
1129 | }
1130 | .about-social-media-icon-container {
1131 | width: 15em;
1132 | height: 3em;
1133 | display: flex;
1134 | }
1135 | .social-media-share-icon-large-size {
1136 | width: 2em;
1137 | height: 2em;
1138 | margin: 0.5em;
1139 | }
1140 | /****************************************************************************/
1141 |
1142 | /*********************************Footer Styles******************************/
1143 | .footer-container {
1144 | width: 100%;
1145 | height: 10em;
1146 | background: #000000;
1147 | }
1148 | .footer-social-media-container {
1149 | width: 100%;
1150 | height: 5em;
1151 | display: flex;
1152 | justify-content: center;
1153 | align-items: center;
1154 | }
1155 | .footer-social-media-icon-container {
1156 | width: 80%;
1157 | height: 5em;
1158 | line-height: 5em;
1159 | display: flex;
1160 | justify-content: center;
1161 | align-items: center;
1162 | border-bottom: 0.1px solid #2c2c2c;
1163 | }
1164 | .footer-social-media-icon-size {
1165 | width: 2.5em;
1166 | height: auto;
1167 | margin: 0.5em;
1168 | vertical-align: middle;
1169 | }
1170 | .footer-copyright-container {
1171 | width: 100%;
1172 | height: 5em;
1173 | display: flex;
1174 | justify-content: center;
1175 | align-items: center;
1176 | }
1177 | .footer-copyright-label {
1178 | font-family: "Roboto Condensed", sans-serif;
1179 | font-size: 0.95rem;
1180 | text-shadow: 0.2px 0.2px #5e5d5d;
1181 | color: #555353;
1182 | }
1183 | /************************************************************************/
1184 | }
1185 |
--------------------------------------------------------------------------------
13 |
14 | 
6 |
7 |
8 | ### Installation
9 | ``````````````````````````
10 | cd hackbotone-mern-website
11 | npm install
12 | npm run start-dev
13 | ``````````````````````````
14 |
15 | ### MongoDB database import command
16 | ``````````````````````````````````````````````````````````````````````````````````````````````````````````
17 | mongoimport --uri "mongodb://127.0.0.1:27017/blogs" --collection blogs --jsonArray --file dummy_data.json
18 | ``````````````````````````````````````````````````````````````````````````````````````````````````````````
19 |
20 | ### Note
21 | If you face any problem or have any suggestion on improving the code then feel free to raise an issue.
22 |
23 | ### Blog & Youtube explanation
24 | 
13 |
14 | 
36 | 
48 | 
60 | 
72 | 
84 |