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 '@/components/ex/Button/index.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