fixxing shits
This commit is contained in:
parent
02802c710f
commit
ef5e2ab5b9
|
|
@ -15,7 +15,7 @@
|
||||||
.nav:hover{
|
.nav:hover{
|
||||||
text-shadow:
|
text-shadow:
|
||||||
1px 1px 0 #ffffff,
|
1px 1px 0 #ffffff,
|
||||||
transition: all .5s;
|
transition; all .5s;
|
||||||
}
|
}
|
||||||
.nav::before{
|
.nav::before{
|
||||||
content:"";
|
content:"";
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin:0;
|
margin:0;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -20,7 +21,7 @@ p {
|
||||||
.header {
|
.header {
|
||||||
position:relative;
|
position:relative;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
|
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgb(166, 90, 197) 100%);
|
||||||
color:white;
|
color:white;
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
|
|
@ -56,7 +57,7 @@ p {
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position:relative;
|
position:relative;
|
||||||
height:10vh;
|
height:14vh;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
@ -97,7 +98,7 @@ p {
|
||||||
min-height:40px;
|
min-height:40px;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
height:14vh;
|
height:18vh;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size:24px;
|
font-size:24px;
|
||||||
|
|
|
||||||
168
grid.html
168
grid.html
|
|
@ -1,168 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Adastra7</title>
|
|
||||||
<style>
|
|
||||||
body, html {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: 20px;
|
|
||||||
background: linear-gradient(to right, #004e92, #000428);
|
|
||||||
color: white;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar a, .navbar .nav-item {
|
|
||||||
margin-left: 20px;
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar a:hover, .nav-item:hover > a {
|
|
||||||
color: #a8dadc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#home {
|
|
||||||
background: linear-gradient(to bottom, #89f7fe, #66a6ff);
|
|
||||||
color: white;
|
|
||||||
min-height: 90vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive navbar */
|
|
||||||
.nav-toggle {
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
min-width: 160px;
|
|
||||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
||||||
z-index: 1;
|
|
||||||
top: 40px;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
color: black;
|
|
||||||
padding: 12px 16px;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:hover .submenu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.navbar {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar a, .navbar .nav-item {
|
|
||||||
display: none;
|
|
||||||
margin-left: 0;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="navbar">
|
|
||||||
<span class="nav-toggle" onclick="toggleNav()">☰ Menu</span>
|
|
||||||
<a href="#" onclick="showSection('home')">Home</a>
|
|
||||||
<a href="#" onclick="showSection('search')">Search</a>
|
|
||||||
<a href="#" onclick="showSection('following')">Following</a>
|
|
||||||
<div class="nav-item">
|
|
||||||
<a href="#">Settings</a>
|
|
||||||
<div class="submenu">
|
|
||||||
<a href="#" onclick="showSection('profile')">Profile</a>
|
|
||||||
<a href="#" onclick="showSection('privacy')">Privacy</a>
|
|
||||||
<a href="#" onclick="showSection('notifications')">Notifications</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="home" class="content">
|
|
||||||
<h1>Adastra7</h1>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
<div id="search" class="content" style="display:none">
|
|
||||||
<h2>Search</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
<div id="following" class="content" style="display:none">
|
|
||||||
<h2>Following</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
<div id="settings" class="content" style="display:none">
|
|
||||||
<h2>Settings</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
<!-- Additional Sections for Submenu Items -->
|
|
||||||
<div id="profile" class="content" style="display:none">
|
|
||||||
<h2>Profile Settings</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
|
|
||||||
function showSection(sectionId) {
|
|
||||||
document.querySelectorAll('.content').forEach(function(section) {
|
|
||||||
section.style.display = 'none';
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById(sectionId).style.display = 'block';
|
|
||||||
if (window.innerWidth <= 768) {
|
|
||||||
toggleNav(); // Automatically close the nav on selection for mobile users
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleNav() {
|
|
||||||
const navItems = document.querySelectorAll('.navbar a');
|
|
||||||
for (let i = 0; i < navItems.length; i++) {
|
|
||||||
if (navItems[i].style.display === 'block') {
|
|
||||||
navItems[i].style.display = 'none';
|
|
||||||
} else {
|
|
||||||
navItems[i].style.display = 'block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
14
index.html
14
index.html
|
|
@ -10,9 +10,7 @@
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- partial:index.partial.html -->
|
<!-- Yea this is ductaped together spaghetti code dont judge me im a sysadmin not a programmer or designer -->
|
||||||
<!--Hey! This is the original version
|
|
||||||
of Simple CSS Waves-->
|
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="nav-bar" style="font-family: 'Quicksand'">
|
<div class="nav-bar" style="font-family: 'Quicksand'">
|
||||||
|
|
@ -24,14 +22,14 @@ of Simple CSS Waves-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Content before waves-->
|
<!--stuff here is before da waeves-->
|
||||||
<div class="inner-header flex">
|
<div class="inner-header flex">
|
||||||
|
|
||||||
<!--Just the logo.. Don't mind this-->
|
<!--adaster oder so-->
|
||||||
<h1>Adastra7</h1>
|
<h1 style="font-family: 'Quicksand'">Adastra7</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Waves Container-->
|
<!--Waves Container thingy i stole-->
|
||||||
<div>
|
<div>
|
||||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||||
|
|
@ -53,7 +51,7 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||||
|
|
||||||
<!--Content starts-->
|
<!--Content starts-->
|
||||||
<div class="content flex">
|
<div class="content flex">
|
||||||
<p>Adastra7 | 2017-2024</p>
|
<p style="font-family: 'Quicksand'">Adastra7 | 2017-2024</p>
|
||||||
</div>
|
</div>
|
||||||
<!--Content ends-->
|
<!--Content ends-->
|
||||||
<!-- partial -->
|
<!-- partial -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue