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

[Landing] Style on tablet responsive pages

Browse Source
This commit is contained in:
SA K
2022-12-12 18:11:18 +09:00
parent c97fc7da9b
commit fa11f8ffc1
4 changed files with 155 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
landing-page/css/common/common.css
View File

@@ -1,39 +0,0 @@
/* common.css */
/* clearfix */
.clearfix::after,
.clearfix:after {
content: '';
display: block;
clear: both;
width: 100%;
height: 0;
}
/* blind */
.blind_wrap a > span,
.blind_wrap button > span,
.blind {
display: block;
position: absolute;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
}
.blind_wrap a {
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
}
/* full */
.full,
.full_wrap a,
.full_wrap button {
display: block;
width: 100%;
height: 100%;
}

2
landing-page/css/common/reset.css
View File

@@ -5,8 +5,8 @@
html,
body {
overflow-x: hidden;
width: 100%;
min-width: 320px;
height: 100%;
margin: 0;
padding: 0;

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

@@ -1,15 +1,15 @@
/* index.css */
/* ========================= pc ========================= */
/* #headBox */
#headBox {
position: fixed;
width: 100%;
height: 55px;
border-bottom: 1px solid #ececec;
background-color: #fff;
}
.navbar {
height: 100%;
border-bottom: 1px solid #ececec;
}
.navbar .container-fluid {
height: 100%;
@@ -32,7 +32,6 @@
/* #viewBox */
#viewBox {
width: 100%;
padding-top: 55px; /* header height */
}
#viewBox .container-fluid {
display: flex;
@@ -46,7 +45,7 @@
}
#viewBox .typo {
text-shadow: 0 0.8px 1.5px rgba(18, 0, 88, 0.4);
font-weight: 600;
font-weight: bold;
line-height: 1.29;
letter-spacing: -1.02px;
text-align: center;
@@ -65,7 +64,7 @@
margin-top: 32px;
column-gap: 12px;
}
#viewBox .btn_area button {
#viewBox .btn_area a {
display: flex;
justify-content: center;
align-items: center;
@@ -74,7 +73,7 @@
border: solid 1px #043f84;
border-radius: 6px;
box-shadow: 0 4px 6px 0 rgba(26, 33, 97, 0.2);
font-weight: 600;
font-weight: bold;
font-size: 16px;
background-color: #043f84;
color: #fff;
@@ -98,7 +97,7 @@
}
#featureBox h2 {
font-size: 36px;
font-weight: 600;
font-weight: bold;
letter-spacing: 0.36px;
color: #043f84;
}
@@ -117,6 +116,9 @@
row-gap: 49px;
column-gap: 39px;
justify-content: center;
width: 100%;
max-width: 1220px;
margin: auto;
}
.feature_area li {
width: 380px;
@@ -129,7 +131,7 @@
.feature_area h3 {
margin-bottom: 14px;
font-size: 18px;
font-weight: 600;
font-weight: bold;
letter-spacing: -0.18px;
color: #043f84;
}
@@ -140,25 +142,118 @@
color: #606060;
}
#featureBox
/* #detailBox */
#detailBox {
padding: 72px 0 70px;
}
#detailBox ul {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 70px;
margin: auto;
}
#detailBox li {
width: 100%;
max-width: 1050px;
display: flex;
justify-content: space-between;
}
#detailBox h3 {
font-size: 32px;
font-weight: bold;
line-height: 1.31;
letter-spacing: -0.64px;
color: #043f84;
}
#detailBox p {
margin-top: 18px;
line-height: 1.63;
color: #141414;
}
#detailBox img {
width: 700px;
height: auto;
}
/* #bannerBox*/
#bannerBox {
padding: 60px 0 62px;
text-align: center;
background-color: #f3f7fb;
}
#bannerBox h2 {
margin-bottom: 30px;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.18px;
color: #043f84;
}
#bannerBox ul {
display: flex;
justify-content: space-between;
align-items: center;
/*column-gap: 45px;*/
row-gap: 24px;
width: 100%;
max-width: 706px;
margin: auto;
}
#bannerBox li {
width: fit-content;
}
#bannerBox img {
object-fit: none;
}
/* #footBox */
#footBox {
height: 117px;
}
#footBox .container-fluid {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
height: 100%;
padding: 30px 23px 50px 52px;
padding: 44px 0 47px;
}
#footBox .logo_img {
width: 105px;
height: 20px;
width: 98px;
height: auto;
margin-right: 46px;
}
#footBox .copyright {
font-size: 12px;
font-size: 13px;
color: #4a4a4a;
}
#footBox span {
font-weight: bold;
}
/* ========================= tablet ========================= */
@media (min-width: 1024px) and (max-width: 1439px) {
/* #viewBox */
#viewBox .img_main {
width: 697px;
}
/* featureBox*/
.feature_area {
max-width: 804px;
}
/* detailBox */
#detailBox li {
max-width: 804px;
}
#detailBox p {
font-size: 15px;
}
#detailBox img {
width: 514px;
}
}
/* ========================= mobile ========================= */
@media (min-width: 320px) and (max-width: 1023px) {
}

85
landing-page/index.html
View File

@@ -30,11 +30,6 @@
<link rel="apple-touch-icon" href="https://vanillameta.net/assets/img/vanilla-meta-og.jpg" />
<link rel="manifest" href="https://vanillameta.net/manifest.json" />
<link rel="stylesheet" href="fonts/pretendard.css" />
<link rel="stylesheet" href="./css/common/reset.css" />
<link rel="stylesheet" href="./css/common/common.css" />
<link rel="stylesheet" href="./css/src/index.css" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="./favicon.ico" />
@@ -49,19 +44,23 @@
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="fonts/pretendard.css" />
<link rel="stylesheet" href="./css/common/reset.css" />
<link rel="stylesheet" href="./css/src/index.css" />
</head>
<body>
<div id="wrap">
<header id="headBox">
<header id="headBox" class="sticky-top">
<nav class="navbar">
<div class="container-fluid">
<a href="./">
<h1 class="blind">Vanilla Meta</h1>
<h1 class="visually-hidden">Vanilla Meta</h1>
<img class="logo_img" src="./img/vanilla-meta-logo.png" alt="Vanilla Meta Logo" />
</a>
<a href="https://github.com/vanillabrain/vanillameta">
<h2 class="blind">Github Link</h2>
<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>
@@ -77,12 +76,12 @@
</h2>
<p class="typo">VanillaMeta with open source on Github</p>
<div class="btn_area">
<button type="button" class="btn source_btn">
<a href="https://vanillameta.vanillabrain.com" class="btn source_btn" target="_blank">
<img src="./img/ic-vanilla-meta.svg" alt="Vanilla meta button icon" />데모 보기
</button>
<button type="button" class="btn demo_btn">
</a>
<a href="https://github.com/vanillabrain/vanillameta" class="btn demo_btn" target="_blank">
<img src="./img/ic-github-white.svg" alt="Github button icon" />소스 보기
</button>
</a>
</div>
<div>
<img class="img_main" src="./img/main-visual.png" alt="" />
@@ -99,9 +98,8 @@
<span>이러한 바닐라메타는 Github에서 Open Sorce로 제공 받아 사용하실 수 있습니다.</span>
</p>
</div>
<div class="container-fluid">
<h2 class="blind">Feature of VanillaMeta</h2>
<h2 class="visually-hidden">Feature of VanillaMeta</h2>
<ul class="row feature_area">
<li class="col-lg-6 col-xl-4">
<h3>코딩없이 차트 위젯 제작</h3>
@@ -157,33 +155,39 @@
<section id="detailBox">
<div class="container-fluid">
<h2 class="blind">Feature detail</h2>
<h2 class="visually-hidden">Feature detail</h2>
<ul>
<li>
<h3>대시보드 분석 시각화</h3>
<p>
사용자 맞춤형 대시보드 편집 및 공유와<br />
대시보드 템플릿 디자인을 추천합니다.
</p>
<li class="row">
<div class="col-md-12 col-lg-auto text-md-left">
<h3>대시보드 분석 시각화</h3>
<p>
사용자 맞춤형 대시보드 편집 및 공유와<br />
대시보드 템플릿 디자인을 추천합니다.
</p>
</div>
<img src="./img/img-01.png" alt="Feature detail img thumbnail 01" />
</li>
<li>
<h3>시각화 위젯 제작</h3>
<p>
코딩없이 차트 위젯 제작 가능하며<br />
50개 이상의 차트를 지원합니다.
</p>
<li class="row">
<div class="col-md-12 col-lg-auto text-md-left">
<h3>시각화 위젯 제작</h3>
<p>
코딩없이 차트 위젯 제작 가능하며<br />
50개 이상의 차트를 지원합니다.
</p>
</div>
<img src="./img/img-02.png" alt="Feature detail img thumbnail 01" />
</li>
<li>
<h3>
최신 데이터베이스와<br />
통합
</h3>
<p>
고급 SQL 쿼리 편집기 및 데이터 미리보기<br />가 가능하며, 다양한 SQL 데이터베이스에 <br />대해 즉시
지원합니다.
</p>
<li class="row">
<div class="col-md-12 col-lg-auto text-md-left">
<h3>
최신 데이터베이스와<br />
통합
</h3>
<p>
고급 SQL 쿼리 편집기 및 데이터 미리보기<br />가 가능하며, 다양한 SQL 데이터베이스에 <br />대해 즉시
지원합니다.
</p>
</div>
<img src="./img/img-03.png" alt="Feature detail img thumbnail 01" />
</li>
</ul>
@@ -194,7 +198,7 @@
<div class="container-fluid">
<h2>지원가능 데이터베이스</h2>
<ul class="row">
<li><img src="./img/logo-bigquery.png" alt="MySQL banner image" /></li>
<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>
<li><img src="./img/logo-postgresql.png" alt="PostgreSQL banner image" /></li>
<li><img src="./img/logo-oracle.png" alt="Oracle banner image" /></li>
@@ -217,10 +221,7 @@
</a>
</div>
<div class="copyright">
<p>
Copyright ©VanillaBrain Inc.<br />
All Rights Reserved.
</p>
<p>Copyright <span>©VanillaBrain</span> Inc. All Rights Reserved.</p>
</div>
</div>
</footer>