diff options
| author | echo <91651232+exhq@users.noreply.github.com> | 2022-10-12 22:05:15 +0330 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-12 22:05:15 +0330 |
| commit | 214efe59df7aade68c2baaab0734af92baac221a (patch) | |
| tree | c20c11f5894597db4de41ee71ad2fb95edd53266 /styles.css | |
| parent | 399aa393b8810bbea265fdb23d3c3ac9ffe72658 (diff) | |
| parent | f8eb6448a4d4f10dfa19bdf2c79691c0e9de55f3 (diff) | |
| download | exhq.github.io-214efe59df7aade68c2baaab0734af92baac221a.tar.gz exhq.github.io-214efe59df7aade68c2baaab0734af92baac221a.tar.bz2 exhq.github.io-214efe59df7aade68c2baaab0734af92baac221a.zip | |
Merge pull request #7 from oxi1224/main - also my css is amazing thank you very much
change bad CSS + make text move
Diffstat (limited to 'styles.css')
| -rw-r--r-- | styles.css | 304 |
1 files changed, 304 insertions, 0 deletions
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d213064 --- /dev/null +++ b/styles.css @@ -0,0 +1,304 @@ +@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
+
+/* Declare color variables */
+:root{
+ --title-color: #ff80a4;
+ --text-color: #ff2674;
+ --background-color: #202124;
+ --nav-background-color: #333;
+}
+
+/* make the scrolling smooth */
+html, body{
+ scroll-behavior: smooth;
+ overflow-x: hidden;
+}
+
+.header{
+ color: var(--background-color);
+ padding: 10px;
+ font-size: 40px;
+ font-weight: bold;
+ text-align: center;
+ font-family: 'google sans', serif;
+ animation: colorchange 7s infinite alternate;
+}
+
+.java{
+ vertical-align: middle;
+ font-size: 10px;
+}
+
+.javaimg{
+ margin-left: 20%;
+ width: 50px;
+ height: 50px;
+ vertical-align: middle;
+}
+
+.rustimg{
+ margin-left: 2.6%;
+ width: 50px;
+ height: 50px;
+ vertical-align: middle;
+}
+
+.topnav{
+ /* make the navbar follow the scroll */
+ position: fixed;
+ top: 0;
+ left: 0;
+ margin: auto;
+ border: 1px solid var(--background-color);
+ box-shadow: 0px 0px 10px var(--background-color);
+ z-index: 1;
+ background-color: var(--nav-background-color);
+ overflow: hidden;
+ width: 100%;
+}
+
+.downnav{
+ /* make the navbar follow the scroll */
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ margin: auto;
+ overflow: hidden;
+ border: 1px solid var(--background-color);
+ box-shadow: 0px 0px 6px var(--background-color);
+ z-index: 1;
+ background-color: var(--nav-background-color);
+}
+
+.imsotired{
+ margin-left: 1%;
+ font-family: 'fira sans', serif;
+ color: var(--title-color);
+}
+
+.topnav a{
+ user-select: none;
+ float: left;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-family: "google sans";
+ font-size: 15px;
+}
+
+.topnav a:hover{
+ background-color: #ddd;
+ color: black;
+}
+
+.topnav a.active{
+ background-color: var(--title-color);
+ color: white;
+}
+
+.java{
+ width: 5%;
+ font-family: 'fira sans', serif;
+ color: var(--title-color);
+ padding: 10px;
+ font-size: 40px;
+ font-weight: bold;
+ margin-left: 10%;
+ margin-top: 30px;
+}
+
+.notjava{
+ margin-left: 3%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+}
+
+.data{
+ font-family: 'fira sans', serif;
+ color: var(--title-color);
+ padding: 10px;
+ font-size: 40px;
+ font-weight: bold;
+ margin-left: 10%;
+ margin-top: 30px;
+}
+
+.header span::before{
+ pointer-events: all;
+ content: "does ";
+ color: #fff;
+ animation: colorchange 5s infinite alternate;
+}
+
+.being{
+ margin-left: 11%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+ font-size: 120%
+}
+
+
+.tooltip{
+ position: relative;
+ display: inline-block;
+ margin-left: 13%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+ font-size: 120%
+}
+
+.tooltip .tooltiptext{
+ visibility: hidden;
+ width: 120px;
+ color: var(--title-color);
+ text-align: center;
+ border-radius: 6px;
+ padding: 5px 0;
+ position: absolute;
+ z-index: 1;
+ border:0px solid black;
+ bottom: 100%;
+ left: 50%;
+ margin-left: -60px;
+ background-color:#ff267665;
+ opacity: 0;
+ transition: opacity 1s;
+}
+
+.tooltip:hover .tooltiptext{
+ visibility: visible;
+ opacity: 1;
+}
+
+.shh{
+text-decoration: none;
+font-family: 'fira sans';
+font-size: 120%;
+color: var(--title-color);
+}
+
+.aboutme{
+ margin-left: 13%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+ font-size: 120%
+}
+
+.goimg{
+ width: 50px;
+ height: 50px;
+ vertical-align: middle;
+ margin-left: 10%;
+}
+
+@keyframes colorchange{
+ 0% {
+ color: #16171a;
+ }
+ 10% {
+ color: #7f0622;
+ }
+ 20% {
+ color: #d62411;
+ }
+ 30% {
+ color: #ff8426;
+ }
+ 40% {
+ color: #ffd100;
+ }
+ 50% {
+ color: #fafdff;
+ }
+ 60% {
+ color: #ff80a4;
+ }
+ 70% {
+ color: #ff2674;
+ }
+ 80% {
+ color: #94216a;
+ }
+ 90% {
+ color: #234975;
+ }
+ 100% {
+ color: pink;
+ }
+ }
+
+.mebeinguseless{
+ color: var(--title-color);
+ padding: 10px;
+ font-size: 15px;
+ font-weight: bold;
+ text-align: center;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.runaway{
+ color: var(--text-color);
+ padding: 10px;
+ font-size: 15px;
+ font-weight: bold;
+ text-align: center;
+ white-space: no-wrap;
+ font-family: 'fira sans';
+}
+
+.cover{
+ position: absolute;
+ left: 10.5%;
+
+}
+
+#b {
+ width: fit-content;
+ margin-left: 10vw;
+}
+
+.me{
+ width: 50%;
+ margin-left: 25%;
+ transform: scale(0.75);
+ margin-bottom: -60px
+}
+
+html{
+ background-color: var(--background-color);
+}
+
+.go{
+ font-weight: 9000;
+ font-size: 120%;
+}
+
+
+.languages-wrapper{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(3, 1fr);
+}
+
+.jsimg {
+ margin-left: 10%;
+}
+
+@media only screen and (max-width: 900px) {
+ /* .data{
+ margin-left: 0
+ } */
+ .javaimg{
+ margin-left: 0;
+ }
+ .jsimg {
+ margin-left: 0;
+ }
+}
+.none{
+ display: none;
+}
\ No newline at end of file |