using w3 templates to learn
This commit is contained in:
116
resources/css/index.css
Normal file → Executable file
116
resources/css/index.css
Normal file → Executable file
@@ -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 }
|
||||
|
||||
Reference in New Issue
Block a user