diff --git a/highneed/.vs/ProjectSettings.json b/highneed/.vs/ProjectSettings.json new file mode 100644 index 0000000..7d3de51 --- /dev/null +++ b/highneed/.vs/ProjectSettings.json @@ -0,0 +1,3 @@ +{ + "CurrentProjectSetting": "Brak konfiguracji" +} \ No newline at end of file diff --git a/highneed/.vs/VSWorkspaceState.json b/highneed/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..11c6b22 --- /dev/null +++ b/highneed/.vs/VSWorkspaceState.json @@ -0,0 +1,6 @@ +{ + "ExpandedNodes": [ + "\\venv\\lib\\python3.6" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/highneed/.vs/slnx.sqlite b/highneed/.vs/slnx.sqlite new file mode 100644 index 0000000..1a17dc5 Binary files /dev/null and b/highneed/.vs/slnx.sqlite differ diff --git a/highneed_react/.gitignore b/highneed_react/.gitignore index 4d29575..647b067 100644 --- a/highneed_react/.gitignore +++ b/highneed_react/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.vs* diff --git a/highneed_react/.vs/highneed_react/v16/.suo b/highneed_react/.vs/highneed_react/v16/.suo index d209a5d..03c61be 100644 Binary files a/highneed_react/.vs/highneed_react/v16/.suo and b/highneed_react/.vs/highneed_react/v16/.suo differ diff --git a/highneed_react/.vs/slnx.sqlite b/highneed_react/.vs/slnx.sqlite index 88f4899..071fd8b 100644 Binary files a/highneed_react/.vs/slnx.sqlite and b/highneed_react/.vs/slnx.sqlite differ diff --git a/highneed_react/package-lock.json b/highneed_react/package-lock.json index 39cee04..0e98e85 100644 --- a/highneed_react/package-lock.json +++ b/highneed_react/package-lock.json @@ -3011,11 +3011,6 @@ "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==" }, - "async-limiter": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", - "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" - }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -5167,11 +5162,18 @@ } }, "domhandler": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", - "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz", + "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==", "requires": { - "domelementtype": "1" + "domelementtype": "^2.2.0" + }, + "dependencies": { + "domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==" + } } }, "domutils": { @@ -7300,22 +7302,40 @@ } }, "htmlparser2": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", - "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz", + "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==", "requires": { - "domelementtype": "^1.3.1", - "domhandler": "^2.3.0", - "domutils": "^1.5.1", - "entities": "^1.1.1", - "inherits": "^2.0.1", - "readable-stream": "^3.1.1" + "domelementtype": "^2.0.1", + "domhandler": "^4.0.0", + "domutils": "^2.5.2", + "entities": "^2.0.0" }, "dependencies": { - "entities": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", - "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" + "dom-serializer": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", + "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + } + }, + "domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==" + }, + "domutils": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz", + "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==", + "requires": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + } } } }, @@ -12479,6 +12499,14 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-responsive-image": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-responsive-image/-/react-responsive-image-5.0.0.tgz", + "integrity": "sha512-SFWb9nlJSDNVXLwwe4Pgzn62KLUXFhXwjed4MFFFC97qGBVbEct2zMk10F05W/Jw7da1YpglPYAdvo2Q1UmCkw==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -12804,28 +12832,65 @@ "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=" }, "renderkid": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.5.tgz", - "integrity": "sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.6.tgz", + "integrity": "sha512-GIis2GBr/ho0pFNf57D4XM4+PgnQuTii0WCPjEZmZfKivzUfGuRdjN2aQYtYMiNggHmNyBve+thFnNR1iBRcKg==", "requires": { - "css-select": "^2.0.2", - "dom-converter": "^0.2", - "htmlparser2": "^3.10.1", - "lodash": "^4.17.20", - "strip-ansi": "^3.0.0" + "css-select": "^4.1.3", + "dom-converter": "^0.2.0", + "htmlparser2": "^6.1.0", + "lodash": "^4.17.21", + "strip-ansi": "^6.0.0" }, "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "css-select": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", + "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==", "requires": { - "ansi-regex": "^2.0.0" + "boolbase": "^1.0.0", + "css-what": "^5.0.0", + "domhandler": "^4.2.0", + "domutils": "^2.6.0", + "nth-check": "^2.0.0" + } + }, + "css-what": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz", + "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==" + }, + "dom-serializer": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", + "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", + "requires": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + } + }, + "domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==" + }, + "domutils": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz", + "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==", + "requires": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + } + }, + "nth-check": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz", + "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==", + "requires": { + "boolbase": "^1.0.0" } } } @@ -16119,11 +16184,18 @@ } }, "ws": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", - "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", + "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", "requires": { "async-limiter": "~1.0.0" + }, + "dependencies": { + "async-limiter": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", + "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" + } } }, "yargs": { diff --git a/highneed_react/package.json b/highneed_react/package.json index 31d7fab..181bef5 100644 --- a/highneed_react/package.json +++ b/highneed_react/package.json @@ -9,6 +9,7 @@ "bootstrap": "^5.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-responsive-image": "^5.0.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "web-vitals": "^1.1.2" diff --git a/highneed_react/public/images/img-article-m.jpg b/highneed_react/public/images/img-article-m.jpg new file mode 100644 index 0000000..e30fb66 Binary files /dev/null and b/highneed_react/public/images/img-article-m.jpg differ diff --git a/highneed_react/public/images/img-article-s.jpg b/highneed_react/public/images/img-article-s.jpg new file mode 100644 index 0000000..9aa650f Binary files /dev/null and b/highneed_react/public/images/img-article-s.jpg differ diff --git a/highneed_react/public/images/img-article.jpg b/highneed_react/public/images/img-article.jpg new file mode 100644 index 0000000..b45dc5d Binary files /dev/null and b/highneed_react/public/images/img-article.jpg differ diff --git a/highneed_react/public/images/img-article2-m.jpg b/highneed_react/public/images/img-article2-m.jpg new file mode 100644 index 0000000..041cff1 Binary files /dev/null and b/highneed_react/public/images/img-article2-m.jpg differ diff --git a/highneed_react/public/images/img-article2-s.jpg b/highneed_react/public/images/img-article2-s.jpg new file mode 100644 index 0000000..dccbe2b Binary files /dev/null and b/highneed_react/public/images/img-article2-s.jpg differ diff --git a/highneed_react/public/images/img-article2.jpg b/highneed_react/public/images/img-article2.jpg new file mode 100644 index 0000000..c52592d Binary files /dev/null and b/highneed_react/public/images/img-article2.jpg differ diff --git a/highneed_react/public/images/img-map-m.png b/highneed_react/public/images/img-map-m.png new file mode 100644 index 0000000..523484a Binary files /dev/null and b/highneed_react/public/images/img-map-m.png differ diff --git a/highneed_react/public/images/img-map-s.png b/highneed_react/public/images/img-map-s.png new file mode 100644 index 0000000..7d00859 Binary files /dev/null and b/highneed_react/public/images/img-map-s.png differ diff --git a/highneed_react/public/images/img-map.png b/highneed_react/public/images/img-map.png new file mode 100644 index 0000000..c96a913 Binary files /dev/null and b/highneed_react/public/images/img-map.png differ diff --git a/highneed_react/src/App.css b/highneed_react/src/App.css index dcf1a61..a7e63d8 100644 --- a/highneed_react/src/App.css +++ b/highneed_react/src/App.css @@ -5,8 +5,9 @@ body } * { - box-sizing: border-box; + box-sizing: content-box; margin: 0; padding: 0; font-family: 'Verdana'; - } \ No newline at end of file +} + diff --git a/highneed_react/src/Pages/Home-responsive.css b/highneed_react/src/Pages/Home-responsive.css new file mode 100644 index 0000000..ff4c2f6 --- /dev/null +++ b/highneed_react/src/Pages/Home-responsive.css @@ -0,0 +1,45 @@ +@media screen and (max-width: 416px) { + .article-container { + padding-top: 3%; + padding-bottom: 3%; + flex-direction: column; + } + + .article-img { + margin-bottom: 1%; + } + + .article2-container { + height:300px; + } + + h1 { + font-size: 16px; + } + + p { + font-size: 14px; + } + + .search-components { + width: 170px; + font-size: 13px; + } + +} + +@media screen and (min-width: 801px) { + .article-container { + justify-content: space-evenly; + } + + .article2-container { + justify-content: space-evenly; + } + + p{ + max-width: 700px; + } + + +} \ No newline at end of file diff --git a/highneed_react/src/Pages/Home.css b/highneed_react/src/Pages/Home.css new file mode 100644 index 0000000..5ab3bc4 --- /dev/null +++ b/highneed_react/src/Pages/Home.css @@ -0,0 +1,107 @@ +.homepage { +} + +.article-container { + padding-top: 2.5%; + padding-bottom: 2.5%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.article2-container { + padding-top: 2.5%; + padding-bottom: 2.5%; + background-color: #F0FAF3; + display: flex; + flex-direction: row; + align-items: center; +} + +.article4-container { + padding-top: 2.5%; + padding-bottom: 2.5%; + display: flex; + flex-direction: row; + align-items: center; +} + +.article-text { + padding-left: 1%; + padding-right: 1%; + display: flex; + flex-direction: column; +} + +.article2-text { + padding-left: 1%; + padding-right: 1%; + display: flex; + flex-direction: column; +} + +.article4-text { + height: 300px; + padding-left: 1%; + padding-right: 1%; +} + + +.article-img { + border-radius: 5%; + overflow: clip; + margin-left: 1%; + margin-right: 1%; +} + +.article-img2 { + border-radius: 50%; + overflow: clip; + margin-left: 1%; + margin-right: 1%; +} + +.article-img3 { + max-height:500px; + overflow:clip; +} + +h1 { + padding-bottom: 8px; + text-align: center; + font-size: 20px; + color: #347945; +} + +p { + text-align: justify; + font-size: 16px; +} + +.article-line { + height: 5px; + width: 100%; + background-color: #347945; +} + +.center { + text-align: center; +} + +.searching { + padding-top: 10%; +} + +.search-components { + width: 205px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.button-icon { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/highneed_react/src/Pages/Home.js b/highneed_react/src/Pages/Home.js index 73db03c..3ef8c53 100644 --- a/highneed_react/src/Pages/Home.js +++ b/highneed_react/src/Pages/Home.js @@ -1,12 +1,126 @@ import React from 'react'; -import '../App.css'; +import { Link } from 'react-router-dom'; +import { ResponsiveImage, ResponsiveImageSize } from 'react-responsive-image'; +import './Home.css' +import './Home-responsive.css' +import BottomBar from '../components/BottomBar'; + +const small = '/images/img-article-s.jpg'; +const medium = '/images/img-article-m.jpg'; +const large = '/images/img-article.jpg'; + +const small_2 = '/images/img-article2-s.jpg'; +const medium_2 = '/images/img-article2-m.jpg'; +const large_2 = '/images/img-article2.jpg'; + +const small_3 = '/images/img-map-s.png'; +const medium_3 = '/images/img-map-m.png'; +const large_3 = '/images/img-map.png'; + function Home() { - return ( - <> - Strona główna - - ); + return ( + <> +
+
+
+ + + + + +
+ +
+

Witamy na stronie HighNeed

+

HighNeed.pl jest portalem do planowania aktywności dla rodzin z dziećmi w Poznaniu.

+
+
+
+ +
+
+

Wyszukiwanie wydarzeń w Twojej okolicy

+

Znajdź grupy i wydarzenia na terenie Poznania, dzięki którym Twoje dziecko rozwinie swoje zainteresowania oraz zawrze nowe znajomości.

+ + + + +
+ +
+ + + + + +
+
+
+ +
+
+ + + + + +
+
+
+ +
+
+

Nadchodzące wydarzenia

+ +

* Będzie po połączeniu zaimportowanych wydarzeń *

+
+
+
+ + +
+ + ); } export default Home; \ No newline at end of file diff --git a/highneed_react/src/components/BottomBar.css b/highneed_react/src/components/BottomBar.css new file mode 100644 index 0000000..32f2d67 --- /dev/null +++ b/highneed_react/src/components/BottomBar.css @@ -0,0 +1,53 @@ +.bottom-bar { + background-color: #64BE7B; + color: white; +} + +.contact-info { + display: flex; + flex-direction: column; + padding: 0.5% 1%; +} + +.contact-container { + display: flex; + flex-direction: row; + align-items: center; +} + +.contact { + color: white; +} + +.contact:hover { + color: #347945; +} + +.contact-text { + height: 22px; + font-size: 16px; + text-decoration: underline; + padding-left: 1%; + padding-right: 1%; +} + +h2 { + font-size: 20px; + padding-bottom: 0.5%; +} + + + +@media screen and (max-width: 416px) { + h2 { + font-size: 16px; + } + + .contact-text { + font-size: 13px; + } + + .contact-icon { + scale: 90%; + } +} diff --git a/highneed_react/src/components/BottomBar.js b/highneed_react/src/components/BottomBar.js new file mode 100644 index 0000000..0be17c2 --- /dev/null +++ b/highneed_react/src/components/BottomBar.js @@ -0,0 +1,41 @@ +import React, { useState } from 'react' +import { Link } from 'react-router-dom'; +import './BottomBar.css'; + +function BottomBar() { + return ( +
+
+

Kontakt:

+ +
+
+ + + + +
+
+ testowymail@mail.com +
+
+ + +
+
+ + + + +
+
+ Facebook fanpage +
+
+ + +
+
+ ) +} +export default BottomBar; \ No newline at end of file diff --git a/highneed_react/src/components/EventItem.js b/highneed_react/src/components/EventItem.js index 4747daa..9d91d23 100644 --- a/highneed_react/src/components/EventItem.js +++ b/highneed_react/src/components/EventItem.js @@ -18,16 +18,20 @@ function EventItem(props) {
{props.data}
+ -

{props.title}

- +

{props.title}

+
{props.category}
{props.age}
{props.address}
- - - - + + + + + + +
diff --git a/highneed_react/src/components/Events.css b/highneed_react/src/components/Events.css index 1f66bbc..e629dbd 100644 --- a/highneed_react/src/components/Events.css +++ b/highneed_react/src/components/Events.css @@ -40,19 +40,16 @@ a color: black; } -.button -{ - background-color: #64BE7B; /* Green */ - border: none; - color: white; - padding: 8px 16px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - border-radius: 15px; - cursor: pointer; +.button { + background-color: #64BE7B; /* Green */ + border: none; + color: white; + padding: 8px 16px; + text-align: center; + display: inline-block; + font-size: 16px; + border-radius: 40px; + cursor: pointer; } .button:hover {background-color: #347945} diff --git a/highneed_react/src/components/NavBar.css b/highneed_react/src/components/NavBar.css index 3295ad9..8e602bb 100644 --- a/highneed_react/src/components/NavBar.css +++ b/highneed_react/src/components/NavBar.css @@ -1,24 +1,19 @@ -.navbar -{ - background-color: #64BE7B; +.navbar { width: 100%; - height: 50px; + height: 60px; z-index: 999; } -.navbar-container -{ +.navbar-container { display: flex; align-items: center; justify-content: space-between; + background-color: #64BE7B; width: 100%; - margin: auto; - height: 45px; + height: 60px; } - -.line -{ +.line { height: 5px; width: 100%; background-color: #347945; @@ -31,11 +26,10 @@ justify-content: center; } -.logo-h1 -{ +.logo-h1 { color: white; font-size: 18px; - font-weight:bold; + font-weight: bold; } .logo-h2 { @@ -45,15 +39,12 @@ text-align: center; } -.icons -{ +.icons { display: flex; } - -.icon-container -{ +.icon-container { height: 45px; width: 45px; display: flex; @@ -62,69 +53,55 @@ } -li -{ +li { display: flex; padding: 5px; text-align: center; - } -.menu-icon-list -{ +.menu-icon-list { position: relative; width: 24px; height: 24px; } -.menu-icon-cross -{ +.menu-icon-cross { position: relative; - width: 30px; - height: 30px; + width: 24px; + height: 24px; } -.icon-list, .icon-cross -{ +.icon-list, .icon-cross { position: absolute; - - } -.sidebar.disable -{ +.sidebar.disable { display: none; } -.menu-icon-cross .icon-cross -{ +.menu-icon-cross .icon-cross { visibility: hidden; } -.menu-icon-list .icon-list -{ +.menu-icon-list .icon-list { visibility: hidden; } -a -{ +a { text-decoration: none; } -.nav-links -{ + +.nav-links { color: black; text-decoration: none; - } -ul -{ +ul { padding: 5px; } -.sidebar -{ +.sidebar { width: 250px; height: 100%; border-right: black 1px solid; @@ -133,17 +110,15 @@ ul background-color: white; } -.sidebar-icon -{ +.sidebar-icon { display: flex; align-items: center; justify-content: center; } -.sidebar-text -{ +.sidebar-text { display: flex; align-items: center; justify-content: center; - padding-left:10px ; + padding-left: 10px; } diff --git a/highneed_react/src/components/NavBar.js b/highneed_react/src/components/NavBar.js index 7ec6713..1c63904 100644 --- a/highneed_react/src/components/NavBar.js +++ b/highneed_react/src/components/NavBar.js @@ -12,35 +12,35 @@ function NavBar() { +
+ + ) }