123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- background-color: azure;
- }
- #mainContainer {
- padding: 10px;
- display: flex;
- }
- #aside {
- width: 350px;
- }
- #aside > a{
- color: black;
- font-size: 25px;
- text-decoration: none;
- display: block;
- }
- #aside > a:hover {
- color: crimson;
- }
- #login,
- #cartIcon {
- padding: 5px;
- }
- #login:hover, #cartIcon:hover {
- background-color: azure;
- transition: all 0.5s ease;
- border-radius: 10px;
- }
- #logo {
- width: 70%;
- }
- .logo img {
- margin: 5px;
- width: 70px;
- height: 70px;
- }
- .logo img:hover {
- scale: 1.2;
- }
- header {
- height: 100px;
- position: sticky;
- padding: 10px;
- top: 0;
- right: 0;
- display: flex;
- justify-content: space-between;
- background-color:rgb(49, 184, 184);
- }
- h1 {
- margin-left: 10px;
- }
- h1::first-letter {
- text-transform: capitalize;
- }
- td {
- border: 2px solid black;
- padding: 5px;
- text-align: center;
- }
- #main img {
- max-width: 300px;
- max-height: 300px;
- }
- button {
- cursor: pointer;
- text-align:center;
- font-size:13px;
- text-decoration: none;
- font-weight: 700;
- padding: 3px 6px;
- background: #eaeef1;
- display:block;
- min-width:100px;
- background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.1));
- border-radius: 3px;
- color: rgba(0,0,0,.6);
- text-shadow: 0 1px 1px rgba(255,255,255,.7);
- box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.7);
- }
- button:hover, button.hover {
- background: white;
- }
|