├── src ├── App.css ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── coder.jpg │ ├── tile1.jpg │ ├── heroImage.jpg │ ├── tallTile.jpg │ ├── wildTile.jpg │ └── middleTile.jpg ├── components │ ├── Hero.css │ ├── Hero.js │ ├── Info.js │ ├── SocialInfo.js │ ├── Contact.js │ ├── Team.js │ ├── Tiles.js │ ├── Nav.js │ ├── Footer.js │ └── Cards.js ├── index.css ├── reportWebVitals.js ├── index.js └── App.js ├── .firebaserc ├── public ├── robots.txt ├── favicon.ico ├── manifest.json └── index.html ├── firebase.json ├── .gitignore ├── README.md ├── package.json └── .firebase └── hosting.YnVpbGQ.cache /src/App.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | scroll-behavior: smooth; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "bulma-website" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/1.jpg -------------------------------------------------------------------------------- /src/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/2.jpg -------------------------------------------------------------------------------- /src/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/3.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/images/coder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/coder.jpg -------------------------------------------------------------------------------- /src/images/tile1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/tile1.jpg -------------------------------------------------------------------------------- /src/images/heroImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/heroImage.jpg -------------------------------------------------------------------------------- /src/images/tallTile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/tallTile.jpg -------------------------------------------------------------------------------- /src/images/wildTile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/wildTile.jpg -------------------------------------------------------------------------------- /src/images/middleTile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Bulma-CSS-Website/HEAD/src/images/middleTile.jpg -------------------------------------------------------------------------------- /src/components/Hero.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | background: url("./../images/heroImage.jpg"); 3 | background-size: cover; 4 | background-position: center; 5 | } 6 | 7 | .navbar .container { 8 | border-bottom: 1px solid #fff; 9 | } -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bulma Website with ReactJS 2 | 3 | A small web app which created using Bulma CSS Framework. 4 | 5 | ## Bulma Website Demo Link 6 | 7 | You can watch the site here 8 | [Click Me](https://bulma-website.web.app/) 9 | 10 | ## Topics 11 | 12 | - ReactJS 13 | - Bulma CSS Framework 14 | - Responsive Design 15 | - Deploy the website live on Firebase 16 | 17 | ## Author 18 | 19 | Özge Coşkun Gürsucu (codermother) 20 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Hero from "./components/Hero"; 4 | import Tiles from "./components/Tiles.js"; 5 | import Info from "./components/Info"; 6 | import SocialInfo from "./components/SocialInfo"; 7 | import Team from "./components/Team"; 8 | import Contact from "./components/Contact"; 9 | import Footer from "./components/Footer"; 10 | 11 | function App() { 12 | return ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /src/components/Hero.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Nav from "./Nav"; 3 | import "./Hero.css"; 4 | 5 | function Hero() { 6 | return ( 7 |
8 |
9 |
10 |
12 |
13 |
14 |

15 | Minimal & Simple & Impressive 16 |

17 |

18 | Bulma Project 19 |

20 |
21 |
22 |
23 |
24 | ); 25 | } 26 | 27 | export default Hero; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "newww", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.10", 7 | "@testing-library/react": "^11.2.6", 8 | "@testing-library/user-event": "^12.8.3", 9 | "bulma": "^0.9.2", 10 | "node-sass": "^5.0.0", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-scripts": "4.0.3", 14 | "web-vitals": "^1.1.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | Bulma Website 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/Info.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CoderPhoto from "../images/coder.jpg"; 3 | import Cards from "./Cards"; 4 | 5 | function Info() { 6 | return ( 7 |
8 | 9 |
10 |
11 |
12 | Young Coder 13 |
14 |
15 |
16 |
17 |

Hi Everyone!

18 |

19 | Lorem ipsum, dolor sit amet consectetur adipisicing 20 | elit. Tempore reiciendis 21 | reprehenderit eveniet repellendus labore enim. 22 |

23 |
    24 |
  • 25 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 26 | Facere, nostrum. 27 |
    • 28 |
  • 29 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 30 | Facere, nostrum. 31 |
    • 32 |
  • 33 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 34 | Facere, nostrum. 35 |
    • 36 |
  • 37 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 38 | Facere, nostrum. 39 |
    • 40 |
41 |
42 |
43 |
44 |
45 | ); 46 | } 47 | 48 | export default Info; 49 | -------------------------------------------------------------------------------- /src/components/SocialInfo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function SocialInfo() { 4 | return ( 5 |
6 |
7 | 48 |
49 |
50 | ); 51 | } 52 | 53 | export default SocialInfo; 54 | -------------------------------------------------------------------------------- /src/components/Contact.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Contact() { 4 | return ( 5 |
6 |
7 |

8 | Get a Quote 9 |

10 |
11 |
12 |
13 |
14 | 19 | 20 | 21 | 22 |
23 |
24 | 25 |
26 |
27 | 32 | 33 | 34 | 35 |
36 |
37 | 38 |
39 |
40 | 45 |
46 |
47 | 48 | 49 |
50 |
51 |
52 |
53 | ); 54 | } 55 | 56 | export default Contact; 57 | -------------------------------------------------------------------------------- /src/components/Team.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image1 from "../images/1.jpg"; 3 | import Image2 from "../images/2.jpg"; 4 | import Image3 from "../images/3.jpg"; 5 | 6 | function Team() { 7 | return ( 8 |
9 |
10 |

11 | Who We Are 12 |

13 |
14 |
15 |
16 | 17 |
18 |

Jane Doe

19 |

CEO

20 |

21 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis 22 | dolorum recusandae exercitationem Lorem ipsum dolor sit amet. 23 |

24 |
25 |
26 |
27 | 28 |
29 |

John Doe

30 |

CEO

31 |

32 | Facilis dolorum recusandae exercitationem. Lorem ipsum dolor sit 33 | amet consectetur, adipisicing elit. Facilis dolorum recusandae 34 | exercitationem. 35 |

36 |
37 |
38 |
39 | 40 |
41 |

Jane Doe

42 |

CEO

43 |

44 | Adipisicing elit. Facilis dolorum recusandaeLorem ipsum dolor sit 45 | amet consectetur, adipisicing elit. Facilis dolorum recusandae 46 | exercitationem. 47 |

48 |
49 |
50 |
51 |
52 | ); 53 | } 54 | 55 | export default Team; 56 | -------------------------------------------------------------------------------- /src/components/Tiles.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Tile1 from "../images/tile1.jpg"; 3 | import MiddleTile from "../images/middleTile.jpg"; 4 | import WildTile from "../images/wildTile.jpg"; 5 | import TallTile from "../images/tallTile.jpg"; 6 | 7 | function Tiles() { 8 | return ( 9 |
10 |
11 |
12 | What we did 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 | Click Images for details 25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | ); 57 | } 58 | 59 | export default Tiles; 60 | -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Nav() { 4 | document.addEventListener("DOMContentLoaded", () => { 5 | // Get all "navbar-burger" elements 6 | const $navbarBurgers = Array.prototype.slice.call( 7 | document.querySelectorAll(".navbar-burger"), 8 | 0 9 | ); 10 | 11 | // Check if there are any navbar burgers 12 | if ($navbarBurgers.length > 0) { 13 | // Add a click event on each of them 14 | $navbarBurgers.forEach((el) => { 15 | el.addEventListener("click", () => { 16 | // Get the target from the "data-target" attribute 17 | const target = el.dataset.target; 18 | const $target = document.getElementById(target); 19 | 20 | // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" 21 | el.classList.toggle("is-active"); 22 | $target.classList.toggle("is-active"); 23 | }); 24 | }); 25 | } 26 | }); 27 | return ( 28 |
29 | 79 |
80 | ); 81 | } 82 | 83 | export default Nav; 84 | -------------------------------------------------------------------------------- /.firebase/hosting.YnVpbGQ.cache: -------------------------------------------------------------------------------- 1 | asset-manifest.json,1618688508974,9b107803b5d09ca5becaa251329f286b5e3f3b237768a28dcc1130249c5ca8bb 2 | favicon.ico,499162500000,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 3 | manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a 4 | index.html,1618688508974,97e4e1d80fcb99348e7d1572a176505be69e58c0faad841c9e4cbf4775b45e3f 5 | robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 6 | static/css/main.a51ab715.chunk.css,1618688508964,eebc75c57637ecd37868223054ebd2f011369f887390ae3a2e863b90c8f04ba7 7 | static/css/main.a51ab715.chunk.css.map,1618688508974,bc1252c0b004fea90809063aeb29733146fc48d5890e7614656776838dfaf1db 8 | static/js/2.6390fa5c.chunk.js.LICENSE.txt,1618688508970,344f60d92805a3f6078799efe3001c0746af425c166ecf1779b9a58f0ef566af 9 | static/js/3.569a0b6b.chunk.js,1618688508969,4ac0d77394477da81c71c648453b13ed34ce7cf57cff7dd43653b98b2f669ec6 10 | static/js/3.569a0b6b.chunk.js.map,1618688508978,24cf5aa3c7ee53afd929b762155b84c600e403a2c36d43cf1fdd4380e741c4f6 11 | static/js/main.ae653800.chunk.js,1618688508965,a3b1012e7011608c2ea25f512fce11380b2b44cd9abadd068b6d93105eb6af6f 12 | static/js/runtime-main.ea602483.js,1618688508968,0edfdc28330bb74038c91bdd478c1a8e273ad85c36daeb4375418f414b401e02 13 | static/js/runtime-main.ea602483.js.map,1618688508978,b7ae95e0768c552f41005530550b8359e047e1b9d284829a7f6e575c25fe580e 14 | static/js/main.ae653800.chunk.js.map,1618688508978,e3bac4f0b7b393a342fb2525d53947904f05278589dba3dc5d0a05064522f53a 15 | static/js/2.6390fa5c.chunk.js,1618688508969,7ca921b7d1c2ffe484e173ab13d13a8e691c6bb79865053e3c17190496f9fa4b 16 | static/media/wildTile.fc11276e.jpg,1618688508967,457d59d7a73810491f8029f16c40302147bea4c452c4d6b0e9495a3faec37bb7 17 | static/media/heroImage.fb7d3ec8.jpg,1618688508962,34cb05d11e28eaf17fdf94a8394240c10caf05dfddb08a69ffd8b0ebe76626cf 18 | static/media/1.00f7bb22.jpg,1618688508967,e9e9aa102557ab5da3f29abe93d84bece8f479b6c65e5a3cdabd16c9c54f82a7 19 | static/media/2.ced4a69b.jpg,1618688508969,4dcc0c2f7e660a566076b8b31f36cef76c43b1097e194bdf71947396c940b9b5 20 | static/media/tile1.bc347dd1.jpg,1618688508966,64ad439a1f9613dd6d52f118641522713775916cd92c1878e69f64473dfbbaf9 21 | static/media/3.a352d4f7.jpg,1618688508969,19607904afa2748791f83d358d9b1f85c9b18c811f3929e373c957e6fa071988 22 | static/media/middleTile.77966a2c.jpg,1618688508966,0c27796ce3e064fb323160dac6cd7147532c75f8c9f6ec42dc03467424fa488d 23 | static/media/tallTile.7b8957e8.jpg,1618688508967,6649dc604507993b21580e190f88ef1482f228002c3d50006a2d83660dc14260 24 | static/js/2.6390fa5c.chunk.js.map,1618688508978,9bb7f52691c0409ff1f1fdc536226b07e969f2f66a4a333f30d6daf2a3560a17 25 | static/media/coder.daca735b.jpg,1618688508967,d35d351883c91f0023e6957ce813c37c47941bd0e4a23effb29341bfb78a92fc 26 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Footer() { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 | 11 | Bulma Site 12 | 13 |
14 |
15 |
16 | 17 | {" "} 18 | Sample Link 1{" "} 19 | 20 | 21 | Sample Link 2 22 | 23 | 24 | Sample Link 3 25 | 26 |
27 |
28 |
29 |
30 |
31 | 35 | 36 | 37 | 38 | 39 | 43 | 44 | 45 | 46 | 47 | 51 | 52 | 53 | 54 | 55 | 59 | 60 | 61 | 62 | 63 | 67 | 68 | 69 | 70 | 71 |
72 | 73 |
74 |

Created by CoderMother @2021

75 |
76 |
77 |
78 |
79 | ); 80 | } 81 | 82 | export default Footer; 83 | -------------------------------------------------------------------------------- /src/components/Cards.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Cards() { 4 | return ( 5 |
6 |
7 |

8 | Our Features 9 |

10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 |

21 | Library 22 |

23 |

24 | {" "} 25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 26 | Labore officiis rem nulla, repellat pariatur vitae iusto 27 | voluptate numquam quaerat ipsum. 28 |

29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 |

44 | Egalite 45 |

46 |

47 | {" "} 48 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 49 | Facilis eius maiores ipsum repellat doloribus sed Lorem 50 | ipsum dolor sit amet.. 51 |

52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 |

67 | Fraternite 68 |

69 |

70 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. 71 | Aliquam quibusdam, ipsam architecto iste alias dolorem unde 72 | quae architecto iste alias ? 73 |

74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | ); 82 | } 83 | 84 | export default Cards; 85 | --------------------------------------------------------------------------------