Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirak-oracle
mirak-oracle authored Dec 28, 2023
0 parents commit 6ceb071
Show file tree
Hide file tree
Showing 3 changed files with 346 additions and 0 deletions.
201 changes: 201 additions & 0 deletions celestial.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
*{
margin: 0;
padding: 0;
}

/* first section */

.header{
min-height: 100vh;
width: 100%;
background: url(images/sunset\ dish.JPG);
background-position: center;
background-size: cover;
background-attachment: fixed;
}

.text_box{
width: 90%;
color: black;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text_box h1{
font-size: 50px;
}
.text_box p{
margin: 10px 0 40px;
font-size: 19px;
color: black;
}

/* second section */


.modems_pricing{
text-align: center;
font-size: 20px;
padding: 20px;
background: #f2f2f2;
}
.row{
display: flex;
gap: 10px;
}
.container{
background-color: #f9fafb;
height: 350px;
width: 300px;
margin-top: 20px;
border-radius: 10px;
padding: 20px;
}
hr{
background-color: black;
}
.container ul li{
list-style: none;
margin: 12px 0;
text-align: left;
}
.container h2{
margin-bottom: 10px;
}

.container button{
background-color: #101010;
width: 80%;
height: 40px;
text-decoration: none;
font-weight: bold;
color: white;
font-size: 16px;
margin: 18px 0;
cursor: pointer;
border-radius: 50px;
}
.container button:hover{
text-decoration: underline;
}
.container button:active{
opacity: .8;
}
.container p{
color: #777;
margin: 15px 0;
font-size: 15px;
font-weight: bold;
}

/* third section */


.about_us{
background: #f2f2f2;
text-align: center;
padding: 20px;
margin: 30px 0;
}
.about_us h1{
text-align: center;
padding: 20px;
font-size: 45px;
}
.about_celestial h2{
font-size: 25px;
}
.about_celestial p{
text-align: center;
font-size: 17px;
margin: 10px 0;
}
.vision h2{
font-size: 25px;
}
.vision p{
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.vanguard p{
text-align: center;
font-size: 17px;
margin: 10px 0;
}


/* footer section */

.footer{
width: 100%;
text-align: center;
padding: 30px 0;
}
.footer h4{
font-size: 23px;
margin: 15px 0;
}
.footer .pizza p{
color: black;
font-size: 20px;
}
.footer .follow{
margin-top: 20px;
}
.footer .follow ul li{
display: inline;
}
.footer .follow ul li a{
font-size: 18px;
color: black;
text-decoration: none;
margin-right: 20px;
}
.footer .pizza p a{
margin-top: 10px;
text-decoration: none;
}
.footer .pizza p a:hover{
color: #777;
text-decoration: underline;
}
.footer .pizza p a:active{
opacity: .8;
}
.footer .follow ul li a:hover{
color: #777;
}
.copy{
margin-top: 13px;
font-size: 17px;
}


/* Responsiveness */

@media(max-width:700px) {
.row{
display: block;
margin: 10px 60px;
}
.container{
width: 100%;
}
.superb{
padding: 20px;
}
.pizza{
padding: 15px;
}
.copy{
padding: 10px;
}
}





145 changes: 145 additions & 0 deletions celestial.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CelestiaLink</title>
<link rel="stylesheet" href="celestial.css">
<script src="celestial.js"></script>

</head>
<body>

<!--first section-->

<section class="header">
<div class="text_box">
<h1>CELESTIALINK</h1>
<P>CelestiaLink is your partner in acheiving connectivity excellence. This is where connection <br> meets innovation, and the future unfolds seamlessly.</P>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const mbpsDisplay = document.getElementById('mbpsDisplay');

// Function to update WiFi Mbps
function updateMbps() {
// Simulate a random increase/decrease in Mbps
const currentMbps = parseFloat(mbpsDisplay.textContent) || 4;
const newMbps = currentMbps + (Math.random() * 5 - 2); // Random change between +70 and -5
mbpsDisplay.textContent = newMbps.toFixed(2);
}
// Update every second
setInterval(updateMbps, 1000);

// Initial update
updateMbps();
});
</script>


</section>


<!--second section-->

<div class="modems_pricing">
<h1>Modems and Pricing</h1>

<div class="row">
<div class="container">
<h2>Celestial Connect</h2>
<hr>
<ul>
<li>Fast data.</li>
<li>Can connect up to 10-15 users.</li>
</ul>
<button>36,000 Naira</button>
<p>Stay connected seamlessly with Celestial Connect. Enjoy reliable fast data transfer with our basic module.</p>
</div>

<div class="container">
<h2>Celestial Guardian</h2>
<hr>
<ul>
<li>Advanced Protocols.</li>
<li>Access to worry-free online experience.</li>
</ul>
<button>42,000 Naira</button>
<p>Ensure your online safety with Celestial Guardian This module offers online safe and worry free data.</p>
</div>

<div class="container">
<h2>Celestial Boost</h2>
<hr>
<ul>
<li>High speed data transfer.</li>
<li>Priority network.</li>
</ul>
<button>50,000 Naira</button>
<p>Supercharge your connectivity with faster internet speed and improved performance.</p>
</div>

<div class="container">
<h2>Celestial Unlimited</h2>
<hr>
<ul>
<li>Unlimited data usage.</li>
<li>Unlimited users.</li>
<li>Faster internet speed and performance.</li>
</ul>
<button>60,500 Naira</button>
<p>Unleash limitless possibilities with Celestial Unlimited. Enjoy unrestricted access to data.</p>
</div>
</div>

</div>


<!--Third section-->

<div class="about_us">
<h1>About Us</h1>

<div class="superb">
<div class="about_celestial">
<h2>About CelestiaLink</h2>
<p>Welcome to CelestiaLink, where connectivitytranscends boundries and innovation takes flight.At CelestiaLink, we are dedicated to <br> ushering in a new era of seamless communication, ensuring that individuals and businesses <br> stay effortlessly connected to the world.</p>
</div>

<div class="vision">
<h2>Our Vision</h2>
<p>CelestiaLinkenvisions a future where connectivity is not just a service but an experience that empowers, inspires <br> and transforms lives. We strive to be at the forefront of technological evolution, providing cutting-edge solutions that redefine <br> the way we connect, communicate and collaborate.</p>

<div class="vanguard">
<p>CelestiaLink is proudly powered by TechVanguard and WebWise, a subsidiary of Mirak Oracle. As part of the esteemed <br> Mirakle Group, along TechVanguard, we draw on a rich legacy of expertise and innovation to deliver solutions that exceed expectations.</p>
</div>
</div>
</div>
</div>

<!--Last section-->

<section class="footer">
<h4>Contact Us</h4>
<div class="pizza">
<p>If you are looking to enhance your connectivity capabilities, we're here to help. Reach out to us at <br> <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="follow">
<ul>
<li><a href="https://www.facebook.com/miraklegroup">Facebook</a></li>
<li><a href="https://www.instagram.com/mirakle.group">Instagram</a></li>
<li><a href="https://twitter.com/mirakle_group">Twitter</a></li>
</ul>
</div>

<div class="copy">
<p><span>&copy;</span> CelestiaLink. All rights reserved. Powered by WebWise, a proud subsidiary of Mirak Oracle, and a proud member of the Mirakle Group, along with TechVanguard.</p>
</div>
</section>





</body>
</html>
Empty file added celestial.js
Empty file.

0 comments on commit 6ceb071

Please sign in to comment.