code
Cette révision appartient à :
Externe
BIN
Fichier binaire non affiché.
Externe
+16
-2
@@ -80,6 +80,9 @@ body {
|
|||||||
.fw-600 {
|
.fw-600 {
|
||||||
font-weight: 600; }
|
font-weight: 600; }
|
||||||
|
|
||||||
|
.h-200p {
|
||||||
|
height: 200px; }
|
||||||
|
|
||||||
.button_dark {
|
.button_dark {
|
||||||
clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
|
clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
|
||||||
padding-right: 1.7rem;
|
padding-right: 1.7rem;
|
||||||
@@ -91,7 +94,8 @@ body {
|
|||||||
width: 40rem; }
|
width: 40rem; }
|
||||||
|
|
||||||
.price_footer {
|
.price_footer {
|
||||||
background-color: #52cba5; }
|
background-color: #52cba5;
|
||||||
|
border: 2px solid; }
|
||||||
|
|
||||||
.boxImgContainer {
|
.boxImgContainer {
|
||||||
width: 4rem; }
|
width: 4rem; }
|
||||||
@@ -114,4 +118,14 @@ body {
|
|||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: white;
|
background: white;
|
||||||
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }
|
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
|
||||||
|
position: relative; }
|
||||||
|
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); }
|
||||||
|
|
||||||
|
.PO_galleryContainer .PO_gallery_box_inner {
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: #EEEEEE; }
|
||||||
|
|||||||
Externe
+39
-5
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class=" bg-green">
|
<header class=" bg-green vh-100">
|
||||||
|
|
||||||
<!-- navbar -->
|
<!-- navbar -->
|
||||||
<div id="navbar-head"></div>
|
<div id="navbar-head"></div>
|
||||||
@@ -80,15 +80,49 @@
|
|||||||
<div class="container PO_galleryContainer">
|
<div class="container PO_galleryContainer">
|
||||||
<div class="p-6 pt-0">
|
<div class="p-6 pt-0">
|
||||||
<div class="PO_gallery_display">
|
<div class="PO_gallery_display">
|
||||||
<img src="./../../assets/" />
|
<img class="PO_gallery_display_img" src="./../../assets/laptop_display.png" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="d-flex h-200p pt-5 justify-content-between align-items-center">
|
||||||
box
|
<span class="PO_gallery_box h-100">
|
||||||
|
<div class="PO_gallery_box_inner h-100">
|
||||||
|
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="PO_gallery_box h-100">
|
||||||
|
<div class="PO_gallery_box_inner h-100">
|
||||||
|
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="PO_gallery_box h-100">
|
||||||
|
<div class="PO_gallery_box_inner h-100">
|
||||||
|
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="PO_gallery_box h-100">
|
||||||
|
<div class="PO_gallery_box_inner h-100">
|
||||||
|
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="PO_gallery_box h-100">
|
||||||
|
<div class="PO_gallery_box_inner h-100">
|
||||||
|
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="PO_gallery_box h-100">
|
||||||
|
<div class="PO_gallery_box_inner h-100">
|
||||||
|
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- photos display end -->
|
<!-- photos display end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- specs -->
|
||||||
|
|
||||||
|
<!-- specs end -->
|
||||||
|
|
||||||
<!-- footer -->
|
<!-- footer -->
|
||||||
<div id="footer-head"></div>
|
<div id="footer-head"></div>
|
||||||
<!-- end-footer -->
|
<!-- end-footer -->
|
||||||
|
|||||||
@@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="./../../libs/bootstrap/css/bootstrap.min.css" />
|
|
||||||
<link rel="stylesheet" href="./../../css/main.css" />
|
|
||||||
<title>project</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="bg-primary">hello</div>
|
|
||||||
|
|
||||||
<script src="../../libs/bootstrap/js/bootstrap.bundle.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Générée
-1310
Fichier diff supprimé car celui-ci est trop grand
Voir la Diff
@@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "sass_sandbox",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"start": "node-sass -w scss/ -o dist/css/ --recursive"
|
|
||||||
},
|
|
||||||
"keywords": [],
|
|
||||||
"author": "",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"node-sass": "^4.11.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
// Set Text Color
|
|
||||||
@function set-text-color($color) {
|
|
||||||
@if (lightness($color) > 50) {
|
|
||||||
@return #000;
|
|
||||||
} @else {
|
|
||||||
@return #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transform mixin
|
|
||||||
@mixin transform($property) {
|
|
||||||
--webkit-transform: $property;
|
|
||||||
-ms-transform: $property;
|
|
||||||
transform: $property;
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
|
|
||||||
@mixin absCenter {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// MEDIA QUERY MANAGER
|
|
||||||
/*
|
|
||||||
0 - 600px: Phone
|
|
||||||
600 - 900px: Tablet portrait
|
|
||||||
900 - 1200px: Tablet landscape
|
|
||||||
[1200 - 1800] is where our normal styles apply
|
|
||||||
1800px + : Big desktop
|
|
||||||
|
|
||||||
$breakpoint arguement choices:
|
|
||||||
- phone
|
|
||||||
- tab-port
|
|
||||||
- tab-land
|
|
||||||
- big-desktop
|
|
||||||
|
|
||||||
ORDER: Base + typography > general layout + grid > page layout > components
|
|
||||||
|
|
||||||
1em = 16px
|
|
||||||
*/
|
|
||||||
@mixin respond($breakpoint) {
|
|
||||||
@if $breakpoint == phone {
|
|
||||||
@media only screen and (max-width: 37.5em) { @content }; //600px
|
|
||||||
}
|
|
||||||
@if $breakpoint == tab-port {
|
|
||||||
@media only screen and (max-width: 56.25em) { @content }; //900px
|
|
||||||
}
|
|
||||||
@if $breakpoint == tab-land {
|
|
||||||
@media only screen and (max-width: 75em) { @content }; //1200px
|
|
||||||
}
|
|
||||||
@if $breakpoint == big-desktop {
|
|
||||||
@media only screen and (min-width: 112.5em) { @content }; //1800
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
// $primary-color: steelblue;
|
|
||||||
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
*,
|
|
||||||
*::after,
|
|
||||||
*::before {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
|
|
||||||
@include respond(tab-port) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
// colors
|
|
||||||
.bg-green {
|
|
||||||
background-color: #3bb78f;
|
|
||||||
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
// font size
|
|
||||||
.font-3 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
.font-1_5 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-1_7{
|
|
||||||
font-size: 1.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-2{
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-2_2{
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.subtitle_1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-1 {
|
|
||||||
gap: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner_heading_4 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// padding
|
|
||||||
|
|
||||||
.padding_top_14 {
|
|
||||||
padding-top: 14rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-6{
|
|
||||||
padding:5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// heights
|
|
||||||
|
|
||||||
.vh_60{
|
|
||||||
height: 60vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vh-77{
|
|
||||||
height: 77vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vh-85 {
|
|
||||||
height: 85vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vh-15 {
|
|
||||||
height: 15vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// font weight
|
|
||||||
|
|
||||||
.fw-600{
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
// button
|
|
||||||
.button_dark{
|
|
||||||
clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
|
|
||||||
padding-right: 1.7rem;
|
|
||||||
padding-bottom: 0.6rem;
|
|
||||||
padding-top: 0.6rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
@import "abstracts/functions";
|
|
||||||
@import "abstracts/mixins";
|
|
||||||
@import "abstracts/variables";
|
|
||||||
|
|
||||||
@import "base/base";
|
|
||||||
@import "base/typography";
|
|
||||||
@import "base/utilities";
|
|
||||||
|
|
||||||
|
|
||||||
// components
|
|
||||||
@import "components/_button";
|
|
||||||
|
|
||||||
// pages
|
|
||||||
@import "pages/productOverview.scss";
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
.photo_dual{
|
|
||||||
width:40rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price_footer{
|
|
||||||
background-color:#52cba5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.boxImgContainer{
|
|
||||||
width: 4rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.priceCut_multi{
|
|
||||||
font-size: .7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.productOverview{
|
|
||||||
.overviewProductHeading{
|
|
||||||
font-size: 2.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overviewProductFullTitle{
|
|
||||||
padding: 2rem 13rem;
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overviewProductDes{
|
|
||||||
padding: 0 2rem;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.PO_galleryContainer{
|
|
||||||
.PO_gallery_display{
|
|
||||||
min-height: 500px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
background: rgb(255,255,255);
|
|
||||||
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Référencer dans un nouveau ticket
Bloquer un utilisateur