Beautiful top-menu

2020-11-19 16:30:45 +04:00 · 2020-11-19 16:30:45 +04:00 · eb52b56c15
commit eb52b56c15
parent ac3532dd5e
2 changed files with 122 additions and 13 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
+
+body {
+	padding: 0;
+}
+
+.menu {
+	position: fixed;
+	width: 100%;
+	z-index: 100;
+	font-size: 18px;
+	font-family: 'Exo 2', sans-serif;
+	background-color: #cecdd9;
+	color: #514b90;
+	top: 0;
+	left: 0;
+}
+.menu ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	box-shadow: 0 5px 5px gray;
+}
+.menu ul li {
+	color: #514b90;
+	display: inline-block;
+	position: relative;
+	text-transform: uppercase;
+	padding-top: 5px;
+	padding-left: 5px;
+	padding-right: 5px;
+	padding-bottom: 5px;
+	transition: color 0.45s ease-in-out;
+}
+.menu ul li a {
+	color: #514b90;
+	text-decoration: none;
+}
+.menu ul.top-menu > li {
+	padding-left: 10px;
+	font-size: 20px;
+}
+
+.androit-green { color: green; }
+.androit-white { color: white; }
+
+.menu ul.top-menu > li > a {
+	color: #514b90;
+	transition: color 0.45s ease-in-out;
+}
+.menu ul.top-menu > li:hover > a {
+	color: #0e0939;
+	transition: color 0.45s ease-in-out;
+}
+
+.dropdown-menu {
+	list-style: none;
+	position: absolute;
+	left: 0;
+	width: 200px;
+	visibility: hidden;
+	backface-visibility: hidden;
+	opacity: 0;
+	z-index: 200;
+	font-size: 18px;
+	background-color: #aea9c5;
+	border-radius: 5px;
+	transform-origin: left top;
+	transform: perspective(600px) rotateX(-90deg);
+	transition: 0.6s ease-in-out;
+}
+.dropdown-menu li {
+	display: block !important;
+}
+.top-menu > #myproj-item:hover .dropdown-menu {
+	visibility: visible;
+	opacity: 1;
+	transform: perspective(600px) rotateX(0deg);
+}
+
+.main-content {
+	padding-top: 40px;
+	font-size: 18px;
+	font-family: sans-serif;
+}
--- a/index.html
+++ b/index.html
@ -1,13 +1,37 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset = "UTF-8" />
-<title>Веб-сайт Андрея (DarkCat09/CodePicker13)</title>
-</head>
-<body>
-<p>
-Пока что здесь пусто.<br />
-Посмотрите <a href = "https://github.com/DarkCat09">мой профиль GitHub</a> - там много интересных проектов! &#9786
-</p>
-</body>
+	<head>
+		<meta charset="UTF-8" />
+		<title>Сайт DarkCat09</title>
+		<link rel="stylesheet" href="css/style.css" />
+	</head>
+	<body>
+		<nav class="menu">
+			<ul class="top-menu">
+				<li><a href="#">(Логотип) Главная</a></li>
+				<li><a href="#about-me">Обо мне</a></li>
+				<li id="myproj-item">
+					<a href="https://github.com/DarkCat09">Проекты &#9776;</a>
+					<ul class="dropdown-menu">
+						<li><a href="https://github.com/DarkCat09/AchSmartHome">AchSmartHome</a></li>
+						<li><a href="https://github.com/IngCenter/SMM">SMM</a></li>
+						<li><a href="https://github.com/DarkCat09/RegFileMaker">RegFileMaker</a></li>
+						<li><a href="https://github.com/DarkCat09/MtkFwTools">MtkFwTools</a></li>
+						<li><a href="https://github.com/IngCenter/FallSimulator">FallSimulator</a></li>
+						<li><a href="https://github.com/DarkCat09/PassGen">PassGen</a></li>
+						<li><a href="https://github.com/DarkCat09/Cash_Machine">Cash_Machine</a></li>
+						<li><a href="https://github.com/DarkCat09/RRJS">RRJS</a></li>
+					</ul>
+				</li>
+				<li id="androit-item"><a href="#"><span class="androit-green">Andro</span><span class="androit-white">IT</span></a></li>
+				<li><a href="http://minespace-world.000webhostapp.com/">Minecraft</a></li>
+				<li><a href="#">Плавание</a></li>
+			</ul>
+		</nav>
+		<div class="main-content">
+			Сайт всё ещё не готов. Пока что можете посмотреть 
+			<a href="https://github.com/DarkCat09">мой профиль на GitHub</a> 
+			- там действительно много интересных проектов&#9786;
+		</div>
+	</body>
 </html>