Lism CSS
検索

Navigation

Navigation008

ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。

大きい画面で見る
↓
コード
index.astro 
---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Stack, Container, Frame, Flex, Grid, Media, HTML, Layer, LinkBox, Icon } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="Navigation008">
	<Grid gtr="auto" gtc={['auto', null, 'auto 1fr']} pos="rel">
		<Container isWrapper="l" gr="1" gc="1" py="50" hasGutter pos="rel" z="1">
			<Stack g="40">
				<Stack g="30" ai="fs" c="white">
					<HTML.h lv="2" class="u-trim" fz="3xl" fw="bold" ta="center">募集職種</HTML.h>
					<p>
						弊社サービス開発に関わる様々な職種で人材を募集しております。<br />
						ご興味ある方は募集詳細をご確認の上お気軽にご相談ください。
					</p>
				</Stack>
				<Stack g="50">
					<Grid layout="fluidCols" cols="18rem" g="30">
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">Webディレクター</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								自社Webサイトやアプリの機能改善、新規コンテンツの企画立案から制作進行管理までを担当します。
								データ分析に基づき、ユーザーにとってより魅力的で使いやすいサービスへと成長させていく役割です。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">UI/UXデザイナー</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								「旅のワクワク感」を最大化する、直感的で心地よいユーザー体験をデザインします。
								Webサイトやアプリの画面設計、プロトタイピング、ユーザーテストを通じて、サービス全体の品質向上を担います。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">フロントエンドエンジニア</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								デザイナーが作成したUIを、ReactやVue.jsなどのモダンな技術を用いて正確に実装します。
								ユーザーがストレスなく旅を探せるよう、スムーズなインタラクションやページの高速化を実現する役割です。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">バックエンドエンジニア</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								旅行プランの検索・予約システムや決済基盤など、サービスの中核をなすサーバーサイドの開発・運用を担当。
								スケーラビリティと堅牢性を両立させ、安定したサービス提供を実現します。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">デジタルマーケター</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								SEO、広告運用、SNS、コンテンツマーケティングなど、様々な手法を駆使してサービスの魅力を発信し、新規顧客を獲得します。
								データに基づいた戦略立案と実行で、事業の成長をドライブする仕事です。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">コンテンツクリエイター</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								旅先の魅力を伝える記事コンテンツや、SNS向けの動画、写真を企画・制作します。
								人々の「旅に出たい」という気持ちを喚起する、ストーリーテリングの能力が求められます。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">カスタマーサポート</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								旅行の予約に関するお問い合わせから、旅行中のトラブル対応まで、お客様をサポートするお仕事です。
								メールや電話を通じて、お客様の不安を解消し、安心して旅を楽しんでいただくための重要な役割を担います。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
						<Grid gtr="subgrid" gr="span 3" g="30" p="40" bgc="white" bdrs="10">
							<HTML.p class="u-trim" fz="xl" fw="bold">データアナリスト</HTML.p>
							<HTML.p class="u-trim" fz="s" o="-20">
								予約データやユーザーの行動ログなどを分析し、サービス改善やマーケティング戦略のためのインサイトを抽出します。
								データドリブンな意思決定を支え、事業成長に貢献するポジションです。
							</HTML.p>
							<Flex>
								<Button layout="grid" href="#" gtc="1em 1fr 1em" g="15" w="stretch" py="15" bdrs="10">
									<HTML.p gc="2">募集要項を見る</HTML.p>
									<Icon icon="arrow-right" fz="100%" gc="3" />
								</Button>
							</Flex>
						</Grid>
					</Grid>
				</Stack>
			</Stack>
		</Container>
		<Frame gr="1" gc="1" pos="a" w="100%" h="100%">
			<Media src="https://cdn.lism-css.com/img/random-2510?category=working&r=1" alt="" width="960" height="640" />
			<Layer blur="4px" bgc="black:50%" />
		</Frame>
	</Grid>
</DemoLayout>
style.css