CSS   73

infographic css

Guest on 5th May 2022 02:10:49 AM

  1. .container.content { padding:0; border:none; background-color:#fff; }
  2.  
  3. .mmi-sect {
  4.     padding:0;
  5.     margin:0;
  6.     position: relative;
  7. }
  8. .mmi-sect .red { color:#ee3b33 }
  9. .mmi-sect .bold { font-family: AvenirNextLTProBold; }
  10. .mmi-sect .red-bold { color:#ee3b33; font-family: AvenirNextLTProBold; }
  11.  
  12. .mmi-sect img {
  13.     margin:0;
  14.     border:none;
  15.     width:100%;
  16. }
  17. .mmi-sect div { position:absolute; top:0; left:0; }
  18.  
  19. .mmi-sect .box-circ-lt {
  20.     text-align: center;
  21.     width: 28vw; /*background-color:orange;*/
  22.     color: #e6e7e8;
  23.     font-family: AvenirNextLTProBold;
  24.     font-size: 3vw;
  25.     letter-spacing: 0;
  26. }
  27.  
  28. .mmi-sect .box-circ-rt {
  29.     width: 38vw; /*background-color:lightblue;*/
  30.     font-family: AvenirNextLTProRegular;
  31.     color: #000;
  32.     font-size: 2.5vw;
  33.     left:52vw;
  34. }
  35.  
  36. .mmi-sect .two-rect-lt {
  37.     width: 32vw; /*background-color:salmon;*/
  38.     color: #fff;
  39.     font-family: AvenirNextLTProRegular;
  40.     font-size: 2.5vw;
  41. }
  42.  
  43. @media (min-width: 1088px) {
  44.     .mmi-sect .box-circ-lt {
  45.         width: 296px;
  46.         font-size: 32px;
  47.     }
  48.  
  49.     .mmi-sect .box-circ-rt {
  50.         width: 407px; /*background-color:lightblue;*/
  51.         font-size: 27px;
  52.         left: 565px;
  53.     }
  54.  
  55.     .mmi-sect .two-rect-lt {
  56.         width: 342px; /*background-color:salmon;*/
  57.         font-size: 27px;
  58.     }
  59. }
  60.  
  61. #mmi-02 .d1 {
  62.     font-family: AvenirNextLTProRegular;
  63.     color: #fff;
  64.     font-size: 3vw;
  65.     width: 100%;
  66.     padding: 4vw 10vw;
  67. }
  68.  
  69. /* MMI 03 */
  70. #mmi-03 .d1 { /* THE PROCESS */
  71.     top: 3.5vw;
  72.     left: 8.6vw;
  73.     color: #fff;
  74.     font-family: AvenirNextLTProBold;
  75.     font-size: 4vw;
  76.     letter-spacing: 0.25vw;
  77. }
  78.  
  79.  
  80. #mmi-03 .d2 { /* STUDENT ASSESSMENTS */
  81.     top: 16.2vw;
  82.     left: 9vw;
  83. }
  84. #mmi-03 .d3 { top:14vw; }
  85. #mmi-03 .d4 { top:33vw; }
  86.  
  87. /* MMI 04 */
  88. #mmi-04 .d1 {
  89.     top: 6vw;
  90.     left: 11vw;
  91. }
  92.  
  93. /* MMI 05 */
  94. #mmi-05 .d1 { /* CUSTOMIZED LEARNING PLAN */
  95.     top: 8.25vw;
  96.     left: 8.9vw;
  97. }
  98. #mmi-05 .d2 { top:6vw; }
  99. #mmi-05 .d3 { top:23vw; }
  100.  
  101. /* MMI 06 */
  102. #mmi-06 .d1 {
  103.     top: 4.5vw;
  104.     left: 11vw;
  105. }
  106.  
  107. /* MMI 07 */
  108. #mmi-07 .d1 { /* HIGHLY TRAINED INSTRUCTORS */
  109.     top: 7vw;
  110.     left: 10.5vw;
  111.     width: 25vw;
  112. }
  113. #mmi-07 .d2 { top:6vw; }
  114. #mmi-07 .d3 { top:23vw; }
  115.  
  116. /* MMI 08 */
  117. #mmi-08 .d1 { /* 1:4 ratio */
  118.     top: 6.5vw;
  119.     left: 10.5vw;
  120. }
  121.  
  122. /* MMI 09 */
  123. #mmi-09 .d1 {
  124.     top: 2vw;
  125.     left: 0vw;
  126.     width: 100%;
  127.     color: #000;
  128.     text-align: center;
  129.     font-family: AvenirNextLTProBold;
  130.     font-size: 4.8vw;
  131.     letter-spacing: 0.1vw;
  132. }
  133.  
  134. /* MMI 11 */
  135. #mmi-11 .d1 {
  136.     top: 6vw;
  137.     left: 0vw;
  138.     width: 100%;
  139.     color: #fff;
  140.     text-align: center;
  141.     font-family: AvenirNextLTProBold;
  142.     font-size: 4.5vw;
  143.     letter-spacing: 0.1vw;
  144. }
  145.  
  146. #mmi-11 .d2 {
  147.     top: 23vw;
  148.     left: 30vw;
  149.     width: 60vw;
  150.     font-family: AvenirNextLTProRegular;
  151.     color: #fff;
  152.     font-size: 2.7vw;
  153. }
  154.  
  155. /* MMI 12 */
  156. #mmi-12 div {
  157.     top: auto;
  158.     bottom: 3vw;
  159.     width: 23vw;
  160.     font-family: AvenirNextLTProRegular;
  161.     color: #000;
  162.     font-size: 2.4vw;
  163.     letter-spacing: -0.1vw;
  164. }
  165.  
  166. #mmi-12 .d1 {
  167.     left: 8.7vw;
  168.     bottom: 6vw;
  169. }
  170.  
  171. #mmi-12 .d2 {
  172.     left: 37.7vw;
  173.     bottom: 5vw;
  174. }
  175.  
  176. #mmi-12 .d3 {
  177.     left: 66.6vw;
  178.     bottom: 4.5vw;
  179. }
  180.  
  181. /* MMI 13 */
  182. #mmi-13 div {
  183.     width: 40vw;
  184.     top: 7.5vw;
  185.     left: 7.5vw;
  186.     font-family: AvenirNextLTProRegular;
  187.     color: #000;
  188.     font-size: 2.7vw;
  189.     line-height: 4.4vw;
  190.     letter-spacing: -0.1vw;
  191. }
  192.  
  193. /* MMI 14 */
  194. #mmi-14 .d1 {
  195.     top: 7.6vw;
  196.     left: 6vw;
  197.     font-family: AvenirNextLTProRegular;
  198.     color: #000;
  199.     font-size: 2vw;
  200. }
  201.  
  202. #mmi-14 a {
  203.     display: block;
  204.     color: #000;
  205.     margin-bottom: 1vw;
  206. }
  207.  
  208. #mmi-14 p {
  209.     font-size: 1.8vw;
  210. }
  211.  
  212.  
  213. @media (min-width: 1088px) {
  214.     #mmi-02 .d1 { font-size:33px; padding:44px 109px; }
  215.  
  216.     /* MMI 03 */
  217.     #mmi-03 .d1 { /* THE PROCESS */
  218.         top: 39px;
  219.         left: 94px;
  220.         font-size: 43px;
  221.         letter-spacing: 2px;
  222.     }
  223.     #mmi-03 .d2 { top:177px; left:102px; } /* STUDENT ASSESSMENTS */
  224.     #mmi-03 .d3 { top:152px; }
  225.     #mmi-03 .d4 { top:360px; }
  226.  
  227.     /* MMI 04 */
  228.     #mmi-04 .d1 { top:62px; left:118px; }
  229.  
  230.     /* MMI 05 */
  231.     #mmi-05 .d1 { top:91px; left:102px; }/* CUSTOMIZED LEARNING PLAN */
  232.     #mmi-05 .d2 { top:66px; }
  233.     #mmi-05 .d3 { top:248px; }
  234.  
  235.     /* MMI 06 */
  236.     #mmi-06 .d1 { top:49px; left:118px; }
  237.  
  238.     /* MMI 07 */
  239.     #mmi-07 .d1 { /* HIGHLY TRAINED INSTRUCTORS */
  240.         top: 74px;
  241.         left: 115px;
  242.         width: 272px;
  243.     }
  244.     #mmi-07 .d2 { top:65px; }
  245.     #mmi-07 .d3 { top:249px; }
  246.  
  247.     /* MMI 08 */
  248.     #mmi-08 .d1 { top:70px; left:113px; } /* 1:4 ratio */
  249.  
  250.     /* MMI 09 */
  251.     #mmi-09 .d1 { /* THE TECHNIQUES */
  252.         top: 22px;
  253.         left: 0;
  254.         font-size: 52px;
  255.         letter-spacing: 1px;
  256.     }
  257.  
  258.     /* MMI 11 */
  259.     #mmi-11 .d1 { /* THE RESULTS */
  260.         top: 66px;
  261.         left: 0;
  262.         font-size: 48px;
  263.         letter-spacing: 2px;
  264.     }
  265.  
  266.     #mmi-11 .d2 {
  267.         top: 251px;
  268.         left: 327px;
  269.         width: 620px;
  270.         font-size: 28px;
  271.         letter-spacing:0;
  272.     }
  273.  
  274.     /* MMI 12 - 3 COL STATS */
  275.     #mmi-12 div {
  276.         top: auto;
  277.         width: 250px;
  278.         font-size: 26px;
  279.         letter-spacing: -1px;
  280.     }
  281.     #mmi-12 .d1 { left:97px; bottom:66px; }/* 88% */
  282.     #mmi-12 .d2 { left:411px; bottom:55px; }
  283.     #mmi-12 .d3 { left:725px; bottom:48px; }
  284.  
  285.     /* MMI 13 */
  286.     #mmi-13 div { /* Whether a child */
  287.         width: 435px;
  288.         top: 83px;
  289.         left: 82px;
  290.         font-size: 30px;
  291.         line-height: 45px;
  292.         letter-spacing: -1px;
  293.     }
  294.  
  295.     /* MMI 14 */
  296.     #mmi-14 .d1 { top:84px; left:66px; font-size:22px; }
  297.     #mmi-14 a { margin-bottom: 10px; }
  298.     #mmi-14 p { font-size: 20px; }
  299. }
  300.  
  301. @media (max-width: 700px) {
  302.     #mmi-13 div { width:39vw; }
  303.     #mmi-12 .d1 { left: 8.7vw; }
  304.     #mmi-12 .d2 { left: 50%; margin-left:-11vw; /*left:37.2vw;*/ }
  305.     #mmi-12 .d3 { left: auto; right:8.5vw; letter-spacing:-0.2vw; }
  306. }

Raw Paste

Login or Register to edit or fork this paste. It's free.