styles.css

SUBMITTED BY: Dudanet13

DATE: Dec. 9, 2023, 2:52 a.m.

UPDATED: Dec. 11, 2023, 1:02 p.m.

FORMAT: Text only

SIZE: 6.1 kB

History Raw Download

HITS: 609

Report
  1. /* Estilos gerais */
  3. /* Configurações básicas do corpo da página */
  4. body {
  5. font-family: 'Segoe UI', sans-serif;
  6. margin: 0;
  7. overflow: hidden;
  8. background: url('https://res.cloudinary.com/dudanet/image/upload/v1701841925/coloridos-azuis-arte-digital-imagem-de-fundo_b5hzuf.jpg') no-repeat center center fixed;
  9. background-size: cover;
  10. }
  12. /* Z-index para elementos específicos */
  13. .login-screen,
  14. .icons-container,
  15. .dark-mode-toggle {
  16. z-index: 1;
  17. }
  19. /* Estilo da tela de login */
  20. .login-screen {
  21. position: fixed;
  22. top: 50%;
  23. left: 50%;
  24. transform: translate(-50%, -50%);
  25. }
  27. .login-box {
  28. position: relative;
  29. background: #ffffff0e;
  30. padding: 20px;
  31. border-radius: 8px;
  32. box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  33. text-align: center;
  34. }
  36. /* Estilo da seção do perfil */
  37. .profile-picture {
  38. width: 160px;
  39. height: 160px;
  40. border-radius: 50%;
  41. background-position: 50% 50%;
  42. background-repeat: no-repeat;
  43. background-size: cover;
  44. margin: 0 auto 5px;
  45. box-shadow: 0 0 10px rgba(255, 255, 255, 0.557); /* Adiciona uma sombra branca */
  46. }
  48. .profile-name p {
  49. font-size: 32px;
  50. color: white;
  51. margin: 0 auto 5px;
  52. }
  54. /* Estilo da profissão */
  55. .profession {
  56. font-size: 5px;
  57. color: #9b99991c;
  58. text-align: right;
  59. margin-top: 10px;
  60. }
  62. /* Estilo do container de senha */
  63. .password-container {
  64. position: relative;
  65. display: flex;
  66. align-items: center;
  67. font-size: 18px;
  68. font-family: 'Segoe UI', sans-serif;
  69. margin-bottom: 25px;
  70. }
  72. .password-input {
  73. flex-grow: 1;
  74. }
  76. #password {
  77. width: 100%;
  78. padding: 12px 15px;
  79. text-align: center;
  80. border-radius: 6px;
  81. font-size: 14px;
  82. margin: 0;
  83. }
  85. /* Estilo do botão de mostrar/esconder senha */
  86. .password-toggle {
  87. position: relative;
  88. cursor: pointer;
  89. margin-left: 10px;
  90. }
  92. .password-toggle img {
  93. width: 20px;
  94. }
  96. /* Estilo do botão de login */
  97. button {
  98. padding: 12px 45px;
  99. background: #0078d4;
  100. color: #fff;
  101. border: none;
  102. border-radius: 6px;
  103. font-size: 16px;
  104. cursor: pointer;
  105. transition: background 0.3s ease, border 0.3s ease;
  106. -webkit-border-radius: 6px;
  107. -moz-border-radius: 6px;
  108. -ms-border-radius: 6px;
  109. -o-border-radius: 6px;
  110. }
  112. button:hover {
  113. background: #005a9e;
  114. border: 2px solid #0078d4;
  115. }
  117. /* Mensagem de erro */
  118. .error-message {
  119. color: #c6b1b1;
  120. margin-top: 10px;
  121. }
  123. /* Mensagem de carregamento */
  124. .loading-message {
  125. display: none;
  126. color: white;
  127. font-size: 20px;
  128. }
  130. /* Estilo do ícone de alternar modo escuro */
  131. .dark-mode-toggle:hover {
  132. filter: brightness(1.2); /* Ajuste o valor conforme necessário para o efeito desejado */
  133. }
  135. .dark-mode-toggle {
  136. position: fixed;
  137. top: 10px;
  138. right: 10px;
  139. display: flex;
  140. flex-direction: column;
  141. align-items: center;
  142. cursor: pointer;
  143. }
  145. .dark-mode-icon {
  146. width: 30px;
  147. margin-bottom: 5px;
  148. }
  150. .mode-label {
  151. color: white;
  152. font-size: 12px;
  153. margin: 0;
  154. }
  156. /* Ícones no canto inferior direito */
  157. .icons-container {
  158. position: fixed;
  159. bottom: 20px;
  160. right: 20px;
  161. display: flex;
  162. gap: 10px;
  163. }
  165. .icons-container a:hover img {
  166. filter: brightness(1.2); /* Ajuste o valor conforme necessário para o efeito desejado */
  167. }
  169. .icons-container a {
  170. text-decoration: none;
  171. }
  173. .icons-container img {
  174. width: 30px;
  175. height: 30px;
  176. }
  178. /* Estilos específicos para a tela de portfólio */
  180. /* Layout da tela de portfólio */
  181. .portfolio-screen {
  182. display: flex;
  183. flex-direction: column;
  184. align-items: center;
  185. }
  187. /* Seção do perfil na tela de portfólio */
  188. .profile-section {
  189. display: flex;
  190. justify-content: center;
  191. align-items: center;
  192. text-align: center;
  193. margin-bottom: 20px;
  194. }
  195. .profile-description h2 {
  196. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  197. }
  198. /* Estilo da descrição "Sou um desenvolvedor..." */
  199. .profile-description p {
  200. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  201. }
  203. /* Nova seção após o login */
  204. .profile-picture-small {
  205. width: 250px;
  206. height: 250px;
  207. border-radius: 50%;
  208. background-position: 50% 50%;
  209. background-repeat: no-repeat;
  210. background-size: cover;
  211. margin-right: 20px;
  212. align-items: left;
  213. box-shadow: 0 0 10px rgba(255, 255, 255, 0.557); /* Adiciona uma sombra branca */
  215. }
  217. .profile-description {
  218. max-width: 600px;
  219. color: rgb(255, 255, 255);
  220. font-size: 25px;
  221. margin: 0;
  222. text-align: left;
  223. }
  224. }
  226. .technologies-icons {
  227. display: flex;
  228. justify-content: center;
  229. margin-top: 30px;
  230. }
  232. .technologies-icons img {
  233. width: 50px;
  234. height: 50px;
  235. margin: 0 10px;
  236. }
  238. /* Categorias na tela de portfólio */
  239. .categories {
  240. display: flex;
  241. gap: 20px;
  242. }
  244. .categories button {
  245. padding: 10px;
  246. background: #0078d4;
  247. color: #fff;
  248. border: none;
  249. border-radius: 6px;
  250. font-size: 16px;
  251. cursor: pointer;
  252. transition: background 0.3s ease, border 0.3s ease;
  253. }
  255. .categories button:hover {
  256. background: #005a9e;
  257. border: 2px solid #0078d4;
  258. }
  260. /* Conteúdo de cada categoria na tela de portfólio */
  261. .category-content {
  262. /* Estilo do conteúdo de cada categoria */
  263. /* Pode ser ajustado conforme necessário */
  264. }
  266. /* Ícones no canto inferior esquerdo */
  267. .left-icons-container {
  268. position: fixed;
  269. bottom: 20px;
  270. left: 50%;
  271. transform: translateX(-50%);
  272. display: flex;
  273. gap: 15px;
  274. align-items: center;
  275. }
  277. .left-icons-container a {
  278. text-decoration: none;
  279. transition: transform 0.2s ease-in-out;
  280. }
  282. .left-icons-container img {
  283. width: 40px;
  284. height: 40px;
  285. border-radius: 50%;
  286. background-position: 50% 50%;
  287. background-repeat: no-repeat;
  288. background-size: cover;
  289. margin-right: 20px;
  290. }
  292. .left-icons-container a:hover {
  293. transform: scale(1.2); /* Ajuste o valor conforme necessário para o efeito desejado */
  294. }
comments powered by Disqus