From 1e335c4411e05640177c43376e5583b97ffdf262 Mon Sep 17 00:00:00 2001 From: Vitor Oliveira Date: Thu, 11 Apr 2024 09:35:26 -0300 Subject: [PATCH] Add files via upload --- index.html | 80 +++++++++ style.css | 469 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 549 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..1894d60 --- /dev/null +++ b/index.html @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + +
+ + + + +
+


+
+ +
+ +

Front-End Web Developer

+ +

+ + + + + + + +

+
+ +
+

Projects

+
+

+ +
+ +

Anime Page

+

#HTMl5 #CSS# #JAVASCRIPT

+ + +
+ + + +
+ +

Music Player

+

#HTMl5 #CSS# #JAVASCRIPT

+ + +
+

+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..59929f5 --- /dev/null +++ b/style.css @@ -0,0 +1,469 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Source Code Pro", monospace; + font-optical-sizing: auto; + font-weight: 100; + +} + +body { + background: url(1j6F.gif); + background-size: fixed; + max-height: 100%; + text-rendering: optimizeLegibility; +} + +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 1.3rem 10%; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; +} + +.header::before { + content:''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, .1); + backdrop-filter: blur(2.1px); + z-index: -1; +} + +.header::after { + content:''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent); + transition: .5s; +} + +.header:hover::after { + left: 100%; +} + +.logo { + font-size: 2rem; + color: #fff; + text-decoration: none; + font-weight: 700; +} + +a { + color: black; + text-decoration: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + +} + +.navbar a { + font-size: 1.15rem; + margin: 5px; + color: #fff; + text-decoration: none; + font-weight: 500; +} + +#check { + display: none; + outline: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.icons { + position: absolute; + right: 5%; + font-size: 2.8rem; + color: #fff; + cursor: pointer; + display: none; +} + +h1 { + font-family: "Source Code Pro", monospace;; + text-align: center; + margin: 5px; + color: #fff; + font-size: 30px; +} + +/*Efeito vidro*/ + +.container-glass { + display: inline-block; + +} +.container-glass, +.container-glass::before, +.container-glass::after { + display: inline-block; + border-radius: 10px; + background-color: rgba(255, 255, 255, .2); + backdrop-filter: blur(1.5px); + box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.08); +} + +.container-glass { + display: inline-block; + margin: 5px; + margin-top: 20px; + margin-left: 150px; + height: 13%; + width: 35%; + padding: 1.5rem 1.5rem; + } + +.container-glass::before, +.container-glass::after { + border-radius: 15px; + content: ''; + position: absolute; + display: inline-block; + } + +.container-glass::before { + height: 40px; + width: 40px; + top: -10px; + left: -15px; + z-index: -1; + } + +.container-glass::after { + height: 40px; + width: 40px; + bottom: 20px; + right: -10px; + z-index: 2; + } + +.container-glass .img { + width: 100%; + border-radius: 7px; + } + + .container-glass .img1 { + width: 90%; + margin: 25px; + border-radius: 0px 50px 0px 50px; + border: 2px solid #fff; + } + + .container-glass .text { + + font-size: 18px; + color: #fff; + margin: 100px; + text-align: center; + } + + + .container-glass .btn { + height: 33.33%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #FFF; + background-color: transparent; + transition: all 0.5s; + position: relative; + + } + + .container-glass .btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background-color: rgba(255,255,255,0.1); + transition: all 0.3s; + + } + + .container-glass .btn:hover::before { + opacity: 0 ; + transform: scale(0.5,0.5); +} + +.container-glass .btn::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + opacity: 0; + transition: all 0.3s; + border: 1px solid rgba(255,255,255,0.5); + transform: scale(1.2,1.2); +} + .container-glass .btn:hover::after { + opacity: 1; + transform: scale(1,1); +} + + mark { + border-radius: 20px; + background-color: rgba(255,255,255,0.1); + color: #fff; + } + + .text1 { + word-spacing: 1px; + font-size: 18px; + color: #fff; + text-align: center; + } + + + /*estilo dos cards + .card-wrap{ + + display: inline-block; + margin: 5px; + margin-left: 20px; + width: 100px; + background-color: rgba(255, 255, 255, .15); + backdrop-filter: blur(2px); + border-radius: 20px; + border: none; + overflow: hidden; + color: var(--color-text); + box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, + rgba(0, 0, 0, 0.23) 0px 6px 6px; + cursor: pointer; + transition: all .2s ease-in-out; + }*/ + + .card-header{ + height: 100px; + width: 100%; + background: none; + border-radius:100% 0% 100% 0% / 0% 50% 50% 100%; + display: grid; + place-items: center; + + } + + i{ + color: #fff; + font-size: 25px; + } + .card-content{ + display: flex; + flex-direction: column; + align-items: center; + width: 60%; + margin: 0 auto; + } + .card-title{ + text-align: center; + text-transform: uppercase; + font-size: 16px; + margin-top: 10px; + margin-bottom: 20px; + + } + .card-text{ + text-align: center; + font-size: 12px; + margin-bottom: 20px; + } + .card-btn{ + border: none; + border-radius: 100px; + padding: 3px 10px; + color: none; + margin-bottom: 15px; + text-transform: uppercase; + } + + .rodape { + text-decoration: none; + color: white; + font-size: 18px; + cursor: pointer; + padding: 15px 10px; + text-align: center; + background-color: rgba(255, 255, 255, .15); + backdrop-filter: blur(1px); + font: 'Poppins', serif; + display: block; + } + +@media (max-width: 992px) { + .header { + padding: 1.3rem 5%; + } +} + +/*mobile*/ +@media (max-width: 768px) { + + + + .icons { + display: inline-flex; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + #check:checked~.icons #menu-icon { + display: none; + } + + .icons #close-icon { + display: none; + } + + #check:checked~.icons #close-icon { + display: block; + } + + .navbar { + position: absolute; + top: 100%; + left: 0; + height: 0; + width: 100%; + background: rgba(0, 0, 0, .1); + backdrop-filter: blur(2.2px); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1); + overflow: hidden; + transition: .7s ease; + } + + #check:checked~.navbar { + height: 50.0rem; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + .navbar a { + display: block; + font-size: 1.1rem; + margin: 1.98rem 0; + text-align: center; + transform: translateY(-50px); + opacity: o; + transition: .4s ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + #check:checked~.navbar a { + transform: translateY(0); + opacity: 1; + transition-delay: calc(.15s * var(--i)); + } + + .container-glass .img1 { + width: 70%; + margin-left: 45px; + border-radius: 0px 50px 0px 50px; + } + + .container-glass { + margin-top: 20px; + margin-left: 35px; + height: 80%; + position: relative; + padding: 2rem 1.5rem; + width: 85%; + max-width: 100%; + } + + .text1 { + word-spacing: 1px; + font-size: 18px; + color: #fff; + text-align: center; + } + + .container-glass .text { + word-spacing: 0px; + font-size: 17px; + color: #fff; + text-align: justify; + } + + .container-glass .btn { + border-color:transparent; + margin-left: 30px; + height: 45px; + width: 35%; + font-size: 20px; + text-align: center; + display: inline-block; + justify-content: center; + align-items: center; + color: #FFF; + background-color: transparent; + transition: all 0.5s; + position: relative; + } + + .container-glass .btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background-color: rgba(255,255,255,0.1); + transition: all 0.3s; + } + + .container-glass .btn:hover::before { + opacity: 0 ; + transform: scale(0.5,0.5); +} + +.container-glass .btn::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + opacity: 0; + transition: all 0.3s; + border: 1px solid rgba(255,255,255,0.5); + transform: scale(1.2,1.2); +} + + .container-glass .btn:hover::after { + opacity: 1; + transform: scale(1,1); +} + +.rodape { + font-size: 7px; + text-decoration: none; + color: white; + font-size: 18px; + padding: 15px 10px; + text-align: center; + background-color: rgba(255, 255, 255, .15); + backdrop-filter: blur(5px); + font: 'Poppins', serif; + display: block; + } +}