mirror of
https://github.com/silicoflare/silicoflare-website.git
synced 2026-05-26 20:17:58 +05:30
added phone nav
This commit is contained in:
SilicoFlare
GitHub
21
index.html
21
index.html
@@ -14,20 +14,31 @@
|
||||
<body>
|
||||
<div id="modeSel" onclick="changeMode()" onmouseenter="hoverIn()" onmouseleave="hoverOut()"><img id="mode" src="data/dark.png" alt="dark_mode" onmouseenter="hoverIn()" onmouseleave="hoverOut()"></div>
|
||||
<span class="tooltip">Dark Mode</span>
|
||||
<header>
|
||||
<header class="pc">
|
||||
<div class="heading">SilicoFlare</div>
|
||||
<div class="menu selected">Home</div>
|
||||
<div class="menu">Updates</div>
|
||||
<div class="menu">About Me</div>
|
||||
<div class="menu">Creations</div>
|
||||
<div class="menu">Contact</div>
|
||||
</header>
|
||||
<br><br><br><br><br><br><br>
|
||||
|
||||
<header class="phone">
|
||||
<div class="heading-ph">SilicoFlare</div>
|
||||
<div class="ham" onclick="hamburger()">☰</div>
|
||||
<div id="ph-links">
|
||||
<div class="menu-ph selected">Home</div>
|
||||
<div class="menu-ph">About Me</div>
|
||||
<div class="menu-ph">Creations</div>
|
||||
<div class="menu-ph">Contact</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="overlay"> </div>
|
||||
<div class="bigtext">The name is Flare...</div>
|
||||
<div class="bigtext"><span class="si">Silico</span><span class="f">Flare</span></div>
|
||||
<br><br><br>
|
||||
<main class="centred">
|
||||
Welcome to my world! You would already have seen a significance difference in the looks of my homepage. Yes! I am redesigning it with all the skills I'm learning. Only the homepage is changed, but I'll be changing other pages too! Since other pages are under construction, they have been temporarily removed from my website, so I'm sorry for any inconveniences!<br><br>
|
||||
Also, mobile users will face inconveniences...
|
||||
Welcome to my world! You would already have seen a significance difference in the looks of my homepage. Yes! I am redesigning it with all the skills I'm learning. Only the homepage is changed, but I'll be changing other pages too! Since other pages are under construction, they have been temporarily removed from my website, so I'm sorry for any inconveniences!
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -59,23 +59,70 @@ header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phone {
|
||||
display: none;
|
||||
font-family: SilicoHand;
|
||||
padding: 1.95vw 26vw 1.95vw 1.95vw;
|
||||
font-size: 5vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.heading-ph {
|
||||
font-family: SilicoHand;
|
||||
padding: 0.5vw;
|
||||
font-size: 5vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ham {
|
||||
font-size: 5vw;
|
||||
font-weight: bolder;
|
||||
position: fixed;
|
||||
right: 0.5%;
|
||||
top: -0.5%;
|
||||
padding: 1.5%;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#ph-links {
|
||||
display: none;
|
||||
margin-top: 2vw;
|
||||
background-color: rgb(40, 40, 40);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0%;
|
||||
padding: 1.5vw;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.menu-ph {
|
||||
padding: 1vw;
|
||||
font-size: 3vw;
|
||||
margin-right: 3vw;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.menu-ph:hover {
|
||||
background-color: #f0f;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: SilicoHand;
|
||||
display: inline-block;
|
||||
padding: 30px 400px 30px 30px;
|
||||
font-size: 50px;
|
||||
padding: 1.95vw 26vw 1.95vw 1.95vw;
|
||||
font-size: 3.25vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-family: SilicoHand;
|
||||
padding: 20px;
|
||||
padding: 1.3vw;
|
||||
margin: 5px;
|
||||
font-size: 20px;
|
||||
font-size: 1.3vw;
|
||||
color: white;
|
||||
display: inline;
|
||||
float: right;
|
||||
min-width: 150px;
|
||||
min-width: 9.76vw;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -88,6 +135,19 @@ header {
|
||||
background-color: #f0f;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(15, 15, 15, 0.7);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.bigtext {
|
||||
font-size: 7vw;
|
||||
text-align: center;
|
||||
@@ -104,6 +164,7 @@ header {
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 10vw;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
transition: color 0.5s ease-in-out;
|
||||
}
|
||||
@@ -117,6 +178,14 @@ main {
|
||||
main {
|
||||
font-size: 17.5px;
|
||||
}
|
||||
|
||||
.pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.centred {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
var current = "dark";
|
||||
var isActive = false;
|
||||
|
||||
function changeMode() {
|
||||
if (current == 'dark') {
|
||||
@@ -17,7 +18,6 @@ function changeMode() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function hoverIn() {
|
||||
document.getElementById("modeSel").style.backgroundColor = "rgba(53, 53, 53, 1)";
|
||||
document.getElementById("mode").style.opacity = 1;
|
||||
@@ -29,3 +29,16 @@ function hoverOut() {
|
||||
document.getElementById("mode").style.opacity = 0.5;
|
||||
document.querySelector(".tooltip").style.display = "none";
|
||||
}
|
||||
|
||||
function hamburger() {
|
||||
if (!isActive) {
|
||||
document.getElementById("ph-links").style.display = "block";
|
||||
document.getElementById("overlay").style.display = "block";
|
||||
isActive = true;
|
||||
}
|
||||
else {
|
||||
document.getElementById("ph-links").style.display = "none";
|
||||
document.getElementById("overlay").style.display = "none";
|
||||
isActive = false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user