SHARE
TWEET

Untitled

a guest Jun 25th, 2019 50 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML
  2. <body class="bg-dark">
  3.   <div class="container-fluid page-container">
  4.     <div class="row">
  5.       <div class="col-6 tcontainer-frame">
  6.         <div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
  7.             welcome
  8.             you. Please make your
  9.             selection to the right.</span>
  10.         </div>
  11.       </div>
  12.       <div class="col-6 link-container">
  13.         <div id="newSolCircle"><p>New Solicitor</p></div>
  14.         <div id="patronCircle"><p>Patron</p></div>
  15.         <div id="alchemistCircle"><p>Alchemist</p></div>
  16.       </div>
  17.     </div>
  18.   </div>
  19.   </div>
  20. </body>
  21.      
  22. CSS
  23. /*variable declarations*/
  24.  
  25. :root {
  26.   --teal: #37C8AB;
  27.   --white: #ffffff;
  28.   --black: #000000;
  29.   --lilac: #B380FF;
  30.   --purple: #7137C8;
  31.   --aqua: #008066;
  32. }
  33.  
  34. /*page body*/
  35. body {
  36.   box-sizing: border-box;
  37.   margin: 0;
  38.   padding: 0;
  39. }
  40.  
  41. .page-container {
  42.   background: var(--lilac);
  43.   margin-top: 10px;
  44.   padding-bottom: 5em;
  45.   padding-left: 2em;
  46.   padding-top: 5.8em;
  47. }
  48.  
  49. /*Text Conatiner*/
  50.  
  51. .tcontainer-frame {
  52.   background: var(--purple);
  53.   border: var(--black) 2px solid;
  54.   display: flex;
  55.   justify-content: center;
  56.   align-items: center;
  57.   padding: 1em;
  58. }
  59.  
  60. .tcontainer {
  61.   background: var(--black);
  62.   font-size: 24px;
  63.   padding: 12em 1em;
  64.   text-align: center;
  65. }
  66.  
  67. .teal-font {
  68.   color: var(--teal);
  69. }
  70.  
  71. /*Link container*/
  72. .link-container {
  73.   display: flex;
  74.   flex-flow: column wrap;
  75.   padding: 4em;
  76.   text-align: center;
  77. }
  78.  
  79. #newSolCircle {
  80.   align-items: center;
  81.   align-self: flex-start;
  82.   background: var(--teal);
  83.   border-radius: 100%;
  84.   display: flex;
  85.   flex: 1 1 0;
  86.   justify-content: center;
  87.   margin: 2em;
  88.   padding: 1em;
  89. }
  90.  
  91. #patronCircle {
  92.   align-items: center;
  93.   align-self: center;
  94.   background: var(--aqua);
  95.   border-radius: 100%;
  96.   display: flex;
  97.   flex: 1 1 0;
  98.   margin: 2em;
  99.   padding: 1em;
  100. }
  101.  
  102. #alchemistCircle {
  103.   align-items: center;
  104.   align-self: flex-end;
  105.   background: var(--purple);
  106.   border-radius: 100%;
  107.   display: flex;
  108.   flex: 1 1 0;
  109.   margin: 2em;
  110.   padding: 1em;
  111. }
RAW Paste Data
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
 
Top