diff --git a/kivi-cars/src/components/Button/StandardBtn.js b/kivi-cars/src/components/Button/StandardBtn.js index ec7c55c..6b77082 100644 --- a/kivi-cars/src/components/Button/StandardBtn.js +++ b/kivi-cars/src/components/Button/StandardBtn.js @@ -1,11 +1,10 @@ import './button.css' -var title = "DALJE"; const StandardBtn = (props) => { return (
- +
) } diff --git a/kivi-cars/src/components/Button/button.css b/kivi-cars/src/components/Button/button.css index fc51116..09472cb 100644 --- a/kivi-cars/src/components/Button/button.css +++ b/kivi-cars/src/components/Button/button.css @@ -1,9 +1,10 @@ .standard-btn { text-align: center; + margin-bottom: 20px; } .standardBtn { - width: fit-content; + width:300px; background-color: #02ADBA; font-size: 15px; padding: 7px 20px 7px 20px; @@ -20,13 +21,36 @@ padding: 5px; } .left-button:hover { - background-color:#9eedf3 + background-color:#9eedf3; } .right-button { padding: 5px; } .right-button:hover { - background-color:#9eedf3 - -} \ No newline at end of file + background-color:#9eedf3; +} + +@media screen and (max-width: 700px) { + .standardBtn { + width: 200px; + background-color: #02ADBA; + font-size: 15px; + padding: 7px 20px 7px 20px; + color: white; + border: #02ADBA; + } + } + + + + @media screen and (max-width: 400px) { + .standardBtn { + width: 150px; + background-color: #02ADBA; + font-size: 15px; + padding: 7px 20px 7px 20px; + color: white; + border: #02ADBA; + } + } \ No newline at end of file diff --git a/kivi-cars/src/components/CategoryBtns/categorybtns.css b/kivi-cars/src/components/CategoryBtns/categorybtns.css new file mode 100644 index 0000000..e69de29 diff --git a/kivi-cars/src/components/CategoryBtns/categorybtns.js b/kivi-cars/src/components/CategoryBtns/categorybtns.js new file mode 100644 index 0000000..9c3042f --- /dev/null +++ b/kivi-cars/src/components/CategoryBtns/categorybtns.js @@ -0,0 +1,19 @@ +import './categorybtns.css' +import StandardBtn from '../Button/StandardBtn' + +var auto = 'AUTO'; +var motor = 'MOTOR'; +var kamion = 'KAMION'; + +const CategoryBtns = (props) => { + return ( +
+ + + +
+ ) + +} + +export default CategoryBtns \ No newline at end of file diff --git a/kivi-cars/src/components/Header/Header.css b/kivi-cars/src/components/Header/Header.css index f06f163..520e4c1 100644 --- a/kivi-cars/src/components/Header/Header.css +++ b/kivi-cars/src/components/Header/Header.css @@ -13,7 +13,7 @@ header { font-size: 25px; } - @media screen and (max-width: 800px) { + @media screen and (max-width: 700px) { .title { font-size: 20px; } diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js index a3425fd..ebd4ddf 100644 --- a/kivi-cars/src/containers/App.js +++ b/kivi-cars/src/containers/App.js @@ -3,17 +3,17 @@ import React from 'react'; import Filters from '../components/Filters'; import Header from '../components/Header/Header'; import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar'; -import StandardBtn from '../components/Button/StandardBtn' +import CategoryBtns from '../components/CategoryBtns/categorybtns' function App() { - const info = 'Dobrodosli na stranicu kivi!' + const naslov = 'Dobrodosli na stranicu kivi!' return (
-
+
- +