Advertisement
circlejourney

Showcase

Aug 19th, 2018 (edited)
1,985
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.99 KB | None | 0 0
  1. <div class = "alert alert-primary text-center"><a class = "btn btn-primary" href="https://pastebin.com/29mzdJhV"><i class = "fa fa-code"></i> Pastebin code</a></div>
  2.  
  3. <div class="container-fluid" style="font-size:11pt;width:100%;height:auto;color:#333;">
  4.   <div class="row">
  5.     <div class="col-md-9" style="margin-bottom:20px;padding:0;"><!---Left bar--->
  6.       <div class="container" style="padding:0px!important;margin-bottom:10px;">
  7.         <table style="border-collapse:collapse;width:100%;border:transparent;">
  8.           <tbody>
  9.             <tr>
  10.               <td style="width:128px;padding:0 10px 0 0;">
  11.                 <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">
  12.               </td>
  13.               <td style="vertical-align:middle;font-size:24pt;border:3px dashed white;padding:7px;height:100%;text-align:center;background:#333 url(https://i.imgur.com/fkbahHA.jpg); color:white;letter-spacing:3px;text-transform:uppercase;">
  14.                 <span style="font-family:Bookman,Georgia,serif;">- Name -</span>
  15.                 <p style="font-size:10pt;color:#aaa;text-align:center;margin:0;">Age ♦ Country ♦ Detail 3</p></td>
  16.               </tr>
  17.             </tbody>
  18.           </table>
  19.         </div>
  20.        
  21.        
  22.        
  23.         <div class="container" style="margin-bottom:10px;background-color:#f2e6d2;padding:15px;border-left:10px solid #666;border-right:10px solid #666;border-top:1px solid #666;border-bottom:1px solid #666;">
  24.             <p>Write some introductory text about yourself here.</p>
  25.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie eros nec iaculis tristique. Integer malesuada scelerisque elit, nec viverra leo ultricies sed. Morbi eget vehicula dui, volutpat consectetur metus. Mauris non tincidunt sapien. Vestibulum metus nisl, facilisis eget sollicitudin elementum, accumsan nec sapien. Suspendisse porttitor nisi sit amet nibh vehicula ultrices.</p>
  26.             <p>Curabitur interdum diam justo. Nulla lacinia elementum enim, at molestie nisi accumsan eget. Fusce at sem viverra, volutpat mauris sit amet, imperdiet diam. Aenean metus ante, consequat eu enim ut, tristique placerat magna. Vestibulum nec tempus nibh.</p>
  27.         </div>
  28.        
  29.         <div class="container" style="width:100%;text-align:center;margin-bottom:10px;">
  30.           <div style="font-size:14pt;display:inline-block;padding:3px 30px;text-transform:uppercase;letter-spacing:2px;background-color:#666;color:white;">Projects</div>
  31.         </div>
  32.        
  33.         <!-- PROJECT SHOWCASE: Duplicate this bit for each project. -->
  34.         <div class="container" style="margin-bottom:10px;background-color:#eee;padding:10px;border:1px solid #666;">
  35.             <div style="font-size:12pt;color:#eee;background-color:#333;padding:5px;text-transform:uppercase;letter-spacing:2px;">
  36.                 <a href="FOLDER LINK" style = "color:#eee">Project 1 Title</a>
  37.             </div>
  38.            
  39.             <!-- Project description -->
  40.             <div style="padding:10px;"><p>Write a short description of your project here.</p></div>
  41.          
  42.            
  43.             <!-- Character feature: 6 per row. Change the URLs to add the desired thumbnails -->
  44.           <div class = "row px-3" style="color:white;font-size:11pt;text-align:center;margin-top:10px;">
  45.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  46.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 1
  47.                 </a></div>
  48.                    
  49.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  50.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 2
  51.                 </a></div>
  52.                    
  53.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  54.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 3
  55.                 </a></div>
  56.                    
  57.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  58.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 4
  59.                 </a></div>
  60.                    
  61.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  62.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 5
  63.                 </a></div>
  64.                    
  65.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  66.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 6
  67.                 </a></div>
  68.             </div>
  69.         </div>
  70.         <!-- END PROJECT SHOWCASE -->
  71.        
  72.         <div class="container" style="margin-bottom:10px;background-color:#eee;padding:10px;border:1px solid #666;">
  73.             <div style="font-size:12pt;color:#eee;background-color:#333;padding:5px;text-transform:uppercase;letter-spacing:2px;">
  74.                 <a href="FOLDER LINK" style = "color:#eee">Project 2 Title</a>
  75.             </div>
  76.            
  77.             <!-- Project description -->
  78.             <div style="padding:10px;"><p>Write a short description of your project here.</p></div>
  79.          
  80.            
  81.             <!-- Character feature: 6 per row. Change the URLs to add the desired thumbnails -->
  82.           <div class = "row px-3" style="color:white;font-size:11pt;text-align:center;margin-top:10px;">
  83.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  84.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 1
  85.                 </a></div>
  86.                    
  87.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  88.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 2
  89.                 </a></div>
  90.                    
  91.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  92.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 3
  93.                 </a></div>
  94.                    
  95.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  96.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 4
  97.                 </a></div>
  98.                    
  99.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  100.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 5
  101.                 </a></div>
  102.                    
  103.                 <div class = "col col-4 col-md-2"><a href="LINK" style="display:block;width:100%;">
  104.                     <img src="https://file.toyhou.se/characters/2627078?" class="fr-fic fr-dii" style = "width:100%">Character 6
  105.                 </a></div>
  106.             </div>
  107.         </div>
  108.     </div>
  109.  
  110.     <!-- SIDEBAR -->
  111.     <div class="col-md-3" style="font-size:11pt;">
  112.        
  113.         <!-- TRADES AND COMMISSIONS STATUS: Delete if not applicable! -->
  114.         <div style="display:inline-block;padding:10px;background:#eee;width:100%;border:1px solid #666;margin-bottom:10px;text-align:center;">
  115.             <div style="display:inline-block;font-size:12pt;color:#eee;background-color:#333;padding:5px;text-transform:uppercase;letter-spacing:2px;">Trades</div><div style="display:inline-block;font-size:12pt;color:#333;background-color:white;padding:5px;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;">Open</div>
  116.            
  117.             <br>
  118.            
  119.             <div style="display:inline-block;font-size:12pt;color:#eee;background-color:#333;padding:5px;text-transform:uppercase;letter-spacing:2px;">Commissions</div><div style="display:inline-block;font-size:12pt;color:#333;background-color:white;padding:5px;text-transform:uppercase;letter-spacing:2px;">WAITLIST</div>
  120.            
  121.             <p style = "margin-top:5px"><a class = "btn btn-primary" href="LINK TO COMMISSION SHEET">Commission sheet</a></p>
  122.         </div>
  123.         <!-- END TRADES AND COMMISSIONS BIT -->
  124.      
  125.         <!-- LINKS -->
  126.         <div style="display:inline-block;padding:10px;background:#eee;width:100%;margin-bottom:10px;border:1px solid #666;text-align:center;">
  127.             <div style="font-size:12pt;color:#eee;background-color:#333;padding:5px;text-transform:uppercase;letter-spacing:2px;">Find me elsewhere</div>
  128.            
  129.             <a href="LINK" target = "_blank" style="display:inline-block;background:#fff;margin-top:5px;text-align:center;padding:5px;">Website</a>
  130.             <a href="LINK" target = "_blank" style="display:inline-block;background:#fff;margin-top:5px;text-align:center;padding:5px;">Curious Cat</a>
  131.             <a href="LINK" target = "_blank" style="display:inline-block;background:#fff;margin-top:5px;text-align:center;padding:5px;">Tumblr</a>
  132.             <a href="LINK" target = "_blank" style="display:inline-block;background:#fff;margin-top:5px;text-align:center;padding:5px;">Twitter</a>
  133.         </div>
  134.        
  135.         <!-- FRIENDS -->
  136.         <div style="display:inline-block;padding:10px;background:#eee;width:100%;margin-bottom:10px;border:1px solid #666;text-align:center;">
  137.             <div style="font-size:12pt;color:#eee;background-color:#333;padding:5px;text-transform:uppercase;letter-spacing:2px;margin-bottom:5px;">Friends</div>
  138.            
  139.             <div style="display:inline-block;background:#fff;margin-top:5px;padding:5px;">@Friend1</div>
  140.             <div style="display:inline-block;background:#fff;margin-top:5px;padding:5px;">@Friend2</div>
  141.             <div style="display:inline-block;background:#fff;margin-top:5px;padding:5px;">@Friend3</div>
  142.             <div style="display:inline-block;background:#fff;margin-top:5px;padding:5px;">@Friend4</div>
  143.         </div>
  144.        
  145.         <div style="display:inline-block;padding:10px;background:#eee;width:100%;border:1px solid #666;margin-bottom:10px;"><div style="font-size:12pt;color:#eee;background-color:#333;padding:5px;text-transform:uppercase;letter-spacing:2px;margin-bottom:5px;">To do</div>
  146.         <ul style="margin:0;list-style-type:none;padding:0;">
  147.         <li><strong>Art trades:</strong> @Person1, @Person2</li>
  148.         <li><strong>Commissions:</strong> @Person3</li>
  149.         <li><strong>Forum games:</strong> @Person4</li>
  150.         </ul></div>
  151.  
  152.         <div style="display:inline-block;padding:10px;background:#eee;width:100%;border:1px solid #666;margin-bottom:10px;">Profile template © <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-free-">Circlejourney</a></div>
  153.     </div>
  154. </div>
  155. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement