CSS   24
middle computerscience css
Guest on 18th September 2023 08:04:41 AM


  1. /* MAIN SECTION */
  2. div#main-container {
  3.     width: 100%;
  4.     background-image: url('../images/bg-tile.jpg');
  5. }
  6. main {
  7.     width: 988px;
  8.     max-width: 100%;
  9.     display: flex;
  10.     margin: 0 auto;
  11.     flex-direction: row; /* aside and section are side-by-side */
  12. }
  13. main aside#left-sidebar {
  14.     width: 256px;
  15.     height: auto;
  16.     flex-grow: 1;
  17.     background-color: #535351;
  18. }
  19. main aside#left-sidebar nav#left-nav {
  20.     margin-bottom: 80px;
  21. }
  22. main aside#left-sidebar nav#left-nav ul {
  23.     font-size: 1em;
  24.     margin-left: 10px;
  25. }
  26. main aside#left-sidebar nav#left-nav ul li {
  27.     font-size: 1em;
  28.     padding: 10px 0 10px 10px;
  29.     display: block;
  30.     border-bottom: 0.5px solid rgba(255,255,255,0.5);
  31. }
  32. main aside#left-sidebar nav#left-nav ul li ul li {
  33.     font-size: 0.9em;
  34.     padding: 10px 0 10px 10px;
  35.     display: block;
  36.     border-bottom: none;
  37. }
  38. main aside#left-sidebar nav#left-quicklinks ul {
  39.     font-size: 1.2em;
  40.     margin-left: 10px;
  41. }
  42. main aside#left-sidebar nav#left-quicklinks ul li {
  43.     padding: 10px 0 10px 10px;
  44.     display: block;
  45.     border-top: 1.5px solid #fff;
  46. }
  47. main aside#left-sidebar nav#left-quicklinks ul li:last-child {
  48.     border-bottom: 1.5px solid #fff;
  49. }
  50. main section#right-section {
  51.     width: calc(100% - 256px);
  52.     height: auto;
  53.     flex-grow: 1;
  54.     background-color: rgb(242, 240, 229);
  55.     color: #000;
  56.     position: relative;
  57. }
  58. main section#right-section div#page-banner-image {
  59.     max-width: 733px;
  60.     width: 100%;
  61.     background-image: url('../images/uscb-computational-science-placeholder-banner.png');
  62.     background-size: contain;
  63.     background-repeat: no-repeat;
  64.     height: 0;
  65.     max-height: 202px;
  66.     padding-bottom: 27.55%; /* 202 / 733 = 27.55% */
  67.                             /* This is a bit of a trick to ensure that
  68.                                the #page-banner-image div height remains proportional
  69.                                to the div's width */
  70. }
  71. main section#right-section div#breadcrumbs  {
  72.     width: 100%;
  73.     padding-top: 10px;
  74.     text-align: right;
  75. }
  76. main section#right-section div#breadcrumbs p {
  77.     margin-right: 15px;
  78.     color: #535251;
  79.     font-size: 0.9em;
  80. }
  81. main section#right-section div#breadcrumbs a {
  82.     text-decoration: underline;
  83.     color: #535251;
  84. }
  85. main section#right-section div#breadcrumbs a:hover, main section#right-section div#breadcrumbs a:focus {
  86.     text-decoration: none;
  87. }
  88. main section#right-section div#breadcrumbs span {
  89.     font-weight: bold;
  90. }
  91. main section#right-section div#page-content {
  92.     margin: 0 25px 100px;
  93.  
  94. }
  95. main section#right-section div#page-content h1 {
  96.     font-weight: normal;
  97.     font-family: 'Economica', sans-serif;
  98.     margin: 10px auto;
  99.     color: #9c6409;
  100.     font-size: 2.3em;
  101. }
  102. main section#right-section div#page-content h2 {
  103.     font-weight: normal;
  104.     color: cadetblue;
  105.     margin: 10px auto;
  106.     font-size: 1.3em;
  107.     color: #009bd7;
  108. }
  109. main section#right-section div#page-content p {
  110.     font-size: 0.9em;
  111.     margin: 10px auto;
  112.     padding-bottom: 15px;
  113. }
  114. main section#right-section div#page-content a {
  115.     color: #9c6409;
  116.     text-decoration: underline;
  117. }
  118. main section#right-section div#page-content a:hover, main section#right-section div#page-content a:focus {
  119.     color: #9c182f;
  120.     text-decoration: none;
  121. }
  122. /* for RWD (Responsive Web Design) */
  123. @media only screen and (max-width: 580px) {
  124.     main {
  125.         width: 100%;
  126.         display: flex;
  127.         margin: 0 auto;
  128.         flex-direction: column-reverse; /* ensures section is stacked ABOVE aside */
  129.     }
  130.     main aside#left-sidebar {
  131.         width: 100%;
  132.         height: auto;
  133.         flex-grow: 1;
  134.         background-color: #535351;
  135.     }
  136.     main aside#left-sidebar nav#left-nav {
  137.         margin-bottom: 20px;
  138.     }
  139.     main section#right-section {
  140.         width: 100%;
  141.         height: auto;
  142.         flex-grow: 1;
  143.         background-color: rgb(242, 240, 229);
  144.         color: #000;
  145.     }
  146. }
  147.  
  148. /* styles for right-floated-div */
  149. #optional-right-floated-image {
  150.     float: right;
  151.     width: 210px;
  152.     height: 210px;
  153.     margin-left: 20px;
  154.     background-image:url('../images/sand-shark-logo.png');
  155.     background-size: contain;
  156. }
  157.  
  158. div#apply-now-button {
  159.     display: inline-block;
  160.     max-width: 344px;
  161.     width: calc(100% - 6px);
  162.     height: 50px;
  163.     line-height: 50px;
  164.     vertical-align: middle;
  165.     background-color: #3cb6ce; /* #ce372f; */
  166.     margin-bottom: 15px;
  167.     font-weight: bold;
  168.     text-align: center;
  169.     font-size: 21px;
  170.     border: 4px solid #21578a; /* #8e001c; */
  171.     box-shadow: 0px 4px 1px gray;
  172. }
  173.  
  174. div#apply-now-button:hover, div#apply-now-button:focus {
  175.     background-color: #21578a; /* #8e001c; */
  176.     color: white;
  177.     box-shadow: 0px 4px 1px gray;
  178. }
  179.  
  180. div#apply-now-button:active {
  181.     position: relative;
  182.     top: 4px;
  183.     box-shadow: none;
  184. }
  185.  
  186. a#apply-now-link {
  187.     max-width: 350px !important;
  188.     width: 100% !important;
  189.     height: 58px !important;
  190.     display: inline-block !important;
  191.     color: white !important;
  192.     text-decoration: none !important;
  193.     margin-bottom: 15px !important;
  194. }
Raw Paste

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