fixxing shits
This commit is contained in:
parent
02802c710f
commit
ef5e2ab5b9
|
|
@ -15,7 +15,7 @@
|
|||
.nav:hover{
|
||||
text-shadow:
|
||||
1px 1px 0 #ffffff,
|
||||
transition: all .5s;
|
||||
transition; all .5s;
|
||||
}
|
||||
.nav::before{
|
||||
content:"";
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
body {
|
||||
margin:0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -20,7 +21,7 @@ p {
|
|||
.header {
|
||||
position:relative;
|
||||
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;
|
||||
}
|
||||
.logo {
|
||||
|
|
@ -56,7 +57,7 @@ p {
|
|||
|
||||
.content {
|
||||
position:relative;
|
||||
height:10vh;
|
||||
height:14vh;
|
||||
text-align:center;
|
||||
background-color: white;
|
||||
}
|
||||
|
|
@ -97,7 +98,7 @@ p {
|
|||
min-height:40px;
|
||||
}
|
||||
.content {
|
||||
height:14vh;
|
||||
height:18vh;
|
||||
}
|
||||
h1 {
|
||||
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">
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<!--Hey! This is the original version
|
||||
of Simple CSS Waves-->
|
||||
<!-- Yea this is ductaped together spaghetti code dont judge me im a sysadmin not a programmer or designer -->
|
||||
|
||||
<div class="header">
|
||||
<div class="nav-bar" style="font-family: 'Quicksand'">
|
||||
|
|
@ -24,14 +22,14 @@ of Simple CSS Waves-->
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Content before waves-->
|
||||
<!--stuff here is before da waeves-->
|
||||
<div class="inner-header flex">
|
||||
|
||||
<!--Just the logo.. Don't mind this-->
|
||||
<h1>Adastra7</h1>
|
||||
<!--adaster oder so-->
|
||||
<h1 style="font-family: 'Quicksand'">Adastra7</h1>
|
||||
</div>
|
||||
|
||||
<!--Waves Container-->
|
||||
<!--Waves Container thingy i stole-->
|
||||
<div>
|
||||
<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">
|
||||
|
|
@ -53,7 +51,7 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|||
|
||||
<!--Content starts-->
|
||||
<div class="content flex">
|
||||
<p>Adastra7 | 2017-2024</p>
|
||||
<p style="font-family: 'Quicksand'">Adastra7 | 2017-2024</p>
|
||||
</div>
|
||||
<!--Content ends-->
|
||||
<!-- partial -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue