diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 index db900c4..41438d3 --- a/index.html +++ b/index.html @@ -2,40 +2,159 @@ - - - Peter the Baker - - + + + + + + + - -
+ + - + +
+
+ HOME + SOCIAL + PISTORIUM + CONTACT +
+
-
- Petrus Pistor -
+ +
+ +
+

Petrus Pistor

+

Web Designer.

+ " alt="boy" class="w3-image" width="992" height="1108"> +
+ + +
+

Peter Baker

+
+

Some text about me. Some text about me. I am lorem ipsum 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 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. +

+

Web Design

+ + + +

My Reputation

+ Avatar +

Chris Fox. CEO at Mighty Schools.

+

John Doe saved us from a web disaster.


+ + Avatar +

Rebecca Flex. CEO at Company.

+

No one is better than John Doe.

+ +
+ + +
+

Pistorium (Projects)

+
+ + +
+
+ + + +
+ +
+ + + + +
+ +
+ +
+ + +
+

Contact Me

+
+ +
+

Yucaipa, CA

+

VP: 9513090099

+

Email: connect-web@petruspistor.com

+
+
+

Let's get in touch. Send me a message:

+ +
+

+

+

+

+

+ +

+
+ +
+ + +
+ + + + + + +

Powered by w3.css

+ +
+ + +
+ + + - -
- diff --git a/resources/css/index.css b/resources/css/index.css old mode 100644 new mode 100755 index ef68503..72cbe31 --- a/resources/css/index.css +++ b/resources/css/index.css @@ -1,41 +1,83 @@ -@import 'https://fonts.googleapis.com/css?family=Iceland|Cairo&display=swap'; -body { - background-image: url("/resources/img/pb_16_9_under512kb.webp"); - background-repeat: no-repeat; - background-position: top center; - background-size: 100% auto; - background-color:#2c2c2c; - color:#efefef; -} -/*.tstyle{background:-webkit-linear-gradient(-45deg, #A3FF00 30%, #49FF00 35%, #00FF45 45%, #04FF54 60%, #00FFD2 65%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:damion;max-width:fit-content;margin:auto}*/ -.tstyle { - color: #FFD700; /* Gold */ - font-family: Iceland; - max-width: fit-content; - margin: auto; - text-shadow: 0 0 8px rgba(255, 215, 0, 0.7); -} +@import 'https://fonts.googleapis.com/css?family=Iceland|Cairo&display=swap' +/* W3.CSS 5.02 - Cleaned Version */ -#container { - text-align:center; - font-family:Iceland; - position:absolute; - top:45%; - left:50%; - transform:translate(-50%,-45%); - width:auto; +/* Base Reset */ +html, body { font-family: Verdana, sans-serif; font-size: 15px; line-height: 1.5; margin: 0; overflow-x: hidden; box-sizing: border-box } +*, *:before, *:after { box-sizing: inherit } - /* transparent box padding */ - background: rgba(0, 0, 0, 0.9); /* black box at 90% opacity */ - padding: 20px 40px; /* space inside the box */ - border-radius: 12px; /* rounded corners */ +h1,h2,h3,h4,h5,h6 { + font-family: "Segoe UI", Arial, sans-serif; + font-weight: 400; + margin: 10px 0; } +h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } +h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px } -#container #avatar{border-radius:50%;margin-bottom:-.75em} -#container #title{font-size:4em} -#container #text{line-height:1.375} -#container #links{margin-top:1.25em;white-space:nowrap;letter-spacing:.5em;line-height:2} -@media all and (max-width:1000px){#brave-shill{margin-top:.35em;max-width:100%;border-radius:.5em}} -@media all and (min-width:1001px){#brave-shill{margin-top:.35em;width:50%;border-radius:.5em}}a{color:#1ee9ff;text-decoration:none} -#container #links a{user-select:none;text-decoration:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none} -.icon{width:24px} +a { background: transparent; color: inherit; text-decoration: none } +img { max-width: 100%; height: auto; vertical-align: middle; border: 0 } + +/* Tables */ +.w3-table, .w3-table-all { border-collapse: collapse; width: 100% } +.w3-table-all { border: 1px solid #ccc } +.w3-table td, .w3-table th, +.w3-table-all td, .w3-table-all th { + padding: 8px; text-align: left; vertical-align: top +} +.w3-bordered tr, .w3-table-all tr { border-bottom: 1px solid #ddd } +.w3-striped tbody tr:nth-child(even), +.w3-table-all tr:nth-child(even) { background: #f1f1f1 } + +/* Buttons */ +.w3-button, .w3-btn { + display: inline-block; padding: 8px 16px; + border: none; cursor: pointer; background: inherit; color: inherit; + text-align: center; white-space: nowrap; + user-select: none; -webkit-user-select: none; +} +.w3-button:hover { background: #ccc; color: #000 } + +/* Lists */ +.w3-ul { list-style: none; margin: 0; padding: 0 } +.w3-ul li { padding: 8px 16px; border-bottom: 1px solid #ddd } +.w3-ul li:last-child { border-bottom: none } + +/* Containers */ +.w3-container, .w3-panel { padding: 0.01em 16px } +.w3-panel { margin: 16px 0 } + +/* Grid */ +.w3-row:after, .w3-row-padding:after, .w3-clear:after { + content: ""; display: table; clear: both +} +.w3-col { float: left; width: 100% } +@media (min-width:601px) { .w3-col.m6 { width: 50% } } +@media (min-width:993px) { .w3-col.l4 { width: 33.33% } } + +/* Cards */ +.w3-card { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.12) } +.w3-card-4 { box-shadow: 0 4px 10px rgba(0,0,0,0.2), 0 4px 20px rgba(0,0,0,0.19) } + +/* Utilities */ +.w3-hide { display: none !important } +.w3-show { display: block !important } +.w3-center { text-align: center !important } +.w3-left { float: left !important } +.w3-right { float: right !important } +.w3-round { border-radius: 4px } +.w3-circle { border-radius: 50% } + +/* Colors (sample subset) */ +.w3-red { background: #f44336 !important; color: #fff !important } +.w3-green { background: #4CAF50 !important; color: #fff !important } +.w3-blue { background: #2196F3 !important; color: #fff !important } +.w3-yellow { background: #ffeb3b !important; color: #000 !important } +.w3-black { background: #000 !important; color: #fff !important } +.w3-white { background: #fff !important; color: #000 !important } +.w3-grey, .w3-gray { background: #9e9e9e !important; color: #000 !important } + +/* Text Colors */ +.w3-text-red { color: #f44336 !important } +.w3-text-green { color: #4CAF50 !important } +.w3-text-blue { color: #2196F3 !important } +.w3-text-black { color: #000 !important } +.w3-text-white { color: #fff !important }