Advertisement
Guest User

al-kane-csu

a guest
Apr 25th, 2019
141
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 21.56 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Charles Sturt University</title>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <link rel="shortcut icon" href="https://www.google.com/s2/favicons?domain=https://www.csu.edu.au/" />
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  10.        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  11.  
  12.     <style>
  13.       @font-face {
  14.         font-family: "Basis Grotesque";
  15.         src: url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Regular.eot?#iefix') format('embedded-opentype'),
  16.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Regular.woff') format('woff'),
  17.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Regular.ttf') format('truetype'),
  18.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Regular.svg#Basis+Grotesque') format('svg');
  19.         font-weight: normal;
  20.         font-style: normal;
  21.       }
  22.  
  23.       @font-face {
  24.         font-family: "Basis Grotesque";
  25.         src: url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Light.eot?#iefix') format('embedded-opentype'),
  26.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Light.woff') format('woff'),
  27.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Light.ttf') format('truetype'),
  28.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Light.svg#Basis+Grotesque') format('svg');
  29.         font-weight: 300;
  30.         font-style: normal;
  31.       }
  32.  
  33.       @font-face {
  34.         font-family: "Basis Grotesque";
  35.         src: url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Medium.eot?#iefix') format('embedded-opentype'),
  36.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Medium.woff') format('woff'),
  37.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Medium.ttf') format('truetype'),
  38.           url('https://d2qakxn0oh6mu0.cloudfront.net/assets/fonts/BasisGrotesque/BasisGrotesque-Medium.svg#Basis+Grotesque') format('svg');
  39.         font-weight: 500;
  40.         font-style: normal;
  41.       }
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.       body {background:#fff;}
  49.  
  50.       .head{
  51.         padding: 34px 0;
  52.       }
  53.       .phone-container {
  54.           float: right;
  55.           display: flex;
  56.           align-items: center;
  57.           top: 23px;
  58.           position: relative;
  59.           cursor: pointer;
  60.       }
  61.       p.phone-number,
  62.       a.phone-link{
  63.         color: #F0572A;
  64.         font-family: "Basis Grotesque";
  65.         font-size: 22px;
  66.         line-height: 1.2;
  67.         font-weight: normal;
  68.         display: inline-block;
  69.         padding-left: 10px;
  70.         position: relative;
  71.         top: 0px;
  72.         text-decoration: none;
  73.       }
  74.  
  75.      
  76.       .hero-section{
  77.         background: #fff url(http://engage.csu.edu.au/rs/075-KSK-811/images/Group%206.png) no-repeat;
  78.         background-position: center;
  79.         background-size: cover;
  80.         width: 100%;
  81.         height: 608px;
  82.       }
  83.       .story-section h2 {
  84.           color: #222222;
  85.           font-family: "Basis Grotesque";
  86.           font-size: 40px;
  87.           line-height: 30px;
  88.           text-align: center;
  89.           margin-bottom: 23px;
  90.       }
  91.       .story-section.container {
  92.           padding: 52px 0 29px;
  93.       }
  94.  
  95.       .story-section p.sub-head{
  96.         color: #222222;
  97.         font-family: "Basis Grotesque";
  98.         font-size: 23px;
  99.         font-weight: 300;
  100.         line-height: 32px;
  101.         text-align: center;
  102.       }
  103.  
  104.       .card {
  105.           max-width: 361px;
  106.           width: 100%;
  107.           border: none;
  108.           border-radius: 0;
  109.           background-color: #FEFEFE;
  110.           box-shadow: 0 7px 9px 1px rgba(199,184,172,0.25);
  111.          // min-height: 514px;
  112.              margin: 0 auto 40px;
  113.       }
  114.  
  115.       h4.card-title {
  116.         color: #222222;
  117.         font-family: "Basis Grotesque";
  118.         font-size: 28px;
  119.         font-weight: 500;
  120.         line-height: 21px;
  121.             margin-bottom: 20px;
  122.  
  123.     }
  124.     p.card-text {
  125.     color: #222222;
  126.     font-family: "Basis Grotesque";
  127.     font-size: 16px;
  128.     font-weight: 300;
  129.     line-height: 23px;
  130. }
  131.  
  132. .card-body {
  133.     padding: 30px 30px;
  134. }
  135. .stories {
  136.     margin-top: 33px;
  137.     padding-bottom: 43px;
  138. }
  139. .share-you-story {
  140.     text-align: center;
  141.     width: 100%;
  142. }
  143. a.share-story-btn.btn.btn-primary {
  144.     background-color: #F0572A;
  145.     border: none;
  146.     border-radius: 0;
  147.     padding: 21px 95px;
  148.     color: #FFFFFF;
  149.     font-family: "Basis Grotesque";
  150.     font-size: 20px;
  151.     font-weight: 500;
  152.     line-height: 21px;
  153.     text-align: center;
  154. }
  155.  
  156. .section-about{
  157.   padding: 55px 0;
  158.   background-color: #F8F6F2;
  159.   width: 100%;
  160.  
  161. }
  162.  
  163. .container-blue{
  164.   width: 100%;
  165.   height: 421px;
  166.  background: #222944 url(http://engage.csu.edu.au/rs/075-KSK-811/images/Group-23.png) no-repeat;
  167.  background-size: cover;
  168.   background-position: center;
  169.  display: flex;
  170.     justify-content: center;
  171.     align-items: center;
  172. }
  173. .bluebox {
  174.     height: 328px;
  175.     width: 438px;
  176.     background-color: #222944;
  177.     text-align: center;
  178.         padding: 0 30px;
  179.     display: flex;
  180.     justify-content: center;
  181.     align-items: center;
  182. }
  183. .bluebox h2 {
  184.     color: #FFFFFF;
  185.     font-family: "Basis Grotesque";
  186.     font-size: 28px;
  187.     font-weight: 500;
  188.     line-height: 21px;
  189.     text-align: center;
  190.         margin-bottom: 17px;
  191. }
  192. .bluebox p {
  193.     color: #FFFFFF;
  194.     font-family: "Basis Grotesque";
  195.     font-size: 16px;
  196.     font-weight: 300;
  197.     line-height: 23px;
  198.     text-align: center;
  199. }
  200. .container-content{
  201. }
  202. .no-pads-col{
  203.   padding: 0 !important;
  204. }
  205. .container-brown{
  206.   width: 100%;
  207.   height: 421px;
  208.     background-color: #C7B8AC;
  209.  display: flex;
  210.     justify-content: center;
  211.     align-items: center;
  212. }
  213.  
  214. .brownbox {
  215.     height: 328px;
  216.     width: 438px;
  217.    //background-color: #222944;
  218.     text-align: center;
  219.         padding: 0;
  220.     display: flex;
  221.     justify-content: center;
  222.     align-items: center;
  223. }
  224. .brownbox h2 {
  225.     color: #222222; font-family: "Basis Grotesque"; font-size: 28px;    font-weight: 500;   line-height: 21px;  text-align: center;
  226.         margin-bottom: 17px;
  227. }
  228.  
  229. .brownbox p {
  230.     color: #222222; font-family: "Basis Grotesque"; font-size: 16px;    font-weight: 300;   line-height: 23px;  text-align: center;
  231. }
  232.  
  233. .container-green{
  234.   width: 100%;
  235.   height: 421px;
  236.     background-color: #0E3A32;
  237.  display: flex;
  238.     justify-content: center;
  239.     align-items: center;
  240. }
  241. .greenbox {
  242.     height: 328px;
  243.     width: 438px;
  244.    //background-color: #222944;
  245.     text-align: center;
  246.         padding: 0;
  247.     display: flex;
  248.     justify-content: center;
  249.     align-items: center;
  250. }
  251.  
  252. .greenbox h2 {
  253.    color: #FFFFFF;  font-family: "Basis Grotesque"; font-size: 28px;    font-weight: 500;   line-height: 21px;  text-align: center;
  254.         margin-bottom: 17px;
  255. }
  256. .greenbox p {
  257.     color: #FFFFFF; font-family: "Basis Grotesque"; font-size: 15px;    line-height: 23px;  text-align: center;
  258. }
  259.  
  260.  
  261. .container-orange{
  262.   width: 100%;
  263.   height: 421px;
  264.  background: #222944 url(http://engage.csu.edu.au/rs/075-KSK-811/images/Group-57.png) no-repeat;
  265.  background-size: cover;
  266.   background-position: center;
  267.  display: flex;
  268.     justify-content: center;
  269.     align-items: center;
  270. }
  271. .orangebox {
  272.     height: 328px;
  273.     width: 438px;
  274.     background-color: #F0572A;
  275.     text-align: center;
  276.         padding: 0 30px;
  277.     display: flex;
  278.     justify-content: center;
  279.     align-items: center;
  280. }
  281. .orangebox h2 {
  282.     color: #FFFFFF;
  283.     font-family: "Basis Grotesque";
  284.     font-size: 28px;
  285.     font-weight: 500;
  286.     line-height: 21px;
  287.     text-align: center;
  288.         margin-bottom: 17px;
  289. }
  290. .orangebox p {
  291.     color: #FFFFFF;
  292.     font-family: "Basis Grotesque";
  293.     font-size: 16px;
  294.     font-weight: 300;
  295.     line-height: 23px;
  296.     text-align: center;
  297. }
  298.  
  299.  
  300.  
  301.  
  302.       /* Media Queries */
  303.  
  304.  
  305.     @media screen and (max-width: 991px) {
  306.         .hero-section {
  307.             height: 398px;
  308.         }
  309.         h4.card-title {
  310.             font-size: 20px;
  311.             line-height: 1.2;
  312.         }
  313.  
  314.         .bluebox,
  315.         .brownbox,
  316.         .greenbox,
  317.         .orangebox {
  318.             height: 328px;
  319.             width: 328px;
  320.             padding: 0px 20px;
  321.         }
  322.  
  323.         .bluebox h2,
  324.         .brownbox h2,
  325.         .greenbox h2,
  326.         .orangebox h2 {
  327.             font-size: 22px;
  328.             margin-bottom: 12px;
  329.         }
  330.       .bluebox p,
  331.       .brownbox p,
  332.       .greenbox p,
  333.       .orangebox p {
  334.           font-size: 14px;
  335.           line-height: 1.5;
  336.       }
  337.  
  338.  
  339.  
  340.       .container-blue,
  341.       .container-brown,
  342.       .container-green,
  343.       .container-orange {
  344.           height: 371px;
  345.       }
  346.  
  347.  
  348.  
  349.     }
  350.  
  351.  
  352.       @media screen and (max-width: 767px) {
  353.         .phone-container {
  354.           float: left;
  355.           left: 50%;
  356.           transform: translate(-50%);
  357.           -webkit-transform: translate(-50%);
  358.           -moz-transform: translate(-50%);
  359.           -o-transform: translate(-50%);
  360.         }
  361.         .head {
  362.             padding: 34px 20px;
  363.             text-align: center;
  364.         }
  365.         img.logo-head {
  366.             width: 170px;
  367.         }
  368.         p.phone-number {
  369.           font-size: 18px;
  370.           top: -2px;
  371.           padding-left: 3px;
  372.         }
  373.         img.phone-icon {
  374.             width: 27px;
  375.         }
  376.  
  377.         .story-section h2 {
  378.             font-size: 30px;
  379.             line-height: 1.2;
  380.             margin-bottom: 15px;
  381.         }
  382.         .story-section p.sub-head {
  383.             font-size: 18px;
  384.             line-height: 1.6;
  385.         }
  386.  
  387.         .card-body {
  388.             padding: 15px 20px;
  389.         }
  390.         h4.card-title {
  391.             margin-bottom: 10px;
  392.         }
  393.  
  394.         .card {
  395.             margin: 20px auto;
  396.         }
  397.  
  398.  
  399.         .bluebox, .brownbox, .greenbox, .orangebox {
  400.     height: 268px;
  401.     width: 420px;
  402.     padding: 0px 20px;
  403. }
  404. .container-blue, .container-brown, .container-green, .container-orange {
  405.     height: 320px;
  406. }
  407.  
  408.  
  409.       }
  410.  
  411.  
  412.  
  413.  
  414.     </style>
  415.  
  416.   </head>
  417.   <body>
  418.     <!--${var1}-->
  419.  
  420.     <div class="">
  421.         <!-- Content here -->
  422.         <div class="head container">
  423.             <div class="row">
  424.                 <div class="col-sm-12 col-md-6 logo" id="mkto-logo-editable" mktoName="Logo">
  425.                   <div class="mktoText" id="msdfsfkto-logo-editable" mktoName="Logo">
  426.                     <img src="http://engage.csu.edu.au/rs/075-KSK-811/images/LOGO.svg" class="logo-head">
  427.                   </div>
  428.                 </div>
  429.                 <div class="col-sm-12 col-md-6 phone" id="mkto-phone-editable" mktoName="Phone">
  430.                   <div class="mktoText phone-container" id="mrkt-phone-editable" mktoName="Phone">
  431.                     <a href="tel:(03)-9935-7977" class="phone-link"><img src="http://engage.csu.edu.au/rs/075-KSK-811/images/phone.svg" class="phone-icon">
  432.                     <p class="phone-number">(03) 9935 7977</p></a>
  433.                   </div>
  434.                 </div>
  435.             </div>
  436.         </div>
  437.         <div class="hero-section">
  438.  
  439.         </div>
  440.         <div class="story-section container">
  441.             <h2>Create a world worth living in</h2>
  442.             <p class="sub-head">Our story is built from the everyday stories of people like you. From the baby born in remote Australia to the research
  443.             that’s bringing our rivers back to life. For 30 years Charles Sturt University has been empowering people with passion
  444.             to create a world worth living in.</p>
  445.  
  446.             <div class="stories">
  447.               <div class="row">
  448.                 <div class="col-sm-12 col-md-4 d-flex align-items-stretch">
  449.                   <div class="card">
  450.                     <img class="card-img-top" src="http://engage.csu.edu.au/rs/075-KSK-811/images/6394.png" alt="Card image"
  451.                      style="width:100%">
  452.                     <div class="card-body">
  453.                       <h4 class="card-title">Tammy's story</h4>
  454.                       <p class="card-text">Tammy O’Connor wants all Australian women, wherever they live, to get the midwifery care they
  455.                         deserve. Her initiatives
  456.                         are helping extend essential services into rural and remote communities in New South Wales.</p>
  457.                     </div>
  458.                   </div>
  459.                 </div>
  460.                 <div class="col-sm-12 col-md-4 d-flex align-items-stretch">
  461.                   <div class="card">
  462.                     <img class="card-img-top" src="http://engage.csu.edu.au/rs/075-KSK-811/images/6394.png" alt="Card image"
  463.                      style="width:100%">
  464.                     <div class="card-body">
  465.                       <h4 class="card-title">Jonathon’s story</h4>
  466.                       <p class="card-text">Jonathon Howard’s passion for our natural environment is contagious. From founding sustainability initiatives to
  467.                       educating our communities on water usage, he believes that if we work together we can achieve great things for the world
  468.                       (and little guys) around us.</p>
  469.                     </div>
  470.                   </div>
  471.                 </div>
  472.                 <div class="col-sm-12 col-md-4 d-flex align-items-stretch">
  473.                   <div class="card">
  474.                     <img class="card-img-top" src="http://engage.csu.edu.au/rs/075-KSK-811/images/6394 %281%29.png" alt="Card image"
  475.                      style="width:100%">
  476.                     <div class="card-body">
  477.                       <h4 class="card-title">Courtney’s story</h4>
  478.                       <p class="card-text">Culturally safe learning environments for Indigenous children drives Courtney Glazebrook. She stands up for those who
  479.                       need her most. Lobbying government and promoting collaborative communities are all in a day’s work. And resting on her
  480.                       laurels in not an option.</p>
  481.                     </div>
  482.                   </div>
  483.                 </div>
  484.  
  485.  
  486.                 <div class="col-sm-12 col-md-4 d-flex align-items-stretch">
  487.                   <div class="card">
  488.                     <img class="card-img-top" src="http://engage.csu.edu.au/rs/075-KSK-811/images/6394.png" alt="Card image"
  489.                      style="width:100%">
  490.                     <div class="card-body">
  491.                       <h4 class="card-title">Hamish’s story</h4>
  492.                       <p class="card-text">It’s lucky we have people like Hamish Macdonald. Committed people who will put it all on the line to tell the stories
  493.                       that matter. Hamish has the ability to connect and inspire through his work. Whether it be covering the news from
  494.                       war-torn and developing nations or reporting on disasters and major world events.</p>
  495.                     </div>
  496.                   </div>
  497.                 </div>
  498.                 <div class="col-sm-12 col-md-4 d-flex align-items-stretch">
  499.                   <div class="card">
  500.                     <img class="card-img-top" src="http://engage.csu.edu.au/rs/075-KSK-811/images/6394 %281%29.png" alt="Card image"
  501.                      style="width:100%">
  502.                     <div class="card-body">
  503.                       <h4 class="card-title">Nicholas’s story</h4>
  504.                       <p class="card-text">Nicholas Steep believes the world needs more positivity. So he’s bringing it in bucket loads. He has turned his own
  505.                       experiences with mental health, identity issues and bullying into a passion for helping others find and claim their
  506.                       place in the world.</p>
  507.                     </div>
  508.                   </div>
  509.                 </div>
  510.                 <div class="col-sm-12 col-md-4 d-flex align-items-stretch">
  511.                   <div class="card">
  512.                     <img class="card-img-top" src="http://engage.csu.edu.au/rs/075-KSK-811/images/6394.png" alt="Card image"
  513.                      style="width:100%">
  514.                     <div class="card-body">
  515.                       <h4 class="card-title">Dylan’s story</h4>
  516.                       <p class="card-text">Growing up on a mixed farm in the Riverina, Dylan Male was naturally drawn to a career in agriculture. Fuelled by his
  517.                       passion for agricultural science and solving problems, Dylan strives to make a real difference in the world by improving
  518.                       productivity and sustainability of agriculture systems.</p>
  519.                     </div>
  520.                   </div>
  521.                 </div>
  522.  
  523.                 <div class="share-you-story">
  524.                     <a href="" class="share-story-btn btn btn-primary" role="button">Share your story &rarr;</a>
  525.                 </div>
  526.               </div>
  527.             </div>
  528.         </div>
  529.  
  530.         <div class="section-about">
  531.  
  532.           <div class="container">
  533.             <div class="row">
  534.               <div class="col-sm-12 col-md-6 no-pads-col">
  535.                   <div class="container-blue">
  536.                     <div class="bluebox">
  537.                       <div class="container-content">
  538.                           <h2>Building connections</h2>
  539.                           <p>We are who we are because of our collaborative relationships with industry and deep community ties. Like our
  540.                             longstanding partnership with the NSW Police Force, ongoing relationships with community groups such as Aboriginal
  541.                             Community Elders and Royal Far West, and delivery partners IT Masters, CSU Study Centres and TAFE’s across Australia –
  542.                             just to name a few. We put our whole hearts into creating meaningful and lasting connections.</p>
  543.                       </div>
  544.                     </div>
  545.                   </div>
  546.               </div>
  547.               <div class="col-sm-12 col-md-6 no-pads-col">
  548.                 <div class="container-brown">
  549.                   <div class="brownbox">
  550.                     <div class="container-content">
  551.                       <h2>Seeking purpose</h2>
  552.                       <p>We champion research that helps our communities flourish and shapes the world we live in. Our researchers are making new
  553.                       discoveries spanning community resilience, water ecosystem health, children’s literacy, diabetes screening, jury
  554.                       reasoning and farming systems. It’s the value of what we do that drives us to strive for a better tomorrow, today.</p>
  555.                     </div>
  556.                   </div>
  557.                 </div>
  558.               </div>
  559.  
  560.               <div class="col-sm-12 col-md-6 no-pads-col">
  561.                 <div class="container-green">
  562.                   <div class="greenbox">
  563.                     <div class="container-content">
  564.                       <h2>Making it happen</h2>
  565.                       <p>We champion research that helps our communities flourish and shapes the world we live in. Our researchers are
  566.                         making new
  567.                         discoveries spanning community resilience, water ecosystem health, children’s literacy, diabetes screening,
  568.                         jury
  569.                         reasoning and farming systems. It’s the value of what we do that drives us to strive for a better tomorrow,
  570.                         today.</p>
  571.                     </div>
  572.                   </div>
  573.                 </div>
  574.               </div>
  575.  
  576.               <div class="col-sm-12 col-md-6 no-pads-col">
  577.                 <div class="container-orange">
  578.                   <div class="orangebox">
  579.                     <div class="container-content">
  580.                       <h2>Moving forward</h2>
  581.                       <p>As the world changes, so do we. We’re transforming and enhancing online study, investing in our communities through
  582.                       innovative facilities and the latest technologies and expanding our campuses. Our newest campus at Port Macquarie is set
  583.                       to become the largest international teaching and learning centre in regional NSW. And we’re bringing medicine to our
  584.                       regions from 2021 so we can do our part to make sure future generations will be well taken care of.</p>
  585.                     </div>
  586.                   </div>
  587.                 </div>
  588.               </div>
  589.  
  590.             </div>
  591.  
  592.  
  593.           </div>
  594.  
  595.         </div>
  596.  
  597.  
  598.     </div>
  599.  
  600.  
  601.     <!--<div class="mktoText" id="exampleText" mktoName="Example Text Area">
  602.     This is an example editable text area.
  603.    </div>-->
  604.  
  605.  
  606.  
  607.  
  608.  
  609.     <!-- scripts -->
  610.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  611.        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  612.        crossorigin="anonymous"></script>
  613.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  614.        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
  615.        crossorigin="anonymous"></script>
  616.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  617.        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  618.        crossorigin="anonymous"></script>
  619.  
  620.  
  621.  
  622.   </body>
  623. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement