Wiki design - see another pen

Developer
John Malc
Size
3,881 Kb
Views
10,120
  1. Wiki design - see another pen Previews
  2. Wiki design - see another pen HTML Codes
  3. Wiki design - see another pen CSS Codes

How do I make an wiki design - see another pen?

What is a wiki design - see another pen? How do you make a wiki design - see another pen? This script and codes were developed by John Malc on 08 November 2022, Tuesday.

Wiki design - see another pen Previews
IQ Test

Wiki design - see another pen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wiki design - see another pen</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Up to date to
@version v6 of https://v4-alpha.getbootstrap.com/
@author Dmitrij Petrov (@dmpe on GitHub) -->
<div class="container whiteColorFont" id = "bootstrapSite"> <div class="row clr"> <div class="col"> <h3 class="whiteColorFont zeroMargin lineHeightFixIE11">Project and Portfolio Management</h3> </div> </div> <div class="row secondRow"> <div class="col-sm-4 border-0"> <p> <span class= "epm font-weight-bold">EPM</span> <br> <span class= "epm_sml"> <a href="http://***/cis/project/SitePages/[email protected]"> Enterprise Project Management </a> <span> <br> <span class= "epm_sml"> <a href="http://***/PWA/default.aspx"> Project Web Access (PWA) </a> <span> <br> </p> </div> <div class="col-sm-4 border-0"> <div class = "col-sm-6"> <a href="http://***/cis/project/SitePages/[email protected]"> <div class = "FAQBorder centeredElement"> <p class = "FAQTopPadding font-weight-bold ie11fix">EPM <br/> Reference Guide</p> </div> </a> </div> <div class = "col-sm-6"> <a href="http://***/cis/project/SitePages/FAQ.aspx"> <div class = "FAQBorder centeredElement"> <p class = "FAQText font-weight-bold">FAQ</p> </div> </a> </div> </div> <div class="col-sm-4 border-0"> </div> </div> <div class="row thirdRow"> <div class="col-sm-4 border-0"> <p> <span class= "epm font-weight-bold"> PM<sup>2</sup>@DGA-CIS </span> <br> <span class = "epm_sml"> <a href="http://***/cis/project/SitePages/PM%C2%[email protected]">Manage your projects</a> <br> <a href="http://***/cis/project/SitePages/PM%C2%[email protected]">Getting Started</a> </span> </p> </div> <div class="col-sm-4 border-0"> <div class="col-sm-12"> <a href="http://***/cis/project/SitePages/PM%C2%[email protected]"> <div class = "FAQBorder3 centeredElement"> <p class = "FAQTopPadding font-weight-bold">Reference Guide</p> </div> </a> </div> </div> <div class="col-sm-4 border-0"> </div> </div> <div class="row fourthRow"> <div class="col-sm-4 border-0"> <p> <span class="epm font-weight-bold"> Management Support </span> </p> </div>
<!-- https://v4-alpha.getbootstrap.com/components/buttons/ --> <div class="col-sm-8 border-0"> <div class="col-sm-4"> <a role="button" class="btn btn-lg buttonSimilar" href = "http://***/cis/project/SitePages/Portfolio%20Status.aspx">Portfolio Status</a> </div> <div class="col-sm-4"> <a role="button" class="btn btn-lg buttonSimilar" href = "http://***/cis/project/SitePages/Project%20End%20Reports.aspx">Project End Reports</a> </div> <div class="col-sm-4"> <a role="button" class="btn btn-lg buttonSimilar" href= "mailto:***@***">Contact Us</a> </div> </div> </div> <div class="row fiveRow font-weight-bold"> <div class="col-sm-6 leftCol"> <a class = "LinkBorder" href="http://***/cis/project/SitePages/CooP.aspx"> <p>Community of Practise - CooP</p> </a> </div> <div class="col-sm-6 rightCol "> <a class = "LinkBorder" href="http://***/cis/project/SitePages/EvaC.aspx"> <p>Project Charter Evaluation Committee - EvaC</p> </a> </div> </div>
</div>
</body>
</html>

Wiki design - see another pen - Script Codes CSS Codes

/*
https://mdbootstrap.com/css/colors/
https://v4-alpha.getbootstrap.com/layout/grid/
http://jsfiddle.net/J2XTs/
@author Dmitrij Petrov (@dmpe on GitHub)
See http://less2css.org/ and
@url https://codepen.io/f789gh/pen/RpQoNM
@url https://codepen.io/f789gh/pen/YZNaqR
*/
/* Global */
body { font-family: "Open Sans","Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif !important; font-size: 13px !important;
}
.row > .col, .row > [class^="col-"] { display:flex; flex-wrap:wrap; padding-top: .75rem; padding-bottom: .75rem; border: 2px solid rgba(86,61,124,.2); /* to make border fett */
/* background-color: rgba(86,61,124,.15); */
}
/* white color font everywhere */
.whiteColorFont { color: white !important;
}
/* unvisited link */
a:link { text-decoration: none !important; /* no underline */ color: white;
}
/* visited link */
a:visited { color: white;
}
/* mouse over link */
a:hover { color: white; text-decoration: none !important; /* no underline */
}
/* selected link */
a:active { color: blue;
}
.epm { font-size: x-large;
}
.epm_sml { font-size: small;
}
.FAQTopPadding { padding: 20px 0 0 0px; text-align: center; font-size:sm-large;
}
/* first row PPM */
.container > .clr { background-color:#404a52; height: 65px;
}
.lineHeightFixIE11 { line-height:normal !important;
}
/* must fix: otherwise inherits from MS SharePoint which
by default is auto */
.zeroMargin { margin: 0px 0px 0px 0px;
}
/* Here is all for second row */
.secondRow { box-shadow: inset -100px -100px 150px #205867; background-color:#abd3e0; height: 155px; border-width: 3px 0px; border-style: solid; border-color: #ffffff;
}
.FAQBorder { width: 100px; height: 100px; border-radius: 50%; border-top: 15px; border: 2px solid white; box-shadow: 0px 0px 5px #abd3e0; display: block; margin: auto;
}
/* in order to make (border) white background */
.FAQBorder:hover { background-color: #BDCDD0; background-color: rgba(205, 230, 247, 0.50);
} /* mainly related to the FAQ @ EPM to make it more central inside of
border */
.centeredElement { display:flex; justify-content:center; align-items:center;
}
.FAQText { padding: 15px 0 0 0px; color: white; text-align: center; font-size: xx-large;
}
/* Due to not wrapping the text inside of border, use http://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox */
.ie11fix { align-self: stretch;
}
/* Here is all for third row */
.thirdRow { box-shadow: inset -100px -50px 150px #901854; background-color:#f06292; height: 155px; border-width: 0px 0px 3px; /* must otherwise borders too large*/ border-style: solid; border-color: #ffffff;
}
.FAQBorder3 { width: 100px; height: 100px; border-radius: 50%; border: 2px solid white; display: block; margin: auto; box-shadow: 0px 0px 5px #ea86b8;
}
.FAQBorder3:hover { background-color: #CDE6F7; background-color: rgba(205, 230, 247, 0.50);
}
/* Here is all for fourth row */
.fourthRow { border-width: 3px 0px; height: 155px; font-size: xx-large; box-shadow: inset 100px -50px 150px #000000; background-color: #7d7d7d;
}
/* WS:normal because otherwise buttons are not responsive
!important because sharepoint overwrites default styles
http://stackoverflow.com/questions/19284153/how-to-get-a-responsive-button-in-bootstrap-3 */
.buttonSimilar { white-space: normal !important; padding: 5px 10px !important; border-radius: 6px !important; border: 2px solid #ffffff !important; box-shadow: #7d7d7d 0px 0px 5px !important;
}
.buttonSimilar:hover { background-color: #CDE6F7; background-color: rgba(205, 230, 247, 0.50);
}
/* Here is all for five row */
.fiveRow { height: 155px; font-size:x-large; border-width: 3px 0px; border-style: solid; border-color: #ffffff;
}
/* to make border around links a bit larger, for UX*/
.LinkBorder { border: solid transparent; border-width: 5px 5px;
}
.row > .leftCol { box-shadow: inset -50px -50px 100px #7f7f7f; background-color: #bfbfbf; border-width: 0px 3px 0px 0px; border-style: solid; border-color: #ffffff; display:flex; justify-content:center; align-items:center;
}
.row > .rightCol { box-shadow: inset -50px -50px 100px #c87800; background-color: #ffb546; display:flex; justify-content:center; align-items:center;
}
Wiki design - see another pen - Script Codes
Wiki design - see another pen - Script Codes
Home Page Home
Developer John Malc
Username f789gh
Uploaded November 08, 2022
Rating 3
Size 3,881 Kb
Views 10,120
Do you need developer help for Wiki design - see another pen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Malc (f789gh) Script Codes
Name
HomePage Production Version
Make Hyperlinks in the SharePoint list
A Pen by John Malc
Some Wireframing of new Reports section
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!