API tools faq
paste
Advertisement
MCDogWarrior

Detailed Profile Revamp [Custom]

MCDogWarrior
Apr 28th, 2022
1,590
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.55 KB | None | 0 0
raw download clone embed print report
  1. <!-------
  2. Handy tip (works on Google, not sure about other browsers): if you're looking to change multiple colors/links at once, highlight the hex code/link label and hold ctrl+f, then click "all" on the window that pops up. then you'll be able to type over all of the selected hexes/link labels. hope that helps speed things up!
  3. -------->
  4.  
  5. <div class="container my-1 mt-5" style="width:1200px; font-family: georgia; color:#Dad7c7">
  6. <!----- Background image ----->
  7.  <div class="card p-3 rounded-0 border-0" style="background-image:url( imglink ); background-size:cover; background-position: center; border-radius:70px;">
  8.   <div class="row no-gutters">
  9.    <div class="col-8 p-1">
  10. <!----- Main card ----->
  11.     <div class="card rounded-0 mt-3" style="background-color:rgba(0,0,0,0.85); border-radius:60px; border:7px solid #243b3b; height:400px">
  12.  <!---- Username box + text ---->
  13.      <div class="card rounded-0 border-0 mx-auto p-1" style="background-color:#243b3b; border-radius:60px; height:70px; width:450px; margin-top:-25px">
  14.      <p class="my-auto" style="font-size:40px; text-align:center; font-variant:small-caps">Username</p>
  15.      </div>
  16. <!----- Floaty icons ----->
  17.      <a style="position:absolute; top:-32px; left:20px; font-size:70px; color:#Dad7c7; transform:rotate(-10deg)"><i class="fa-solid fa-sun fa-beat"></i></a> <!--- Bouncy sun --->
  18.      <a style="position:absolute; top:-32px; right:20px; font-size:70px; color:#Dad7c7; transform:rotate(10deg)"><i class="fa-solid fa-clouds"></i></a> <!--- Clouds --->
  19.      <a style="position:absolute; top:-25px; right:-20px; font-size:40px; color:#Dad7c7; transform:rotate(10deg)"><i class="fa-solid fa-cloud"></i></a> <!--- Cloud --->
  20.  
  21. <!----- Tab content ----->
  22.      <div class="tab-content">
  23.  <!---- Tab 1 - About Me ---->
  24.       <div class="tab-pane fade active show" id="about">
  25.   <!--- Quote/tagline (try to keep it to just a sentence or it'll go under the icons [unless you change the font size]) --->
  26.       <p class="mx-5 mt-1" style="text-align:center; opacity:0.5">"small quote/tagline in here"</p>
  27.        <div class="row no-gutters mx-3">
  28.   <!--- Age box + text --->
  29.         <div class="col-3 p-1">
  30.          <div class="card rounded-0 border-0 p-1" style="background-color:#243b3b; height:50px; border-top-left-radius:30px; border-bottom-left-radius:30px;">
  31.          <p class="my-auto" style="font-size:30px; text-align:center; font-variant:small-caps">Age</p>
  32.          </div>
  33.         </div>
  34.   <!--- Pronouns/Gender box + text --->
  35.         <div class="col-3 p-1">
  36.          <div class="card rounded-0 border-0 p-1" style="background-color:#243b3b; height:50px;">
  37.          <p class="my-auto" style="font-size:30px; text-align:center; font-variant:small-caps">Pronouns</p>
  38.          </div>
  39.         </div>
  40.   <!--- Profession box + text
  41.  (such as hobbyist, professional, graphic designer, animator, whatever else) --->
  42.         <div class="col-6 p-1">
  43.          <div class="card rounded-0 border-0 p-1" style="background-color:#243b3b; height:50px; border-top-right-radius:30px; border-bottom-right-radius:30px;">
  44.          <p class="my-auto" style="font-size:30px; text-align:center; font-variant:small-caps">Profession</p>
  45.          </div>
  46.         </div>
  47.        </div>
  48.   <!--- Large text box --->
  49.        <div class="card rounded-0 border-0 mt-2 mx-2 p-1" style="background-color:rgba(0,0,0,0); border:7px solid #243b3b; height:215px; overflow:auto">
  50.        <p style="font-size:16px; text-align:justify">Text words
  51.        <br>Another paragraph</p>
  52.        </div>
  53.       </div>
  54.  
  55.  <!---- Tab 2 - My Interests ---->
  56.       <div class="tab-pane fade" id="interest">
  57.        <div class="row no-gutters mb-1">
  58.   <!--- Stuff you like, interests, etc --->
  59.         <div class="col-6 p-1">
  60.          <div class="card rounded-0 border-0 p-1 mt-4 ml-2" style="background-color:#375649; height:30px; border-top-left-radius:30px;">
  61.          <p class="my-auto ml-3" style="font-size:20px; text-align:left; font-variant:small-caps"><i class="fa-solid fa-circle-check fa-fade mr-2"></i>Stuff I like</p>
  62.          </div>
  63.    <!-- List -->
  64.          <div class="card rounded-0 ml-2" style="background-color:rgba(0,0,0,0); border:4px solid #375649; height:110px; overflow:auto">
  65.          <ul style="font-size: 15px; margin-left:-10px" class="mt-1">
  66.           <li>items</li>
  67.           <li>in</li>
  68.           <li>here</li>
  69.          </ul>
  70.          </div>
  71.         </div>
  72.   <!--- Stuff you don't like --->
  73.         <div class="col-6 p-1">
  74.          <div class="card rounded-0 border-0 p-1 mt-4 mr-2" style="background-color:#583e2b; height:30px; border-top-right-radius:30px;">
  75.          <p class="my-auto" style="font-size:20px; text-align:right; font-variant:small-caps">Stuff I'm not a fan of<i class="fa-solid fa-circle-xmark fa-fade mr-3 ml-2"></i></p>
  76.          </div>
  77.    <!-- List -->
  78.          <div class="card rounded-0 mr-2" style="background-color:rgba(0,0,0,0); border:4px solid #583e2b; height:110px; overflow:auto">
  79.          <ul style="font-size: 15px; margin-left:-10px" class="mt-1">
  80.           <li>items</li>
  81.           <li>also in</li>
  82.           <li>here</li>
  83.          </ul>
  84.          </div>
  85.         </div>
  86.   <!--- Your (main) hobbies --->
  87.         <div class="col-12">
  88.          <div class="card rounded-0 border-0 p-1 mt-1 mx-4" style="background-color:#2e3741; height:30px;">
  89.          <p class="my-auto" style="font-size:20px; text-align:center; font-variant:small-caps"><i class="fa-solid fa-circle-bookmark fa-fade mr-4"></i>My main hobbies<i class="fa-solid fa-circle-bookmark fa-fade ml-4"></i></p>
  90.          </div>
  91.    <!-- List -->
  92.          <div class="card rounded-0 mx-4" style="background-color:rgba(0,0,0,0); border-bottom-right-radius:30px; border-bottom-left-radius:30px; border:4px solid #2e3741; height:97px; overflow:auto">
  93.          <ul style="font-size: 15px; margin-left:-10px" class="mt-1">
  94.           <li>items</li>
  95.           <li>in here</li>
  96.           <li>too</li>
  97.          </ul>
  98.          </div>
  99.         </div>
  100.        </div>
  101.       </div>
  102.  
  103.  <!---- Tab 3 - Art Status (woah a new section) ---->
  104.       <div class="tab-pane fade" id="artstat">
  105.        <div class="row no-gutters mb-1">
  106.   <!--- Commissions section --->
  107.         <div class="col-4 p-1">
  108.          <div class="card rounded-0 border-0 p-1 mt-4 ml-2" style="background-color:#243b3b; height:30px; border-top-left-radius:30px;">
  109.          <p class="my-auto ml-3" style="font-size:20px; text-align:left; font-variant:small-caps">Commissions</p>
  110.          </div>
  111.    <!-- Description text box -->
  112.          <div class="card rounded-0 ml-2 p-1" style="background-color:rgba(0,0,0,0); border:4px solid #243b3b; height:185px; overflow:auto; border-bottom-left-radius:30px; overflow:auto">
  113.          <p class="mb-3" style="text-align:justify">Commission info here</p>
  114.          </div>
  115.    <!-- Status button -->
  116.          <div class="card rounded-circle border-0" style="height:50px; width:50px; position:absolute; top:20px; right:15px; background-color:#375649">
  117.          <p class="my-auto" style="font-size:14px; text-align:center; opacity:0.5">OPEN</p>
  118.          </div>
  119.    <!-- Highlight link -->
  120.          <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:20px; right:15px; height:50px; width:50px" href=" linktocommspage "></a>
  121.          </div>
  122.   <!--- Trades/Collabs section --->
  123.          <div class="col-4 p-1">
  124.           <div class="card rounded-0 border-0 p-1 mt-4" style="background-color:#243b3b; height:30px;">
  125.           <p class="my-auto ml-1" style="font-size:20px; text-align:left; font-variant:small-caps">Trades/Collabs</p>
  126.           </div>
  127.    <!-- Description text box -->
  128.           <div class="card rounded-0 p-1" style="background-color:rgba(0,0,0,0); border:4px solid #243b3b; height:185px; overflow:auto; overflow:auto">
  129.         <p style="text-align:justify">Trade info here</p>
  130.         </div>
  131.    <!-- Status button -->
  132.         <div class="card rounded-circle border-0" style="height:50px; width:50px; position:absolute; top:20px; right:15px; background-color:#583e2b">
  133.           <p class="my-auto" style="font-size:12px; text-align:center; opacity:0.5">CLOSED</p>
  134.         </div>
  135.    <!-- (Add highlight link code above this, don't include the /div with it) -->
  136.           </div>
  137.   <!--- Requests section --->
  138.           <div class="col-4 p-1">
  139.            <div class="card rounded-0 border-0 p-1 mt-4 ml-2" style="background-color:#243b3b; height:30px; border-top-right-radius:30px;">
  140.            <p class="my-auto ml-3" style="font-size:20px; text-align:left; font-variant:small-caps">Requests</p>
  141.            </div>
  142.    <!-- Description text box -->
  143.            <div class="card rounded-0 ml-2 p-1" style="background-color:rgba(0,0,0,0); border:4px solid #243b3b; height:185px; overflow:auto; border-bottom-right-radius:30px; overflow:auto">
  144.            <p style="text-align:justify">Request info here</p>
  145.            </div>
  146.    <!-- Status button -->
  147.            <div class="card rounded-circle border-0" style="height:50px; width:50px; position:absolute; top:20px; right:15px; background-color:#2e3741">
  148.            <p class="my-auto" style="font-size:12px; text-align:center; opacity:0.5">VARIES</p>
  149.            </div>
  150.    <!-- (Add highlight link code above this) -->
  151.           </div>
  152.   <!--- Design preferences button --->
  153.           <div class="col-6 p-1">
  154.            <div class="card rounded-0 border-0 p-1 mt-2  mx-auto" style="background-color:#243b3b; height:40px; border-radius:30px; width:250px">
  155.            <p class="my-auto ml-1" style="font-size:20px; text-align:center; font-variant:small-caps">Design Preferences</p>
  156.    <!-- Highlight link -->
  157.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:40px; border-radius:30px; width:250px" href="linktodesignprefs"></a>
  158.            </div>
  159.           </div>
  160.   <!--- Art examples button --->
  161.           <div class="col-6 p-1">
  162.            <div class="card rounded-0 border-0 p-1 mt-2 mx-auto" style="background-color:#243b3b; height:40px; border-radius:30px; width:250px">
  163.            <p class="my-auto ml-1" style="font-size:20px; text-align:center; font-variant:small-caps">Art Examples</p>
  164.    <!-- Highlight link -->
  165.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:40px; border-radius:30px; width:250px" href="linktoartegs"></a>
  166.            </div>
  167.           </div>
  168.          </div>
  169.         </div>
  170.  
  171.  <!---- Tab 4 - Friends/Featured Characters
  172. names appear a bit... unclear over the image, so hopefully you don't rely on people seeing the names from here---->
  173.         <div class="tab-pane fade" id="friends">
  174.          <div class="card rounded-0 border-0 mt-2 mx-2 p-1" style="background-color:rgba(0,0,0,0); border:7px solid #243b3b; height:299px; overflow:auto">
  175.           <div class="row no-gutters mb-1">
  176.   <!--- Person 1 --->
  177.            <div class="col-4 p-1">
  178.            <img src=" imglink " class="d-block mx-auto mb-2 rounded-circle" style="height:150px; width:150px; border:4px solid #243b3b;">
  179.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; right:37px; height:150px; width:150px" href=" linktouser "><br><span style="font-size:17px; text-align:center">Username</span></a>
  180.            </div>
  181.   <!--- Person 2 --->
  182.            <div class="col-4 p-1">
  183.            <img src=" imglink " class="d-block mx-auto mb-2 rounded-circle" style="height:150px; width:150px; border:4px solid #243b3b;">
  184.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; right:37px; height:150px; width:150px" href=" linktouser "><br><span style="font-size:17px; text-align:center">Username</span></a>
  185.            </div>
  186.   <!--- Person 3 --->
  187.            <div class="col-4 p-1">
  188.            <img src=" imglink " class="d-block mx-auto mb-2 rounded-circle" style="height:150px; width:150px; border:4px solid #243b3b;">
  189.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; right:37px; height:150px; width:150px" href=" linktouser "><br><span style="font-size:17px; text-align:center">Username</span></a>
  190.            </div>
  191.   <!--- Person 4 --->
  192.            <div class="col-4 p-1">
  193.            <img src=" imglink " class="d-block mx-auto mb-2 rounded-circle" style="height:150px; width:150px; border:4px solid #243b3b;">
  194.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; right:37px; height:150px; width:150px" href=" linktouser "><br><span style="font-size:17px; text-align:center">Username</span></a>
  195.            </div>
  196.   <!--- Person 5 --->
  197.            <div class="col-4 p-1">
  198.            <img src=" imglink " class="d-block mx-auto mb-2 rounded-circle" style="height:150px; width:150px; border:4px solid #243b3b;">
  199.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; right:37px; height:150px; width:150px" href=" linktouser "><br><span style="font-size:17px; text-align:center">Username</span></a>
  200.            </div>
  201.   <!--- Person 6 --->
  202.            <div class="col-4 p-1">
  203.            <img src=" imglink " class="d-block mx-auto mb-2 rounded-circle" style="height:150px; width:150px; border:4px solid #243b3b;">
  204.            <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; right:37px; height:150px; width:150px" href=" linktouser "><br><span style="font-size:17px; text-align:center">Username</span></a>
  205.            </div>
  206.   <!--- (add more above this) --->
  207.           </div>
  208.          </div>
  209.         </div>
  210.  
  211. <!----- Tabs ----->
  212.         <ul class="nav nav-tabs card-header-tabs row no-gutters">
  213.  <!---- Tab 1 ---->
  214.          <li class="col-3 p-1"><a class="btn p-2 rounded-0 border-0 text-white btn-block text-uppercase" style="background-color:#243b3b; height:45px; border-top-left-radius:30px; border-bottom-left-radius:30px; font-size:25px; width:167px">ABOUT ME</a>
  215.          <a class="btn btn-outline-warning btn-block rounded-0 border-0 active" style="mix-blend-mode:overlay; position:absolute; top:4px; left:4px; border-top-left-radius:30px; border-bottom-left-radius:30px; height:45px; width:167px" data-toggle="tab" href="#about"></a>
  216.          </li>
  217.  <!---- Tab 2 ---->
  218.          <li class="col-3 p-1"><a class="btn p-2 rounded-0 border-0 text-white btn-block text-uppercase" style="background-color:#243b3b; height:45px; font-size:25px; width:167px">INTERESTS</a>
  219.          <a class="btn btn-outline-warning btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; left:4px; height:45px; width:167px" data-toggle="tab" href="#interest"></a>
  220.          </li>  
  221.  <!---- Tab 3 ---->
  222.          <li class="col-3 p-1"><a class="btn p-2 rounded-0 border-0 text-white btn-block text-uppercase" style="background-color:#243b3b; height:45px; font-size:25px; width:167px">ART STATUS</a>
  223.          <a class="btn btn-outline-warning btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; left:4px; height:45px; width:167px" data-toggle="tab" href="#artstat"></a>
  224.          </li>
  225.  <!---- Tab 4 ---->
  226.          <li class="col-3 p-1"><a class="btn p-2 rounded-0 border-0 text-white btn-block text-uppercase" style="background-color:#243b3b; height:45px; border-top-right-radius:30px; border-bottom-right-radius:30px; font-size:25px; width:167px;">FRIENDS</a>
  227.          <a class="btn btn-outline-warning btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:4px; left:4px; border-top-right-radius:30px; border-bottom-right-radius:30px; height:45px; width:167px" data-toggle="tab" href="#friends"></a>
  228.          </li>
  229.         </ul>
  230.        </div>
  231.       </div>
  232.     </div>
  233.    
  234.     <div class="col-4 p-1">
  235. <!----- GIANT profile picture ----->
  236.     <img src=" imglink " class="d-block mx-auto mb-2 rounded-circle" style="height:270px; width:270px; border:7px solid #243b3b;">
  237.  <!---- Icons over pfp ---->
  238.    <a style="position:absolute; top:150px; left:20px; font-size:70px; color:#Dad7c7; transform:rotate(5deg)"><i class="fa-solid fa-clouds"></i></a> <!--- Clouds, bottom left --->
  239.    <a style="position:absolute; top:0px; right:80px; font-size:30px; color:#Dad7c7; transform:rotate(5deg)"><i class="fa-solid fa-cloud"></i></a> <!--- Cloud 1, top right --->
  240.    <a style="position:absolute; top:30px; right:40px; font-size:50px; color:#Dad7c7; transform:rotate(5deg)"><i class="fa-solid fa-cloud"></i></a> <!--- Cloud 2, top right --->
  241.     <div class="card bg-transparent my-2" style="border:0px">
  242.  
  243. <!----- Video embedded icon
  244. you can obtain a video's ID by copying the gibberish letters/numbers at the end of a link, then replace "videoid" with that (don't include the spaces, it won't work) ----->
  245.     <iframe src="https://www.youtube.com/embed/ videoid ?controls=0" class="border-0" style="position: absolute; top:-45px; right:60px; height: 130px; width: 130px; z-index: 9; opacity: 0;"></iframe>
  246.  <!---- Spinning disc icon ---->
  247.     <a style="position:absolute; top:-54px; right:70px; font-size:100px; color:#Dad7c7"> <i class="fa-solid fa-compact-disc fa-spin"></i></a>
  248. <!----- Collapse button icon ----->
  249.     <a style="position:absolute; top:20px; right:200px; font-size:80px; color:#Dad7c7" data-toggle="collapse" href="#additional"> <i class="fa-solid fa-circle-arrow-down"></i></a>
  250.     </div>
  251.    </div>
  252.   </div>
  253.  
  254. <!----- Collapse section ----->
  255.   <div id="additional" class="w-100 panel-collpase p-2 collapse">
  256.    <div class="row no-gutters">
  257.  <!---- Section 1 - Sonas/Characters ---->
  258.     <div class="col-6 p-1">
  259.   <!--- Background image --->
  260.      <div class="card rounded-0 border-0 p-2 mt-4 ml-2" style="background-image:url( imglink ); background-size:cover; background-position: bottom; border-top-left-radius:30px;">
  261.   <!--- Translucent card --->
  262.       <div class="card rounded-0 border-0 p-1" style="background-color:rgba(80,24,35,0.85); height:230px; border-top-left-radius:25px;">
  263.        <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:60px;">
  264.   <!--- Header + icon --->
  265.        <p class="col-12 justify-content-between mx-2" style="text-align: center; font-variant:small-caps;">
  266.        <span style="font-size:40px;">Sonas</span>
  267.        <i class="fa-solid fa-sun" style="font-size:50px;"></i> </p>
  268.        </div>
  269.   <!--- Text box --->
  270.        <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:140px; overflow:auto">
  271.        <p style="font-size:16px; text-align:justify">Describe in here why your sonas are so cool</p>
  272.        </div>
  273.   <!--- Directory button --->
  274.        <div class="card rounded-0 border-0 p-1 mt-1 mx-auto" style="background-color:#501823; height:40px; border-radius:30px; width:250px; margin-bottom:-15px">
  275.        <p class="my-auto ml-1" style="font-size:20px; text-align:center; font-variant:small-caps">Check them out here!</p>
  276.    <!-- Highlight link -->
  277.        <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:40px; border-radius:30px; width:250px" href=" linktofolder "></a>
  278.        </div>
  279.       </div>
  280.      </div>
  281.     </div>
  282.  
  283.  <!---- Section 2 - Stories/Projects ---->
  284.    <div class="col-6 p-1">
  285.   <!--- Background image --->
  286.     <div class="card rounded-0 border-0 p-2 mt-4 ml-2" style="background-image:url( imglink ); background-size:cover; background-position: center; border-top-right-radius:30px;">
  287.   <!--- Translucent card --->
  288.      <div class="card rounded-0 border-0 p-1" style="background-color:rgba(80,22,18,0.85); height:230px; border-top-right-radius:25px;">
  289.       <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:60px;">
  290.   <!--- Header + icon --->
  291.       <p class="col-12 justify-content-between mx-2" style="text-align: center; font-variant:small-caps;">
  292.       <i class="fa-solid fa-cloud" style="font-size:50px;"></i>
  293.       <span style="font-size:40px;">Stories</span>
  294.       </p>
  295.       </div>
  296.   <!--- Text box --->
  297.       <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:140px; overflow:auto">
  298.       <p style="font-size:16px; text-align:justify">Describe in here the kinds of stories you make</p>
  299.       </div>
  300.   <!--- Directory button --->
  301.       <div class="card rounded-0 border-0 p-1 mt-1 mx-auto" style="background-color:#501612; height:40px; border-radius:30px; width:250px; margin-bottom:-15px">
  302.       <p class="my-auto ml-1" style="font-size:20px; text-align:center; font-variant:small-caps">Check them out here!</p>
  303.    <!-- Highlight link -->
  304.       <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:40px; border-radius:30px; width:250px" href=" linktofolder "></a>
  305.       </div>
  306.      </div>
  307.     </div>
  308.    </div>
  309.  
  310.  <!---- Section 3 - Resources/Adopts ---->
  311.    <div class="col-6 p-1">
  312.   <!--- Background image --->
  313.     <div class="card rounded-0 border-0 p-2 mt-2 ml-2" style="background-image:url( imglink ); background-size:cover; background-position: top; border-bottom-left-radius:30px;">
  314.   <!--- Translucent card --->
  315.      <div class="card rounded-0 border-0 p-1" style="background-color:rgba(109,62,33,0.85); height:230px; border-bottom-left-radius:25px;">
  316.       <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:60px;">
  317.   <!--- Header + icon --->
  318.       <p class="col-12 justify-content-between mx-2" style="text-align: center; font-variant:small-caps;">
  319.       <span style="font-size:40px;">Resources</span>
  320.       <i class="fa-solid fa-cloud" style="font-size:50px;"></i> </p>
  321.       </div>
  322.   <!--- Text box --->
  323.       <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:140px; overflow:auto">
  324.       <p style="font-size:16px; text-align:justify">Describe in here what kind of resources you make</p>
  325.       </div>
  326.   <!--- Directory button --->
  327.       <div class="card rounded-0 border-0 p-1 mt-1 mx-auto" style="background-color:#6d3e21; height:40px; border-radius:30px; width:250px; margin-bottom:-15px">
  328.       <p class="my-auto ml-1" style="font-size:20px; text-align:center; font-variant:small-caps">Check them out here!</p>
  329.    <!-- Highlight link -->
  330.       <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:40px; border-radius:30px; width:250px" href=" linktofolder "></a>
  331.       </div>
  332.      </div>
  333.     </div>
  334.    </div>
  335.  
  336.  <!---- Section 4 - Socials ---->
  337.    <div class="col-6 p-1">
  338.   <!--- Background image --->
  339.     <div class="card rounded-0 border-0 p-2 mt-2 ml-2" style="background-image:url( imglink ); background-size:cover; background-position: bottom; border-bottom-right-radius:30px;">
  340.   <!--- Translucent card --->
  341.      <div class="card rounded-0 border-0 p-1" style="background-color:rgba(105,49,27,0.85); height:230px; border-bottom-right-radius:25px;">
  342.       <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:60px;">
  343.   <!--- Header + icon --->
  344.       <p class="col-12 justify-content-between mx-2" style="text-align: center; font-variant:small-caps;">
  345.       <i class="fa-solid fa-clouds" style="font-size:50px;"></i>
  346.       <span style="font-size:40px;">Socials</span>
  347.       </p>
  348.       </div>
  349.   <!--- Socials
  350.  I reccomend keeping to 4, however if you're certain you know what you're doing, feel free to fit another in, or remove one. you won't need to adjust the columns, they auto adjust --->
  351.       <div class="card rounded-0 border-0 p-1" style="background-color:rgba(0,0,0,0); height:140px;">
  352.        <div class="row no-gutters">
  353.    <!-- Social 1 -->
  354.         <div class="col p-1">
  355.         <i class="fa-brands fa-youtube" style="font-size:100px; color:#Af7b49"></i>
  356.     <!-- Highlight link (change the brand icon below to match the brand icon above or the highlight effect will be weird) -->
  357.         <a class="btn" style="mix-blend-mode:overlay; position:absolute; top:-5px; left:-65px; height:40px; border-radius:30px; width:250px"
  358.        href=" linktosocial "> <i class="fa-brands fa-youtube"
  359.        style="font-size:100px;"></i> </a>
  360.         </div>
  361.    <!-- Social 2 -->
  362.         <div class="col p-1">
  363.         <i class="fa-brands fa-twitter" style="font-size:100px; color:#Af7b49"></i>
  364.     <!-- Highlight link -->
  365.         <a class="btn" style="mix-blend-mode:overlay; position:absolute; top:-5px; left:-71px; height:40px; border-radius:30px; width:250px"
  366.        href=" linktosocial "><i class="fa-brands fa-twitter"
  367.        style="font-size:100px;"></i> </a>
  368.         </div>
  369.    <!-- Social 3 -->
  370.         <div class="col p-1">
  371.         <i class="fa-brands fa-twitch" style="font-size:100px; color:#Af7b49"></i>
  372.     <!-- Highlight link -->
  373.         <a class="btn" style="mix-blend-mode:overlay; position:absolute; top:-5px; left:-71px; height:40px; border-radius:30px; width:250px"
  374.        href=" linktosocial "><i class="fa-brands fa-twitch"
  375.        style="font-size:100px;"></i> </a>
  376.         </div>
  377.    <!-- Social 4 -->
  378.         <div class="col p-1">
  379.         <i class="fa-solid fa-paintbrush-pencil" style="font-size:100px; color:#Af7b49"></i>
  380.     <!-- Highlight link -->
  381.         <a class="btn" style="mix-blend-mode:overlay; position:absolute; top:-5px; left:-65px; height:40px; border-radius:30px; width:250px"
  382.        href=" linktosocial "><i class="fa-solid fa-paintbrush-pencil"
  383.        style="font-size:100px;"></i> </a>
  384.         </div>
  385.   <!--- Add more (if you know how) above here --->
  386.        </div>
  387.       </div>
  388.   <!--- Carrd link button --->
  389.       <div class="card rounded-0 border-0 p-1 mt-1 mx-auto" style="background-color:#69311b; height:40px; border-radius:30px; width:250px; margin-bottom:-15px">
  390.       <p class="my-auto ml-1" style="font-size:20px; text-align:center; font-variant:small-caps">Link to my Carrd</p>
  391.    <!-- Highlight link -->
  392.       <a class="btn btn-outline-warning btn-block rounded-circle border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:40px; border-radius:30px; width:250px" href=" linktocarrd "></a>
  393.       </div>
  394.      </div>
  395.     </div>
  396.    </div>
  397.   </div>
  398.  </div>
  399. </div>
  400.  <!--code credit (do not remove/alter)-->
  401. <span><a style="font-size:13px; color:#c4415d;" href="https://toyhou.se/MCDogResource" class="pull-right"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></span>
  402. </div>
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!