uploader
This commit is contained in:
commit
02802c710f
|
|
@ -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>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 608 B |
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue