netflix base
This commit is contained in:
Adam
parent
bb8331fe79
commit
345cf31426
|
|
@ -1,10 +1,10 @@
|
|||
|
||||
@using BlazorWASM.Shared
|
||||
<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">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</video> *@
|
||||
<div class="py-5" style="position: relative">
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,166 @@
|
|||
|
||||
|
||||
|
||||
<section >
|
||||
<div class="owl-carousel">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<div><img src="_content/SharedUI/assets/img/mango_bg_2.png" style="width:400px;"/></div>
|
||||
<section style="background-image: url('_content/SharedUI/assets/img/mango_bg_3.png'); background-position:center; background-size:cover; height:80vh;">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h1>Services</h1>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</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>
|
||||
</section>
|
||||
|
|
@ -24,13 +175,13 @@
|
|||
items: 1
|
||||
},
|
||||
600: {
|
||||
items: 3
|
||||
items: 2
|
||||
},
|
||||
960: {
|
||||
items: 5
|
||||
items: 4
|
||||
},
|
||||
1200: {
|
||||
items: 6
|
||||
items: 5
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,23 +32,23 @@
|
|||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-item dropdown dmenu {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
li a {
|
||||
li a {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url('../img/mango_bg_2.png');
|
||||
background-size:cover;
|
||||
background-attachment: fixed;
|
||||
color:#fff;
|
||||
}
|
||||
body {
|
||||
background-image: url('../img/mango_bg_2.png');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lc-block {
|
||||
|
||||
}
|
||||
|
||||
.glass {
|
||||
|
|
@ -70,4 +70,103 @@
|
|||
|
||||
.bg-dark {
|
||||
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