Skip to content

Commit

Permalink
new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@zapobyte
zapobyte committed Nov 26, 2023
1 parent 305f898 commit b3adfea
Show file tree
Hide file tree
Showing 13 changed files with 154 additions and 188 deletions.
135 changes: 131 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,140 @@
<meta name="author" content="Byte Forge Software">
<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=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
</head>
<body>

<div id="tsparticles" class="tsparticles"></div>
<div id="app" class="vh-100">
<div id="app">
<header class="position-sticky top-0">
<nav class="navbar navbar-expand-lg bg-dark text-light">
<div class="container-fluid">
<a class="navbar-brand text-white d-inline-flex align-items-center" href="#">
<span>ByteForgeSoftware</span>
</a>
<button class="navbar-toggler border-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="my-4 my-md-0 mb-lg-0 w-100 text-end text-light">
<li class="text-white d-inline-flex mx-3">
<a href="#aboutus" class="nav-link text-white align-items-center d-flex">
About us
</a>
</li>
<li class="text-white d-inline-flex mx-3">
<a href="#wwd" class="nav-link text-white align-items-center d-flex">
What we do
</a>
</li>
</ul>
<ul class="my-4 my-md-0 mb-lg-0 w-100 text-end text-light">
<li class="text-white d-inline-flex mx-3">
<a href="#" class="nav-link text-white align-items-center d-flex">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li class="text-white d-inline-flex mx-3">
<a href="mailto:byte.forge.software@gmail.com" class="nav-link text-white align-items-center d-flex">
<i class="fa-regular fa-envelope me-1"></i>
</a>
</li>
<li class="text-white d-inline-flex ms-3 me-1">
<a href="https://github.com/ByteForgeSoftware" class="nav-link text-white align-items-center d-flex">
<i class="fa-brands fa-github"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>

</header>
<main class="container">
<div class="first-page align-items-center row py-4 vh-100">
<div class="col-12">
<div class="wrapper text-white">
<span>Forging the Future of </span>
<div class="stack" style="--stacks: 3;">
<span style="--index: 0;">Software</span>
<span style="--index: 1;">Software</span>
<span style="--index: 2;">Software</span>
</div>
<p class="text-end w-100">Excellence!</p>
</div>
</div>
</div>
<div class="row align-items-center vh-100 py-4 justify-content-center" id="aboutus">
<div class="col-md-6 col-12 text-white align-items-center justify-content-center">
<h1 class="text-white pb-4">About Us</h1>
<p>Step into the digital forge of innovation at ByteForge Software, where we seamlessly meld creativity and code to craft bespoke software experiences. Like skilled blacksmiths of the digital realm, our team forges powerful solutions that stand the test of the online fires. From the sparks of idea to the tempered reality of a flawless product, ByteForge Software hammers out excellence in every line of code. Whether you need a robust web application or an elegant website, we specialize in the art of software craftsmanship. </p>
</div>
<div class="col-md-6 col-12">
<img class="img-fluid" src="/aboutus.svg" />
</div>
</div>
<div class="row w-100 vh-100 align-items-center g-4" id="wwd">
<div class="col-12 col-md-6">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner p-1">
<div class="carousel-item">
<img src="/research.svg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item active">
<img src="/design.svg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/programming.svg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/support.svg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<h1 class="text-white pb-4">What we do</h1>
<div class="list-group w-100 bg-transparent border-0">
<h3 class="list-group-item list-group-item-action active bg-transparent border-0" aria-current="true">
Research
</h3>
<h3 class="list-group-item list-group-item-action bg-transparent border-0 text-white">Prototype</h3>
<h3 class="list-group-item list-group-item-action bg-transparent border-0 text-white">Development</h3>
<h3 class="list-group-item list-group-item-action bg-transparent border-0 text-white">Support</h3>
</div>
</div>
</div>
</main>
<footer class="container py-4 ">
<div class="row align-items-center py-4 w-100" >
<div class="col-12 col-md-4">
<p><a href="/" class="text-white">ByteForgeSoftware</a></p>
<p class="m-0"><small class="text-white"> code with &#x2665; <span id="footerdate"></span></small></p>
</div>
<div class="col-12 col-md-4 text-center">
<ul class="list-group">
<li class="text-uppercase list-group-item bg-transparent border-0">
<a href="https://github.com/ByteForgeSoftware" class=" bg-darktext-white">
LINKEDIN
</a>
</li>
<li class="text-uppercase list-group-item bg-transparent border-0">
<a href="https://github.com/ByteForgeSoftware" class="text-white">
Github
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-4 text-end">
<p class=" text-white">UK, Bristol</p>
<p class=" text-white">
<a href="mailto:byte.forge.software@gmail.com" class="nav-link text-white">
<i class="fa-regular fa-envelope me-1 text-white"></i> byte.forge.software@gmail.com
</a>
</p>
</div>
</div>
</footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-triangles@2/tsparticles.preset.triangles.bundle.min.js"></script>
Expand Down
40 changes: 7 additions & 33 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"vite": "^4.3.9"
},
"dependencies": {
"bootstrap": "^5.3.0",
"tsparticles-engine": "^2.10.1"
"bootstrap": "^5.3.0"
}
}
Loading

0 comments on commit b3adfea

Please sign in to comment.