source for lucas.co
xxx
CNAME | 2 +-
Notes-Ideas.txt | 3 +
archive/CNAME | 1 +
contact.html => archive/contact.html | 0
archive/index.html | 69 +++++++++++++++++++
archive/index.html.bak | 69 +++++++++++++++++++
archive/mystyle.css | 127 +++++++++++++++++++++++++++++++++++
archive/mystyle.css.bak | 119 ++++++++++++++++++++++++++++++++
grid_test/grid_index.html | 24 +++++++
grid_test/grid_index.html.bak | 22 ++++++
grid_test/grid_style.css | 59 ++++++++++++++++
grid_test/grid_style.css.bak | 59 ++++++++++++++++
horny.gif | Bin 0 -> 20502976 bytes
index.html | 88 +++++++-----------------
index.html.bak | 42 +++++++-----
mystyle.css | 24 +++++--
mystyle.css.bak | 26 ++++---
old site/index_old.html | 72 ++++++++++++++++++++
old site/mystyle_old.css | 127 +++++++++++++++++++++++++++++++++++
styles.css | 82 ++++++++++++++++++++++
20 files changed, 917 insertions(+), 98 deletions(-)
diff --git a/CNAME b/CNAME
index 51f5c96..7b1026b 100644
--- a/CNAME
+++ b/CNAME
@@ -1 +1 @@
-www.synthpu.re
\ No newline at end of file
+lucas.co
\ No newline at end of file
diff --git a/Notes-Ideas.txt b/Notes-Ideas.txt
new file mode 100644
index 0000000..1e67d04
--- /dev/null
+++ b/Notes-Ideas.txt
@@ -0,0 +1,3 @@
+-Develop grid-based view based on browser width
+-Save-state for toggle on site
+-Temporary dog:Grown in a lab, you buy them and they die after a few days. You don't have to feed them and they don't use the bathroom. 10k
\ No newline at end of file
diff --git a/archive/CNAME b/archive/CNAME
new file mode 100644
index 0000000..e3873e7
--- /dev/null
+++ b/archive/CNAME
@@ -0,0 +1 @@
+synthpu.re
diff --git a/contact.html b/archive/contact.html
similarity index 100%
rename from contact.html
rename to archive/contact.html
diff --git a/archive/index.html b/archive/index.html
new file mode 100644
index 0000000..a14fd04
--- /dev/null
+++ b/archive/index.html
@@ -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">
+ <img class="image" src="media/magic.gif" height="200" width="200">
+ </div>
+
+</body>
+
+</html>
diff --git a/archive/index.html.bak b/archive/index.html.bak
new file mode 100644
index 0000000..4988c83
--- /dev/null
+++ b/archive/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/archive/mystyle.css b/archive/mystyle.css
new file mode 100644
index 0000000..84f1151
--- /dev/null
+++ b/archive/mystyle.css
@@ -0,0 +1,127 @@
+
+
+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;
+}
+
+.magic_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;
+}
diff --git a/archive/mystyle.css.bak b/archive/mystyle.css.bak
new file mode 100644
index 0000000..474e3f9
--- /dev/null
+++ b/archive/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;
+}
diff --git a/grid_test/grid_index.html b/grid_test/grid_index.html
new file mode 100644
index 0000000..045815d
--- /dev/null
+++ b/grid_test/grid_index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <link rel="stylesheet" href="grid_style.css">
+</head>
+
+<body>
+ <div class="card_container">
+ <div class="card">one</div>
+ <div class="card">two</div>
+ <div class="card">three</div>
+ <div class="card">four</div>
+ <div class="card">five</div>
+ <div class="card">six</div>
+ <div class="card">seven</div>
+ <div class="card">eight</div>
+ <div class="card">nine</div>
+ <div class="card">ten</div>
+ <div class="card">eleven</div>
+ <div class="card">twelve</div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/grid_test/grid_index.html.bak b/grid_test/grid_index.html.bak
new file mode 100644
index 0000000..7a52cf1
--- /dev/null
+++ b/grid_test/grid_index.html.bak
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <link rel="stylesheet" href="grid_style.css">
+</head>
+
+<body>
+ <div class="card">one</div>
+ <div class="card">two</div>
+ <div class="card">three</div>
+ <div class="card">four</div>
+ <div class="card">five</div>
+ <div class="card">six</div>
+ <div class="card">seven</div>
+ <div class="card">eight</div>
+ <div class="card">nine</div>
+ <div class="card">ten</div>
+ <div class="card">eleven</div>
+ <div class="card">twelve</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/grid_test/grid_style.css b/grid_test/grid_style.css
new file mode 100644
index 0000000..2452dd8
--- /dev/null
+++ b/grid_test/grid_style.css
@@ -0,0 +1,59 @@
+html { font-size:22px; }
+body { padding:10px; }
+
+.card {
+ background-color:white;
+ color:black;
+ height:250px;
+ width:500px;
+ border:2px solid black;
+ margin:auto;
+}
+
+@media (min-width:600px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ grid-gap:10px;
+ width:500px;
+ border:2px solid black;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
+
+@media (min-width:1100px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ width:1000px;
+ border:2px solid black;
+ grid-template-columns: auto auto;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
+
+@media (min-width:1600px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ width:1500px;
+ border:2px solid black;
+ grid-template-columns:auto auto auto;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
+
+@media (min-width:2100px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ width:2000px;
+ border:2px solid black;
+ grid-template-columns:auto auto auto auto;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
\ No newline at end of file
diff --git a/grid_test/grid_style.css.bak b/grid_test/grid_style.css.bak
new file mode 100644
index 0000000..21cf57b
--- /dev/null
+++ b/grid_test/grid_style.css.bak
@@ -0,0 +1,59 @@
+html { font-size:22px; }
+body { padding:10px; }
+
+.card {
+ background-color:white;
+ color:black;
+ height:250px;
+ width:500px;
+ border:2px solid black;
+ margin:auto;
+}
+
+@media (min-width:600px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ grid-gap:10px;
+ width:500px;
+ border:2px solid black;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
+
+@media (min-width:1100px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ width:1000px;
+ border:2px solid black;
+ grid-template-columns: auto auto;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
+
+@media (min-width:1600px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ width:1500px;
+ border:2px solid black;
+ grid-template-columns:auto auto auto;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
+
+@media (min-width:2100px) {
+ .card_container {
+ margin:auto;
+ display:grid;
+ width:2000px;
+ border:2px solid black;
+ grid-template-columns:auto auto auto;
+ column-gap:10px;
+ row-gap:20px;
+ }
+}
\ No newline at end of file
diff --git a/horny.gif b/horny.gif
new file mode 100644
index 0000000..86c6d73
Binary files /dev/null and b/horny.gif differ
diff --git a/index.html b/index.html
index a14fd04..b1a9d30 100644
--- a/index.html
+++ b/index.html
@@ -1,69 +1,29 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
-<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">
+<html>
- <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
+ <head>
+ <link rel="stylesheet" href="styles.css">
+ <title>
+ Homepage (─‿‿─)
+ </title>
+ </head>
+
+ <body>
+ <!-- <div class="title">Lucas Galante</div> -->
+ <div class="whitebox">
+ <div class="title">
+ Lucas Galante
</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>
-
+ <div class="boxx">
+ <img src="horny.gif" class="myimg">
+ </div>
+ <div class="left"></div>
+ <div class="right"></div>
+ <div class="center"></div>
+ <div class="circle1"></div>
+ <div class="circle2"></div>
+ </body>
+
</html>
diff --git a/index.html.bak b/index.html.bak
index 4988c83..84c99f3 100644
--- a/index.html.bak
+++ b/index.html.bak
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
<html lang="en">
<head>
@@ -19,22 +19,22 @@
<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">
+
+ <input class="radio" id="chocolate_radio_one" name="chocolate_figures" type="radio" checked>
+ <input class="radio" id="chocolate_radio_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>
+ <label class="tab" id="chocolate_tab_one" for="chocolate_radio_one">Chobits Chii</label>
+ <label class="tab" id="chocolate_tab_two" for="chocolate_radio_two">New Figure</label>
</div>
- <div class="slides">
- <div class="slide" id="slide_one">
+ <div class="slide_container">
+ <div class="slide" id="chocolate_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">
+ <div class="slide" id="chocolate_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>
@@ -43,27 +43,33 @@
</div>
<div class="sewing_box">
-
<div class="box_title">Sewing Services</div>
- <input class="radio" id="one" name="sewing_services" type="radio" checked>
+ <input class="radio" id="sewing_radio_one" name="sewing_services" type="radio" checked>
+ <input class="radio" id="sewing_radio_two" name="sewing_services" type="radio">
<div class="tab_container">
- <label class="tab" id="tab_one" for="one">Alterations</label>
+ <label class="tab" id="sewing_tab_one" for="sewing_radio_one">Alterations</label>
+ <label class="tab" id="sewing_tab_two" for="sewing_radio_two">Custom Items</label>
</div>
- <div class="slides">
- <div class="slide" id="slide_one">
- Alteration
+ <div class="slide_container">
+ <div class="slide" id="sewing_slide_one">
+ <div class="description">Alteration</div>
+ </div>
+ <div class="slide" id="sewing_slide_two">
+ <div class="description">Custom Items</div>
</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>
+
+ <div class="design_box">
+ <div class="description">Design Services for high end commercial projects</div>
</div>
-
</body>
</html>
diff --git a/mystyle.css b/mystyle.css
index d97e5d8..eff8250 100644
--- a/mystyle.css
+++ b/mystyle.css
@@ -41,6 +41,14 @@ body {
outline:1px solid black;
}
+.design_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;
@@ -79,7 +87,7 @@ body {
display:inline-block;
}
-.slides {
+.slide_container {
border:0px solid black;
}
@@ -113,15 +121,17 @@ body {
display:none;
}
-#one:checked ~ .slides #slide_one,
-#two:checked ~ .slides #slide_two,
-#three:checked ~ .slides #slide_three {
+#chocolate_radio_one:checked ~ .slide_container #chocolate_slide_one,
+#chocolate_radio_two:checked ~ .slide_container #chocolate_slide_two,
+#sewing_radio_one:checked ~ .slide_container #sewing_slide_one,
+#sewing_radio_two:checked ~ .slide_container #sewing_slide_two {
display:block
}
-#one:checked ~ .tab_container #tab_one,
-#two:checked ~ .tab_container #tab_two,
-#three:checked ~ .tab_container #tab_three {
+#chocolate_radio_one:checked ~ .tab_container #chocolate_tab_one,
+#chocolate_radio_two:checked ~ .tab_container #chocolate_tab_two,
+#sewing_radio_one:checked ~ .tab_container #sewing_tab_one,
+#sewing_radio_two:checked ~ .tab_container #sewing_tab_two {
background:black;
color:white;
}
\ No newline at end of file
diff --git a/mystyle.css.bak b/mystyle.css.bak
index b35ebcc..e6d195e 100644
--- a/mystyle.css.bak
+++ b/mystyle.css.bak
@@ -29,7 +29,15 @@ body {
height:250px;
width:500px;
padding:20px 20px 20px 20px;
- margin: 25px 25px 25px 25px;
+ 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;
}
@@ -71,7 +79,7 @@ body {
display:inline-block;
}
-.slides {
+.slide_container {
border:0px solid black;
}
@@ -105,15 +113,17 @@ body {
display:none;
}
-#one:checked ~ .slides #slide_one,
-#two:checked ~ .slides #slide_two,
-#three:checked ~ .slides #slide_three {
+#chocolate_radio_one:checked ~ .slide_container #chocolate_slide_one,
+#chocolate_radio_two:checked ~ .slide_container #chocolate_slide_two,
+#sewing_radio_one:checked ~ .slide_container #sewing_slide_one,
+#sewing_radio_two:checked ~ .slide_container #sewing_slide_two {
display:block
}
-#one:checked ~ .tab_container #tab_one,
-#two:checked ~ .tab_container #tab_two,
-#three:checked ~ .tab_container #tab_three {
+#chocolate_radio_one:checked ~ .tab_container #chocolate_tab_one,
+#chocolate_radio_two:checked ~ .tab_container #chocolate_tab_two,
+#sewing_radio_one:checked ~ .tab_container #sewing_tab_one,
+#sewing_radio_two:checked ~ .tab_container #sewing_tab_two {
background:black;
color:white;
}
\ No newline at end of file
diff --git a/old site/index_old.html b/old site/index_old.html
new file mode 100644
index 0000000..1992045
--- /dev/null
+++ b/old site/index_old.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<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>
+ <input class="radio" id="two" name="sewing_services" type="radio">
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Alterations</label>
+ <label class="tab" id="tab_two" for="two">Custom Items</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>
+
+</html>
diff --git a/old site/mystyle_old.css b/old site/mystyle_old.css
new file mode 100644
index 0000000..d97e5d8
--- /dev/null
+++ b/old site/mystyle_old.css
@@ -0,0 +1,127 @@
+
+
+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;
+}
+
+.magic_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
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..48927da
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,82 @@
+:root {
+ --width1: 11%;
+ --height1: 75%;
+ --height2: 63%;
+ --top1: 1%;
+ --top2: 5%;
+ --top3: 78%;
+ --bottom1: 13%;
+ --side1: 20%;
+}
+.title {
+ font-size: 1.7vw;
+ margin-top: .5vw;
+ margin-left: .5vw;
+}
+.myimg {
+ object-fit: contain;
+ width: 100%;
+ height: 100%;
+}
+.boxx {
+ position: absolute;
+ top: var(--top1);
+ left: 36.0%;
+ height:19%;
+ width: 25%;
+ padding: 1%;
+ border: 1px solid black;
+}
+.whitebox {
+ position: absolute;
+ top: 0%;
+ left: var(--side1);
+ height: 3.3vw;
+ width: var(--width1);
+ background-color: white;
+ z-index: 2;
+}
+.left {
+ position: absolute;
+ top: calc(var(--top1));
+ left: var(--side1);
+ height: calc(var(--height1));
+ width: var(--width1);
+ background-color: black;
+ z-index: 1;
+}
+.right {
+ position: absolute;
+ top: var(--top1);
+ right: var(--side1);
+ height: var(--height1);
+ width: var(--width1);
+ background-color: black;
+}
+.center {
+ position: absolute;
+ top: 25.4%;
+ left: calc(50% - 8% / 2);
+ height: 45%;
+ width: 8%;
+ background-color: black;
+}
+.circle1 {
+ position: absolute;
+ top: var(--top3);
+ left: var(--side1);
+ width: var(--width1);
+ padding-bottom: var(--width1);
+ border-radius: 50%;
+ border: 1px solid black;
+
+}
+.circle2 {
+ position: absolute;
+ top: var(--top3);
+ right: var(--side1);
+ width: var(--width1);
+ padding-bottom: var(--width1);
+ border-radius: 50%;
+ border: 1px solid black;
+}
\ No newline at end of file