style.css 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. html {
  2. scroll-behavior: smooth;
  3. }
  4. body {
  5. background-color: #121212;
  6. font-family: Arial, sans-serif;
  7. }
  8. .main_container {
  9. display: flex;
  10. flex-direction: row;
  11. flex-wrap: wrap;
  12. margin-left: 3%;
  13. margin-right: 3%;
  14. gap: 2%;
  15. /*border: 0.5px solid rgb(208, 160, 236);*/
  16. }
  17. /*Container*/
  18. .text_container {
  19. position: relative;
  20. width: 42%;
  21. min-height: 70%;
  22. margin: 3%;
  23. display: flex;
  24. flex-direction: column;
  25. flex-wrap: wrap;
  26. justify-content: flex-start;
  27. border: 0.5px solid rgb(255, 255, 255);
  28. }
  29. .img_container {
  30. margin: 3%;
  31. min-height: 40%;
  32. width: 42%;
  33. padding-top: 1.5%;
  34. display: flex;
  35. flex-direction: column;
  36. align-items: flex-start;
  37. border: 0.5px solid rgb(255, 255, 255);
  38. }
  39. /*Content Classes*/
  40. .main_text {
  41. order: 0;
  42. padding: 2%;
  43. margin: 3%;
  44. text-align: left;
  45. border-radius: 0px;
  46. color: white;
  47. align-self: flex-start;
  48. /*border: 0.5px solid white;*/
  49. }
  50. .main_img {
  51. position: static;
  52. justify-self: center;
  53. margin-left: 26%;
  54. width: 45%;
  55. height: auto;
  56. border-radius: 60%;
  57. object-fit: cover;
  58. /*border: 0.5px solid rgb(227, 27, 143);*/
  59. }
  60. .projects {
  61. order: 1;
  62. padding: 2%;
  63. margin: 3%;
  64. margin-top: 5.5%;
  65. text-align: left;
  66. border-radius: 0px;
  67. align-self: flex-start;
  68. color: white;
  69. /*border: 0.5px solid white;*/
  70. }
  71. .contacts {
  72. order: 2;
  73. padding: 2%;
  74. margin: 3%;
  75. text-align: left;
  76. border-radius: 0px;
  77. align-self: flex-start;
  78. color: white;
  79. /*border: 0.5px solid white;*/
  80. }
  81. .webring {
  82. display: flex;
  83. justify-content: center;
  84. }
  85. footer {
  86. display: flex;
  87. justify-content: center;
  88. color: whitesmoke;
  89. }