mindol1004/vanillameta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Landing] Markup and style on mobile responsive pages

Browse Source
This commit is contained in:
SA K
2022-12-12 19:21:47 +09:00
parent fa11f8ffc1
commit 37b72b148a
2 changed files with 175 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
landing-page/css/src/index.css
View File

@@ -39,7 +39,6 @@
flex-direction: column;
padding-top: 56px;
padding-bottom: 59px;
/*background-image: linear-gradient(to bottom, #264e9c 20%, #b3d5f3 58%, rgba(255, 255, 255, 0) 100%);*/
background-image: linear-gradient(to bottom, #264e9c 0%, #b3d5f3 54%, rgba(255, 255, 255, 0) 100%);
background-color: #eceef3;
}
@@ -83,10 +82,13 @@
height: auto;
margin-right: 10px;
}
#viewBox .img_wrap {
text-align: center;
}
#viewBox .img_main {
margin: 16px auto auto;
width: 772px;
height: auto;
margin-top: 16px;
}
/* featureBox*/
@@ -230,8 +232,8 @@
font-weight: bold;
}
/* ========================= tablet ========================= */
@media (min-width: 1024px) and (max-width: 1439px) {
/* ========================= labtop ========================= */
@media (min-width: 993px) and (max-width: 1200px) {
/* #viewBox */
#viewBox .img_main {
width: 697px;
@@ -254,6 +256,126 @@
}
}
/* ========================= mobile ========================= */
@media (min-width: 320px) and (max-width: 1023px) {
/* ========================= handheld (mobile + tablet) ========================= */
@media (min-width: 320px) and (max-width: 992px) {
/* headBox */
#headBox {
height: 50px;
}
.navbar .container-fluid {
padding-left: 16px;
padding-right: 18px;
}
.navbar .github_img {
width: 32px;
}
/* viewBox */
#viewBox .container-fluid {
padding: 40px 23px 44px;
}
#viewBox h2 {
font-size: 34px;
}
#viewBox p {
font-size: 14px;
}
#viewBox .btn_area {
margin-top: 26px;
column-gap: 8px;
}
#viewBox .btn_area a {
width: 120px;
height: 40px;
font-size: 14px;
}
#viewBox .btn_area img {
width: 22px;
margin-right: 8px;
}
#viewBox .img_main {
width: 100%;
margin-top: 30px;
}
/* #featureBox */
#featureBox h2 {
font-size: 26px;
}
#featureBox .typo {
font-size: 14px;
}
/* #detailBox */
#detailBox {
padding: 60px 20px 62px;
text-align: center;
}
#detailBox ul {
row-gap: 60px;
}
#detailBox p {
margin-top: 12px;
margin-bottom: 16px;
}
#detailBox img {
width: 100%;
}
}
/* bannerBox */
#bannerBox {
padding: 55px 16px;
}
#bannerBox ul {
flex-wrap: wrap;
justify-content: center;
}
/* ========================= mobile ========================= */
@media (min-width: 320px) and (max-width: 768px) {
/* #featureBox */
#featureBox {
padding-bottom: 60px;
}
.feature_area {
max-width: 500px;
row-gap: 20px;
column-gap: 20px;
}
#featureBox .title_area {
padding: 0 45px 0;
}
#featureBox .content_area {
padding: 0 20px 0;
}
.feature_area li {
width: 150px;
height: 164px;
padding: 20px 0 21px;
}
.feature_area h3 {
font-size: 15px;
line-height: 1.33;
}
.feature_area img {
width: 118px;
}
/* #detailBox */
#detailBox h3 {
font-size: 26px;
}
#detailBox p {
font-size: 14px;
}
/* footBox */
#footBox .container-fluid {
padding: 30px 23px 50px 50px;
}
#footBox .copyright {
font-size: 12px;
color: #4a4a4a;
}
}

73
landing-page/index.html
View File

@@ -56,11 +56,10 @@
<nav class="navbar">
<div class="container-fluid">
<a href="./">
<h1 class="visually-hidden">Vanilla Meta</h1>
<h1 class="visually-hidden">VanillaMeta</h1>
<img class="logo_img" src="./img/vanilla-meta-logo.png" alt="Vanilla Meta Logo" />
</a>
<a href="https://github.com/vanillabrain/vanillameta" target="_blank">
<h2 class="visually-hidden">Github Link</h2>
<img class="github_img" src="./img/ic-github.svg" alt="Github Logo" />
</a>
</div>
@@ -83,14 +82,14 @@
<img src="./img/ic-github-white.svg" alt="Github button icon" />소스 보기
</a>
</div>
<div>
<div class="img_wrap">
<img class="img_main" src="./img/main-visual.png" alt="" />
</div>
</div>
</section>
<section id="featureBox">
<div class="container-fluid">
<div class="container-fluid title_area">
<h2>Why VanillaMeta?</h2>
<p class="typo">
바닐라메타는 최신 데이터 탐색적 분석 및 데이터 시각화 솔루션입니다.<br />
@@ -98,52 +97,69 @@
<span>이러한 바닐라메타는 Github에서 Open Sorce로 제공 받아 사용하실 수 있습니다.</span>
</p>
</div>
<div class="container-fluid">
<h2 class="visually-hidden">Feature of VanillaMeta</h2>
<div class="container-fluid content_area">
<ul class="row feature_area">
<li class="col-lg-6 col-xl-4">
<h3>코딩없이 차트 위젯 제작</h3>
<p>
<h3>
코딩없이 차트<br class="d-block d-md-none" />
위젯 제작
</h3>
<p class="d-none d-md-block">
연결된 데이터베이스를 지원하는 차트 중 선택 후<br />
설정화면을 통해 코딩없이 위젯 제작이 가능합니다.
</p>
<img src="./img/thumb-01.png" alt="Feature image thumbnail 01" />
</li>
<li class="col-lg-6 col-xl-4">
<h3>50개 이상의 차트 지원</h3>
<p>
<h3>
50개 이상의<br class="d-block d-md-none" />
차트 지원
</h3>
<p class="d-none d-md-block">
50개 이상의 다양한 차트 지원으로<br />
최적의 분석을 위한 차트 활용이 가능합니다.
</p>
<img src="./img/thumb-02.png" alt="Feature image thumbnail 02" />
</li>
<li class="col-lg-6 col-xl-4">
<h3>사용자 맞춤형 대시보드 편집 및 공유</h3>
<p>
<h3>
사용자 맞춤형<br class="d-block d-md-none" />
대시보드 편집 및 공유
</h3>
<p class="d-none d-md-block">
사용자가 설정한 위젯을 자유로운<br />
레이아웃으로 편집 및 공유가 가능합니다.
</p>
<img src="./img/thumb-03.png" alt="Feature image thumbnail 03" />
</li>
<li class="col-lg-6 col-xl-4">
<h3>대시보드 템플릿 디자인 추천</h3>
<p>
<h3>
대시보드 템플릿<br class="d-block d-md-none" />
디자인 추천
</h3>
<p class="d-none d-md-block">
대시보드 템플릿 디자인 추천을 통해<br />
빠르고 편리하게 편집이 가능합니다.
</p>
<img src="./img/thumb-04.png" alt="Feature image thumbnail 04" />
</li>
<li class="col-lg-6 col-xl-4">
<h3>SQL 쿼리 편집기 & 데이터 미리보기 제공</h3>
<p>
<h3>
SQL 쿼리 편집기 &<br class="d-block d-md-none" />
데이터 미리보기 제공
</h3>
<p class="d-none d-md-block">
SQL 쿼리 편집기를 통해 빠르게 데이터를 편집하고<br />
미리보기를 통해 데이터를 확인할 수 있습니다.
</p>
<img src="./img/thumb-05.png" alt="Feature image thumbnail 05" />
</li>
<li class="col-lg-6 col-xl-4">
<h3>다양한 SQL 데이터베이스 즉시 지원</h3>
<p>
<h3>
다양한 SQL<br class="d-block d-md-none" />
데이터베이스 즉시 지원
</h3>
<p class="d-none d-md-block">
다양한 SQL 데이터베이스 지원 기능을 통해<br />
빠르게 데이터를 연결할 수 있습니다.
</p>
@@ -155,10 +171,10 @@
<section id="detailBox">
<div class="container-fluid">
<h2 class="visually-hidden">Feature detail</h2>
<h2 class="visually-hidden">VanillaMeta feature detail</h2>
<ul>
<li class="row">
<div class="col-md-12 col-lg-auto text-md-left">
<div class="col-md-12 col-lg-auto">
<h3>대시보드 분석 시각화</h3>
<p>
사용자 맞춤형 대시보드 편집 및 공유와<br />
@@ -168,7 +184,7 @@
<img src="./img/img-01.png" alt="Feature detail img thumbnail 01" />
</li>
<li class="row">
<div class="col-md-12 col-lg-auto text-md-left">
<div class="col-md-12 col-lg-auto">
<h3>시각화 위젯 제작</h3>
<p>
코딩없이 차트 위젯 제작 가능하며<br />
@@ -178,13 +194,14 @@
<img src="./img/img-02.png" alt="Feature detail img thumbnail 01" />
</li>
<li class="row">
<div class="col-md-12 col-lg-auto text-md-left">
<div class="col-md-12 col-lg-auto">
<h3>
최신 데이터베이스와<br />
최신 데이터베이스와<br class="d-none d-lg-block" />
통합
</h3>
<p>
고급 SQL 쿼리 편집기 및 데이터 미리보기<br />가 가능하며, 다양한 SQL 데이터베이스에 <br />대해 즉시
고급 SQL 쿼리 편집기 및 데이터 미리보기<br class="d-none d-lg-block" />가 가능하며,
<br class="d-block d-lg-none" />다양한 SQL 데이터베이스에 <br class="d-none d-lg-block" />대해 즉시
지원합니다.
</p>
</div>
@@ -196,7 +213,7 @@
<section id="bannerBox">
<div class="container-fluid">
<h2>지원가능 데이터베이스</h2>
<h2><span class="visually-hidden">VanillaMeta </span>지원가능 데이터베이스</h2>
<ul class="row">
<li><img src="./img/logo-mysql.png" alt="MySQL banner image" /></li>
<li><img src="./img/logo-maria-db.png" alt="MariaDB banner image" /></li>
@@ -215,13 +232,17 @@
<footer id="footBox">
<div class="container-fluid">
<h2 class="visually-hidden">VanillaMeta information</h2>
<div class="footer_logo">
<a href="./">
<img class="logo_img" src="./img/vanilla-meta-logo.png" alt="Vanilla Meta" />
</a>
</div>
<div class="copyright">
<p>Copyright <span>©VanillaBrain</span> Inc. All Rights Reserved.</p>
<p>
Copyright <a href="https://vanillabrain.com" target="_blank"><span>©VanillaBrain Inc. </span></a
><br class="d-block d-sm-none" />All Rights Reserved.
</p>
</div>
</div>
</footer>