neon443/neon443.github.io
1
0
Fork 0
mirror of https://github.com/neon443/neon443.github.io.git synced 2026-03-11 07:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

noice - top bar finished - just needs content lol

Browse Source 
topbar:
bg color + blur
bg shadow - white shadow in dark mode
pushes content down below bar
NICELY SPACED THINGS!!!!!!
tweaked colors aswell
added lorem impsum waffle to test topbar bg blur
This commit is contained in:
Nihaal Sharma
2023-05-21 12:05:13 +01:00
parent 9762f93b2b
commit 769a5a9726
2 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@@ -6,7 +6,9 @@
<link rel="stylesheet" href="./style.css" type="text/css"> <link rel="stylesheet" href="./style.css" type="text/css">
</head> </head>
<body> <body>
<h1>neon443</h1> <h1 class="topbar">neon443</h1>
<div style="height: 60px;"></div>
<br>
<p> <p>
<b>Directory Tree</b><br> <b>Directory Tree</b><br>
<a href="https://neon443.github.io">https://neon443.github.io</a><br> <a href="https://neon443.github.io">https://neon443.github.io</a><br>
@@ -15,14 +17,18 @@
├─<a href="https://neon443.github.io/neon443.github.io/">neon443.github.io</a><br> ├─<a href="https://neon443.github.io/neon443.github.io/">neon443.github.io</a><br>
└─<a href="https://neon443.github.io/webpage-testing/">webpage-testing</a><br> └─<a href="https://neon443.github.io/webpage-testing/">webpage-testing</a><br>
├─ ├─
</p><br> </p>
<br>
<h3><b>Tips:</b></h3> <h3><b>Tips:</b></h3>
<p> <p>
This site Dark Mode friendly - no more dark mode extensions needed!<br> This site Dark Mode friendly - no dark mode extension needed!<br>
Try viewing this site on a mobile phone or resize the browser window - The page automagically fits the device's screen nicely Try viewing this site on a mobile phone or resize the browser window - The page automagically fits the device's screen nicely<br>
Look at that title bar at the top and scroll down - what do you notice?
</p> </p>
<br>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. nec nam aliquam sem et tortor consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam non nisi est sit amet facilisis magna etiam tempor orci eu lobortis elementum nibh tellus molestie nunc non blandit massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et leo duis ut diam quam nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas dui id ornare arcu odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo laoreet sit amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis in eu mi bibendum neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim sit amet venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat in ante metus dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum non consectetur a erat nam at lectus urna duis convallis convallis tellus id interdum velit laoreet id donec ultrices tincidunt arcu non sodales neque sodales ut etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam id
</p> </p>
<br>
</body> </body>
</html> </html>

30
style.css
View File

@@ -1,29 +1,34 @@
*{ *{
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0px;
} }
b{ b{
color: #007AFF color: #007AFF
} }
.topbar{
position: fixed;
top: 0px;
background-color: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(5px);
width: 100%;
box-shadow:
}
body{ body{
background-color: #f2f2f2; background-color: #f2f2f2;
color: #262626; color: #222222;
font-family: system-ui; font-family: system-ui;
height: 100%; height: 100%;
} }
p{ p{
font-size: 20px; font-size: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
h1{ h1{
font-size: 45px; font-size: 45px;
font-weight: 750; font-weight: 750;
padding: 0px; padding-top: 0px;
padding-top: 5px; padding-bottom: 0px;
padding-bottom: 5px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
position: fixed; position: fixed;
@@ -31,16 +36,16 @@ h1{
h2{ h2{
font-size: 35px; font-size: 35px;
font-weight: 300; font-weight: 300;
padding-top: 5px; padding-top: 0px;
padding-bottom: 5px; padding-bottom: 0px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
h3{ h3{
font-size: 25px; font-size: 25px;
font-weight: 200; font-weight: 200;
padding-top: 5px; padding-top: 0px;
padding-bottom: 5px; padding-bottom: 0px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@@ -55,6 +60,9 @@ h3{
p{ p{
color: #e6e6e6; color: #e6e6e6;
} }
.topbar{
background-color: rgba(1, 1, 1, 0.25);
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
*{ *{