commit
02802c710f
7 changed files with 539 additions and 0 deletions
-
1README.md
-
189css/nav.css
-
14css/scaler.css
-
105css/waves.css
-
168grid.html
-
BINimg/adastra7.webp
-
62index.html
@ -0,0 +1 @@ |
|||
# Some css and js stuff im doing idk doe prolly never gonna finish this rework |
|||
@ -0,0 +1,189 @@ |
|||
|
|||
.nav-bar { |
|||
display:flex; |
|||
align-items:center; |
|||
justify-content: center; |
|||
height:40px; |
|||
} |
|||
.nav, .nav0{ |
|||
color:#ffffff; |
|||
text-decoration:none; |
|||
padding:15px; |
|||
transition: all .5s ease; |
|||
position : relative; |
|||
} |
|||
.nav:hover{ |
|||
text-shadow: |
|||
1px 1px 0 #ffffff, |
|||
transition: all .5s; |
|||
} |
|||
.nav::before{ |
|||
content:""; |
|||
width:100%; |
|||
height:1px; |
|||
bottom:0; |
|||
left:0; |
|||
position: absolute; |
|||
background-color:#ffffff; |
|||
transform-origin: bottom; |
|||
transform: scaleX(0); |
|||
transition: transform 0.5s ease; |
|||
} |
|||
.nav:hover::before{ |
|||
transform: scaleX(1); |
|||
} |
|||
.dot{ |
|||
display:inline-block; |
|||
width:10px; |
|||
height:10px; |
|||
border-radius:10px; |
|||
background-color:#000; |
|||
transition: all 0.5s; |
|||
animation-name: blinking; |
|||
animation-duration: 4s; |
|||
animation-iteration-count: infinite; |
|||
} |
|||
.nav0:hover{ |
|||
text-shadow:1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000; |
|||
} |
|||
.nav0:hover .dot{ |
|||
box-shadow: 0px 1px #016A70, 1px 1px #016A70; |
|||
} |
|||
@keyframes blinking{ |
|||
0%{ |
|||
height:2px; |
|||
transform: translateY(-100%); |
|||
} |
|||
5%{ |
|||
height:10px; |
|||
transform: translateY(0%); |
|||
} |
|||
7%{ |
|||
height:2px; |
|||
transform: translateY(-100%); |
|||
} |
|||
10%{ |
|||
height:10px; |
|||
transform: translateY(0%); |
|||
} |
|||
68%{ |
|||
height:10px; |
|||
transform: translateY(0%); |
|||
} |
|||
70%{ |
|||
height:2px; |
|||
transform: translateY(-100%); |
|||
} |
|||
76%{ |
|||
height:10px; |
|||
transform: translateY(0%); |
|||
} |
|||
100%{ |
|||
height:10px; |
|||
transform: translateY(0%); |
|||
} |
|||
} |
|||
.main { |
|||
color:#000; |
|||
display:flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 50px; |
|||
} |
|||
.container { |
|||
display: block; |
|||
height: 63%; |
|||
cursor: context-menu; |
|||
margin-top: 200px; |
|||
} |
|||
.paragraph{ |
|||
width:65vw; |
|||
color: #000; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
text-align : center; |
|||
} |
|||
.name{ |
|||
transition: all 0.5s ease; |
|||
font-weight: bold; |
|||
} |
|||
.name:hover { |
|||
text-shadow: |
|||
1px 1px 0 #000, |
|||
1px 1px 0 #000, |
|||
1px 1px 0 #000, |
|||
1px 1px 0 #000; |
|||
} |
|||
::selection { |
|||
color: #8DDFCB; |
|||
background: #000; |
|||
} |
|||
|
|||
|
|||
/* Mobile compatibility */ |
|||
@media only screen and (max-width: 768px) { |
|||
.nav-bar { |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.nav, .nav0 { |
|||
padding: 10px; |
|||
font-size: 14px; /* Adjust font size for smaller screens */ |
|||
} |
|||
|
|||
.nav-bar, .main, .container, .paragraph { |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.main { |
|||
font-size: 30px; /* Adjust main section font size */ |
|||
} |
|||
|
|||
.paragraph { |
|||
width: 85%; /* Adjust paragraph width */ |
|||
} |
|||
} |
|||
|
|||
/* Hamburger menu for smaller screens */ |
|||
@media only screen and (max-width: 768px) { |
|||
.hamburger-menu { |
|||
display: block; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.nav-menu { |
|||
display: none; /* Hide nav menu by default on mobile */ |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.hamburger-menu.active + .nav-menu { |
|||
display: flex; /* Show menu when hamburger is active */ |
|||
} |
|||
} |
|||
|
|||
|
|||
.logo { |
|||
height: 40px; /* Adjust the height to fit your navbar's size */ |
|||
width: auto; /* Keeps the logo's aspect ratio intact */ |
|||
} |
|||
|
|||
.logo-link { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
position: relative; /* Needed for the positioning of the pseudo-element */ |
|||
margin-right: 20px; /* Adjust if you need more space around the divider */ |
|||
} |
|||
|
|||
.logo-link::after { |
|||
content: ""; |
|||
position: absolute; |
|||
right: -10px; /* Adjust this value based on your specific spacing needs */ |
|||
top: 0; |
|||
bottom: 0; |
|||
width: 1px; |
|||
background-color: white; /* Set the color of the divider */ |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), |
|||
only screen and (min--moz-device-pixel-ratio: 1.5), |
|||
only screen and (-o-min-device-pixel-ratio: 3/2), |
|||
only screen and (min-device-pixel-ratio: 1.5), |
|||
only screen and (min-resolution: 144dpi), |
|||
only screen and (min-resolution: 1.5dppx) { |
|||
|
|||
.nav-bar, .logo, .nav { |
|||
/* Increase font sizes, padding, or other properties as needed */ |
|||
font-size: 95%; /* Example: Increase font size */ |
|||
|
|||
} |
|||
/* Add any other high-resolution adjustments here */ |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
@import url(//fonts.googleapis.com/css?family=Lato:300:400); |
|||
|
|||
body { |
|||
margin:0; |
|||
} |
|||
|
|||
h1 { |
|||
font-family: 'Lato', sans-serif; |
|||
font-weight:300; |
|||
letter-spacing: 2px; |
|||
font-size:48px; |
|||
} |
|||
p { |
|||
font-family: 'Lato', sans-serif; |
|||
letter-spacing: 1px; |
|||
font-size:14px; |
|||
color: #333333; |
|||
} |
|||
|
|||
.header { |
|||
position:relative; |
|||
text-align:center; |
|||
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%); |
|||
color:white; |
|||
} |
|||
.logo { |
|||
width:50px; |
|||
fill:white; |
|||
padding-right:15px; |
|||
display:inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.inner-header { |
|||
height:65vh; |
|||
width:100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.flex { /*Flexbox for containers*/ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.waves { |
|||
position:relative; |
|||
width: 100%; |
|||
height:15vh; |
|||
margin-bottom:-7px; /*Fix for safari gap*/ |
|||
min-height:100px; |
|||
max-height:150px; |
|||
} |
|||
|
|||
.content { |
|||
position:relative; |
|||
height:10vh; |
|||
text-align:center; |
|||
background-color: white; |
|||
} |
|||
|
|||
/* Animation */ |
|||
|
|||
.parallax > use { |
|||
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; |
|||
} |
|||
.parallax > use:nth-child(1) { |
|||
animation-delay: -2s; |
|||
animation-duration: 7s; |
|||
} |
|||
.parallax > use:nth-child(2) { |
|||
animation-delay: -3s; |
|||
animation-duration: 10s; |
|||
} |
|||
.parallax > use:nth-child(3) { |
|||
animation-delay: -4s; |
|||
animation-duration: 13s; |
|||
} |
|||
.parallax > use:nth-child(4) { |
|||
animation-delay: -5s; |
|||
animation-duration: 20s; |
|||
} |
|||
@keyframes move-forever { |
|||
0% { |
|||
transform: translate3d(-90px,0,0); |
|||
} |
|||
100% { |
|||
transform: translate3d(85px,0,0); |
|||
} |
|||
} |
|||
/*Shrinking for mobile*/ |
|||
@media (max-width: 768px) { |
|||
.waves { |
|||
height:40px; |
|||
min-height:40px; |
|||
} |
|||
.content { |
|||
height:14vh; |
|||
} |
|||
h1 { |
|||
font-size:24px; |
|||
} |
|||
} |
|||
@ -0,0 +1,168 @@ |
|||
<!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> |
|||
@ -0,0 +1,62 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" > |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>i hate javascript</title> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link rel="stylesheet" href="css/waves.css"> |
|||
<link rel="stylesheet" href="css/nav.css"> |
|||
<link rel="stylesheet" href="css/scaler.css"> |
|||
<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--> |
|||
|
|||
<div class="header"> |
|||
<div class="nav-bar" style="font-family: 'Quicksand'"> |
|||
<div id="links"> |
|||
<a href="#" class="nav">Home</a> |
|||
<a href="#" class="nav">Services</a> |
|||
<a href="#" class="nav">About</a> |
|||
<a href="#" class="nav">Contact</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--Content before waves--> |
|||
<div class="inner-header flex"> |
|||
|
|||
<!--Just the logo.. Don't mind this--> |
|||
<h1>Adastra7</h1> |
|||
</div> |
|||
|
|||
<!--Waves Container--> |
|||
<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"> |
|||
<defs> |
|||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> |
|||
</defs> |
|||
<g class="parallax"> |
|||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" /> |
|||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> |
|||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" /> |
|||
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" /> |
|||
</g> |
|||
</svg> |
|||
</div> |
|||
<!--Waves end--> |
|||
|
|||
</div> |
|||
<!--Header ends--> |
|||
|
|||
<!--Content starts--> |
|||
<div class="content flex"> |
|||
<p>Adastra7 | 2017-2024</p> |
|||
</div> |
|||
<!--Content ends--> |
|||
<!-- partial --> |
|||
|
|||
</body> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue