[46] Very Visual Navigations

[lina_trinch]

---

Code:
<div style="width: 500px; margin: auto;"> <div style="background: radial-gradient(ellipse at top right, #f7ea60, transparent), radial-gradient(ellipse at left, #f774bb, transparent), radial-gradient(ellipse at bottom right, #3cf2de, #ec458d); width: 300px; height: 500px; margin: auto; box-shadow: 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <div style="background: center/cover url('IMAGE_URL'), silver; width: 220px; height: 150px; border: 10px solid #fff; position: relative; top: 15px; right: 40px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 60px; height: 60px; border: 10px solid #fff; position: relative; bottom: 135px; left: 200px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 120px; height: 75px; border: 10px solid #fff; position: relative; bottom: 120px; left: 200px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 180px; height: 260px; border: 10px solid #fff; position: relative; bottom: 100px; left: 170px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 60px; height: 60px; border: 10px solid #fff; position: relative; bottom: 360px; left: 90px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <!--LINKS--> <div style="width: 150px; position: relative; bottom: 420px; right: 160px; text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 1px; background: linear-gradient(180deg, #ec458d, #3cf2de); background-clip: text; -webkit-background-clip: text; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> </div> </div></div>

---

Code:
<div style="width: 600px; margin: auto;"> <div style="background: radial-gradient(ellipse at top right, #0e0725, transparent), radial-gradient(ellipse at left, #5c03bc, transparent), radial-gradient(ellipse at bottom right, #e536ab, #f4e5f0); width: 400px; height: 400px; border-radius: 50%; margin: auto; box-shadow: 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <div style="background: center/cover url('IMAGE_URL'), silver; width: 220px; height: 150px; border: 10px solid #fff; position: relative; top: 15px; left: 20px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 60px; height: 60px; border: 10px solid #fff; position: relative; bottom: 135px; left: 260px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 120px; height: 75px; border: 10px solid #fff; position: relative; bottom: 120px; left: 260px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 180px; height: 200px; border: 10px solid #fff; position: relative; bottom: 100px; left: 180px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 60px; height: 60px; border: 10px solid #fff; position: relative; bottom: 300px; left: 100px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <!--LINKS--> <div style="width: 150px; position: relative; bottom: 380px; right: 160px; text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 1px; background: linear-gradient(180deg, #0e0725, #5c03bc); background-clip: text; -webkit-background-clip: text; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);"> <a href="" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> </div> </div></div>

---

Code:
<div style="width: 600px; margin: auto;"> <div style="background: radial-gradient(ellipse at top right, #474ED7, transparent), radial-gradient(ellipse at left, #F774BB, transparent), radial-gradient(ellipse at bottom right, #F7EA60, #3CF2DE); width: 400px; height: 400px; border-radius: 50%; margin: auto; box-shadow: 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <div style="background: center/cover url('IMAGE_URL'), silver; width: 180px; height: 180px; border: 10px solid #fff; border-radius: 50%; position: relative; top: 15px; left: 70px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 60px; height: 60px; border: 10px solid #fff; border-radius: 50%; position: relative; bottom: 135px; left: 260px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 100px; height: 100px; border: 10px solid #fff; border-radius: 50%; position: relative; bottom: 130px; left: 280px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 200px; height: 200px; border: 10px solid #fff; border-radius: 50%; position: relative; bottom: 140px; left: 130px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <div style="background: center/cover url('IMAGE_URL'), silver; width: 60px; height: 60px; border: 10px solid #fff; border-radius: 50%; position: relative; bottom: 340px; left: 70px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div> <!--LINKS--> <div style="width: 150px; position: relative; bottom: 450px; right: 160px; text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 1px; background: linear-gradient(180deg, #474ED7, #F774BB); background-clip: text; -webkit-background-clip: text; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> <a href="URL" style="display: block; color: transparent; text-decoration: none; margin-bottom: 2px;"> Link </a> </div> </div></div>

❖ This is another code released early on the Patreon to my subscribers! Coming out a little late this month, but it's here all the same! ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ The gradients you see in the above examples are left in by default. I'll list them below so that you can change them as you see fit. Ctrl+F & Replace: ❖ IMAGE_URL - url for images. There's a place for images in every element except the gradient backgrounds and links holder. ❖ URL - link urls ❖ Link - link text silver image placeholders. Feel free to replace this with another color and not add an image if you're into palette stuff. #fff image box borders rgba(0,0,0,0.4) rgba(0,0,0,0.2) box and text shadows #f7ea60 #f774bb #3cf2de #ec458d square code gradient #0e0725 #5c03bc #e536ab #f4e5f0 circle with squares code gradient #474ED7 #F774BB #F7EA60 #3CF2DE circle with circles code gradient