source for lucas.co
edits
js.js | 180 ++++++++++++++++++++++++----------
site_v1/CNAME | 2 +-
site_v1/contact.html | 52 +++++-----
site_v1/index.html | 138 +++++++++++++-------------
site_v1/index.html.bak | 138 +++++++++++++-------------
site_v1/mystyle.css | 254 ++++++++++++++++++++++++------------------------
site_v1/mystyle.css.bak | 238 ++++++++++++++++++++++-----------------------
site_v2/index.html | 58 +++++------
site_v2/indexx.html | 88 ++++++++---------
site_v2/styles.css | 162 +++++++++++++++---------------
10 files changed, 695 insertions(+), 615 deletions(-)
diff --git a/js.js b/js.js
index 18e350f..b9f0089 100644
--- a/js.js
+++ b/js.js
@@ -1,11 +1,21 @@
let n_tabs = 5;
+let mode = "desktop";
+let pos_x = 0;
+let pox_y = 0;
+
+let mobile = navigator.userAgentData.mobile;
+
+if(mobile == true) { mode = "mobilw"; }
+
+console.log(navigator.userAgentData.mobile);
let active_tab = 0;
function loadPage() {
let box = make_box();
let body = make_body();
- let mode = site_mode();
+ let mode_box = make_mode_box();
+ let files_box = make_files_box();
let tabs = make_tabs(box);
for(let i = 0; i < tabs.length; i++) {
@@ -13,8 +23,9 @@ function loadPage() {
}
body.append(box);
- body.append(mode);
- click(0);
+ body.append(mode_box);
+ body.append(files_box);
+ click_tab(0);
}
async function import_json() {
@@ -24,16 +35,16 @@ async function import_json() {
return data;
}
+//
+
function make_body() {
const body = document.getElementById("body");
body.style.backgroundColor = "#c8c7db";
- body.onmousemove = function(m) {
- move(m);
- }
-
return body;
}
+//
+
function make_box() {
let box = document.createElement("div");
@@ -53,6 +64,32 @@ function make_box() {
return box;
}
+function stylize_box(box) {
+ const x = 400;
+ const y = 250;
+
+ const left = window.innerWidth / 2 - x / 2;
+ const top = window.innerHeight / 2 - y / 2;
+
+ const text_margin = 25;
+
+ box.style.position = "fixed";
+ box.style.left = left.toString() + "px";
+ box.style.top = top.toString() + "px";
+
+ box.style.width = x.toString() + "px";
+ box.style.height = y.toString() + "px";
+
+ box.style.padding = 0;
+
+ box.style.borderStyle = "none";
+ // box.style.borderWidth = "1px";
+
+ return box;
+}
+
+//
+
function tab_data(n_tabs) {
const data = {
n: [0, 0, 0, 0],
@@ -93,13 +130,13 @@ function make_tabs() {
stylize_tab(tab, data);
tab.onmouseenter = function() {
- enter(tab.id);
+ enter_tab(tab.id);
}
tab.onmouseleave = function() {
- leave(tab.id);
+ leave_tab(tab.id);
}
tab.onclick = function() {
- click(i);
+ click_tab(i);
}
tabs.push(tab);
@@ -107,37 +144,6 @@ function make_tabs() {
return tabs;
}
-function site_mode() {
- let element = document.createElement("div");
- element.id = "site_mode";
- element.innerText = String("start");
- return element;
-}
-
-function stylize_box(box) {
- const x = 400;
- const y = 250;
-
- const left = window.innerWidth / 2 - x / 2;
- const top = window.innerHeight / 2 - y / 2;
-
- const text_margin = 25;
-
- box.style.position = "fixed";
- box.style.left = left.toString() + "px";
- box.style.top = top.toString() + "px";
-
- box.style.width = x.toString() + "px";
- box.style.height = y.toString() + "px";
-
- box.style.padding = 0;
-
- box.style.borderStyle = "none";
- // box.style.borderWidth = "1px";
-
- return box;
-}
-
function stylize_tab(tab, data) {
const idx = data[tab.id].idx;
@@ -231,18 +237,13 @@ function stylize_tab(tab, data) {
return tab;
}
-function move(m) {
- element = document.getElementById("site_mode");
- element.innerText = m.clientX;
-}
-
-function enter(tab_id) {
+function enter_tab(tab_id) {
tab = document.getElementById(tab_id);
tab.style.color = "white";
tab.style.backgroundColor = "black";
}
-function leave(tab_id) {
+function leave_tab(tab_id) {
if(tab_id != "tab_" + String(active_tab)) {
tab = document.getElementById(tab_id);
tab.style.color = "black";
@@ -250,7 +251,7 @@ function leave(tab_id) {
}
}
-function click(idx) {
+function click_tab(idx) {
for(let i = 0; i < n_tabs; i++) {
@@ -276,4 +277,83 @@ function click(idx) {
import_json().then(
function(val) { (text_box.innerText = val["tabs"][tab_id]["body"]) }
);
-}
\ No newline at end of file
+}
+
+//
+
+function make_mode_box() {
+ let element = document.createElement("div");
+ element.id = "mode_box";
+ element.innerText = mode;
+
+ element.onclick = function() {
+ mode_box_click();
+ }
+ return element;
+}
+
+function mode_box_click() {
+ element = document.getElementById("mode_box");
+
+ if(mode == "desktop") {
+ element.innerText = "mobile";
+ mode = "mobile";
+ let puck = make_puck();
+
+ body.append(puck);
+
+ body.onmousedown = function() {
+ const pos_a = MouseEvent["screenX"];
+ console.log(event.MouseEvent);
+
+ // body.onmousemove = function(pos_a) {
+ // pos_x += event.screenX - pos_a;
+ // puck.style.left += String(pos_x) + "px";
+ // }
+ }
+
+ body.onmouseup = function() {
+ body.onmousemove = function() {
+ }
+ }
+
+ }
+
+ else {
+ element.innerText = "desktop";
+ mode = "desktop";
+ }
+}
+
+function make_puck() {
+ puck = document.createElement("div");
+ puck.id = "puck";
+
+ puck.style.position = "fixed";
+ puck.style.backgroundColor = "black";
+ puck.style.height = "25px";
+ puck.style.width = "25px";
+ puck.style.top = "5px";
+
+ return puck;
+}
+
+function move_puck() {
+ element = document.getElementById("site_mode");
+ // element.innerText = m.clientX;
+}
+
+//
+
+function make_files_box() {
+ let files = document.createElement("div");
+ files.id = "files";
+ files.innerText = "Files";
+ files.style.position = "fixed";
+ files.style.right = "15px";
+ files.style.top = "15px";
+ files.style.borderWidth = "2px";
+ files.style.borderStyle = "solid";
+ files.style.padding = "5px";
+ return files;
+}
diff --git a/site_v1/CNAME b/site_v1/CNAME
index e3873e7..6a06bef 100644
--- a/site_v1/CNAME
+++ b/site_v1/CNAME
@@ -1 +1 @@
-synthpu.re
+synthpu.re
diff --git a/site_v1/contact.html b/site_v1/contact.html
index c8ed0dd..2676843 100644
--- a/site_v1/contact.html
+++ b/site_v1/contact.html
@@ -1,26 +1,26 @@
-<!doctype html>
-<html lang="en">
-
-<head>
- <link rel="stylesheet" href="mystyle.css">
- <title>Synthpu.re/contact</title>
-</head>
-
-<body>
- <div class="header">
- Synthpu.re
- </div>
-
- <div class="navigation">
- <a class="there" href="/items.html">Items</a>
- <a class="here" href="/contact.html">Contact</a>
- </div>
-
- <div class = "contact_box">
- <div>Lucas Galante</div>
- <p>[email protected]</p>
- <p>@_lucasgalante</p>
- </div>
-</body>
-
-</html>
+<!doctype html>
+<html lang="en">
+
+<head>
+ <link rel="stylesheet" href="mystyle.css">
+ <title>Synthpu.re/contact</title>
+</head>
+
+<body>
+ <div class="header">
+ Synthpu.re
+ </div>
+
+ <div class="navigation">
+ <a class="there" href="/items.html">Items</a>
+ <a class="here" href="/contact.html">Contact</a>
+ </div>
+
+ <div class = "contact_box">
+ <div>Lucas Galante</div>
+ <p>[email protected]</p>
+ <p>@_lucasgalante</p>
+ </div>
+</body>
+
+</html>
diff --git a/site_v1/index.html b/site_v1/index.html
index a14fd04..d60b67f 100644
--- a/site_v1/index.html
+++ b/site_v1/index.html
@@ -1,69 +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>[email protected]</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>
+<!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>[email protected]</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/site_v1/index.html.bak b/site_v1/index.html.bak
index 4988c83..327e6db 100644
--- a/site_v1/index.html.bak
+++ b/site_v1/index.html.bak
@@ -1,69 +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>[email protected]</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>
+<!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>[email protected]</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/site_v1/mystyle.css b/site_v1/mystyle.css
index 84f1151..de77e3d 100644
--- a/site_v1/mystyle.css
+++ b/site_v1/mystyle.css
@@ -1,127 +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;
-}
+
+
+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/site_v1/mystyle.css.bak b/site_v1/mystyle.css.bak
index 474e3f9..26c6517 100644
--- a/site_v1/mystyle.css.bak
+++ b/site_v1/mystyle.css.bak
@@ -1,119 +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;
-}
+
+
+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/site_v2/index.html b/site_v2/index.html
index f09f4ae..816c282 100644
--- a/site_v2/index.html
+++ b/site_v2/index.html
@@ -1,29 +1,29 @@
-<!DOCTYPE html>
-
-<html>
-
- <head>
- <link rel="stylesheet" href="styles.css">
- <title>
- lucas.co/
- </title>
- </head>
-
- <body>
- <!-- <div class="title">Lucas Galante</div> -->
- <div class="whitebox">
- <div class="title">
- Lucas Galante
- </div>
- </div>
- <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>
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+ <link rel="stylesheet" href="styles.css">
+ <title>
+ lucas.co/
+ </title>
+ </head>
+
+ <body>
+ <!-- <div class="title">Lucas Galante</div> -->
+ <div class="whitebox">
+ <div class="title">
+ Lucas Galante
+ </div>
+ </div>
+ <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/site_v2/indexx.html b/site_v2/indexx.html
index 7a65250..019485f 100644
--- a/site_v2/indexx.html
+++ b/site_v2/indexx.html
@@ -1,45 +1,45 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<style>
-body {
- background-color: #8fb6ff;
- margin: 0;
-}
-.gradient {
- animation: animateBg 180s infinite linear;
- background-color: #fff;
- background-image: linear-gradient(0deg, #fff, #000, #da3287, #fff);
- background-size: 100% 300%;
- height: 100vh;
- width: 100vw;
-}
-@keyframes animateBg {
- 0% {
- background-position: 0 150%;
- }
- 100% {
- background-position: 0 0;
- }
-}
-div.work {
- position:absolute;
- left: 3vw;
- top: 3vh;
-}
-</style>
-<title>Page Title</title>
-</head>
-<body>
-
-<canvas id="canvas1" width="400" height="100"
-style="border:1px solid #000000;">
-You are a loser.
-</canvas>
-
-<article class="gradient"></article>
-<div class="work"><p><a href="file:///C:/Users/lsgal/OneDrive/Documents/website/index.html">Work</a></p></div>
-
-</body>
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+ background-color: #8fb6ff;
+ margin: 0;
+}
+.gradient {
+ animation: animateBg 180s infinite linear;
+ background-color: #fff;
+ background-image: linear-gradient(0deg, #fff, #000, #da3287, #fff);
+ background-size: 100% 300%;
+ height: 100vh;
+ width: 100vw;
+}
+@keyframes animateBg {
+ 0% {
+ background-position: 0 150%;
+ }
+ 100% {
+ background-position: 0 0;
+ }
+}
+div.work {
+ position:absolute;
+ left: 3vw;
+ top: 3vh;
+}
+</style>
+<title>Page Title</title>
+</head>
+<body>
+
+<canvas id="canvas1" width="400" height="100"
+style="border:1px solid #000000;">
+You are a loser.
+</canvas>
+
+<article class="gradient"></article>
+<div class="work"><p><a href="file:///C:/Users/lsgal/OneDrive/Documents/website/index.html">Work</a></p></div>
+
+</body>
</html>
\ No newline at end of file
diff --git a/site_v2/styles.css b/site_v2/styles.css
index 48927da..2c2f3b1 100644
--- a/site_v2/styles.css
+++ b/site_v2/styles.css
@@ -1,82 +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;
+: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