API tools faq
paste
Advertisement
kguak

cmpw-716-u8-v2

kguak
Dec 6th, 2019
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.92 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: 640px;
  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: 4.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.             width: 95%;
  136.         }
  137.  
  138.         p.b_text {
  139.             font-weight: unset;
  140.         }
  141.  
  142.         .b_button {
  143.             position: absolute;
  144.             left: 36px;
  145.             bottom: 38px;
  146.             width: 150px;
  147.             height: 52px;
  148.             background-color: #D4DF38;
  149.             transition: all 0.3s;
  150.         }
  151.  
  152.         .b_button:hover {
  153.             background-color: #D4DF38;
  154.         }
  155.  
  156.         .flipped {
  157.             -webkit-transform: rotateY(-180deg);
  158.             -moz-transform: rotateY(-180deg);
  159.             -ms-transform: rotateY(-180deg);
  160.             transform: rotateY(-180deg);
  161.         }
  162.  
  163.         .r_wrap {
  164.             position: absolute;
  165.             right: 40px;
  166.             bottom: 38px;
  167.         }
  168.  
  169.         .b_round,
  170.         .s_round {
  171.             position: absolute;
  172.             right: 0px;
  173.             bottom: 0px;
  174.             width: 52px;
  175.             height: 52px;
  176.             border-radius: 50%;
  177.             background-color: #D4DF38;
  178.             transition: all 0.2s linear;
  179.         }
  180.  
  181.         .b_round {
  182.             opacity: 0;
  183.             background-color: #D4DF38;
  184.         }
  185.  
  186.         .b_round_hover {
  187.             transform: scale(1.37);
  188.             opacity: 0.4;
  189.         }
  190.  
  191.         .b_round_back_hover {
  192.             background-color: #454546;
  193.         }
  194.  
  195.         .s_round_click {
  196.             transform: scale(1.7);
  197.         }
  198.  
  199.         .s_round_back {
  200.             background-color: #454546;
  201.         }
  202.  
  203.         .s_arrow {
  204.             width: 52px;
  205.             height: 52px;
  206.             background-image: url('https://img-fotki.yandex.ru/get/194549/29644339.5/0_d6c60_1d7815f0_orig');
  207.             background-color: transparent;
  208.             transition: all 0.35s linear;
  209.         }
  210.  
  211.         .s_arrow_rotate {
  212.             transform: rotate(-180deg);
  213.         }
  214.  
  215.         div#show-all {
  216.             transform: none;
  217.         }
  218.  
  219.         ul {
  220.             font-size: 1.4em;
  221.         }
  222.     </style>
  223. </head>
  224.  
  225. <body>
  226.  
  227.     <div class="container-fluid">
  228.  
  229.         <div class="btn btn-dark mt-5 mb-5" id="show-all">Show All</div>
  230.         <div class="btn btn-secondary mt-5 mb-5" id="reset">Close All</div>
  231.  
  232.         <div class="container-fluid">
  233.             <div class="row">
  234.                 <div class="col-md-4">
  235.                     <div class='container-flip mt-5'>
  236.  
  237.                         <div class='flip_box' id="box-2">
  238.  
  239.                             <div class='front shadow-sm'>
  240.                                 <p class='f_title'>Accessibility</p>
  241.                             </div>
  242.  
  243.                             <div class='back shadow'>
  244.                                 <h2 class='b_headline'>Accessibility</h2>
  245.                                 <p class='b_text'>Accessibility, in the context of content creation, is the ability of
  246.                                     all
  247.                                     audiences, regardless of disability or other
  248.                                     factors, to access your content. For this, there are universal guidelines to follow.
  249.                                     The
  250.                                     guidelines that are followed in
  251.                                     Canada are called WCAG (with 2.1 being the current version number). WCAG was
  252.                                     developed
  253.                                     by the World Wide Web Consortium
  254.                                     (you may remember W3C from Webtools). In Canada, WCAG compliance is the law.</p>
  255.                             </div>
  256.  
  257.                         </div>
  258.  
  259.                         <div class='r_wrap'>
  260.  
  261.                             <div class='b_round' id="box-2-rnd"></div>
  262.                             <div class='s_round' id="box-2-btn">
  263.                                 <div class='s_arrow' id="box-2-arr"></div>
  264.                             </div>
  265.                         </div>
  266.  
  267.                     </div>
  268.  
  269.  
  270.  
  271.                 </div>
  272.                 <div class="col-md-8">
  273.                     <div class='container-flip mt-5'>
  274.  
  275.                         <div class='flip_box' id="box-6">
  276.  
  277.                             <div class='front shadow-sm mb-5 rounded'>
  278.                                 <p class='f_title'>Search Engine Optimization</p>
  279.                             </div>
  280.  
  281.                             <div class='back shadow shadow mb-5 rounded'>
  282.                                 <h2 class='b_headline'>Search Engine Optimization</h2>
  283.                                 <p class='b_text p-3'>There are many ways in which your CMS can help your SEO. Most
  284.                                     modern
  285.                                     content management systems will include
  286.                                     functionality for SEO, but it is up to you to properly employ it. Here are some
  287.                                     things to look for:
  288.  
  289.                                     <ul>
  290.                                         <li>URL: URLs have SEO value too. Make sure your CMS allows you to create
  291.                                             custom, static URLs. That way, you can ensure your URL includes your
  292.                                             keywords and a clear site
  293.                                             structure.
  294.                                         </li>
  295.                                         <li>Metadata: Your CMS should also allow you to easily control your metadata
  296.                                             (heading tags, alt tags, title tags, descriptions).
  297.                                         </li>
  298.                                         <li>Responsive design
  299.                                         </li>
  300.                                         <li>Navigation: You need to be able to change the text links and
  301.                                             breadcrumbs, as well as categorize content.
  302.                                         </li>
  303.                                     </ul>
  304.                                 </p>
  305.                                 <p class='b_text'>
  306.                                     As a writer, you usually have control over the page title, description and URL.
  307.                                     Remember to make these short, clear and
  308.                                     descriptive (and use keywords where you can reasonably, of course). If you aren't
  309.                                     the person actually publishing the
  310.                                     content, but rather handing it off to a Content Manager or someone else, it's a good
  311.                                     idea to include suggestions for
  312.                                     these elements with the content. Don't leave it to the designer to write your URLs
  313.                                     or page descriptions.
  314.  
  315.                                 </p>
  316.                             </div>
  317.  
  318.                         </div>
  319.  
  320.                         <div class='r_wrap'>
  321.  
  322.                             <div class='b_round' id="box-6-rnd"></div>
  323.                             <div class='s_round' id="box-6-btn">
  324.                                 <div class='s_arrow' id="box-6-arr"></div>
  325.                             </div>
  326.                         </div>
  327.  
  328.                     </div>
  329.                 </div>
  330.  
  331.             </div>
  332.             <div class="row row-2">
  333.                 <div class="col-md-5">
  334.                     <div class='container-flip mt-5'>
  335.  
  336.                         <div class='flip_box' id="box-1">
  337.  
  338.                             <div class='front shadow-sm p-3 mb-3 rounded'>
  339.                                 <p class='f_title'>What is content management?</p>
  340.                             </div>
  341.  
  342.                             <div class='back shadow shadow p-3 mb-5 rounded'>
  343.                                 <h2 class='b_headline'>Content Management</h2>
  344.                                 <p class='b_text'>Content management is the procedures, processes, tools and people that
  345.                                     organize, manage and publish content.
  346.                                     <br />
  347.                                     Content management matters for a writer because it's the management of the content
  348.                                     you
  349.                                     create. It may be up to you
  350.                                     entirely or you might have to work within an existing content management system,
  351.                                     following well-established content
  352.                                     management practices. Writers also get hired as content managers - the person
  353.                                     responsible for creating, editing, posting
  354.                                     and updating content.</p>
  355.                             </div>
  356.  
  357.                         </div>
  358.  
  359.                         <div class='r_wrap'>
  360.  
  361.                             <div class='b_round' id="box-1-rnd"></div>
  362.                             <div class='s_round' id="box-1-btn">
  363.                                 <div class='s_arrow' id="box-1-arr"></div>
  364.                             </div>
  365.                         </div>
  366.  
  367.                     </div>
  368.                 </div>
  369.  
  370.                 <div class="col-md-7">
  371.                     <div class='container-flip mt-5'>
  372.  
  373.                         <div class='flip_box' id="box-4">
  374.  
  375.                             <div class='front shadow-sm'>
  376.                                 <p class='f_title'>Content Governance</p>
  377.                             </div>
  378.  
  379.                             <div class='back shadow'>
  380.                                 <h2 class='b_headline'>Content Governance</h2>
  381.                                 <p class='b_text'>Content governance refers to the policies and procedures that an
  382.                                     organization uses to manage its content - the
  383.                                     guidelines that determine how content gets created and published. Good content
  384.                                     governance defines roles and
  385.                                     responsibilities, processes for workflow, approvals, and publishing, and procedures
  386.                                     for
  387.                                     content versioning and storage.
  388.                                     <br />
  389.                                     <strong>Version Control and Versioning</strong>
  390.                                     <br />
  391.                                     Version control and versioning are often used interchangeably but are actually two
  392.                                     separate concepts, though confusingly
  393.                                     both do control the version of your content. Version control refers to the system in
  394.                                     place that prevents other people
  395.                                     from making changes to content when they are not supposed to. Version control
  396.                                     restricts
  397.                                     access to the content.
  398.                                     Versioning refers to the system that allows you to go back to prior versions of a
  399.                                     document. Versioning and version
  400.                                     control don't have to be complicated. Versioning can be as simple as doing a
  401.                                     fresh Save
  402.                                     As in MS Word every couple of
  403.                                     hours, with the time and date in the file name. And Version Control can be as simple
  404.                                     as
  405.                                     password protecting the document
  406.                                     or the folder it lives in.
  407.                                     <br />
  408.                                     <strong>Key takeaway - your CMS isn't your content governance; it is simply a tool
  409.                                         that
  410.                                         allows
  411.                                         you to meet the guidelines you've
  412.                                         set.</strong></p>
  413.                             </div>
  414.  
  415.                         </div>
  416.  
  417.                         <div class='r_wrap'>
  418.  
  419.                             <div class='b_round' id="box-4-rnd"></div>
  420.                             <div class='s_round' id="box-4-btn">
  421.                                 <div class='s_arrow' id="box-4-arr"></div>
  422.                             </div>
  423.                         </div>
  424.  
  425.                     </div>
  426.                 </div>
  427.  
  428.  
  429.  
  430.  
  431.             </div>
  432.             <div class="row row-3">
  433.                 <div class="col-md-6">
  434.                     <div class='container-flip mt-5'>
  435.  
  436.                         <div class='flip_box' id="box-3">
  437.  
  438.                             <div class='front shadow-sm'>
  439.                                 <p class='f_title'>Content Migrations</p>
  440.                             </div>
  441.  
  442.                             <div class='back shadow'>
  443.                                 <h2 class='b_headline'>Content Migrations</h2>
  444.                                 <p class='b_text'>Content migration for the kinds of projects that writers are on
  445.                                     usually
  446.                                     means moving a website from one Content
  447.                                     Management System to another. It can mean a total redesign with a whole new look,
  448.                                     new
  449.                                     content, new UX, etc. Or, it can
  450.                                     be a back-end only change, imperceptible to the user.
  451.  
  452.                                     There are significant risks involved in content migrations. For one, you don't want
  453.                                     to
  454.                                     disturb the user's experience, so
  455.                                     it has to be timed precisely. You also don't want to lose the five-year history of
  456.                                     blog
  457.                                     posts or your search page rank.
  458.                                     These risks make content migrations an exercise in project management. But they are
  459.                                     also
  460.                                     good business for web writers.
  461.                                     Auditing, tracking and moving large amounts of content creates opportunities for
  462.                                     writers
  463.                                     to KonMari websites, rewrite
  464.                                     headlines and URLs, and create new content plans and strategies as content
  465.                                     deficiencies
  466.                                     and opportunities are exposed.</p>
  467.                             </div>
  468.  
  469.                         </div>
  470.  
  471.                         <div class='r_wrap'>
  472.  
  473.                             <div class='b_round' id="box-3-rnd"></div>
  474.                             <div class='s_round' id="box-3-btn">
  475.                                 <div class='s_arrow' id="box-3-arr"></div>
  476.                             </div>
  477.                         </div>
  478.  
  479.                     </div>
  480.                 </div>
  481.  
  482.                 <div class="col-md-6">
  483.                     <div class='container-flip mt-5'>
  484.  
  485.                         <div class='flip_box' id="box-5">
  486.  
  487.                             <div class='front shadow-sm'>
  488.                                 <p class='f_title'>Content Management Systems</p>
  489.                             </div>
  490.  
  491.                             <div class='back shadow'>
  492.                                 <h2 class='b_headline'>Content Management Systems</h2>
  493.                                 <p class='b_text'>Content Management Systems are robust tools that allow for the
  494.                                     management of digital content. They allow for content to
  495.                                     be created (sometimes), uploaded, categorized or tagged, published and archived.
  496.                                     Most allow for collaboration, version
  497.                                     control and versioning. Some are made for specific purposes (for example, a learning
  498.                                     management system is just a content
  499.                                     management system for online learning) or generally. Some are made to handle
  500.                                     internal content (think a company's
  501.                                     intranet), others include WYSIWYG editors that allow you to create, manage and
  502.                                     publish website content within the same
  503.                                     system (like Wordpress) and others are wildly specific (think about the customized
  504.                                     systems required to organize all of
  505.                                     the products on Amazon or the videos on Netflix).</p>
  506.                             </div>
  507.  
  508.                         </div>
  509.  
  510.                         <div class='r_wrap'>
  511.  
  512.                             <div class='b_round' id="box-5-rnd"></div>
  513.                             <div class='s_round' id="box-5-btn">
  514.                                 <div class='s_arrow' id="box-5-arr"></div>
  515.                             </div>
  516.                         </div>
  517.  
  518.                     </div>
  519.                 </div>
  520.                 <div class="col-md-7">
  521.                     <!-- <div class='container-flip mt-5'>
  522.  
  523.                        <div class='flip_box' id="box-6">
  524.  
  525.                            <div class='front shadow-sm p-3 mb-5 rounded'>
  526.                                <p class='f_title'>Search Engine Optimization</p>
  527.                            </div>
  528.  
  529.                            <div class='back shadow shadow p-3 mb-5 rounded'>
  530.                                <h2 class='b_headline'>Search Engine Optimization</h2>
  531.                                <p class='b_text p-3'>There are many ways in which your CMS can help your SEO. Most
  532.                                    modern
  533.                                    content management systems will include
  534.                                    functionality for SEO, but it is up to you to properly employ it. Here are some
  535.                                    things to look for:
  536.  
  537.                                    <ul>
  538.                                        <li>URL: URLs have SEO value too. Make sure your CMS allows you to create
  539.                                            custom, static URLs. That way, you can ensure your URL includes your
  540.                                            keywords and a clear site
  541.                                            structure.
  542.                                        </li>
  543.                                        <li>Metadata: Your CMS should also allow you to easily control your metadata
  544.                                            (heading tags, alt tags, title tags, descriptions).
  545.                                        </li>
  546.                                        <li>Responsive design
  547.                                        </li>
  548.                                        <li>Navigation: You need to be able to change the text links and
  549.                                            breadcrumbs, as well as categorize content.
  550.                                        </li>
  551.                                    </ul>
  552.                                </p>
  553.                                <p class='b_text'>
  554.                                    As a writer, you usually have control over the page title, description and URL.
  555.                                    Remember to make these short, clear and
  556.                                    descriptive (and use keywords where you can reasonably, of course). If you aren't
  557.                                    the person actually publishing the
  558.                                    content, but rather handing it off to a Content Manager or someone else, it's a good
  559.                                    idea to include suggestions for
  560.                                    these elements with the content. Don't leave it to the designer to write your URLs
  561.                                    or page descriptions.
  562.  
  563.                                </p>
  564.                            </div>
  565.  
  566.                        </div>
  567.  
  568.                        <div class='r_wrap'>
  569.  
  570.                            <div class='b_round' id="box-6-rnd"></div>
  571.                            <div class='s_round' id="box-6-btn">
  572.                                <div class='s_arrow' id="box-6-arr"></div>
  573.                            </div>
  574.                        </div>
  575.  
  576.                    </div> -->
  577.                 </div>
  578.             </div>
  579.         </div>
  580.     </div>
  581.  
  582.  
  583.     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  584.        integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
  585.     <script>
  586.         $(document).ready(function () {
  587.  
  588.             var s_round = '.s_round';
  589.             var showAll = '#show-all';
  590.             var reset = '#reset';
  591.             var boxOneBtn = '#box-1-btn';
  592.             var boxTwoBtn = '#box-2-btn';
  593.             var boxThrBtn = '#box-3-btn';
  594.             var boxFourBtn = '#box-4-btn';
  595.             var boxFifthBtn = '#box-5-btn';
  596.             var boxSixthBtn = '#box-6-btn';
  597.  
  598.             $(s_round).hover(function () {
  599.                 $('.b_round').toggleClass('b_round_hover');
  600.                 return false;
  601.             });
  602.  
  603.             $(boxOneBtn).click(function () {
  604.                 flipCard(1);
  605.                 return false;
  606.             });
  607.             $(boxTwoBtn).click(function () {
  608.                 flipCard(2);
  609.                 return false;
  610.             });
  611.             $(boxThrBtn).click(function () {
  612.                 flipCard(3);
  613.                 return false;
  614.             });
  615.             $(boxFourBtn).click(function () {
  616.                 flipCard(4);
  617.                 return false;
  618.             });
  619.             $(boxFifthBtn).click(function () {
  620.                 flipCard(5);
  621.                 return false;
  622.             });
  623.             $(boxSixthBtn).click(function () {
  624.                 flipCard(6);
  625.                 return false;
  626.             });
  627.  
  628.             $(reset).click(function () {
  629.                 resetCards();
  630.                 return false;
  631.             });
  632.  
  633.             $(showAll).click(function () {
  634.                 resetCards();
  635.                 $('.flip_box').toggleClass('flipped');
  636.                 $(this).addClass('s_round_click');
  637.                 $('.s_arrow').toggleClass('s_arrow_rotate');
  638.                 $('.b_round').toggleClass('b_round_back_hover');
  639.                 return false;
  640.             });
  641.  
  642.             $(s_round).on('transitionend', function () {
  643.                 $(this).removeClass('s_round_click');
  644.                 $(this).addClass('s_round_back');
  645.                 return false;
  646.             });
  647.  
  648.             function resetCards() {
  649.                 if ($('.flipped')) {
  650.                     console.log(true);
  651.                     $(this).removeClass('s_round_click');
  652.                     $('.s_arrow').removeClass('s_arrow_rotate');
  653.                     $('.b_round').removeClass('b_round_back_hover');
  654.                 }
  655.                 $('.flip_box').removeClass('flipped');
  656.  
  657.                 return false
  658.  
  659.             }
  660.  
  661.             function flipCard(btnId) {
  662.                 $('#box-' + btnId).toggleClass('flipped');
  663.                 $(this).addClass('s_round_click');
  664.                 $('#box-' + btnId + '-arr').toggleClass('s_arrow_rotate');
  665.                 $('#box-' + btnId + '-rnd').toggleClass('b_round_back_hover');
  666.  
  667.                 return false;
  668.             }
  669.         });
  670.     </script>
  671. </body>
  672.  
  673. </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!