10billionghosts | CODE: ASKEW - a scaling nav code & mood board (Reply)

It's a mood board! It's a nav! It's a mood board + nav! You can have as many as 12 links or remove the links entirely. Check out the How To Use section for more info, and enjoy!

CODE HERE:

<lj-raw><div style="width:100%;max-width:375px;margin:100px auto;font-family:verdana, sans serif;font-size:12px;

--lnktxt:#f0e0bf;
--lnkbg:#08539d;">
    
    <div style="width:100%;max-width:375px;display:grid;grid-template-columns:50px 150px 1fr;grid-template-rows:155px 205px;gap:5px;transform:rotate(-45deg)">
    
        
        <div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:center;overflow:hidden;">
            
            <div style="transform:rotate(45deg);padding:150px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
            
        </div>

<div style="grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:center;overflow:hidden;">
            
            <div style="transform:rotate(45deg);padding:150px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
            
        </div>
       
       
       <div style="grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:3;display:flex;flex-wrap:wrap;flex-direction:column;align-content:start;gap:5px;">
	   
           
           <a href="#URL_HERE" style="text-decoration:none;display:flex;justify-content:start;align-items:center;gap:5px;color:var(--lnktxt);">
               
               <div style="width:25px;height:25px;background:var(--lnkbg);"></div>
               <div style="flex-grow:1;height:25px;padding-left:10px;display:flex;justify-content:start;align-items:center;background:var(--lnkbg);">text here</div>
               
            </a>
            
            <a href="#URL_HERE" style="text-decoration:none;display:flex;justify-content:start;align-items:center;gap:5px;color:var(--lnktxt);">
               
               <div style="width:25px;height:25px;background:var(--lnkbg);"></div>
               <div style="flex-grow:1;height:25px;padding-left:10px;display:flex;justify-content:start;align-items:center;background:var(--lnkbg);">text here</div>
               
            </a>
            
            <a href="#URL_HERE" style="text-decoration:none;display:flex;justify-content:start;align-items:center;gap:5px;color:var(--lnktxt);">
               
               <div style="width:25px;height:25px;background:var(--lnkbg);"></div>
               <div style="flex-grow:1;height:25px;padding-left:10px;display:flex;justify-content:start;align-items:center;background:var(--lnkbg);">text here</div>
               
            </a>
            
            <a href="#URL_HERE" style="text-decoration:none;display:flex;justify-content:start;align-items:center;gap:5px;color:var(--lnktxt);">
               
               <div style="width:25px;height:25px;background:var(--lnkbg);"></div>
               <div style="flex-grow:1;height:25px;padding-left:10px;display:flex;justify-content:start;align-items:center;background:var(--lnkbg);">text here</div>
               
            </a>
            
            <a href="#URL_HERE" style="text-decoration:none;display:flex;justify-content:start;align-items:center;gap:5px;color:var(--lnktxt);">
               
               <div style="width:25px;height:25px;background:var(--lnkbg);"></div>
               <div style="flex-grow:1;height:25px;padding-left:10px;display:flex;justify-content:start;align-items:center;background:var(--lnkbg);">text here</div>
               
            </a>
            
            <a href="#URL_HERE" style="text-decoration:none;display:flex;justify-content:start;align-items:center;gap:5px;color:var(--lnktxt);">
               
               <div style="width:25px;height:25px;background:var(--lnkbg);"></div>
               <div style="flex-grow:1;height:25px;padding-left:10px;display:flex;justify-content:start;align-items:center;background:var(--lnkbg);">text here</div>
               
            </a>
            
           
		   
           
           <div style="flex-grow:1;width:100%;display:flex;justify-content:center;align-items:center;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
           
           
       </div>
   
	<div style="grid-row-start:3;grid-column-start:3;grid-column-end:3;margin-top:-5px;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div>
	
    </div>	
</div></lj-raw>

HOW TO USE:

❣️ This code is mobile compatible!

❣️ It makes a great mobile compatible splash page! Check out Manx's Guide for instructions on how to do that.

❣️ Link background and text color are controlled by variables at the top of the code.

--lnktxt:#f0e0bf; is a pale yellow by default and controls the color of link text.

--lnkbg:#08539d; is blue and controls the background color of each link.

❣️ You can have as many as 12 links in this code or remove links entirely to have a three image mood board. By default, the code comes with 6 links coded in. You can delete those or add more by copy and pasting the link code where indicated.

❣️ Remember to replace both #URLHERE and the placeholder text for each of your links!

❣️ Be sure to update each instance of IMG_URL. There's space for three images in this code, and each image is commented out. Image 1 is the upper left-side picture, image 2 is the central image. Image 3 is the right side image.

❣️ Because image 3 will scale in size to accommodate the number of links you use, for best results, use either a repeating tile background or a predominantly texture-like portrait-style image for this one.

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!

text here

code

CODE: ASKEW - a scaling nav code & mood board

Post a comment in response: