muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added header

Browse source
This commit is contained in:
JSriwongsa 2023-07-12 20:21:23 -05:00
parent 8fca90d46c
commit ac907dfa5d
2 changed files with 209 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
donation_website/index.html
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blood Bank</title>
<link rel="shortcut icon" href="images/logo.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<div class="container-content">
<div class="container">
<div class="icon flex-1">
<div class="box">
<i class='bx bxl-facebook'></i>
<i class='bx bxl-instagram-alt' ></i>
<i class='bx bxl-twitter' ></i>
</div>
<div class="box">
<i class='bx bxs-phone' ></i>
<label for="">+123 456 7890</label>
<i class='bx bxs-envelope' ></i>
<label>info@example.com</label>
</div>
</div>
<hr>
<nav>
<div class="logo">
<span>Blood</span> Bank
<img src="images/logo-1.png" alt="">
</div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Donate</a><i class='bx bx-chevron-down'></i>
<div class="submenu">
<ul>
<li><a href="#">Donate Blood</a></li>
<li><a href="#">Donation types</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Learn</a><i class='bx bx-chevron-down'></i>
<div class="submenu">
<ul>
<li><a href="#">Blood types</a></li>
<li><a href="#">First time Blood Doner</a></li>
<li><a href="#">Scientific research</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Support</a><i class='bx bx-chevron-down'></i>
<div class="submenu">
<ul>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Partnerships</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Service</a><i class='bx bx-chevron-down'></i>
<div class="submenu">
<ul>
<li><a href="#">Laboratory services</a></li>
<li><a href="#">Clinical apheresis services </a></li>
<li><a href="#">Medical consultation</a></li>
</ul>
</div>
</li>
</ul>
<i id="icon-menu" class='bx bx-menu' ></i>
</nav>
</div>
</div>
</header>
<script src="main.js"></script>
</body>
</html>

122
donation_website/style.css
View file

@ -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;
}