_section.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. #start{
  2. margin-top: 40px;
  3. //home
  4. .item{
  5. display: flex;
  6. flex-wrap: wrap;
  7. .card{
  8. position: relative;
  9. width: calc((100% / 3) - 3.5px);
  10. overflow-y: hidden;
  11. padding-bottom: 5px;
  12. &:nth-child(3n+2){
  13. margin: 0 5px;
  14. }
  15. .card-image:hover{
  16. transition: all 0.6s;
  17. background-color: rgb(0, 255, 0);
  18. img{
  19. transition: all .6s;
  20. mix-blend-mode: multiply;
  21. opacity: .95;
  22. }
  23. & ~ .card-title{
  24. top: 50%;
  25. left: 50%;
  26. opacity: 1;
  27. transition: all 1s;
  28. }
  29. }
  30. .card-title{
  31. pointer-events: none;
  32. position: absolute;
  33. left: 50%;
  34. opacity: 0;
  35. transition: all 1s;
  36. transform: translateX(-50%);
  37. }
  38. }
  39. }
  40. //pageprojet
  41. .content-item{
  42. .e-content{
  43. display: flex;
  44. height: 100%;
  45. }
  46. .media{
  47. width: calc((100% / 3) * 2);
  48. }
  49. .content{
  50. width: calc(100% / 3);
  51. height: calc(100vh - 40px);
  52. .txt{
  53. position: fixed;
  54. right: 0;
  55. width: calc(100% / 3);
  56. height: calc(100% - 90px);
  57. padding: 20px 30px 0px 30px;
  58. overflow-x: auto;
  59. h3{
  60. margin: 0px 0 10px 0;
  61. }
  62. }
  63. .taxonomy{
  64. width: calc(100% / 3);
  65. height: auto;
  66. background: white;
  67. position:fixed;
  68. bottom: 0;
  69. span{
  70. margin: auto 0;
  71. .row{
  72. border-top: 2px solid black;
  73. display: flex;
  74. flex-wrap: wrap;
  75. justify-content: space-between;
  76. a{
  77. margin: 10px 30px;
  78. }
  79. }
  80. }
  81. }
  82. }
  83. }
  84. //page news
  85. .news{
  86. width: calc(100% / 7 );
  87. height: auto;
  88. padding: 20px;
  89. h3{
  90. pointer-events: none;
  91. margin-bottom: 10px;
  92. }
  93. }
  94. .about{
  95. width: calc(100% / 3 );
  96. height: auto;
  97. padding: 20px;
  98. h3{
  99. pointer-events: none;
  100. margin-bottom: 10px;
  101. }
  102. }
  103. }