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.3 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: 20px;
  138. right: 20px;
  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. }
  155. /* Ícones no canto inferior direito */
  156. .icons-container {
  157. position: fixed;
  158. bottom: 20px;
  159. right: 20px;
  160. display: flex;
  161. gap: 10px;
  162. -webkit-transform: scale(1.1);
  163. -moz-transform: scale(1.1);
  164. -o-transform: scale(1.1);
  165. -ms-transform: scale(1.1);
  166. transform: scale(1.1);
  167. }
  169. .icons-container a:hover img {
  170. filter: brightness(1.2); /* Ajuste o valor conforme necessário para o efeito desejado */
  171. }
  173. .icons-container a {
  174. text-decoration: none;
  175. }
  177. .icons-container img {
  178. width: 30px;
  179. height: 30px;
  180. }
  182. /* Estilos específicos para a tela de portfólio */
  184. /* Layout da tela de portfólio */
  185. .portfolio-screen {
  186. display: flex;
  187. flex-direction: column;
  188. align-items: center;
  189. }
  191. /* Seção do perfil na tela de portfólio */
  192. .profile-section {
  193. display: flex;
  194. justify-content: center;
  195. align-items: center;
  196. text-align: center;
  197. margin-bottom: 20px;
  198. }
  199. .profile-description h2 {
  200. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  201. }
  202. /* Estilo da descrição "Sou um desenvolvedor..." */
  203. .profile-description p {
  204. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  205. }
  207. /* Nova seção após o login */
  208. .profile-picture-small {
  209. width: 250px;
  210. height: 250px;
  211. border-radius: 50%;
  212. background-position: 50% 50%;
  213. background-repeat: no-repeat;
  214. background-size: cover;
  215. margin-right: 20px;
  216. align-items: left;
  217. box-shadow: 0 0 10px rgba(255, 255, 255, 0.557); /* Adiciona uma sombra branca */
  219. }
  221. .profile-description {
  222. max-width: 600px;
  223. color: rgb(255, 255, 255);
  224. font-size: 25px;
  225. margin: 0;
  226. text-align: left;
  227. }
  229. .technologies-icons {
  230. display: flex;
  231. justify-content: center;
  232. margin-top: 30px;
  233. }
  235. .technologies-icons img {
  236. width: 50px;
  237. height: 50px;
  238. margin: 0 10px;
  239. }
  241. /* Categorias na tela de portfólio */
  242. .categories {
  243. display: flex;
  244. gap: 20px;
  245. }
  247. .categories button {
  248. padding: 10px;
  249. background: #0078d4;
  250. color: #fff;
  251. border: none;
  252. border-radius: 6px;
  253. font-size: 16px;
  254. cursor: pointer;
  255. transition: background 0.3s ease, border 0.3s ease;
  256. }
  258. .categories button:hover {
  259. background: #005a9e;
  260. border: 2px solid #0078d4;
  261. }
  263. /* Conteúdo de cada categoria na tela de portfólio */
  264. .category-content {
  265. /* Estilo do conteúdo de cada categoria */
  266. /* Pode ser ajustado conforme necessário */
  267. }
  269. /* Ícones no canto inferior esquerdo */
  270. .left-icons-container {
  271. position: fixed;
  272. bottom: 20px;
  273. left: 50%;
  274. transform: translateX(-50%);
  275. display: flex;
  276. gap: 15px;
  277. align-items: center;
  278. }
  280. .left-icons-container a {
  281. text-decoration: none;
  282. transition: transform 0.2s ease-in-out;
  283. }
  285. .left-icons-container img {
  286. width: 40px;
  287. height: 40px;
  288. background-position: 50% 50%;
  289. background-repeat: no-repeat;
  290. background-size: cover;
  291. border-radius: 5px;
  293. }
  295. .left-icons-container a:hover {
  296. transform: scale(1.2); /* Ajuste o valor conforme necessário para o efeito desejado */
  297. }
comments powered by Disqus