Add feature images

pull/132/head
onursenture 2019-12-19 13:56:59 +03:00
parent 6fae571b95
commit 5d320a3535
11 changed files with 51 additions and 42 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -82,7 +82,7 @@ body {
.menu-button { .menu-button {
display: none; display: none;
color: #ffffff; color: #484848;
font-size: 24px; font-size: 24px;
position: absolute; position: absolute;
left: 0; left: 0;
@ -95,7 +95,7 @@ body {
@include transition(background-color .2s); @include transition(background-color .2s);
&:hover { &:hover {
background-color: #363c3f; background-color: #eeeeee;
} }
i { i {
@ -988,13 +988,13 @@ body {
} }
.topbar-menu { .topbar-menu {
background-color: #20272a; background-color: #ffffff;
float: none; float: none;
width: 100%; width: 100%;
height: 41px; height: 41px;
margin: -1px 0 0 0; margin: -1px 0 0 0;
border-bottom: 1px solid #363c3f; border-bottom: 1px solid #e3e9ea;
border-top: 1px solid #363c3f; border-top: 1px solid #e3e9ea;
> li { > li {
height: 40px; height: 40px;

View File

@ -15,78 +15,87 @@
a vendor with years of expertise in developing open source UI solutions. For project news and updates, please <a href="https://twitter.com/primevue">follow us on twitter</a> and <a href="https://www.primefaces.org/category/primevue/">visit our blog</a>.</p> a vendor with years of expertise in developing open source UI solutions. For project news and updates, please <a href="https://twitter.com/primevue">follow us on twitter</a> and <a href="https://www.primefaces.org/category/primevue/">visit our blog</a>.</p>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-4">
<div class="feature-card"> <div class="feature-card">
<img alt="component" src="https://placehold.it/400x150" /> <img alt="component" src="../assets/images/home/vue-components.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
<span class="feature-name">50+ COMPONENTS</span> <span class="feature-name">50+ COMPONENTS</span>
<p>The most complete set of native widgets featuring 50+ easy to use components for all your UI requirements.</p> <p>The most complete set of native widgets featuring 50+ easy to use components for all your UI requirements.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-4">
<div class="feature-card"> <div class="feature-card">
<img alt="opensource" src="https://placehold.it/400x150" /> <img alt="opensource" src="../assets/images/home/vue-opensource.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
<span class="feature-name">OPEN SOURCE</span> <span class="feature-name">OPEN SOURCE</span>
<p>Hosted at <a href="https://github.com/primefaces/primevue">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p> <p>Hosted at <a href="https://github.com/primefaces/primevue">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-4">
<div class="feature-card"> <div class="feature-card">
<img alt="themes" src="https://placehold.it/400x150" /> <img alt="themes" src="../assets/images/home/vue-themes.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
<span class="feature-name">THEMES</span> <span class="feature-name">THEMES</span>
<p>Dont get tied up in just one look&feel. Choose from a variety of options including material and flat design.</p> <p>Dont get tied up in just one look&feel. Choose from a variety of options including material and flat design.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-4">
<div class="feature-card"> <div class="feature-card">
<img alt="community" src="https://placehold.it/400x150" /> <img alt="community" src="../assets/images/home/vue-templates.png" />
<div class="feature-card-detail">
<span class="feature-name">COMMUNITY</span>
<p>Join PrimeVue community to become a part of an active, vibrant and growing open source foundation.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-3">
<div class="feature-card">
<img alt="productive" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">PRODUCTIVITY</span>
<p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-3">
<div class="feature-card">
<img alt="mobile" src="https://placehold.it/400x150" />
<div class="feature-card-detail">
<span class="feature-name">MOBILE</span>
<p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-3">
<div class="feature-card">
<img alt="templates" src="https://placehold.it/400x150" />
<div class="feature-card-detail"> <div class="feature-card-detail">
<span class="feature-name">TEMPLATES</span> <span class="feature-name">TEMPLATES</span>
<p>Professionally designed highly customizable Vue application templates to get started in no time.</p> <p>Professionally designed highly customizable Vue application templates to get started in no time.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-4">
<div class="feature-card"> <div class="feature-card">
<img alt="templates" src="https://placehold.it/400x150" /> <img alt="productive" src="../assets/images/home/vue-accesibility.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
<span class="feature-name">ACCESSIBILITY</span> <span class="feature-name">ACCESSIBILITY</span>
<p>Fully accessible and in complaince with Section 508 standards.</p> <p>Fully accessible and in complaince with Section 508 standards.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="mobile" src="../assets/images/home/vue-pro.png" />
<div class="feature-card-detail">
<span class="feature-name">PRO SUPPORT</span>
<p>With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="templates" src="../assets/images/home/vue-lts.png" />
<div class="feature-card-detail">
<span class="feature-name">LTS</span>
<p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="templates" src="../assets/images/home/vue-community.png" />
<div class="feature-card-detail">
<span class="feature-name">COMMUNITY</span>
<p>Join PrimeVue community to become a part of an active, vibrant and growing open source foundation.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="templates" src="../assets/images/home/vue-mobile.png" />
<div class="feature-card-detail">
<span class="feature-name">MOBILE</span>
<p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
</div>
</div>
</div>
</div> </div>
</div> </div>