From 01520a770f191e0324bb1bda5ae4c596fe9ca1b8 Mon Sep 17 00:00:00 2001 From: ​ Date: Thu, 1 Jan 1970 00:00:00 +0000 Subject: tech --- tech/css/main.css | 203 +++++++++++++++++++++++++++++++++++++++++++++++ tech/drone/index.html | 81 +++++++++++++++++++ tech/ev/index.html | 79 ++++++++++++++++++ tech/i/favicon.ico | Bin 0 -> 9459 bytes tech/index.html | 76 ++++++++++++++++++ tech/print/index.html | 78 ++++++++++++++++++ tech/template/index.html | 74 +++++++++++++++++ 7 files changed, 591 insertions(+) create mode 100644 tech/css/main.css create mode 100644 tech/drone/index.html create mode 100644 tech/ev/index.html create mode 100644 tech/i/favicon.ico create mode 100644 tech/index.html create mode 100644 tech/print/index.html create mode 100644 tech/template/index.html diff --git a/tech/css/main.css b/tech/css/main.css new file mode 100644 index 0000000..0335820 --- /dev/null +++ b/tech/css/main.css @@ -0,0 +1,203 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap'); + +html{ + font-family: "Noto Sans", sans-serif; + background: radial-gradient(#280048,#300000); + background-size: 33%; + color: #FFDDCC; +} + +body{ + margin: auto; +} + +h1,h2,h3{ + margin: .5em; + font-family: "Noto Serif", serif; +} + +p{ + font-size: .95em; + padding-left: 3%; + padding-right: 3%; +} + +a{ + color: #FFC400; + text-decoration: none; +} +a:hover{ + color: #FFF400; +} + +img{ + width: 100%; + border-radius: 3px; +} + +hr{ + color: #AA9988; +} + +header{ + text-align: center; + font-size: .9em; +} +header i{ + font-size: .6em; + font-weight: normal; + display: none; +} + +nav{ + text-align: center; + color: #998877; +} +nav a{ + font-size: 1.03em; + padding-left: 1%; + padding-right: 1%; +} +nav i{ + font-size: .85em; + color: #FFAA77; + padding-left: 1%; + display: none; +} + +main{ + padding-top: 3%; + padding-bottom: 5%; +} + +figure{ + border: 3px solid rgba(0,0,0,.0); + max-width: 400px; + margin: 5% auto; +} +figcaption{ + text-align: center; + background-color: rgba(255,200,200,.2); + border-radius: 3px; + margin-bottom: 5px; + text-shadow: 3px 3px 8px #000000; +} +aside{ + font-size: 1.3em; + text-align: center; + border-radius: 3px; + margin-bottom: 5px; +} + +footer{ + position: fixed; + bottom: 0; + width: 100%; + font-size: .8em; + font-family: "Noto Serif", serif; + background-color: #300000; + text-align: center; +} +footer p{ + margin: 1%; + text-shadow: 3px 3px 8px #FFAA77; +} + +.btn{ + background-color: #330033; + color: #FFC400; + border: none; + font-size: 1.1em; + padding: 2px 3px; + display: inline-block; + border-radius: 3px; + box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(222,180,120,.9); +} +.btn:hover{ + color: #FFF400; + box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 0 5px 8px 0 rgba(255,222,22,22.19); +} +nav .btn:nth-child(1){ + color: #DFC400; + font-size: 1.05em; +} +nav .btn:nth-last-child(-n+3){ + color: #DFC400; + font-size: 1.05em; +} + +@media screen and (min-width:600px),print{ + .grid{ + display: grid; + grid-template-columns: auto auto; + grid-gap: 0px; + } + aside{ + grid-column: 1 / span 2; + } + + body{ + width: 95%; + } + header{ + width: 90%; + } + nav{ + width: 95%; + } + footer{ + width: 95%; + } + + .btn{ + font-size: 1.2em; + padding: 3px 5px; + } + + .col{ + position: fixed; + width: 40%; + height: 100%; + } + #left{ + left: 0; + padding-left: 8%; + } + #right{ + right: 0; + padding-right: 8%; + } +} + +@media screen and (min-width:900px),print{ + body{ + width: 85%; + } + header{ + width: 80%; + } + header i{ + display: inline; + } + nav{ + width: 85%; + } + nav i{ + display: inline; + } + footer{ + width: 85%; + } + + .col{ + position: fixed; + width: 30%; + } + #left{ + padding-left: 18%; + } + #right{ + padding-right: 18%; + } +} diff --git a/tech/drone/index.html b/tech/drone/index.html new file mode 100644 index 0000000..e1eaac2 --- /dev/null +++ b/tech/drone/index.html @@ -0,0 +1,81 @@ + + + + + +Tech Showcase: Drones + +
+

Advanced Drones + Technology Showcase

+
+ + + +
+
+

Tons of Future Use Cases

+

Drones are versatile enough that they will likely be used to perform + tons of specialized tasks in the future, even more than they already do + now. Drones have also been used in the military for a long time. Here's + a few drones in flight:

+
+ +
+ drone flying in the sky +
+
+
Delivery Drone
+ drone delivering a packages +
+
+
Military Drone
+ soldier flying a drone +
+
+ drone flying above a field +
+
+
+ +
+ + + + diff --git a/tech/ev/index.html b/tech/ev/index.html new file mode 100644 index 0000000..1a6eacf --- /dev/null +++ b/tech/ev/index.html @@ -0,0 +1,79 @@ + + + + + +Tech Showcase: EVs + +
+

Non-Car Electric Vehicles + Technology Showcase

+
+ + + +
+
+

Cars aren't the only EVs

+

While there is a lot that could be said about electric cars, + I'm far more interested in the advancement of the other kinds of + EVs, such as:

+
+
+
E-Bikes
+ photo of an E-Bike + photo of an E-Bike +
+ +
+
E-Scooters
+ photo of an E-Scooter +
+
+
E-Skateboards
+ photo of an E-Skateboard +
+
+
+ +
+ + + + diff --git a/tech/i/favicon.ico b/tech/i/favicon.ico new file mode 100644 index 0000000..fb20a15 Binary files /dev/null and b/tech/i/favicon.ico differ diff --git a/tech/index.html b/tech/index.html new file mode 100644 index 0000000..12d9c94 --- /dev/null +++ b/tech/index.html @@ -0,0 +1,76 @@ + + + + + +Tech Showcase: Home + +
+

Homepage + Technology Showcase

+
+ + + +
+
+

About This Site

+

Hey, my name is Name! This site showcases some of my favorite + recent technological advancements, as well as future technologies + which I'm very excited about. The images below each link to a specific + technology page:

+
+
+ +
3D Printers Page
+ photo of a 3D printer + +
+
+ +
Non-Car EVs Page
+ photo of an E-Bike + +
+
+ +
Drones Page
+ drone delivering a packages + +
+
+
+ +
+ + + + diff --git a/tech/print/index.html b/tech/print/index.html new file mode 100644 index 0000000..1d34689 --- /dev/null +++ b/tech/print/index.html @@ -0,0 +1,78 @@ + + + + + +Tech Showcase: 3D Printers + +
+

3D Printing Machines + Technology Showcase

+
+ + + +
+
+

Print Anything

+

3D printers are amazing, they allow you to create specialized, + personalized, precisely made objects. The limitlessness of what you + can print is just inspiring as well. Also, many 3D printers totally + look like futuristic technology, here are some good examples:

+
+ +
+ photo of a 3D printer +
+
+ photo of a 3D printer +
+
+ photo of a 3D printer +
+
+ photo of a 3D printer +
+
+
+ +
+ + + + diff --git a/tech/template/index.html b/tech/template/index.html new file mode 100644 index 0000000..e473242 --- /dev/null +++ b/tech/template/index.html @@ -0,0 +1,74 @@ + + + + + +Tech Showcase: Template + +
+

Template Page + Technology Showcase

+
+ + + +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+ +
+
First Example
+ an example image +
+
+
Second Example
+ an example image +
+
+
Third Example
+ an example image +
+
+
Forth Example
+ an example image +
+
+
+ +
+ + + + -- cgit 1.4.1