API tools faq
paste
Ellteo

Rounded Space

Ellteo
Nov 13th, 2019 (edited)
563
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--Images used are from Unsplash! and myself!-->
  4.  
  5. <div class="container-fluid">
  6.    
  7.     <div class="row">
  8.            
  9.         <!--To change the side image, you can replace the image url with an image url of your choosing.-->
  10.            
  11.         <img style="position:absolute; top:20%; left:15%;" src="https://i.imgur.com/7wYFWvQ.png">
  12.        
  13.         <div class="col-sm-12 col-md-8 col-lg-6 mx-auto rounded">
  14.            
  15.             <!--You can change the background image by changing the url below - be aware that some images may need some finagling to get them to work right. -->
  16.            
  17.             <div style="background-attachment: fixed; background-image:url(https://i.imgur.com/y0GgG0Z.jpg); background-position:center;background-size:700px; border-radius:25px; text-align:center; height:100%;">
  18.                
  19.                 <h1 class="display-3" style="color:#F8BBD0; font-style:italic; font-size:2.8em; padding:15px"><i class="fas fa-star-and-crescent"></i> Name | Age | Gender <i class="fas fa-star-and-crescent"></i></h1>
  20.                
  21.                 <!-- You can change the font color of the paragraph below and the header above by changing the hex color codes.-->
  22.                
  23.                 <div class="card bg-transparent m-3" style="overflow:auto; color:#F8BBD0; border-radius:25px; max-height:12em;">
  24.                
  25.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  26.                
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  28.                
  29.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  30.                
  31.                 </div>
  32.                
  33.             </div>
  34.            
  35.         </div>
  36.        
  37.     </div>
  38.    
  39. </div>
  40.  
  41.  
  42. <!--CREDIT DO NOT REMOVE-->
  43. <a href="https://toyhou.se/Ellteo"><i class="fas fa-leaf" style="opacity:0.25"></i></a>
Add Comment
Please, Sign In to add comment
Public Pastes
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!