Minimalistic macbooks design

7.1.2019

#header .site-name {
padding-top:5px;
padding-bottom:5px;
}

.content.wide {
padding-left:0px;padding-right:0px;
}

@media (min-width: 768px) and (max-width: 991px) {
.container.content-wrapper {width:100%;}
}

@media (min-width: 992px) and (max-width: 1199px) {
.container.content-wrapper {width:100%;}
}

@media (min-width: 1200px) and (max-width: 1439px){
.container.content-wrapper {width:100%;}
}

@media (min-width: 1440px) {
.container.content-wrapper {width:100%;}
}
</style>

Titulní stránka

.price-1product {
font-size:3vh;
font-weight: 600;
}

.img-hover {
transition: transform .2s; /* Animation */
}

.img-hover:hover {
transform: scale(1.1);
}

.custom-btn {
background-color:#222222;
border:2px solid #222222;
border-radius: 50px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:14px;
font-weight:400;
padding:7px 20px;
text-decoration:none;
}

.custom-btn:hover {
background-color:#ff7532;
border:2px solid #ff7532;
color:#fff;
}

/* basic grid setup main page grid */
.main-page-laptop {
grid-area: main-laptop;
place-self: center;
}

.main-page-h2 {
font-size:5vw;
color:#fff;
grid-area: main-text;
align-self: end;
justify-self:center;
}

.main-page-btn {
grid-area: main-btn;
place-self: center;
}

#bg-clip-main {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
background-color:#000000;
width:100%;
height:50px;
margin-top:-1px;
}

/* basic grid setup grid 1 */
#bg-clip1 {
-webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
background-color:#ececec;
grid-area: container-bottom1;
}

.kn_1product_desc {
grid-area: product1-desc;
place-self: center;
}

.kn_1product_img {
grid-area: product1-img;
place-self: center;
}

.kn_1product_btn {
grid-area: product1-btn;
place-self: center;
}

/* basic grid setup grid 2 */
#bg-clip2 {
-webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
background-color:#cecece;
grid-area: container-bottom2;
}

.kn_2products_desc {
grid-area: product2-desc;
place-self: center;
}

.kn_2products_img1 {
grid-area: product2-img1;
place-self: center;
}

.kn_2products_btn1 {
grid-area: product2-btn1;
place-self: center;
}

.kn_2products_img2 {
grid-area: product2-img2;
place-self: center;
}

.kn_2products_btn2 {
grid-area: product2-btn2;
place-self: center;
}

/* basic grid setup grid 3 */
#bg-clip3 {
-webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
background-color:#ffffff;
grid-area: container-bottom3;
}

.kn_3products_desc {
grid-area: product3-desc;
place-self: center;
}

.kn_3products_img1 {
grid-area: product3-img1;
place-self: center;
}

.kn_3products_btn1 {
grid-area: product3-btn1;
place-self: center;
}

.kn_3products_img2 {
grid-area: product3-img2;
place-self: center;
}

.kn_3products_btn2 {
grid-area: product3-btn2;
place-self: center;
}

.kn_3products_img3 {
grid-area: product3-img3;
place-self: center;
}

.kn_3products_btn3 {
grid-area: product3-btn3;
place-self: center;
}

/* mobile styles */
@media screen and (max-width: 991px) {

.kn_grid_1product {
display:grid;
grid-template-columns: 20px 1fr 20px;
grid-column-gap: 10px;
grid-template-rows: auto auto auto 50px;
grid-row-gap: 10px;
grid-template-areas:
"side-left product1-desc side-right"
"side-left product1-img side-right"
"side-left product1-btn side-right"
"container-bottom1 container-bottom1 container-bottom1";
}

.kn_grid_2products {
background-color:#ececec;
display:grid;
grid-template-columns: 20px 1fr 1fr 20px;
grid-column-gap: 10px;
grid-template-rows: auto auto auto 50px;
grid-row-gap: 10px;
grid-template-areas:
"side-left product2-desc product2-desc side-right"
"side-left product2-img1 product2-img2 side-right"
"side-left product2-btn1 product2-btn2 side-right"
"container-bottom2 container-bottom2 container-bottom2 container-bottom2";
}

.kn_grid_3products {
background-color:#cecece;
display:grid;
grid-template-columns: 20px 1fr 1fr 1fr 20px;
grid-column-gap: 10px;
grid-template-rows: auto auto auto 50px;
grid-row-gap: 10px;
grid-template-areas:
"side-left product3-desc product3-desc product3-desc side-right"
"side-left product3-img1 product3-img2 product3-img3 side-right"
"side-left product3-btn1 product3-btn2 product3-btn3 side-right"
"container-bottom3 container-bottom3 container-bottom3 container-bottom3 container-bottom3";
}
}

/* desktop styles */
@media screen and (max-width: 1200px) and (min-width: 992px) {
.kn_grid_1product {
display:grid;
grid-template-columns: 50px 1fr 1fr 50px;
grid-column-gap: 10px;
grid-template-rows: auto auto 50px;
grid-row-gap: 10px;
grid-template-areas:
"side-left product1-desc product1-img side-right"
"side-left product1-desc product1-btn side-right"
"container-bottom1 container-bottom1 container-bottom1 container-bottom1";
}

.kn_grid_2products {
background-color:#ececec;
display:grid;
grid-template-columns: 50px 1fr 1fr 1fr 50px;
grid-column-gap: 10px;
grid-template-rows: auto auto 50px;
grid-row-gap: 10px;
grid-template-areas:
"side-left product2-desc product2-img1 product2-img2 side-right"
"side-left . product2-btn1 product2-btn2 side-right"
"container-bottom2 container-bottom2 container-bottom2 container-bottom2 container-bottom2";
}

.kn_grid_3products {
background-color:#cecece;
display:grid;
grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
grid-column-gap: 10px;
grid-template-rows: auto auto 50px;
grid-row-gap: 10px;
grid-template-areas:
"side-left product3-desc product3-img1 product3-img2 product3-img3 side-right"
"side-left . product3-btn1 product3-btn2 product3-btn3 side-right"
"container-bottom3 container-bottom3 container-bottom3 container-bottom3 container-bottom3 container-bottom3";
}
}

/* big desktop styles */
@media screen and (min-width: 1199px) {
.main-page-setup {
background-image: url("http://code2.kubanavratil.com/user/documents/upload/Res/grid-template/main-page-background-small2.png");
background-size: cover;
background-position: bottom;
display:grid;
grid-template-columns: 10% 1fr 1fr 1fr 10%;
grid-column-gap: 30px;
grid-template-rows:32vw 7vw;
grid-row-gap: 10px;
grid-template-areas:
"main-side-left main-text main-laptop main-laptop main-side-right"
"main-side-left main-text main-btn main-btn main-side-right";
}

.kn_grid_1product {
display:grid;
grid-template-columns: 16% 1fr 1fr 16%;
grid-column-gap: 15px;
grid-template-rows: auto auto 50px;
grid-row-gap: 15px;
grid-template-areas:
"side-left product1-desc product1-img side-right"
"side-left product1-desc product1-btn side-right"
"container-bottom1 container-bottom1 container-bottom1 container-bottom1";
}

.kn_grid_2products {
background-color:#ececec;
display:grid;
grid-template-columns: 16% 1fr 1fr 1fr 16%;
grid-column-gap: 15px;
grid-template-rows: auto auto 50px;
grid-row-gap: 15px;
grid-template-areas:
"side-left product2-desc product2-img1 product2-img2 side-right"
"side-left . product2-btn1 product2-btn2 side-right"
"container-bottom2 container-bottom2 container-bottom2 container-bottom2 container-bottom2";
}

.kn_grid_3products {
background-color:#cecece;
display:grid;
grid-template-columns: 16% 1fr 1fr 1fr 1fr 16%;
grid-column-gap: 15px;
grid-template-rows: auto auto 50px;
grid-row-gap: 15px;
grid-template-areas:
"side-left product3-desc product3-img1 product3-img2 product3-img3 side-right"
"side-left . product3-btn1 product3-btn2 product3-btn3 side-right"
"container-bottom3 container-bottom3 container-bottom3 container-bottom3 container-bottom3 container-bottom3";
}
}
--></style>
<div class="main-page-setup"><img class="main-page-laptop" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/grid-template/main-page-laptop.png' />
<h2 class="main-page-h2">Matebook <br />x Pro<br /><br /></h2>
<a class="main-page-btn custom-btn" href="#">Koupit</a></div>
<div id="bg-clip-main"> </div>
<div class="kn_grid_1product">
<div class="kn_1product_desc">
<h2>Nadpis</h2>
<p>Possibly the best ultrabook of today. Great value in America, stupidly expensive in Europe. Except in our e-shop. Luckily... .)</p>
<p class="price-1product">1199 €</p>
</div>
<img class="kn_1product_img img-hover" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/grid-template/Matebook-X.png' /> <a class="kn_1product_btn custom-btn" href="#">Koupit</a>
<div id="bg-clip1"> </div>
</div>
<div class="kn_grid_2products">
<div class="kn_2products_desc">
<h2>Nadpis</h2>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</div>
<img class="kn_2products_img1 img-hover" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/grid-template/Matebook-X.png' /> <a class="kn_2products_btn1 custom-btn" href="#">Koupit</a> <img class="kn_2products_img2 img-hover" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/grid-template/Matebook-X.png' /> <a class="kn_2products_btn2 custom-btn" href="#">Koupit</a>
<div id="bg-clip2"> </div>
</div>
<div class="kn_grid_3products">
<div class="kn_3products_desc">
<h2>Nadpis</h2>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</div>
<img class="kn_3products_img1 img-hover" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/grid-template/Matebook-X.png' /> <a class="kn_3products_btn1 custom-btn" href="#">Koupit</a> <img class="kn_3products_img2 img-hover" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/grid-template/Matebook-X.png' /> <a class="kn_3products_btn2 custom-btn" href="#">Koupit</a> <img class="kn_3products_img3 img-hover" src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/grid-template/Matebook-X.png' /> <a class="kn_3products_btn3 custom-btn" href="#">Koupit</a>
<div id="bg-clip3"> </div>
</div>

Titulní stránka

Odebírat newsletter