diff --git a/M/style.css b/M/style.css new file mode 100644 index 0000000000000000000000000000000000000000..5c919c8363ad4d51c410f61c5433f7f00c4642f2 --- /dev/null +++ b/M/style.css @@ -0,0 +1,261 @@ +* { + box-sizing: border-box; + } + + .divider { + margin-top: 30px; + margin-bottom: 30px; + } + +body { + padding: 16px; + margin: 0; + font-family: Arial, sans-serif; + background-color: #ffffff; +} + +header { + display: flex; + justify-content: center; + align-items: center; + background-image: url("back.jpg"); + padding: 30px; + margin-bottom: 5px; + color: white; + margin-left: 33px; +} + + +header img { + height: 80px; /* increase the height of the logo */ + margin-right: 40px; + padding-left: 60px; + + +} + +header h1 { + font-size: 36px; /* increase the font size of the title */ + text-align: center; /* center the title horizontally */ +} + +header input[type="text"] { + padding: 10px; + border: none; + border-radius: 5px; + width: 400px; + font-size: 16px; + margin-left: 40px; +} + +main { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 20px; +} + +.item-list { + width: 100%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 0 20px; +} + +.item { + width: calc(33.33% - 20px); + margin-bottom: 20px; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + overflow: hidden; +} + +.item img { + width: 100%; + height: 200px; + object-fit: cover; +} + +.item h2 { + font-size: 18px; + margin: 10px; + color: #333; +} + +.item p { + font-size: 14px; + margin: 10px; + color: #777; +} + +aside { + margin-top: 20px; +} + +button { + padding: 10px 20px; + background-color: #0057b8; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + margin-right: 10px; +} + +button:hover { + background-color: #004da1; +} + +.add-button +{ + background-color: #0057b8; + border: none; + cursor: pointer; +} + +.form-popup +{ + display: none; + border: 3px solid; +} + +.form-container +{ + max-width: 300px; + padding: 10px; + background-color: white; +} + + +.form-container input[type=text], .form-container input[type=desc] +{ + width: 100%; + padding: 15px; + border: none; +} + +.form-container input[type=text]:focus, .form-container input[type="desc"]:focus +{ + background-color: #ddd; + outline: none; +} + + +.form-container .btn +{ + background-color: forestgreen; + border: none; + cursor: pointer; + width: 100%; + margin-bottom: 10px; + opacity: 0.8; +} + +.form-container .cancel +{ + background-color: red; +} + +.form-container .btn:hover, .add-button:hover +{ + opacity: 1; +} + + +.add-text-btn +{ + background-color: darkblue; + border-radius: 25px; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); +} + +#index-html-page-div1 +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +/* The sidebar menu */ +.sidebar { + height: 100%; /* 100% Full-height */ + width: 0; /* 0 width - change this with JavaScript */ + position: fixed; /* Stay in place */ + z-index: 1; /* Stay on top */ + top: 0; + left: 0; + background-color: #111; /* Black*/ + overflow-x: hidden; /* Disable horizontal scroll */ + padding-top: 60px; /* Place content 60px from the top */ + transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ +} + +/* The sidebar links */ +.sidebar a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; + transition: 0.3s; +} + +/* When you mouse over the navigation links, change their color */ +.sidebar a:hover { + color: #f1f1f1; + padding: 10 px 20 px; + display: block; +} + +/* Position and style the close button (top right corner) */ +.sidebar .closebtn { + position: absolute; + top: 0; + right: 25px; + font-size: 36px; + margin-left: 50px; +} +.sidebar button { + padding: 10px 20px; + margin-bottom: 30px; + display: block; +} +.parent-container { + height: 50px; /* Define the height of the parent container */ +} + + +/* The button used to open the sidebar */ +.openbtn { + font-size: 20px; + cursor: pointer; + background-color: #111; + color: white; + padding: 10px 15px; + border: none; + top: 0; + left: 0; + z-index: 1; + position: sticky; +} + +.openbtn:hover { + background-color: #444; + +} + +/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ +#main { + transition: margin-left .5s; /* If you want a transition effect */ + padding: 20px; +} + +/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ +@media screen and (max-height: 450px) { + .sidebar {padding-top: 15px;} + .sidebar a {font-size: 18px;} +} +