DanielCujba/School
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

School Commit Init

Browse Source
This commit is contained in:
Daniel Cujba
2024-08-31 12:07:21 +03:00
commit 0b130ee18c
2801 changed files with 4720552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Anul 2/Semestrul 2/Web/Lab 3/assets/emag-logo.svg
+27
View File
@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 133" style="enable-background:new 0 0 500 133;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="4.087" y1="66.6255" x2="496.1437" y2="66.6255">
<stop offset="5.000000e-02" style="stop-color:#FF1D25"/>
<stop offset="0.35" style="stop-color:#A0328C"/>
<stop offset="0.45" style="stop-color:#7040A4"/>
<stop offset="0.55" style="stop-color:#4359C7"/>
<stop offset="0.7" style="stop-color:#0082E6"/>
</linearGradient>
<path class="st0" d="M438.7,55.2v27h21.7v12.7c-1.7,1-3.6,1.7-5.8,2.2c-2.2,0.5-5.1,0.7-8.7,0.7c-4.5,0-8.5-0.7-12.2-2.2
c-3.7-1.4-6.9-3.5-9.5-6.2c-2.7-2.7-4.7-5.9-6.2-9.6c-1.5-3.7-2.3-7.8-2.3-12.3v-0.4c0-4.3,0.7-8.3,2.1-12c1.4-3.6,3.4-6.8,5.9-9.4
c2.5-2.7,5.6-4.7,9.1-6.2c3.5-1.5,7.3-2.3,11.4-2.3c5.3,0,10.3,1,14.9,2.9c4.6,1.9,9,4.6,13.2,8.2l23.7-28.6
c-6.9-6-14.7-10.8-23.5-14.1c-8.8-3.4-18.6-5.1-29.6-5.1c-10,0-19.3,1.7-27.8,5c-8.5,3.3-15.9,7.9-22.2,13.9
c-6.3,5.9-11.2,12.9-14.7,21c-3.1,7.1-4.8,14.8-5.2,22.9l-25.5-61h-42l-36.2,86.6V3.2H225l-27.2,44.6L170.7,3.2h-44.2v28.4
c-2.1-3.8-4.6-7.3-7.4-10.5C113.5,14.8,106.5,9.8,98,6.1c-8.5-3.7-18.6-5.6-30.1-5.6c-9.9,0-19,1.7-27.3,5.1
C32.3,9,25.1,13.7,19.1,19.7c-6,6-10.7,13-14,21c-3.3,8-5,16.6-5,25.8V67c0,9.8,1.8,18.8,5.3,26.9c3.6,8.1,8.5,15,14.9,20.7
c6.4,5.7,13.9,10.1,22.7,13.3c8.8,3.2,18.4,4.8,29,4.8c13.4,0,24.9-2.3,34.4-7c4.7-2.3,8.9-5,12.8-8L97.9,91.9
c-2.6,1.9-5.3,3.4-7.9,4.5c-4.7,2-9.9,3-15.5,3c-7.4,0-13.7-1.7-18.7-5.1c-4.2-2.9-7.3-7-9.3-12.4h79.9v48.1h41.3V67.2l29.3,45.1
h0.7L227,67.2v62.9h70.3l6.5-17h44.4l6.7,17h46l-6-14.3c6.2,5.3,13.3,9.4,21.4,12.3c8.6,3.1,17.9,4.7,27.8,4.7
c11.6,0,22.1-1.7,31.5-5.2c9.4-3.5,17.6-8.1,24.5-13.7V55.2H438.7z M45,55.1c1.4-6.5,3.9-11.8,7.7-15.7c4-4.1,9.1-6.2,15.4-6.2
c6.4,0,11.7,2.1,15.9,6.2c3.9,3.9,6.4,9.2,7.3,15.7H45z M314.5,83l11.6-30.8L337.7,83H314.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

Anul 2/Semestrul 2/Web/Lab 3/assets/img1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

Anul 2/Semestrul 2/Web/Lab 3/assets/img2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

Anul 2/Semestrul 2/Web/Lab 3/index.html
+258
View File
@@ -0,0 +1,258 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eMAG.ro - Căutarea nu se oprește niciodată</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://sapi.emag.ro/" crossorigin="">
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin=""></head>
<body>
<div class="main-container-outer">
<div class="megamenu-container">
<div class="megamenu">
<div class="megamnu-list-container">
<ul class="megamenu-list">
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Laptop, Tablete &amp; Telefoane</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">PC, Periferice &amp; Software</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">TV, Audio-Video &amp; Foto</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Electrocasnice &amp; Climatizare</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Gaming, Carti &amp; Birotica</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Bacanie</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Fashion</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Ingrijire personala &amp; Cosmetice</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Casa, Gradina &amp; Bricolaj</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Sport &amp; Activitati in aer liber</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Auto, Moto &amp; RCA</span>
</a>
</li>
<li data-id="1" class="megamenu-list-department" data-modified="1699363878">
<a>
<i>&#128269</i>
<span class="megamenu-list-department__department-name">Jucarii, Copii &amp; Bebe</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<nav id="masthead" class="navbar navbar-main adjust-on-modal navbar-has-searchbar">
<div class="container">
<div class="navbar-inner">
<div class="navbar-branding">
<a class="navbar-brand" title="Căutarea nu se oprește niciodată">
<img src="assets/emag-logo.svg" alt="eMAG">
</a>
</div>
<div class="navbar-searchbox">
<div class="searchbox-wrapper">
<form>
<div class="input-group searchbox-input">
<div class="form-control">
<input type="text" class="searchbox-suggestion">
<input type="search" class="searchbox-main" placeholder="Începe o nouă căutare">
</div>
<div class="input-group-btn">
<button class="btn btn-default searchbox-submit-button">
<i class="em em-search">&#128269</i>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="navbar-toolbox">
<div class="btn-group navbar-toolbox-wrapper">
<div class="btn-group hidden-xs">
<a class="btn btn-link navbar-main-btn">
<i class="em em-user2 navbar-icon">&#128269</i>
<span class="visible-lg-inline visible-xl-inline">Contul meu <i class="caret">&#9660;</i></span>
</a>
</div>
<div class="btn-group">
<a class="btn btn-link navbar-main-btn">
<i class="em em-heart navbar-icon">&#128269</i>
<span class="visible-lg-inline visible-xl-inline">
Favorite
<i class="caret">&#9660;</i>
</span>
</a>
</div>
<div class="btn-group">
<a class="btn btn-link navbar-main-btn">
<i class="em em-cart2 navbar-icon">&#128269</i>
<span class="visible-lg-inline visible-xl-inline"> Coșul meu <i class="caret">&#9660;</i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<nav id="auxiliary" class="navbar navbar-aux adjust-on-modal hidden-xs">
<div class="container">
<div class="navbar-aux-content collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active main-megamenu-trigger" data-trigger="both">
<div class="navbar-aux-content__departments"><i class="em em-burger">&#128269</i> Produse </div>
</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li class="visible-lg">
<a>Oferta Zilei</a>
</li>
<li class="visible-lg">
<a>Genius Deals</a>
</li>
<li class="visible-lg">
<a>Genius</a>
</li>
<li class="visible-lg">
<a>Rabla</a>
</li >
<li class="visible-lg">
<a>Carduri de milioane de idei</a>
</li>
<li class="visible-lg">
<a>Ofertele eMAG</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<i>&#128269</i>
<a>eMAG Help</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="main-container-inner">
<div class="main-container">
<section class="page-section custom-page-section">
<div class="container home-intro-section pad-btm-xs">
<div class="widget-banner-carousel">
<div class="banner-carousel">
<div class="ph-card hbc-slide-item js-dfp-slide-item dfp-slide-item">
<a>
<img src="assets/img1.jpg" alt="Banner 1">
</a>
</div>
</div>
</div>
</div>
</section>
<div class="widget-holder">
<section class="page-section stories-section">
<div class="container story-carousel-container">
<div class="ph-widget ph-carousel stories-carousel ph-carousel-init js-stories-carousel ph-at-begin ph-has-arrows">
<div class="ph-body">
<div class="_card ph-card">
<div class="_content">
<div class="_mask"></div>
<div class="_title">Nutrition &amp; Vitamins Shop</div>
<img class="_image" src="assets/img2.jpg" alt="Nutrition &amp; Vitamins Shop">
<div class="_open-icon"><i>&#128269</i></div>
</div>
</div>
<div class="_card ph-card">
<div class="_content">
<div class="_mask"></div>
<div class="_title">Nutrition &amp; Vitamins Shop</div>
<img class="_image" src="assets/img2.jpg" alt="Nutrition &amp; Vitamins Shop">
<div class="_open-icon"><i>&#128269</i></div>
</div>
</div>
<div class="_card ph-card">
<div class="_content">
<div class="_mask"></div>
<div class="_title">Nutrition &amp; Vitamins Shop</div>
<img class="_image" src="assets/img2.jpg" alt="Nutrition &amp; Vitamins Shop">
<div class="_open-icon"><i>&#128269</i></div>
</div>
</div>
<div class="_card ph-card">
<div class="_content">
<div class="_mask"></div>
<div class="_title">Nutrition &amp; Vitamins Shop</div>
<img class="_image" src="assets/img2.jpg" alt="Nutrition &amp; Vitamins Shop">
<div class="_open-icon"><i>&#128269</i></div>
</div>
</div>
<div class="_card ph-card">
<div class="_content">
<div class="_mask"></div>
<div class="_title">Nutrition &amp; Vitamins Shop</div>
<img class="_image" src="assets/img2.jpg" alt="Nutrition &amp; Vitamins Shop">
<div class="_open-icon"><i>&#128269</i></div>
</div>
</div>
<div class="_card ph-card">
<div class="_content">
<div class="_mask"></div>
<div class="_title">Nutrition &amp; Vitamins Shop</div>
<img class="_image" src="assets/img2.jpg" alt="Nutrition &amp; Vitamins Shop">
<div class="_open-icon"><i>&#128269</i></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Anul 2/Semestrul 2/Web/Lab 3/style.css
+737
View File
@@ -0,0 +1,737 @@
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
body {
overflow-x: hidden;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
line-height: 1.428571429;
color: #222222;
background-color: #f2f2f7;
-webkit-fonts-smoothing: antialiased;
margin: 0;
display: block;
}
html, body {
min-width: 320px;
margin: 0;
padding: 0;
height: 100%;
}
.navbar {
position: relative;
min-height: 40px;
}
.main-container-outer {
position: relative;
margin: 0;
padding: 0;
height: 100%;
}
div {
display: block;
}
.navbar-main {
background-color: #fff;
min-height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1030;
}
.nav {
display: block;
}
.container {
width: 1220px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.navbar-inner {
display: table;
border-collapse: separate;
will-change: margin;
margin-top: 10px;
margin-bottom: 10px;
}
.navbar .navbar-inner {
width: 100%;
}
.navbar-branding {
display: table-cell;
width: auto;
vertical-align: middle;
}
.navbar-brand {
display: block;
float: none;
padding-top: 0;
padding-bottom: 0;
height: 36px;
color: #666666;
width: 155px;
will-change: margin;
color: #666666;
width: 155px;
will-change: margin;
}
.navbar-main .navbar-brand>img {
display: block;
width: 100%;
}
img {
vertical-align: middle;
border: 0;
}
.navbar-aux {
background: linear-gradient(to right,#ff1d25 5%,#a0328c 35%,#7040a4 45%,#4359c7 55%,#0082e6 70%);
}
a {
cursor: pointer;
}
.navbar-searchbox {
padding-left: 10px;
padding-right: 10px;
display: table-cell;
width: 100%;
}
.searchbox-wrapper {
width: 100%;
position: relative;
}
form {
display: block;
margin-top: 0em;
}
.searchbox-input {
z-index: 4;
border-color: #0082e6;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.form-control {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.searchbox-input .form-control {
border-right-width: 0;
border-color: #0082e6;
border-radius: 16px;
outline: 0;
box-shadow: none;
color: #666666;
}
.input-group .form-control, .input-group-addon, .input-group-btn {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.form-control {
height: 36px;
padding: 7px 12px;
font-size: 14px;
line-height: 1.428571429;
background-color: #fefefe;
background-image: none;
border: 1px solid #ccc;
-webkit-appearance: none;
transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
}
.searchbox-input .searchbox-suggestion {
color: #d3d3d3;
}
.searchbox-input .searchbox-main, .searchbox-input .searchbox-suggestion {
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: transparent;
border: 1px solid transparent;
outline: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0 12px;
line-height: 20px;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: auto;
-webkit-rtl-ordering: logical;
cursor: text;
}
input[type="text" i] {
padding-block: 1px;
padding-inline: 2px;
}
input[type=search] {
-webkit-appearance: none;
box-sizing: border-box;
}
.input-group-btn{
vertical-align: middle;
}
.searchbox-input .input-group-btn .btn {
padding: 6px 12px;
}
.searchbox-input .input-group-btn .btn {
height: 36px;
color: #0082e6;
font-size: 18px;
border-left-width: 0;
border-color: #0082e6;
border-top-right-radius: 16px;
}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: -12px;
margin-right: -30px;
}
.input-group-btn:last-child>.btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group-btn>.btn {
position: relative;
}
.btn-default {
color: #005eb8;
background-color: #fff;
border-color: #005eb8;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
background-color: #fff;
color: #222222;
border: 1px solid transparent;
white-space: nowrap;
-webkit-box-shadow: none;
box-shadow: none;
padding: 7px 12px;
font-size: 14px;
line-height: 20px;
border-radius: 6px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button, select {
text-transform: none;
}
button {
overflow: visible;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
.em {
display: inline-block;
font: normal normal normal 14px/1 "eMAGv2";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.em-search::before {
content: '\e666';
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar .navbar-inner .navbar-branding, .navbar .navbar-inner .navbar-toolbox, .navbar .navbar-inner .navbar-wizard {
display: table-cell;
width: auto;
vertical-align: middle;
}
.navbar .navbar-inner .navbar-toolbox .navbar-toolbox-wrapper {
white-space: nowrap;
float: right;
}
.navbar .navbar-toolbox-wrapper {
display: inline-block;
}
.navbar .navbar-toolbox-wrapper {
white-space: nowrap;
position: relative;
display: table;
}
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.searchbox-suggestion {
position: relative !important;
}
.input-group {
width: 100%;
}
.navbar-aux .navbar-aux-content {
position: relative;
max-height: 40px;
}
.navbar-aux .navbar-collapse, .navbar-aux .navbar-form {
border-color: transparent;
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
.navbar-left:first-child {
margin-left: -10px;
}
.navbar-left {
float: left!important;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.nav>li {
position: relative;
display: block;
}
.navbar-aux .navbar-nav .navbar-aux-content__departments {
margin-top: 5px;
padding: 5px 10px 5px;
display: block;
color: #222222;
background-color: #fff;
line-height: 20px;
cursor: pointer;
border-radius: 5px;
font-weight: 600;
}
.navbar-right {
float: right!important;
margin-right: -10px;
}
.nav:after, .nav:before {
content: " ";
display: table;
}
.navbar-nav>li {
float: left;
}
.visible-lg {
display: block!important;
font-size: 12px;
}
.navbar-aux {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1030;
}
.navbar {
position: relative;
min-height: 40px;
}
.navbar-main+.navbar-aux {
top: 56px;
}
.navbar-main+.navbar-aux {
top: 0px;
z-index: 1025;
}
.navbar-aux .navbar-nav>li>a {
padding: 4px 10px;
margin: 5px 0 5px 4px;
color: #fff;
border-radius: 16px;
border: transparent 1px solid;
}
.navbar-aux .navbar-aux-content .navbar-right>li>a {
padding-left: 9px;
padding-right: 9px;
}
.navbar-aux .navbar-nav>li>a {
padding: 4px 10px;
margin: 5px 0 5px 4px;
color: #fff;
border-radius: 16px;
border: transparent 1px solid;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.megamenu-container {
position: relative;
width: 940px;
top: 80px;
left: 0;
right: 0;
margin: 0 auto;
}
.megamenu-container {
width: 1220px;
}
.megamenu {
background: #fff;
top: 0;
box-shadow: 0 2px 10px -2px rgba(0,0,0,0.15);
}
.megamenu-list-container {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
overflow: hidden;
padding: 0;
background-color: #fff;
min-height: 447px;
}
.megamenu-list {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 1;
flex-grow: 1;
position: relative;
width: 240px;
z-index: 1;
}
.megamenu-list {
width: 270px;
padding: 0;
list-style: none;
margin: 0;
}
.megamenu {
font-size: 13px;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
}
.megamenu-list-department {
-webkit-box-flex: 1;
flex-grow: 1;
}
.megamenu-list-department {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.megamenu-list-department>a {
color: #000;
text-decoration: none;
display: block;
padding: 6px 10px;
}
.megamenu-list-department .megamenu-list-department__department-name {
vertical-align: middle;
}
.page-section {
position: relative;
}
.widget-banner-carousel {
position: relative;
height: 447px;
}
.widget-banner-carousel .banner-carousel {
position: absolute;
top: 0;
height: 100%;
margin: 0;
background-color: transparent;
overflow: hidden;
}
.home-intro-section .banner-carousel {
left: 240px;
width: calc(100% - 240px);
}
.widget-banner-carousel .banner-carousel .ph-card {
width: 100%;
height: 100%;
vertical-align: middle;
}
.dfp-slide-item {
position: relative;
}
.ph-carousel .ph-body .ph-card {
display: inline-block;
vertical-align: bottom;
}
.widget-banner-carousel .banner-carousel .ph-card>a {
display: inline-block;
}
.dfp-slide-item img {
width: 100%;
height: auto;
}
img {
vertical-align: middle;
margin: 0;
}
.home-intro-section {
position: relative;
}
.pad-btm-xs {
padding-bottom: 10px;
}
.container {
width: 1220px;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.stories-section {
margin-top: 20px;
}
.stories-section {
padding: 7px 0;
}
.ph-carousel-init.ph-carousel {
overflow: visible;
}
.stories-carousel {
height: 218px;
}
.ph-carousel {
clear: both;
position: relative;
}
.ph-carousel .ph-body {
white-space: nowrap;
position: relative;
}
.ph-carousel .ph-body .ph-card {
display: inline-block;
vertical-align: bottom;
}
.stories-carousel ._card {
padding: 6px;
z-index: 0;
}
.stories-carousel ._card {
width: 191px;
height: 218px;
margin-right: 12px;
}
.stories-carousel ._card {
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-align: center;
background: #fff;
}
.stories-carousel ._card>._content {
position: relative;
border-radius: 8px;
overflow: hidden;
width: 100%;
height: 100%;
background: #fff;
}
.stories-carousel ._card ._mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 50%;
z-index: 2;
background-image: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.stories-carousel ._card ._title {
top: 8px;
left: 8px;
right: 8px;
font-size: 13px;
}
.stories-carousel ._card ._title {
position: absolute;
top: 6px;
left: 6px;
right: 6px;
white-space: normal;
color: #fff;
font-weight: bold;
font-size: 12px;
z-index: 3;
}
.stories-carousel ._card ._image {
max-height: 100%;
max-width: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.stories-carousel ._card ._open-icon {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
bottom: 10px;
right: 13px;
text-align: center;
line-height: 18px;
vertical-align: middle;
}