update: buttons creations and put a background

This commit is contained in:
dorian melenotte 2024-08-04 16:58:07 +02:00
parent 7a1c302d5a
commit 76ec198868
4 changed files with 49 additions and 15 deletions

View File

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/assets/img_site.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 882 KiB

View File

@ -1,3 +1,18 @@
import chat from ".././assets/chat.jpg";
function Button(argv, clicked) {
return (
<button
onClick={() => {
alert(argv);
}}
style={{ margin: "0 8px", alignItems: "left" }}
>
{argv}
</button>
);
}
export function Header() {
return (
<div
@ -6,10 +21,19 @@ export function Header() {
justifyContent: "space-between",
}}
>
<h1 style={{ textAlign: "left" }}>
Aceuil About Product Blog Serveurs Dowloads Help
</h1>
<h1 style={{ textAlign: "right" }}>Acount Get started</h1>
<h2 style={{ textAlign: "left" }}>
{Button("Aceuil")}
{Button("About")}
{Button("Product")}
{Button("Blog")}
{Button("Serveurs")}
{Button("Dowloads")}
{Button("Help")}
</h2>
<h2 style={{ textAlign: "right" }}>
{Button("Acount")}
{Button("Get started")}
</h2>
</div>
);
}

View File

@ -7,7 +7,8 @@ import { Footer } from "./component/Footer.jsx";
import { Postcard } from "./component/Card.jsx";
import { Button } from "./component/Button.jsx";
import { Header } from "./component/Head.jsx";
import chat from "./assets/chat_sex.jpg";
import back_img from "./assets/img_site.jpg";
import chat from "./assets/chat.jpg";
function buttoncaller(argv) {
console.log(argv);
@ -16,17 +17,26 @@ function buttoncaller(argv) {
ReactDOM.createRoot(document.getElementById("root")).render(
<>
<Navbar />
<Header />
<App />
<Body />
<Button
title="click"
clicked={() => {
buttoncaller("coucou");
<div
style={{
backgroundImage: `url(${back_img})`,
minHeight: "100vh",
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Footer />
>
<Navbar />
<Header />
<App />
<Body />
<Button
title="click"
clicked={() => {
buttoncaller("coucou");
}}
/>
<Footer />
</div>
</>
);