diff options
| -rw-r--r-- | .idea/misc.xml | 8 | ||||
| -rw-r--r-- | about/index.php | 70 | ||||
| -rw-r--r-- | assets/.DS_Store | bin | 6148 -> 6148 bytes | |||
| -rw-r--r-- | assets/about/cinema.png | bin | 0 -> 1255 bytes | |||
| -rw-r--r-- | assets/about/computers.png | bin | 0 -> 1578 bytes | |||
| -rw-r--r-- | assets/about/linux.png | bin | 0 -> 3738 bytes | |||
| -rw-r--r-- | assets/about/mlp.png | bin | 0 -> 3005 bytes | |||
| -rw-r--r-- | assets/about/music.png | bin | 0 -> 1899 bytes | |||
| -rw-r--r-- | assets/about/opensource.png | bin | 0 -> 2194 bytes | |||
| -rw-r--r-- | assets/about/photography.png | bin | 0 -> 2551 bytes | |||
| -rw-r--r-- | assets/about/vector.png | bin | 0 -> 1886 bytes | |||
| -rw-r--r-- | assets/css/main.css | 43 |
12 files changed, 111 insertions, 10 deletions
diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 283b9b4..0000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,8 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<project version="4"> - <component name="SwUserDefinedSpecifications"> - <option name="specTypeByUrl"> - <map /> - </option> - </component> -</project>
\ No newline at end of file diff --git a/about/index.php b/about/index.php index 65ed9c4..19d4d8a 100644 --- a/about/index.php +++ b/about/index.php @@ -6,8 +6,74 @@ <h1 class="text-center">My name is <span id="scoots">Scootaloo</span>!</h1> <h3 class="text-center">I'm the computer pegasus</h3> - <p>TODO: Add some sort of circles with things I like (MLP, computers, Linux, OSS, music, video, photography, graphical design)</p> - <div id="circles"></div> + <div id="circles"> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/mlp.png" alt=""> + </div> + <div class="circle-text"> + My Little Pony + </div> + </div> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/computers.png" alt=""> + </div> + <div class="circle-text"> + Computers + </div> + </div> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/linux.png" alt=""> + </div> + <div class="circle-text"> + Linux + </div> + </div> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/opensource.png" alt=""> + </div> + <div class="circle-text"> + Open-source + </div> + </div> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/music.png" alt=""> + </div> + <div class="circle-text"> + Music + </div> + </div> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/cinema.png" alt=""> + </div> + <div class="circle-text"> + Cinema + </div> + </div> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/photography.png" alt=""> + </div> + <div class="circle-text"> + Photography + </div> + </div> + <div class="circle"> + <div class="circle-icon"> + <img class="circle-icon-img" src="/assets/about/vector.png" alt=""> + </div> + <div class="circle-text"> + Graphic design + </div> + </div> + </div> + + <br> <p><b>Info about me:</b></p> <table class="table"> diff --git a/assets/.DS_Store b/assets/.DS_Store Binary files differindex b5705ab..240b9d3 100644 --- a/assets/.DS_Store +++ b/assets/.DS_Store diff --git a/assets/about/cinema.png b/assets/about/cinema.png Binary files differnew file mode 100644 index 0000000..5c2bdb8 --- /dev/null +++ b/assets/about/cinema.png diff --git a/assets/about/computers.png b/assets/about/computers.png Binary files differnew file mode 100644 index 0000000..7673b05 --- /dev/null +++ b/assets/about/computers.png diff --git a/assets/about/linux.png b/assets/about/linux.png Binary files differnew file mode 100644 index 0000000..9f9689d --- /dev/null +++ b/assets/about/linux.png diff --git a/assets/about/mlp.png b/assets/about/mlp.png Binary files differnew file mode 100644 index 0000000..39a5dcd --- /dev/null +++ b/assets/about/mlp.png diff --git a/assets/about/music.png b/assets/about/music.png Binary files differnew file mode 100644 index 0000000..c955749 --- /dev/null +++ b/assets/about/music.png diff --git a/assets/about/opensource.png b/assets/about/opensource.png Binary files differnew file mode 100644 index 0000000..2c985ff --- /dev/null +++ b/assets/about/opensource.png diff --git a/assets/about/photography.png b/assets/about/photography.png Binary files differnew file mode 100644 index 0000000..69ef5d9 --- /dev/null +++ b/assets/about/photography.png diff --git a/assets/about/vector.png b/assets/about/vector.png Binary files differnew file mode 100644 index 0000000..92e96d4 --- /dev/null +++ b/assets/about/vector.png diff --git a/assets/css/main.css b/assets/css/main.css index 8b401cf..e36eb3f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -196,4 +196,47 @@ pre { .table tr:nth-last-child(1) td { border: none !important; +} + +#circles { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-column-gap: 20px; + width: max-content; + margin-left: auto; + margin-right: auto; +} + +.circle-icon { + background-color: rgba(0, 0, 0, .25); + width: 100px; + height: 100px; + border-radius: 999px; + display: block; + margin: 10px auto; +} + +.circle-text { + text-align: center; +} + +.circle-icon-img { + filter: invert(1); + width: 64px; + height: 64px; + margin: 18px; +} + +@media (max-width: 1200px) { + #circles { + display: grid; + grid-template-columns: repeat(4, 1fr); + } +} + +@media (max-width: 600px) { + #circles { + display: grid; + grid-template-columns: repeat(2, 1fr); + } }
\ No newline at end of file |
