netflix base
This commit is contained in:
Adam
parent
bb8331fe79
commit
345cf31426
|
|
@ -1,10 +1,10 @@
|
||||||
|
|
||||||
@using BlazorWASM.Shared
|
@using BlazorWASM.Shared
|
||||||
<div class="hero text-secondary px-4 py-5 text-center" style="position: relative">
|
<div class="hero text-secondary px-4 py-5 text-center" style="position: relative">
|
||||||
<video autoplay loop muted style="position: absolute; width: 100%; height: 100%; object-fit: cover; left:0px;">
|
@* <video autoplay loop muted style="position: absolute; width: 100%; object-fit: cover; left:0px;">
|
||||||
<source src="_content/SharedUI/assets/video/mango2.mp4" type="video/mp4">
|
<source src="_content/SharedUI/assets/video/mango2.mp4" type="video/mp4">
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video> *@
|
||||||
<div class="py-5" style="position: relative">
|
<div class="py-5" style="position: relative">
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,166 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section >
|
<section style="background-image: url('_content/SharedUI/assets/img/mango_bg_3.png'); background-position:center; background-size:cover; height:80vh;">
|
||||||
<div class="owl-carousel">
|
<div class="row">
|
||||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
<div class="col-12 col-md-6">
|
||||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
<h1>Services</h1>
|
||||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
<p>
|
||||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
|
||||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
</p>
|
||||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
</div>
|
||||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
<div class="col-12 col-md-6"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="owl-carousel" style="position:relative; bottom: 0px;">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
|
||||||
|
<img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
|
||||||
|
<div class="card-img-overlay d-flex flex-column">
|
||||||
|
<div class="card-body">
|
||||||
|
<small class="card-meta mb-2">Thought Leadership</small>
|
||||||
|
<h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
|
||||||
|
<small><i class="far fa-clock"></i> October 15, 2020</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="media">
|
||||||
|
<img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
|
||||||
|
<small>Director of UI/UX</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
|
||||||
|
<img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
|
||||||
|
<div class="card-img-overlay d-flex flex-column">
|
||||||
|
<div class="card-body">
|
||||||
|
<small class="card-meta mb-2">Thought Leadership</small>
|
||||||
|
<h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
|
||||||
|
<small><i class="far fa-clock"></i> October 15, 2020</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="media">
|
||||||
|
<img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
|
||||||
|
<small>Director of UI/UX</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
|
||||||
|
<img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
|
||||||
|
<div class="card-img-overlay d-flex flex-column">
|
||||||
|
<div class="card-body">
|
||||||
|
<small class="card-meta mb-2">Thought Leadership</small>
|
||||||
|
<h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
|
||||||
|
<small><i class="far fa-clock"></i> October 15, 2020</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="media">
|
||||||
|
<img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
|
||||||
|
<small>Director of UI/UX</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
|
||||||
|
<img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
|
||||||
|
<div class="card-img-overlay d-flex flex-column">
|
||||||
|
<div class="card-body">
|
||||||
|
<small class="card-meta mb-2">Thought Leadership</small>
|
||||||
|
<h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
|
||||||
|
<small><i class="far fa-clock"></i> October 15, 2020</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="media">
|
||||||
|
<img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
|
||||||
|
<small>Director of UI/UX</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
|
||||||
|
<img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
|
||||||
|
<div class="card-img-overlay d-flex flex-column">
|
||||||
|
<div class="card-body">
|
||||||
|
<small class="card-meta mb-2">Thought Leadership</small>
|
||||||
|
<h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
|
||||||
|
<small><i class="far fa-clock"></i> October 15, 2020</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="media">
|
||||||
|
<img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
|
||||||
|
<small>Director of UI/UX</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
|
||||||
|
<img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
|
||||||
|
<div class="card-img-overlay d-flex flex-column">
|
||||||
|
<div class="card-body">
|
||||||
|
<small class="card-meta mb-2">Thought Leadership</small>
|
||||||
|
<h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
|
||||||
|
<small><i class="far fa-clock"></i> October 15, 2020</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="media">
|
||||||
|
<img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
|
||||||
|
<small>Director of UI/UX</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
|
||||||
|
<img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
|
||||||
|
<div class="card-img-overlay d-flex flex-column">
|
||||||
|
<div class="card-body">
|
||||||
|
<small class="card-meta mb-2">Thought Leadership</small>
|
||||||
|
<h4 class="card-title mt-0 "><a class="text-dark" herf="https://creativemanner.com">Web Developmet Lorem Ipsum Sit Amet Consectetur dipisi?</a></h4>
|
||||||
|
<small><i class="far fa-clock"></i> October 15, 2020</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<div class="media">
|
||||||
|
<img class="mr-3 rounded-circle" src="https://assets.codepen.io/460692/internal/avatars/users/default.png?format=auto&version=1688931977&width=80&height=80" alt="Generic placeholder image" style="max-width:50px">
|
||||||
|
<div class="media-body">
|
||||||
|
<h6 class="my-0 text-dark d-block">Oz Coruhlu</h6>
|
||||||
|
<small>Director of UI/UX</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -24,13 +175,13 @@
|
||||||
items: 1
|
items: 1
|
||||||
},
|
},
|
||||||
600: {
|
600: {
|
||||||
items: 3
|
items: 2
|
||||||
},
|
},
|
||||||
960: {
|
960: {
|
||||||
items: 5
|
items: 4
|
||||||
},
|
},
|
||||||
1200: {
|
1200: {
|
||||||
items: 6
|
items: 5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -32,23 +32,23 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item dropdown dmenu {
|
.nav-item dropdown dmenu {
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li a {
|
li a {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url('../img/mango_bg_2.png');
|
background-image: url('../img/mango_bg_2.png');
|
||||||
background-size:cover;
|
background-size: cover;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
color:#fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lc-block {
|
.lc-block {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.glass {
|
.glass {
|
||||||
|
|
@ -71,3 +71,102 @@
|
||||||
.bg-dark {
|
.bg-dark {
|
||||||
background-color: rgba(31, 31, 31, 255) !important;
|
background-color: rgba(31, 31, 31, 255) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: none;
|
||||||
|
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
overflow: hidden;
|
||||||
|
/*border-radius: 20px;*/
|
||||||
|
min-height: 450px;
|
||||||
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
margin-right:10px;
|
||||||
|
margin-left:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card {
|
||||||
|
min-height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 420px) {
|
||||||
|
.card {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.card-has-bg {
|
||||||
|
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
background-size: 120%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.card-has-bg:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: inherit;
|
||||||
|
-webkit-filter: grayscale(1);
|
||||||
|
-moz-filter: grayscale(100%);
|
||||||
|
-ms-filter: grayscale(100%);
|
||||||
|
-o-filter: grayscale(100%);
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.card-has-bg:hover {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
|
||||||
|
background-size: 130%;
|
||||||
|
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.card-has-bg:hover .card-img-overlay {
|
||||||
|
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
background: #ffba21;
|
||||||
|
background: linear-gradient(0deg, rgba(255, 186, 33, 0.5) 0%, #ffba21 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-footer {
|
||||||
|
background: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-footer .media img {
|
||||||
|
border: solid 3px rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-title {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-meta {
|
||||||
|
color: rgba(0, 0, 0, 0.3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-body {
|
||||||
|
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover .card-body {
|
||||||
|
margin-top: 30px;
|
||||||
|
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .card-img-overlay {
|
||||||
|
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
background: #ffba21;
|
||||||
|
background: linear-gradient(0deg, rgba(255, 186, 33, 0.3785889356) 0%, #f88440 100%);
|
||||||
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
Loading…
Reference in New Issue