diff --git a/donation_website/index.html b/donation_website/index.html index e69de29..e6dff91 100644 --- a/donation_website/index.html +++ b/donation_website/index.html @@ -0,0 +1,87 @@ + + + + + + + Blood Bank + + + + + + +
+
+
+
+
+ + + +
+
+ + + + +
+
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/donation_website/style.css b/donation_website/style.css index e69de29..c146fee 100644 --- a/donation_website/style.css +++ b/donation_website/style.css @@ -0,0 +1,122 @@ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600&family=Nunito:wght@200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +html{ + scroll-behavior: smooth; +} +.container{ + max-width: 80%; + margin: auto; +} +.flex{ + display: flex; +} +.flex-1{ + display: flex; + justify-content: space-between; +} +.grid{ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 30px; + grid-row-gap: 30px; +} +.gride-1{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 30px; + grid-row-gap: 30px; +} +header{ + background-color: whitesmoke; + height: 100vh; +} +header nav{ + display: flex; + justify-content: space-between; +} +nav .logo img{ + width: 70px; + margin-top: 10px; +} +nav .logo{ + font-size: 22px; + text-transform: uppercase; +} +nav .logo span{ + color: red; +} +header ul{ + position: relative; + display: flex; +} +header ul li{ + padding-left: 50px; + text-align: center; + list-style: none; + padding: 30px 30px; + position: relative; +} +header ul li a{ + text-decoration: none; + color: black; + letter-spacing: 1px; + transition: all 0.3s ; +} +header ul li a:hover{ + color: #D22B2B; +} +header .icon{ + color: #D22B2B; + padding: 20px; + cursor: pointer; +} +header .icon i{ + font-size: 16px; + margin-right: 20px; +} +header .icon label{ + font-size: 14px; + margin-right: 20px; + opacity: 0.8; +} +header hr{ + opacity: 0.2; + width: 100%; +} +#icon-menu{ + font-size: 22px; + line-height: 80px; + margin: 10px; + cursor: pointer; + opacity: 0; + display: none; +} +.submenu{ + display: none; +} +header ul li:hover .submenu{ + display: block; + position: absolute; + left: 0; + background-color: white; + box-shadow: 10px 5px 5px grey; +} +.submenu ul{ + display: block; + margin: 10px; +} +.submenu ul li{ + width: 150px; + padding: 10px; + text-align: left; +} + + + + + +