source for lucas.co
Edits April 14 2022
index.html | 44 +++++++++++++++------
index.html.bak | 69 ++++++++++++++++++++++++++++++++
media/magic.gif | Bin 0 -> 20502976 bytes
media/x | 1 -
mystyle.css | 40 ++++++++++++-------
mystyle.css.bak | 119 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
6 files changed, 246 insertions(+), 27 deletions(-)
diff --git a/index.html b/index.html
index 517e702..a14fd04 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<link rel="stylesheet" href="mystyle.css">
- <title>Synthpu.re/items</title>
+ <title>Synthpu.re</title>
</head>
<body>
@@ -11,14 +11,14 @@
Synthpu.re
</div>
- <div class="navigation">
- <a class="here" href="/items.html">Items</a>
- <a class="there" href="/contact.html">Contact</a>
+ <div class = "contact_box">
+ <div>Halcyinth Elbatour</div>
+ <p>x@x.com</p>
+ <p>@x</p>
</div>
<div class="chocolate_box">
-
- <div class="panel_title">Chocolate Anime Figures</div>
+ <div class="box_title">Chocolate Anime Figures</div>
<input class="radio" id="one" name="chocolate_figures" type="radio" checked>
<input class="radio" id="two" name="chocolate_figures" type="radio">
@@ -28,19 +28,41 @@
<label class="tab" id="tab_two" for="two">New Figure</label>
</div>
- <div class="panels">
- <div class="panel" id="panel_one">
- <img class="image" src="chobits-chii.png" height="128" width="128">
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ <img class="image" src="media/chobits-chii.png" height="128" width="128">
<div class="description">Chobits Chii is a beautiful girl and you can take a big bite out of her with Chobits Chii Anime Figure Made Out of Chocolate.</div>
<div class="price">USD 80</div>
</div>
- <div class="panel" id="panel_two">
- <img class="image" src="rin_kokonoe.jpg" height="128" width="128">
+ <div class="slide" id="slide_two">
+ <img class="image" src="media/rin_kokonoe.jpg" height="128" width="128">
<div class="description">Please bear the extra cost and ask me to make you a new Anime Figure that I have not done before. Whatever character you choose will be added to the lineup of figures you can order for USD 80.</div>
<div class="price">USD 200</div>
</div>
</div>
</div>
+
+ <div class="sewing_box">
+
+ <div class="box_title">Sewing Services</div>
+
+ <input class="radio" id="one" name="sewing_services" type="radio" checked>
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Alterations</label>
+ </div>
+
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ Alteration
+ </div>
+ <div class="price">USD TBD</div>
+ </div>
+ </div>
+
+ <div class="magic_box">
+ <img class="image" src="media/magic.gif" height="200" width="200">
+ </div>
</body>
diff --git a/index.html.bak b/index.html.bak
new file mode 100644
index 0000000..4988c83
--- /dev/null
+++ b/index.html.bak
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <link rel="stylesheet" href="mystyle.css">
+ <title>Synthpu.re</title>
+</head>
+
+<body>
+ <div class="header">
+ Synthpu.re
+ </div>
+
+ <div class = "contact_box">
+ <div>Halcyinth Elbatour</div>
+ <p>x@x.com</p>
+ <p>@x</p>
+ </div>
+
+ <div class="chocolate_box">
+ <div class="box_title">Chocolate Anime Figures</div>
+
+ <input class="radio" id="one" name="chocolate_figures" type="radio" checked>
+ <input class="radio" id="two" name="chocolate_figures" type="radio">
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Chobits Chii</label>
+ <label class="tab" id="tab_two" for="two">New Figure</label>
+ </div>
+
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ <img class="image" src="media/chobits-chii.png" height="128" width="128">
+ <div class="description">Chobits Chii is a beautiful girl and you can take a big bite out of her with Chobits Chii Anime Figure Made Out of Chocolate.</div>
+ <div class="price">USD 80</div>
+ </div>
+ <div class="slide" id="slide_two">
+ <img class="image" src="media/rin_kokonoe.jpg" height="128" width="128">
+ <div class="description">Please bear the extra cost and ask me to make you a new Anime Figure that I have not done before. Whatever character you choose will be added to the lineup of figures you can order for USD 80.</div>
+ <div class="price">USD 200</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="sewing_box">
+
+ <div class="box_title">Sewing Services</div>
+
+ <input class="radio" id="one" name="sewing_services" type="radio" checked>
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Alterations</label>
+ </div>
+
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ Alteration
+ </div>
+ <div class="price">USD TBD</div>
+ </div>
+ </div>
+
+ <div class="magic_box">
+
+ </div>
+
+</body>
+
+</html>
diff --git a/media/magic.gif b/media/magic.gif
new file mode 100644
index 0000000..86c6d73
Binary files /dev/null and b/media/magic.gif differ
diff --git a/media/x b/media/x
deleted file mode 100644
index 8b13789..0000000
--- a/media/x
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/mystyle.css b/mystyle.css
index 2755fd5..d97e5d8 100644
--- a/mystyle.css
+++ b/mystyle.css
@@ -6,20 +6,14 @@ body {
.header {
padding:20px;
- text-align:center;
- margin:auto;
-}
-
-.navigation {
- text-align:center;
- padding:0px 0px 20px 0px;
+ margin:25px 25px 25px 100px;
}
.contact_box {
height:100px;
width:500px;
padding:20px 20px 20px 20px;
- margin:auto;
+ margin:25px 25px 25px 25px;
border:1px solid black;
}
@@ -27,11 +21,27 @@ body {
height:250px;
width:500px;
padding:20px 20px 20px 20px;
- margin:auto;
+ margin:25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.sewing_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.magic_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
outline:1px solid black;
}
-.panel_title {
+.box_title {
margin:0px 0px 20px 0px;
outline:1px solid white;
}
@@ -69,7 +79,7 @@ body {
display:inline-block;
}
-.panels {
+.slides {
border:0px solid black;
}
@@ -95,7 +105,7 @@ body {
outline:0px solid black;
}
-.panel {
+.slide {
display:none;
}
@@ -103,9 +113,9 @@ body {
display:none;
}
-#one:checked ~ .panels #panel_one,
-#two:checked ~ .panels #panel_two,
-#three:checked ~ .panels #panel_three {
+#one:checked ~ .slides #slide_one,
+#two:checked ~ .slides #slide_two,
+#three:checked ~ .slides #slide_three {
display:block
}
diff --git a/mystyle.css.bak b/mystyle.css.bak
new file mode 100644
index 0000000..b35ebcc
--- /dev/null
+++ b/mystyle.css.bak
@@ -0,0 +1,119 @@
+
+
+body {
+ background:white;
+}
+
+.header {
+ padding:20px;
+ margin:25px 25px 25px 100px;
+}
+
+.contact_box {
+ height:100px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ border:1px solid black;
+}
+
+.chocolate_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.sewing_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin: 25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.box_title {
+ margin:0px 0px 20px 0px;
+ outline:1px solid white;
+}
+
+.tab_container {
+ margin:0px 0px 20px 0px;
+ outline:0px solid black;
+}
+
+.tab {
+ display:inline-block;
+ cursor:pointer;
+ padding:2px 8px 2px 8px;
+ margin:0px 2px 0px 0px;
+ outline:1px solid black;
+}
+
+.here:link, a.here:visited {
+ background-color:black;
+ color:white;
+ padding:3px 35px;
+ text-align:center;
+ border:1px solid black;
+ text-decoration:none;
+ display:inline-block;
+}
+
+.there:link {
+ background-color:white;
+ color:black;
+ padding:3px 35px;
+ text-align:center;
+ border:1px solid black;
+ text-decoration:none;
+ display:inline-block;
+}
+
+.slides {
+ border:0px solid black;
+}
+
+.image {
+ display:inline-block;
+ margin:0px 10px 0px 0px;
+ outline:0px solid black;
+}
+
+.description {
+ display:inline-block;
+ width:230px;
+ vertical-align:top;
+ text-align:justify;
+ margin:0px 40px 0px 0px;
+ outline:0px solid black;
+}
+
+.price {
+ display:inline-block;
+ vertical-align:top;
+ margin:0px 0px 0px 0px;
+ outline:0px solid black;
+}
+
+.slide {
+ display:none;
+}
+
+.radio {
+ display:none;
+}
+
+#one:checked ~ .slides #slide_one,
+#two:checked ~ .slides #slide_two,
+#three:checked ~ .slides #slide_three {
+ display:block
+}
+
+#one:checked ~ .tab_container #tab_one,
+#two:checked ~ .tab_container #tab_two,
+#three:checked ~ .tab_container #tab_three {
+ background:black;
+ color:white;
+}
\ No newline at end of file