diff --git a/simon-says/src/features/patternGen/buttonLayout.css b/simon-says/src/features/patternGen/buttonLayout.css new file mode 100644 index 0000000000000000000000000000000000000000..e7e3133f79620f3df5dfc34b774cd340b04e0118 --- /dev/null +++ b/simon-says/src/features/patternGen/buttonLayout.css @@ -0,0 +1,35 @@ +.redbutton{ + background-color: #f44336; + border: none; + width: 50%; + height: 300px; +} +.bluebutton{ + background-color: #008CBA; + border: none; + width: 50%; + height: 300px; +} +.yellowbutton{ + background-color: #ffff00; + border: none; + width: 50%; + height: 300px; +} +.greenbutton{ + background-color: #4CAF50; + border: none; + width: 50%; + height: 300px; +} +#wrapper{ + width: 100%; + background-color:#ffffff; + margin-left: auto; + margin-right: auto; + margin-top:10px; + margin-bottom:10px; + padding:10px; + line-height:150%; + clear:both; +} \ No newline at end of file diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js index cfe8a601186c6a54529e26c704194fc92aecd8c4..dbf89a03a022417948f4fdf78d01a996ba8fee51 100644 --- a/simon-says/src/features/patternGen/patternGeneration.js +++ b/simon-says/src/features/patternGen/patternGeneration.js @@ -1,20 +1,22 @@ import React from 'react'; +import styles from './buttonLayout.css'; export function Pattern() { return ( <main> - <button> - + <div> + <button class = "redbutton"> </button> - <button> + <button class = "bluebutton"> </button> - <button> + <button class = 'yellowbutton'> </button> - <button> + <button class = 'greenbutton'> </button> + </div> </main> ); } \ No newline at end of file