API tools faq
paste
Advertisement
kguak

cmpw-716-u-8

kguak
Dec 5th, 2019
187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.64 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <link rel="stylesheet"
  10.    href="https://e.centennialcollege.ca/content/enforced/473195-cmpw716.dev/template/css/ecentennial.css">
  11.   <link rel="stylesheet"
  12.    href="https://e.centennialcollege.ca/content/enforced/473195-cmpw716.dev/template/css/font-awesome.css">
  13.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  14.    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  15.   <style>
  16.     *:focus {
  17.       outline: none;
  18.     }
  19.  
  20.     body {
  21.       margin-top: 70px;
  22.       background-color: #f4f4f4;
  23.       font-family: 'Raleway', sans-serif;
  24.       font-size: 62.5%;
  25.       -webkit-font-smoothing: antialiased;
  26.       -moz-osx-font-smoothing: grayscale;
  27.     }
  28.  
  29.     h1,
  30.     p,
  31.     a,
  32.     span {
  33.       color: #fff;
  34.       letter-spacing: 0.02em;
  35.       font-weight: 600;
  36.     }
  37.  
  38.     h1,
  39.     p,
  40.     a {
  41.       padding-left: 40px;
  42.     }
  43.  
  44.     h1 {
  45.       font-size: 2.5em;
  46.     }
  47.  
  48.     p {
  49.       font-size: 1.5em;
  50.       line-height: 25px;
  51.     }
  52.  
  53.     button {
  54.       border: 0;
  55.       border-radius: 26px;
  56.       padding-bottom: 2px;
  57.     }
  58.  
  59.     span {
  60.       font-size: 1.6em;
  61.     }
  62.  
  63.     .container-flip,
  64.     .flip-box,
  65.     .front,
  66.     .back {
  67.       width: 100%;
  68.       min-height: 550px;
  69.     }
  70.  
  71.     .container-flip,
  72.     .flip_box {
  73.       position: relative;
  74.     }
  75.  
  76.     .front,
  77.     .back {
  78.       position: absolute;
  79.       -webkit-backface-visibility: hidden;
  80.       -moz-backface-visibility: hidden;
  81.       backface-visibility: hidden;
  82.     }
  83.  
  84.     .container-flip {
  85.       -moz-transform: perspective(1200px);
  86.       -webkit-perspective: 1200px;
  87.       perspective: 1200px;
  88.     }
  89.  
  90.     .flip_box {
  91.       transition: all 0.5s ease-out;
  92.       -webkit-transform-style: preserve-3d;
  93.       -moz-transform-style: preserve-3d;
  94.       transform-style: preserve-3d;
  95.     }
  96.  
  97.     .front {
  98.       background-color: #454546;
  99.     }
  100.  
  101.     .f_title {
  102.       padding-top: 180px;
  103.       font-size: 6.0em;
  104.       line-height: 1.2em;
  105.       width: 265px
  106.     }
  107.  
  108.     .f_subline {
  109.       padding-top: 205px;
  110.       color: #B1D4E8;
  111.     }
  112.  
  113.     .f_headline {
  114.       line-height: 23px;
  115.     }
  116.  
  117.     .back {
  118.       background-color: #E2EA7A;
  119.       -webkit-transform: rotateY(180deg);
  120.       -moz-transform: rotateY(180deg);
  121.       -ms-transform: rotateY(180deg);
  122.       transform: rotateY(180deg);
  123.     }
  124.  
  125.     .b_headline {
  126.       padding: 15px;
  127.     }
  128.  
  129.     .b_text {
  130.       color: black;
  131.       font-size: 1.4em;
  132.       line-height: 28px;
  133.       padding: 1.2em 2.2em;
  134.       opacity: 0.85;
  135.     }
  136.  
  137.     p.b_text {
  138.       font-weight: unset;
  139.     }
  140.  
  141.     .b_button {
  142.       position: absolute;
  143.       left: 36px;
  144.       bottom: 38px;
  145.       width: 150px;
  146.       height: 52px;
  147.       background-color: #D4DF38;
  148.       transition: all 0.3s;
  149.     }
  150.  
  151.     .b_button:hover {
  152.       background-color: #D4DF38;
  153.     }
  154.  
  155.     .flipped {
  156.       -webkit-transform: rotateY(-180deg);
  157.       -moz-transform: rotateY(-180deg);
  158.       -ms-transform: rotateY(-180deg);
  159.       transform: rotateY(-180deg);
  160.     }
  161.  
  162.     .r_wrap {
  163.       position: absolute;
  164.       right: 40px;
  165.       bottom: 38px;
  166.     }
  167.  
  168.     .b_round,
  169.     .s_round {
  170.       position: absolute;
  171.       right: 0px;
  172.       bottom: 0px;
  173.       width: 52px;
  174.       height: 52px;
  175.       border-radius: 50%;
  176.       background-color: #D4DF38;
  177.       transition: all 0.2s linear;
  178.     }
  179.  
  180.     .b_round {
  181.       opacity: 0;
  182.       background-color: #D4DF38;
  183.     }
  184.  
  185.     .b_round_hover {
  186.       transform: scale(1.37);
  187.       opacity: 0.4;
  188.     }
  189.  
  190.     .b_round_back_hover {
  191.       background-color: #454546;
  192.     }
  193.  
  194.     .s_round_click {
  195.       transform: scale(1.7);
  196.     }
  197.  
  198.     .s_round_back {
  199.       background-color: #454546;
  200.     }
  201.  
  202.     .s_arrow {
  203.       width: 52px;
  204.       height: 52px;
  205.       background-image: url('https://img-fotki.yandex.ru/get/194549/29644339.5/0_d6c60_1d7815f0_orig');
  206.       background-color: transparent;
  207.       transition: all 0.35s linear;
  208.     }
  209.  
  210.     .s_arrow_rotate {
  211.       transform: rotate(-180deg);
  212.     }
  213.  
  214.     div#show-all {
  215.       transform: none;
  216.     }
  217.  
  218.     ul {
  219.       font-size: 1.4em;
  220.     }
  221.   </style>
  222. </head>
  223.  
  224. <body>
  225.  
  226.   <div class="container-fluid">
  227.  
  228.     <div class="btn btn-dark mt-5 mb-5" id="show-all">Show All</div>
  229.     <div class="btn btn-secondary mt-5 mb-5" id="reset">Close All</div>
  230.  
  231.     <div class="container-fluid">
  232.       <div class="row">
  233.         <div class="col-md-6">
  234.           <div class='container-flip mt-5'>
  235.  
  236.             <div class='flip_box' id="box-1">
  237.  
  238.               <div class='front shadow-sm p-3 mb-5 rounded'>
  239.                 <p class='f_title'>What is content management?</p>
  240.               </div>
  241.  
  242.               <div class='back shadow shadow p-3 mb-5 rounded'>
  243.                 <h2 class='b_headline'>Content Management</h2>
  244.                 <p class='b_text'>Content management is the procedures, processes, tools and people that
  245.                   organize, manage and publish content.
  246.                   <br />
  247.                   Content management matters for a writer because it's the management of the content
  248.                   you
  249.                   create. It may be up to you
  250.                   entirely or you might have to work within an existing content management system,
  251.                   following well-established content
  252.                   management practices. Writers also get hired as content managers - the person
  253.                   responsible for creating, editing, posting
  254.                   and updating content.</p>
  255.               </div>
  256.  
  257.             </div>
  258.  
  259.             <div class='r_wrap'>
  260.  
  261.               <div class='b_round' id="box-1-rnd"></div>
  262.               <div class='s_round' id="box-1-btn">
  263.                 <div class='s_arrow' id="box-1-arr"></div>
  264.               </div>
  265.             </div>
  266.  
  267.           </div>
  268.         </div>
  269.         <div class="col-md-6">
  270.           <div class='container-flip mt-5'>
  271.  
  272.             <div class='flip_box' id="box-2">
  273.  
  274.               <div class='front shadow-sm'>
  275.                 <p class='f_title'>Accessibility</p>
  276.               </div>
  277.  
  278.               <div class='back shadow'>
  279.                 <h2 class='b_headline'>Accessibility</h2>
  280.                 <p class='b_text'>Accessibility, in the context of content creation, is the ability of
  281.                   all
  282.                   audiences, regardless of disability or other
  283.                   factors, to access your content. For this, there are universal guidelines to follow.
  284.                   The
  285.                   guidelines that are followed in
  286.                   Canada are called WCAG (with 2.1 being the current version number). WCAG was
  287.                   developed
  288.                   by the World Wide Web Consortium
  289.                   (you may remember W3C from Webtools). In Canada, WCAG compliance is the law.</p>
  290.               </div>
  291.  
  292.             </div>
  293.  
  294.             <div class='r_wrap'>
  295.  
  296.               <div class='b_round' id="box-2-rnd"></div>
  297.               <div class='s_round' id="box-2-btn">
  298.                 <div class='s_arrow' id="box-2-arr"></div>
  299.               </div>
  300.             </div>
  301.  
  302.           </div>
  303.         </div>
  304.  
  305.       </div>
  306.       <div class="row row-2">
  307.         <div class="col-md-5">
  308.           <div class='container-flip mt-5'>
  309.  
  310.             <div class='flip_box' id="box-3">
  311.  
  312.               <div class='front shadow-sm'>
  313.                 <p class='f_title'>Content Migrations</p>
  314.               </div>
  315.  
  316.               <div class='back shadow'>
  317.                 <h2 class='b_headline'>Content Migrations</h2>
  318.                 <p class='b_text'>Content migration for the kinds of projects that writers are on
  319.                   usually
  320.                   means moving a website from one Content
  321.                   Management System to another. It can mean a total redesign with a whole new look,
  322.                   new
  323.                   content, new UX, etc. Or, it can
  324.                   be a back-end only change, imperceptible to the user.
  325.  
  326.                   There are significant risks involved in content migrations. For one, you don't want
  327.                   to
  328.                   disturb the user's experience, so
  329.                   it has to be timed precisely. You also don't want to lose the five-year history of
  330.                   blog
  331.                   posts or your search page rank.
  332.                   These risks make content migrations an exercise in project management. But they are
  333.                   also
  334.                   good business for web writers.
  335.                   Auditing, tracking and moving large amounts of content creates opportunities for
  336.                   writers
  337.                   to KonMari websites, rewrite
  338.                   headlines and URLs, and create new content plans and strategies as content
  339.                   deficiencies
  340.                   and opportunities are exposed.</p>
  341.               </div>
  342.  
  343.             </div>
  344.  
  345.             <div class='r_wrap'>
  346.  
  347.               <div class='b_round' id="box-3-rnd"></div>
  348.               <div class='s_round' id="box-3-btn">
  349.                 <div class='s_arrow' id="box-3-arr"></div>
  350.               </div>
  351.             </div>
  352.  
  353.           </div>
  354.         </div>
  355.         <div class="col-md-7">
  356.           <div class='container-flip mt-5 mb-5'>
  357.  
  358.             <div class='flip_box' id="box-4">
  359.  
  360.               <div class='front shadow-sm'>
  361.                 <p class='f_title'>Content Governance</p>
  362.               </div>
  363.  
  364.               <div class='back shadow'>
  365.                 <h2 class='b_headline'>Content Governance</h2>
  366.                 <p class='b_text'>Content governance refers to the policies and procedures that an
  367.                   organization uses to manage its content - the
  368.                   guidelines that determine how content gets created and published. Good content
  369.                   governance defines roles and
  370.                   responsibilities, processes for workflow, approvals, and publishing, and procedures
  371.                   for
  372.                   content versioning and storage.
  373.                   <br />
  374.                   <strong>Version Control and Versioning</strong>
  375.                   <br />
  376.                   Version control and versioning are often used interchangeably but are actually two
  377.                   separate concepts, though confusingly
  378.                   both do control the version of your content. Version control refers to the system in
  379.                   place that prevents other people
  380.                   from making changes to content when they are not supposed to. Version control
  381.                   restricts
  382.                   access to the content.
  383.                   Versioning refers to the system that allows you to go back to prior versions of a
  384.                   document. Versioning and version
  385.                   control don't have to be complicated. Versioning can be as simple as doing a
  386.                   fresh Save
  387.                   As in MS Word every couple of
  388.                   hours, with the time and date in the file name. And Version Control can be as simple
  389.                   as
  390.                   password protecting the document
  391.                   or the folder it lives in.
  392.                   <br />
  393.                   <strong>Key takeaway - your CMS isn't your content governance; it is simply a tool
  394.                     that
  395.                     allows
  396.                     you to meet the guidelines you've
  397.                     set.</strong></p>
  398.               </div>
  399.  
  400.             </div>
  401.  
  402.             <div class='r_wrap'>
  403.  
  404.               <div class='b_round' id="box-4-rnd"></div>
  405.               <div class='s_round' id="box-4-btn">
  406.                 <div class='s_arrow' id="box-4-arr"></div>
  407.               </div>
  408.             </div>
  409.  
  410.           </div>
  411.         </div>
  412.  
  413.       </div>
  414.       <div class="row row-3">
  415.         <div class="col-md-5">
  416.           <div class='container-flip mt-5 mb-5'>
  417.  
  418.             <div class='flip_box' id="box-5">
  419.  
  420.               <div class='front shadow-sm'>
  421.                 <p class='f_title'>Content Management Systems</p>
  422.               </div>
  423.  
  424.               <div class='back shadow'>
  425.                 <h2 class='b_headline'>Content Management Systems</h2>
  426.                 <p class='b_text'>Content Management Systems are robust tools that allow for the
  427.                   management of digital content. They allow for content to
  428.                   be created (sometimes), uploaded, categorized or tagged, published and archived.
  429.                   Most allow for collaboration, version
  430.                   control and versioning. Some are made for specific purposes (for example, a learning
  431.                   management system is just a content
  432.                   management system for online learning) or generally. Some are made to handle
  433.                   internal content (think a company's
  434.                   intranet), others include WYSIWYG editors that allow you to create, manage and
  435.                   publish website content within the same
  436.                   system (like Wordpress) and others are wildly specific (think about the customized
  437.                   systems required to organize all of
  438.                   the products on Amazon or the videos on Netflix).</p>
  439.               </div>
  440.  
  441.             </div>
  442.  
  443.             <div class='r_wrap'>
  444.  
  445.               <div class='b_round' id="box-5-rnd"></div>
  446.               <div class='s_round' id="box-5-btn">
  447.                 <div class='s_arrow' id="box-5-arr"></div>
  448.               </div>
  449.             </div>
  450.  
  451.           </div>
  452.         </div>
  453.         <div class="col-md-7">
  454.           <div class='container-flip mt-5'>
  455.  
  456.             <div class='flip_box' id="box-6">
  457.  
  458.               <div class='front shadow-sm p-3 mb-5 rounded'>
  459.                 <p class='f_title'>Search Engine Optimization</p>
  460.               </div>
  461.  
  462.               <div class='back shadow shadow p-3 mb-5 rounded'>
  463.                 <h2 class='b_headline'>Search Engine Optimization</h2>
  464.                 <p class='b_text p-3'>There are many ways in which your CMS can help your SEO. Most modern
  465.                   content management systems will include
  466.                   functionality for SEO, but it is up to you to properly employ it. Here are some
  467.                   things to look for:
  468.  
  469.                   <ul>
  470.                     <li>URL: URLs have SEO value too. Make sure your CMS allows you to create
  471.                       custom, static URLs. That way, you can ensure your URL includes your keywords and a clear site
  472.                       structure.
  473.                     </li>
  474.                     <li>Metadata: Your CMS should also allow you to easily control your metadata
  475.                       (heading tags, alt tags, title tags, descriptions).
  476.                     </li>
  477.                     <li>Responsive design
  478.                     </li>
  479.                     <li>Navigation: You need to be able to change the text links and
  480.                       breadcrumbs, as well as categorize content.
  481.                     </li>
  482.                   </ul>
  483.                 </p>
  484.                 <p class='b_text'>
  485.                   As a writer, you usually have control over the page title, description and URL.
  486.                   Remember to make these short, clear and
  487.                   descriptive (and use keywords where you can reasonably, of course). If you aren't
  488.                   the person actually publishing the
  489.                   content, but rather handing it off to a Content Manager or someone else, it's a good
  490.                   idea to include suggestions for
  491.                   these elements with the content. Don't leave it to the designer to write your URLs
  492.                   or page descriptions.
  493.  
  494.                 </p>
  495.               </div>
  496.  
  497.             </div>
  498.  
  499.             <div class='r_wrap'>
  500.  
  501.               <div class='b_round' id="box-6-rnd"></div>
  502.               <div class='s_round' id="box-6-btn">
  503.                 <div class='s_arrow' id="box-6-arr"></div>
  504.               </div>
  505.             </div>
  506.  
  507.           </div>
  508.         </div>
  509.       </div>
  510.     </div>
  511.   </div>
  512.  
  513.  
  514.   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  515.    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
  516.   <script>
  517.     $(document).ready(function () {
  518.  
  519.       var s_round = '.s_round';
  520.       var showAll = '#show-all';
  521.       var reset = '#reset';
  522.       var boxOneBtn = '#box-1-btn';
  523.       var boxTwoBtn = '#box-2-btn';
  524.       var boxThrBtn = '#box-3-btn';
  525.       var boxFourBtn = '#box-4-btn';
  526.       var boxFifthBtn = '#box-5-btn';
  527.       var boxSixthBtn = '#box-6-btn';
  528.  
  529.       $(s_round).hover(function () {
  530.         $('.b_round').toggleClass('b_round_hover');
  531.         return false;
  532.       });
  533.  
  534.       $(boxOneBtn).click(function () {
  535.         flipCard(1);
  536.         return false;
  537.       });
  538.       $(boxTwoBtn).click(function () {
  539.         flipCard(2);
  540.         return false;
  541.       });
  542.       $(boxThrBtn).click(function () {
  543.         flipCard(3);
  544.         return false;
  545.       });
  546.       $(boxFourBtn).click(function () {
  547.         flipCard(4);
  548.         return false;
  549.       });
  550.       $(boxFifthBtn).click(function () {
  551.         flipCard(5);
  552.         return false;
  553.       });
  554.       $(boxSixthBtn).click(function () {
  555.         flipCard(6);
  556.         return false;
  557.       });
  558.  
  559.       $(reset).click(function () {
  560.         resetCards();
  561.         return false;
  562.       });
  563.  
  564.       $(showAll).click(function () {
  565.         resetCards();
  566.         $('.flip_box').toggleClass('flipped');
  567.         $(this).addClass('s_round_click');
  568.         $('.s_arrow').toggleClass('s_arrow_rotate');
  569.         $('.b_round').toggleClass('b_round_back_hover');
  570.         return false;
  571.       });
  572.  
  573.       $(s_round).on('transitionend', function () {
  574.         $(this).removeClass('s_round_click');
  575.         $(this).addClass('s_round_back');
  576.         return false;
  577.       });
  578.  
  579.       function resetCards() {
  580.         if ($('.flipped')) {
  581.           console.log(true);
  582.           $(this).removeClass('s_round_click');
  583.           $('.s_arrow').removeClass('s_arrow_rotate');
  584.           $('.b_round').removeClass('b_round_back_hover');
  585.         }
  586.         $('.flip_box').removeClass('flipped');
  587.  
  588.         return false
  589.  
  590.       }
  591.  
  592.       function flipCard(btnId) {
  593.         $('#box-' + btnId).toggleClass('flipped');
  594.         $(this).addClass('s_round_click');
  595.         $('#box-' + btnId + '-arr').toggleClass('s_arrow_rotate');
  596.         $('#box-' + btnId + '-rnd').toggleClass('b_round_back_hover');
  597.  
  598.         return false;
  599.       }
  600.     });
  601.   </script>
  602. </body>
  603.  
  604. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!