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