added header to page

Marek128b · Apr 6, 2024 · 29b5a70 · 29b5a70
1 parent 3cd61fe
commit 29b5a70
Show file tree

Hide file tree

Showing 5 changed files with 274 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "buymeacoffee",
+        "navlink"
+    ]
+}
diff --git a/site/documentation.html b/site/documentation.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="logo.svg" type="image/x-icon">
+    <title>BQ76942 Documentation</title>
+</head>
+
+<body>
+    <header>
+        <a href="/site/">
+            <h1>BQ76942</h1>
+        </a>
+
+        <nav>
+            <ul class="navlink">
+                <li><a href="/site/documentation.html">Documentation</a></li>
+                <li><a href="/site/">Documentation</a></li>
+                <li><a href="/site/">About</a></li>
+            </ul>
+        </nav>
+    </header>
+</body>
+
+</html>
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="logo.svg" type="image/x-icon">
+    <title>BQ76942 Webpage</title>
+</head>
+
+<body>
+    <header>
+        <a href="/site/">
+            <h1>BQ76942</h1>
+        </a>
+
+        <nav>
+            <ul class="navlink">
+                <li><a href="/site/documentation.html">Documentation</a></li>
+                <li><a href="/site/">Documentation</a></li>
+                <li><a href="/site/">About</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main id="main">
+        <h1>Documentation Webpage for the BQ76942 chip project</h1>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit augue sit amet dapibus
+            pellentesque. Curabitur dictum varius placerat. Nullam sagittis suscipit dolor, nec lacinia dolor faucibus
+            a.
+            Duis eu porttitor enim. In hac habitasse platea dictumst. Proin ac consectetur nunc. Donec rhoncus tempor
+            quam.
+
+            Praesent eu lorem nisl. Aliquam erat volutpat. Vestibulum maximus, nisl id euismod tincidunt, nibh dui
+            faucibus
+            nisi, vel commodo nunc turpis at erat. Donec ornare nisl lectus, fermentum porttitor felis finibus vel.
+            Etiam
+            non dui dapibus, lobortis mi nec, faucibus dui. Proin dictum molestie dui a venenatis. Morbi eu auctor
+            tortor,
+            efficitur convallis odio. Pellentesque sodales turpis eros, eget fermentum libero facilisis id. In eget erat
+            luctus, imperdiet nunc congue, bibendum libero. Duis aliquam enim dolor, in ornare ex luctus in.
+
+            Nulla placerat semper quam in interdum. Donec hendrerit, ante non sollicitudin sodales, enim nisl tincidunt
+            metus, eleifend eleifend lorem ligula sed nulla. Nam ac dolor sed ipsum mattis eleifend sed quis dui. Morbi
+            pharetra, nisi eget lacinia consectetur, quam metus molestie dui, non malesuada massa metus et dolor.
+            Interdum
+            et malesuada fames ac ante ipsum primis in faucibus. Aenean id nisi fermentum, tempus ex eu, convallis quam.
+            Proin in pretium quam. Nunc bibendum massa nisl, ut sodales neque condimentum non.
+
+            Nam porttitor bibendum dignissim. Ut non arcu et tellus elementum elementum. Fusce dignissim pretium quam
+            sit
+            amet feugiat. Mauris accumsan dui eget tellus tincidunt, et auctor urna tincidunt. Etiam consequat lectus
+            quis
+            elementum vestibulum. Nam tristique vulputate arcu aliquam consequat. Praesent imperdiet quam in dolor
+            laoreet
+            tincidunt. Curabitur sem diam, ullamcorper in odio vel, gravida posuere turpis. Phasellus in volutpat mi.
+            Donec
+            sit amet feugiat ex.
+
+            Quisque sodales a nibh ut cursus. Sed ultricies nunc id mi pharetra, ac aliquam purus maximus. Aliquam erat
+            volutpat. Etiam sed quam tristique, convallis mi accumsan, auctor tellus. Aenean mollis tempor quam non
+            congue.
+            Maecenas vel porta lectus. Praesent tempus maximus velit, a accumsan tortor commodo vehicula. Aliquam enim
+            neque, mollis et lorem non, cursus egestas eros. Vivamus faucibus lorem eu dui faucibus dapibus. Cras
+            congue,
+            libero non placerat posuere, quam justo finibus urna, ac luctus leo odio ut nunc. Pellentesque commodo
+            bibendum
+            justo. Phasellus ac ligula ut neque rhoncus dictum ut eu nisi. Sed congue magna nisi, at condimentum velit
+            mollis a.
+
+            Vestibulum porta facilisis erat, sed volutpat lectus ullamcorper non. Sed arcu nisi, tempor vitae luctus ut,
+            dignissim eu ligula. Phasellus rutrum, leo non ornare consequat, dolor neque laoreet risus, vitae fringilla
+            sem
+            lectus quis est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ultrices, mi et faucibus
+            interdum, sapien enim rutrum velit, at ultricies justo lorem sit amet nibh. Suspendisse hendrerit velit vel
+            dapibus sodales. Donec rutrum turpis quis facilisis convallis. Vivamus a varius erat.
+
+            Praesent commodo, ipsum sit amet consectetur dignissim, orci nibh eleifend felis, non porttitor nulla ante
+            sit
+            amet velit. Nulla sit amet hendrerit nunc. Nunc lobortis volutpat tincidunt. Fusce maximus felis enim. Sed
+            malesuada fringilla nulla, in pharetra ante auctor a. In ac ornare nunc. Maecenas odio urna.
+        </p>
+
+        <div class="center" id="buymeacoffee">
+            <p><a href="https://www.buymeacoffee.com/marek128b" target="_blank"><img
+                        src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee"
+                        style="height: 41px !important;width: 174px !important" /></a>
+            </p>
+        </div>
+    </main>
+</body>
+
+</html>
diff --git a/site/logo.svg b/site/logo.svg
diff --git a/site/style.css b/site/style.css
@@ -0,0 +1,78 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    background: rgb(32, 32, 38);
+    color: #f7f7f7;
+}
+
+/*header*/
+header,
+li,
+a {
+    color: #f7f7f7;
+    text-decoration: none;
+}
+
+header h1 {
+    padding-left: 5%;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, Courier, monospace;
+}
+
+.navlink {
+    list-style: none;
+}
+
+.navlink li {
+    display: inline-block;
+    padding: 0px 20px;
+}
+
+.navlink li a {
+    font-size: larger;
+    transition: all 0.5s ease 0s;
+}
+
+.navlink li a:hover {
+    background-color: aqua;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 5%;
+}
+
+/*main*/
+#main {
+    margin: auto;
+    max-width: 80vw;
+}
+
+#main p {
+    max-width: 50vw;
+    margin: auto;
+    font-size: 21px;
+    line-height: 32px;
+    color: rgba(255, 255, 255, 0.808);
+    padding-top: 28px;
+    margin-bottom: 0;
+    position: relative;
+}
+
+/*text*/
+h1 {
+    padding-top: 1rem;
+    text-align: center;
+}
+
+#buymeacoffee {
+    margin: 1.5rem;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}