[go: up one dir, main page]
Scribd
Upload
15 views14 pages

Htmlbasiccodeforxstoragewebsite

This document is about a basic html template for a private site X Storage combined with CSS, JS and node,js

Uploaded by

arindam.lko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views14 pages

Htmlbasiccodeforxstoragewebsite

This document is about a basic html template for a private site X Storage combined with CSS, JS and node,js

Uploaded by

arindam.lko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 14

<!

doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">


<meta name="author" content="">

<title>XStorage - Main official site</title>

<!-- CSS FILES -->


<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=Montserrat:wght@500;600;700&family=Open+Sans&display=swap" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/bootstrap-icons.css" rel="stylesheet">

<link href="css/templatemo-topic-listing.css" rel="stylesheet">

</head>
<style>
@keyframes pulse {
0% {
background: radial-gradient(circle at center, #ff004f 0%, #190013 80%);
}

50% {
background: radial-gradient(circle at center, #ff007f 0%, #1a0015 80%);
}

100% {
background: radial-gradient(circle at center, #ff004f 0%, #190013 80%);
}
}

.hero-section {
animation: pulse 10s infinite;
background: radial-gradient(circle at center, #ff004f 0%, #190013 80%);
background-size: cover;
background-attachment: fixed;
color: white;
position: relative;
z-index: 1;
padding-bottom: 0px;
}

.hero-section .container {

z-index: 2;
}

.section {
animation: pulse 10s infinite;
background: radial-gradient(circle at center, #ff004f 0%, #190013 80%);
color: white;
}

.featured-section {
margin: 0;
padding: 0;
min-height: 100vh;
background: radial-gradient(circle at center, #ff004f 0%, #190013 80%);
background-size: 400% 400%;
animation: pulse 10s ease infinite;
color: #ffffff;
font-family: var(--body-font-family);
}

.d-flex {
background-color: rgba(25, 0, 20, 0.8);
border: 1px solid #ff004f;
color: #ffffff;

.floating-box {
background-color: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 20px rgba(255, 0, 79, 0.4);
font-family: 'Segoe UI', sans-serif;
max-width: 400px;
margin: 20px auto;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.tab-content {
background-color: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff;
padding: 0px;
border-radius: 12px;
box-shadow: 0 0 20px rgba(255, 0, 79, 0.4);
font-family: 'Segoe UI', sans-serif;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);

</style>

<body id="top">

<main>

<nav class="navbar navbar-expand-lg">


<div class="container">
<a class="navbar-brand" href="index.html">
<i class="bi-back"></i>
<span class="glow-text ">XStorage</span>
</a>

<div class="d-lg-none ms-auto me-4">


<a href="#top" class="navbar-icon bi-person
smoothscroll"></a>
</div>

<button class="navbar-toggler" type="button" data-bs-


toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">


<ul class="navbar-nav ms-lg-5 me-lg-auto">
<li class="nav-item">
<a class="nav-link click-scroll"
href="#section_1">Home</a>
</li>

<li class="nav-item">
<a class="nav-link click-scroll"
href="#section_2"></a>
</li>

<li class="nav-item">
<a class="nav-link click-scroll"
href="#section_3">Contribute</a>
</li>

<li class="nav-item">
<a class="nav-link" href="topics-detail.html"
id="ourteam">Our Team</a>
</li>

<li class="nav-item">
<a class="nav-link click-scroll"
href="#section_5">Support</a>
</li>

</ul>

<div class="d-none d-lg-block">


<a href="#top" class="navbar-icon bi-person
smoothscroll"></a>
</div>
</div>
</div>
</nav>

<section class="hero-section d-flex justify-content-center align-items-


center" id="section_1">
<div class="container">
<div class="row">
<div class="col-lg-8 col-12 mx-auto">
<h1 class="text-white text-center">Learn. Code.
Save</h1>

<h6 class="text-center">a all in one site for schoool


students</h6>

<form method="get" class="custom-form mt-4 pt-2 mb-lg-0


mb-5" role="search">
<div class="input-group input-group-lg">
<span class="input-group-text bi-search"
id="basic-addon1">

</span>

<input name="keyword" type="search"


class="form-control" id="keyword" placeholder="Login, Save, News, More ..." aria-
label="Search">

<button type="submit" class="form-


control">Search</button>
</div>
</form>
</div>

</div>
</div>
</section>

<section>
<div class="container">
<br>
<br>
<br>
<div class="row justify-content-center">

<div class="col-lg-4 col-12 mb-4 mb-lg-0">


<div class="floating-box">
<a href="topics-detail.html">

<div>
<h5 class="glow-text" >Why this site?
</h5>

<p class="mb-0">It often becomes hard


to save your code when you are in school. This site is a go to fix for this issue
and much more!</p>
<img src="cloudstoragw.png" alt="Online
Storage Icon" width="256" height="256" style="filter: drop-shadow(0 0 5px
#ff007f);">

</div>

<span class="badge bg-design rounded-pill


ms-auto"></span>
</a>
</div>
</div>

<div class="col-lg-6 col-12">


<div class="floating-box">
<div class="d-flex flex-column h-100">
<img src="images/businesswoman-using-tablet-
analysis.jpg" class="custom-block-image img-fluid" alt="">

<div class="custom-block-overlay-text d-flex">


<div>

<h5 class="glow-text">How to
begin?</h5>

<p class="text-white">Just click the


button below and sign in to begin storing!. Or scroll down and access the main menu
for the complete website. Or if you are feeling ultra lazy, just use the menu from
the top!

</p>
<img src="login.png" alt="Login Icon"
width="256" height="200" style="filter: drop-shadow(0 0 5px #ff007f);">
<a href="topics-detail.html" class="btn
custom-btn mt-2 mt-lg-3">Get Started</a>

</div>

<span class="badge bg-finance rounded-pill


ms-auto"></span>
</div>

<div class="section-overlay"></div>
</div>
</div>
</div>

</div>
</div>
</section>

<br>
<br>

<section class="explore-section section-padding" id="section_2">


<div class="container">
<div class="row">

<div class="col-12 text-center">


<h2 class="glow-text">Main menu</h1>
</div>

</div>
</div>

<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="design-tab"
data-bs-toggle="tab" data-bs-target="#design-tab-pane" type="button" role="tab"
aria-controls="design-tab-pane" aria-selected="true">Join Us</button>
</li>

<li class="nav-item" role="presentation">


<button class="nav-link" id="marketing-tab" data-
bs-toggle="tab" data-bs-target="#marketing-tab-pane" type="button" role="tab" aria-
controls="marketing-tab-pane" aria-selected="false">Services</button>
</li>

<li class="nav-item" role="presentation">


<button class="nav-link" id="finance-tab" data-bs-
toggle="tab" data-bs-target="#finance-tab-pane" type="button" role="tab" aria-
controls="finance-tab-pane" aria-selected="false">Connect</button>
</li>

</ul>
</div>
</div>

<div class="container">

<div class="col-12">
<div class="tab-content" id="myTabContent">

<div class="tab-pane fade show active " id="design-


tab-pane" role="tabpanel" aria-labelledby="design-tab" tabindex="0">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 mb-4
mb-lg-0">
<div class="floating-box ">
<a href="login.html">
<div class="">
<div>
<h5 class="glow-
text">Log In</h5>

<p class="mb-0">In
order to use our servics, you must log in to your account.</p>
</div>

<span class="badge bg-


design rounded-pill ms-auto"></span>
</div>

<img src="loginfirst.png"
position: center; alt="log in" width="124" height="124" style="filter: drop-
shadow(0 0 5px #ff007f);">>
</a>
</div>
</div>

<div class="col-lg-4 col-md-6 col-12 mb-4


mb-lg-0">
<div class="floating-box">
<a href="login.html">
<div class="">
<div>
<h5 class="glow-
text">Sign Up</h5>

<p class="mb-0">If
you haven't created an account yet, then sadly you do need an accoun to use our
services. Click here!</p>
</div>

<span class="badge bg-


design rounded-pill ms-auto"></span>
</div>

<img src="login.png"
class="custom-block-image img-fluid" alt="">
</a>
</div>
</div>

<div class="col-lg-4 col-md-6 col-12">


<div class="floating-box">
<a href="topics-detail.html">
<div class="">
<div>
<h5 class="glow-
text">Help and Support </h5>

<p class="mb-
0">Feeling confused or can't find what you came for? Click here!!</p>
</div>

<span class="badge bg-


design rounded-pill ms-auto">100</span>
</div>

<img
src="images/topics/colleagues-working-cozy-office-medium-shot.png" class="custom-
block-image img-fluid" alt="">
</a>
</div>
</div>
</div>
</div>

<div class="tab-pane fade" id="marketing-tab-pane"


role="tabpanel" aria-labelledby="marketing-tab" tabindex="0">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 mb-4
mb-lg-3">
<div class="floating-box">
<div>
<a href="topics-detail.html">
<div>
<div>
<h5 class="glow-
text">Store Your Code</h5>

<p class="mb-0">If
you already have an account and wish to store your code, Well click here!</p>
</div>

<span class="badge bg-


advertising rounded-pill ms-auto"></span>
</div>

<img
src="images/topics/undraw_online_ad_re_ol62.png" class="custom-block-image img-
fluid" alt="">
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12
mb-4 mb-lg-3">
<div class="floating-box">
<a href="topics-detail.html">
<div class=>
<div>
<h5 class="glow-
text">View news and updates</h5>

<p class="mb-0">See
the current news and updates which we provide on schools and education!</p>
</div>

<span class="badge bg-


advertising rounded-pill ms-auto"></span>
</div>

<img src="news_icon.png"
alt="news Icon" width="256" height="200" style="filter: drop-shadow(0 0 5px
#ff007f);">
</a>
</div>
</div>

<div class="col-lg-4 col-md-6 col-12">


<div class="floating-box">
<a href="topics-detail.html">
<div class="">
<div>
<h5 class="glow-
text">See Public Files</h5>

<p class="mb-
0">View or see files stored by the community. These files are NOT filtered and MAY
contain misleading information</p>
</div>
<span class="badge bg-
advertising rounded-pill ms-auto"></span>
</div>

<img
src="images/topics/undraw_viral_tweet_gndb.png" class="custom-block-image img-
fluid" alt="">
</a>
</div>
</div>
</div>
</div>

<div class="tab-pane fade" id="finance-tab-pane"


role="tabpanel" aria-labelledby="finance-tab" tabindex="0"> <div class="row">
<div class="col-lg-6 col-md-6 col-12 mb-4
mb-lg-0">
<div class="floating-box">
<a href="topics-detail.html">
<div class="">
<div>
<h5 class="mb-2">Join
our discord</h5>

<p class="mb-0">Talk,
chat and have fun with other people on our discord!</p>
</div>

<span class="badge bg-


finance rounded-pill ms-auto"></span>
</div>

<img src="discord_icon.png"
alt="news Icon" width="256" height="200" style="filter: drop-shadow(0 0 5px
#ff007f);">
</a>
</div>
</div>

<div class="col-lg-6 col-md-6 col-12">


<div class="floating-box">
<div>
<img src="images/businesswoman-
using-tablet-analysis-graph-company-finance-strategy-statistics-success-concept-
planning-future-office-room.jpg" class="custom-block-image img-fluid" alt="">

<div class="custom-block-
overlay-text d-flex">
<div>
<h5 class="text-white
mb-2"></h5>

<p class="text-
white">Note: Our discord may not work at this point so don't be suprised if the
discord link leads to Error 404!</p>

<a href="topics-
detail.html" class="btn custom-btn mt-2 mt-lg-3">Learn More</a>
</div>
<span class="badge bg-
finance rounded-pill ms-auto"></span>
</div>

<div class="section-
overlay"></div>
</div>
</div>
</div>
</div>

<div class="tab-pane fade" id="music-tab-pane"


role="tabpanel" aria-labelledby="music-tab" tabindex="0">
<div class="row">

<div class="col-lg-6 col-md-6 col-12">


<div class="custom-block bg-white
shadow-lg">
<a href="topics-detail.html">
<div class="d-flex">
<div>
<h5 class="mb-2">Join
our team</h5>

<p class="mb-0">We sure


do need a lot of manforce for managing SUCH a large website!</p>
</div>

<span class="badge bg-


education rounded-pill ms-auto">75</span>
</div>

<img
src="images/topics/undraw_Educator_re_ju47.png" class="custom-block-image img-
fluid" alt="">
</a>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</section>

<br>
<br>
<br>

<div class="container">
<div class="row">
<div class="col-12 text-center">
<h2 class="text-white mb-4">How do store your
code?</h1>
</div>

<div class="col-lg-10 col-12 mx-auto">


<div class="timeline-container">
<ul class="vertical-scrollable-timeline"
id="vertical-scrollable-timeline">
<div class="list-progress">
<div class="inner"></div>
</div>

<li>
<h4 class="text-white mb-3">Log In or Sign
Up</h4>

<p class="text-white">For secuity purposs,


you need to log in to use our free services. This is done so to avoid any malicious
editing to your code by other users </p>

<div class="icon-holder">
<i class="bi-search"></i>
</div>
</li>

<li>
<h4 class="text-white mb-3">Write your code
or text</h4>

<p class="text-white">Go to our main editor


and write what you want to save</p>

<div class="icon-holder">
<i class="bi-bookmark"></i>
</div>
</li>

<li>
<h4 class="text-white mb-3">Click Submit
and Enjoy!</h4>

<p class="text-white">Once all of that is


done, fill in some last details and click submit and BAM!. Your code is available
online</p>
<div class="icon-holder">
<i class="bi-book"></i>
</div>
</li>
</ul>
</div>
</div>

<div class="col-12 text-center mt-5">


<p class="text-white">

</p>
</div>
</div>
</div>
</section>

<section class="faq-section section-padding" id="section_4">


<div class="container">
<div class="row">

</div>
</div>
</section>

<section class="contact-section section-padding section-bg"


id="section_5">
<div class="container">
<div class="row">

<div class="col-lg-12 col-12 text-center">


<h2 class="mb-5">Contact Us</h2>
</div>

<div class="col-lg-5 col-12 mb-4 mb-lg-0">


<iframe class="google-map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2595.065641062665!2d-
122.4230416990949!3d37.80335401520422!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!
1m2!1s0x80858127459fabad%3A0x808ba520e5e9edb7!2sFrancisco%20Park!5e1!3m2!1sen!2sth!
4v1684340239744!5m2!1sen!2sth" width="100%" height="250" style="border:0;"
allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

<div class="col-lg-3 col-md-6 col-12 mb-3 mb-lg- mb-md-0


ms-auto">
<h4 class="mb-3">Main Place</h4>

<p>Sorry! We don't have a offline place yet!</p>

<hr>

<p class="d-flex align-items-center mb-1">


<span class="me-2">Phone</span>

<a href="tel: 305-240-9671" class="site-footer-


link">
We are not accepting phone calls YET
</a>
</p>

<p class="d-flex align-items-center">


<span class="me-2">Email</span>

<a href="mailto:info@company.com" class="site-


footer-link">
XFoundation_XStorage@gmail.com
</a>
</p>
</div>

<div class="col-lg-3 col-md-6 col-12 mx-auto">


<h4 class="mb-3">X Foundation Limited</h4>

<p>A leading company in education since 2020</p>

<hr>

<p class="d-flex align-items-center mb-1">


<span class="me-2">Phone</span>

<a href="tel: 110-220-3400" class="site-footer-


link">
We do not accept phone calls YET
</a>
</p>

<p class="d-flex align-items-center">


<span class="me-2">Email</span>

<a href="mailto:info@company.com" class="site-


footer-link">
XFoundation_Official@gmail.com
</a>
</p>
</div>

</div>
</div>
</section>
</main>

<footer class="site-footer section-padding">


<div class="container">
<div class="row">

<div class="col-lg-3 col-12 mb-4 pb-2">


<a class="navbar-brand mb-2" href="index.html">
<i class="bi-back"></i>
<span>X Foundation <sup>TM </sup></span>
</a>
</div>

<div class="col-lg-3 col-md-4 col-6">


<h6 class="site-footer-title mb-3">Quick Links</h6>

<ul class="site-footer-links">
<li class="site-footer-link-item">
<a href="#" class="site-footer-link">Back To
Top</a>
</li>

<li class="site-footer-link-item">
<a href="#" class="site-footer-link"></a>
</li>
</li>
</ul>
</div>

<div class="col-lg-3 col-md-4 col-6 mb-4 mb-lg-0">


<h6 class="site-footer-title mb-3">Information</h6>

<p class="text-white d-flex mb-1">


<a href="tel: 305-240-9671" class="site-footer-link">
We only accept emails till now. Sorry !
</a>
</p>

<p class="text-white d-flex">


<a href="mailto:info@company.com" class="site-footer-
link">
XFoundation_Official@gmail.com OR <br>
XFoundation_XStorage@gmail.com
</a>
</p>
</div>

<p class="copyright-text mt-lg-5 mt-4">Copyright © 2025 X


Foundation<sup>TM</sup> All rights reserved.
<br><br>Design: <a rel="nofollow"
href="https://templatemo.com" target="_blank">See contributers</a></p>

</div>

</div>
</div>
</footer>

<!-- JAVASCRIPT FILES -->


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/click-scroll.js"></script>
<script src="js/custom.js"></script>
<script src="loading.js"></script>

</body>
</html>

You might also like