├── README.md ├── images ├── help.png ├── logo.png ├── logout.png ├── profile.png ├── setting.png └── user.png ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Profile card 2 | -------------------------------------------------------------------------------- /images/help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/Dropdown/a85dc5a69091421d0a56dc4653f125ccd63e3056/images/help.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/Dropdown/a85dc5a69091421d0a56dc4653f125ccd63e3056/images/logo.png -------------------------------------------------------------------------------- /images/logout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/Dropdown/a85dc5a69091421d0a56dc4653f125ccd63e3056/images/logout.png -------------------------------------------------------------------------------- /images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/Dropdown/a85dc5a69091421d0a56dc4653f125ccd63e3056/images/profile.png -------------------------------------------------------------------------------- /images/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/Dropdown/a85dc5a69091421d0a56dc4653f125ccd63e3056/images/setting.png -------------------------------------------------------------------------------- /images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dostonjon21/Dropdown/a85dc5a69091421d0a56dc4653f125ccd63e3056/images/user.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 56 |
57 | 58 | 65 | 66 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let subMenu = document.getElementById("subMenu"); 2 | 3 | function toggleMenu(){ 4 | subMenu.classList.toggle("open-menu"); 5 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Poppins', sans-serif; 5 | box-sizing: border-box; 6 | } 7 | .hero{ 8 | width: 100%; 9 | min-height: 100vh; 10 | background: #eceaff; 11 | color: #525252; 12 | } 13 | nav{ 14 | background: #1a1a1a; 15 | width: 100%; 16 | padding: 10px 10%; 17 | display: flex; 18 | align-items: center; 19 | justify-content: space-between; 20 | position: relative; 21 | } 22 | .logo{ 23 | width: 120px; 24 | } 25 | .user-pic{ 26 | width: 40px; 27 | border-radius: 50%; 28 | cursor: pointer; 29 | margin-left: 30px; 30 | } 31 | nav ul{ 32 | width: 100%; 33 | text-align: center; 34 | } 35 | nav ul li{ 36 | display: inline-block; 37 | list-style: none; 38 | margin: 10px 20px; 39 | } 40 | nav ul li a{ 41 | color: #fff; 42 | text-decoration: none; 43 | } 44 | nav ul li a:hover{ 45 | color: #0bffeb; 46 | } 47 | .sub-menu-wrap{ 48 | position: absolute; 49 | top: 100%; 50 | right: 10%; 51 | width: 320px; 52 | max-height: 0px; 53 | overflow: hidden; 54 | transition: max-height 0.5s; 55 | } 56 | .sub-menu-wrap.open-menu{ 57 | max-height: 400px; 58 | } 59 | .sub-menu{ 60 | background: #fff; 61 | padding: 20px; 62 | margin: 10px; 63 | } 64 | .user-info{ 65 | display: flex; 66 | align-items: center; 67 | } 68 | .user-info h2{ 69 | font-weight: 500; 70 | } 71 | .user-info img{ 72 | width: 60px; 73 | border-radius: 50%; 74 | margin-right: 15px; 75 | } 76 | .sub-menu{ 77 | border: 0; 78 | height: 1px; 79 | width: 100%; 80 | background: #ccc; 81 | margin: 15px 0 10px; 82 | } 83 | .sub-menu-link{ 84 | display: flex; 85 | align-items: center; 86 | text-decoration:none; 87 | color: #525252; 88 | margin: 12px 0; 89 | } 90 | .sub-menu-link p{ 91 | width: 100%; 92 | } 93 | .sub-menu-link img{ 94 | width: 40px; 95 | background: #e5e5e5; 96 | border-radius: 50%; 97 | padding: 8px; 98 | margin-right: 15px; 99 | } 100 | .sub-menu-link span{ 101 | font-size: 22px; 102 | transition: transform 0.5s; 103 | } 104 | .sub-menu-link:hover span{ 105 | transform: translateX(5px); 106 | } 107 | .sub-menu-link:hover p{ 108 | font-weight: 600; 109 | } --------------------------------------------------------------------------------