サイト名

extra

おまけの断面図バージョンです。流用することもなさそうなので公開します。

source&image

head

こちらのデザインを使用する場合はヘッダー、ナビゲーション設定の全項目を以下に置き換えてください。

header { min-height: 20vh; min-width: 500px; font-family: 'Titillium Web', sans-serif; } nav ul { display: flex; flex-wrap: wrap; justify-content: center; } nav li { margin: 0em 1em; height: 10rem; width: 10rem; border-radius: 50%; position: relative; } nav li a { display: inline-block; height: 10rem; width: 10rem; background: transparent; border-radius: 50%; color: #86877a; font-size: 1.8rem; line-height: 10rem; text-align: center; transition: 0.4s; } nav li a:hover { background: rgba(0,0,0,0.0); color: #000000; transform: rotate(10deg); } nav li:nth-of-type(odd) { background: url('img/design35_4.png') center / 120% no-repeat #fffe8b; border: solid 4px #fff75b; } nav li:nth-of-type(even) { background: url('img/design35_5.png') center / 120% no-repeat #ffdd8b; border: solid 4px #fed628; }

image

パブリックドメインの画像です。黄色い方の皮が見えにくいのでボーダーでそれっぽくしてます。

元画像をダウンロード（Pixabay）