diff --git a/hectabitstyles.css b/hectabitstyles.css index 72c210d..b3214bd 100755 --- a/hectabitstyles.css +++ b/hectabitstyles.css @@ -11,6 +11,14 @@ a { font-size: 20px; } +.clickbutton { + padding: 10px; + background-color: #00a0c6; + font-size: 15px; + border-radius: 10px; + color: white; +} + .spacer { height: 10px; } diff --git a/hectabitstyles.css.save b/hectabitstyles.css.save new file mode 100755 index 0000000..6d33d03 --- /dev/null +++ b/hectabitstyles.css.save @@ -0,0 +1,153 @@ +/* Reset some default styles */ +body, h1, p, ul, li, li2, p1 { + margin: 0; + padding: 0; + list-style-type: none; +} + +a { + color: rgb(40, 40, 40); + text-decoration: none; + font-size: 20px; +} + +.clickbutton { + padding: 10px; + background-color: #00a0c6; + color: white; + border-radius: 10px; + font-size: 15px; +} + +.spacer { + height: 10px; +} + +body { + font-family: Arial, sans-serif; + color: rgb(40, 40, 40); +} + +/* Sidebar styles */ +.sidebar { + transition: transform 0.3s ease; + background-color: rgb(0, 160, 198); + color: white; + padding: 20px; + width: 250px; + position: fixed; + top: 0; + left: 0; + height: 100%; + overflow-y: auto; +} + +.closebar { + width: 10px; + margin-left: 270px; + background-color: #0000; + heigh: 20px; + overflow-y: hidden; + position: fixed; + transition: transform 0.3s ease 0s; + color: rgb(118, 181, 197); + padding: 20px; + top: 0px; +} + +h1 { + font-size: 24px; + text-align: center; +} + +.sidebar h1 { + font-size: 24px; + text-align: center; +} + +p { + font-size: 14px; + margin-top: 10px; + text-align: center; +} + +p1 { + font-size: 20px; + text-align: center; +} + +.sidebar ul { + list-style-type: none; + margin-top: 20px; + text-align: center; +} + +.sidebar li { + margin-bottom: 10px; +} + +.sidebar a { + color: white; + text-decoration: none; + font-weight: bold; + font-size: 16px; + display: block; + border-radius: 5px; + padding: 7px 16px; + text-align: center; + background-color: rgb(118, 181, 197); + transition: background-color 0.3s ease 0s; + margin: 2px; +} + +button { + border: none; + top: 5px; + position: fixed; + padding: 10px; + color: rgb(255, 255, 255); + background: rgb(118, 181, 197); +} + +button:hover { + text-decoration: underline; +} + +.sidebar a:hover { + text-decoration: underline; +} + +/* Content styles (adjust as needed) */ +.content { + padding: 20px; + margin-left: 300px; + transition: margin-left 0.3s ease; + text-align: center; +} + +/* Add CSS styles for hiding and sliding the sidebar */ + +.content.expanded { + margin-left: 0; +} + +.closebar.expanded { + margin-left: -20px; +} + +.sidebar.display { + display: none; +} + +.sidebar.hidden { + transform: translateX(-250px); +} + +.content.expanded + .sidebar.hidden { + transform: translateX(0); +} + +img { + height: 250px; + margin-bottom: 30px; +}