MinceOK, you have the best idea in the world. You executed it all perfect but one thing is lacking. Like a dev.to post writer @michaelstamps shared a post on how to make his website look better. Let's make his website look better and give him the website.
WHAT I DID
Ok I have a lot of work where should I start. You know what let's redesign the whole thing. I love glassmorphism, so a simple poppins font glassmorphism navbar. Then simple black text, perfectly aligned. Down, there we have a footer which is also simple. Just put all the links as it is !!!
WOW I GOT A BEUTIFUL RESULT.
DETAILS
I have a moving logo. Simple hover effects and overall a simple website for @michaelstamps.
You can check it out here : SCRIPT ROBOT STUDIOS !
It took me 1 hour to complete the whole thing, @michaelstamps if you are reading this please let me know how the website was. Guys, I really loved helping @michaelstamps. I am here to help anyone, anytime so follow me !
COMMENT ME DOWN BELOW
BTW, I RECENTLY STARTED A DAILY DEV SQUAD SO ENTER INTO IT HERE IS THE LINK: MINCE AND IF THIS POST GETS 100 REACTIONS I WILL MAKE A WEBSITE FOR ANYONE WHO COMMMENTS !!
THANK YOU GUYS
Finally guys you can refer to the source code here down below
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Robot Studios</title>
<link rel="shortcut icon" href="https://script-robot.tiiny.co/images/Script%20Robot%20Logo.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
a{
color: white;
text-decoration: none;
transition: 0.5s ease-in-out;
}
*{
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
}
html,body{
width: 100%;
height: 100%;
overflow-x: hidden;
}
.navbar{
list-style-type: none;
display: flex;
width: 100vw;
height: 20vh;
background-color: white;
position: sticky;
top: 0px;
padding: 0px;
z-index: 5;
/* From https://css.glass */
background: rgba(89, 88, 88, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.navbar li{
width: 33vw;
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
font-family: poppins;
font-size: 250;
font-size: 2vw;
transition: 0.5s ease-in-out;
}
.navbar li a{
list-style-type: none;
color: black;
text-decoration: none;
}
.nav-sec{
display: flex;
margin-left: 27vw;
}
.nav-sec > li{
width: 20vw;
}
.navbar li:hover{
color: gray;
cursor: pointer;
}
.home{
width: 100vw;
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home h1{
font-family: poppins;
font-size: 2.5vw;
margin-bottom: 3.5vh;
}
.home img{
scale: 0.8;
animation: dance 2s infinite alternate-reverse;
transition: 0.5s ease-in-out;
}
@keyframes dance{
0%{
rotate: 20deg;
}
50%{
rotate: 0deg;
}
100%{
rotate: -20deg;
}
}
.projects{
width: 100vw;
height: 100vh;
}
.top{
height: 50vh;
width: 100vw;
font-family: poppins;
color: black;
font-size: 3.5vw;
display: flex;
align-items: center;
justify-content: center;
font-weight: 1000;
}
.bottom{
width: 100vw;
height: 50vh;
display: flex;
}
.bottom > div{
width: 50vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 3vw;
font-family: poppins;
transition: 0.5s ease-in-out;
}
.bottom > div > a{
color: black;
}
.bottom > div:hover{
background-color: darkgray;
color: white;
}
.bottom > div:hover > a{
color: white;
}
.about,.new{
width: 100vw;
height: 100vh;
}
.above{
width: 100vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5vw;
font-family: poppins;
font-weight: 1000;
}
.content{
width: 80vw;
height: 50vh;
font-family: poppins;
font-size: 2.2vw;
text-align: center;
margin-left: 10vw;
}
.log{
width: 100vw;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
font-family: poppins;
background-color: black;
font-size: 3vw;
color: white;
text-align: center;
}
</style>
</head>
<body>
<ul class="navbar">
<li class="list-item"><a href="#home">Script Robot Studios</a></li>
<div class="nav-sec">
<li class="list-item"><a href="https://script-robot.tiiny.co/blog/startingUp.html">Blog</a></li>
<li class="list-item"><a href="#projects">Projects</a> </li>
</div>
</ul>
<div class="home" id="home">
<h1>Welcome to Script Robot studios</h1>
<img src="https://script-robot.tiiny.co/images/Script%20Robot%20Logo.png" alt="" srcset="">
</div>
<div class="projects" id="projects">
<div class="top">Our Showcase</div>
<div class="bottom">
<div class="sec1"><a href="https://doorsimulator.tiiny.site/">Door simulator</a></div>
<div class="sec2"><a href="https://script-robot.tiiny.co/projects/loadingGame.html">Loading Game</a></div>
</div>
</div>
<div class="about" id="about">
<div class="above">About</div>
<div class="content">Script Robot Sudios is dedicated to making
free to use websites such as games or fun tools. We strive to make an enjoyable and user friendly experience, and we won't collect any user information without your consent.</div>
</div>
<div class="new" id="new">
<div class="above">How can I help ?</div>
<div class="content"> If you enjoy our stuff, maybe share it with a friend. We're pretty new here on the internet, so just taking some time out of your day to veiw our content means a lot to us.</div>
</div>
<div class="log">
<div>
<div><span class="highlight">What's New:</span><span> @mince updated the website</span></div>
<div>Contact: Contact us at scriptrobotstudios@gmail.com</div>
<div><a href="https://script-robot.tiiny.co/support/privacy.html">Privacy</a></div>
</div>
</div>
</body>
</html>
