background:linear-gradient(rgba(255, 70, 0,0.5), rgba(255, 0, 0,0.5)), url(../images/home/holiday-deals/holiday-deals-img1.jpg) no-repeat
https://www.bestairfare.co.uk/

============================
1) clip-path: polygon
============================
clip-path:polygon(50% 0, 100% 100%, 0 100%); 
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: inset(20px 20px 50px round 15px 0);

https://bennettfeely.com/clippy/
https://css-tricks.com/almanac/properties/c/clip-path/

============================
2) @keyframes
============================
.img2 {animation: mover 1s infinite  alternate;}
@keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); }}

============================
3) btn effect
============================

.btn8{width:200px; display:inline-block; margin-top:20px; padding:10px 15px; text-align:center; background:#f00; color:#fff; border-radius:20px; text-decoration:none; position:relative; transition:0.4s; }
.btn8:hover{box-shadow:0 5px 10px rgba(0,0,0,0.2); transform:translateY(-3px);}
.btn8:active{box-shadow:0 5px 5px rgba(0,0,0,0.2); transform:translateY(-1px);}
.btn8:before{content:""; position:absolute; top:0px; left:0px; width:100%; height:100%; border-radius:20px; z-index:-1; background:#f00; transition:0.4s;}
.btn8:hover:before{transform:scale(1.5); opacity:0;}

============================
4) rem
============================
html{font-size:16px;}
body{font-size:1rem; padding:2rem;}

1rem = font-size:16px;
1rm = 1.5rem = font-size:24px;

============================
5) SASS SCSS
============================

SACC = CSS
SCSS - CSS3

responsive
max-width: 600px
max-width: 900px
max-width: 1200px
min-width: 1201px

1) Operators	& .text1{font-size: 1.4rem + 1.4rem;}
2) Variables	$blue:#3333ff; --|-- & .text2{color: $blue;}
3) Nesting	& .text1
4) Mixins
5) Parameter
6) Partials

============================
6) flex --- section-7 (68)
============================
--CONTAINER--
1) flex-direction: row | row-reverse | coloumn | column-reverse
2) flex-wrap: nowrap | wrap | wrap-reverse
3) justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
4) align-items: stretch | flex-start |flex-end | center | baseline
5) align-content: stretch | flex-start | flex-end | center | space-between | space-around

--ITEM--
1) align-self:auto | stretch | flex-start | flex-end | center | baseline
2) order: 0 | <integer>
3) flex-grow: 0 | <integer>
4) flex-shrink: 1 | <integer>
5) flex-basis: auto | <length>


1) order:-1;			----- box3 positon on box1
2) justify-content: space-evenly;
3) align-self:center;
4) align-items:baseline; 		------ text alight only
5) flex-grow:1;
6) flex-basis:300px;
7) flex-shrink:0;
8) flex:0 1 200px; ------ flex-grow, flex-shrink, flex-width
9) 



============================
7) CSS GRID section-7 (90)
============================
1) display:grid:
2) display:grid-inline:

----CONTAINER----
1)
grid-template-rows
grid-template-columns	====>  grid-template
grid-template-areas

2)
grid-row-gap
gird-column-gap		====>	grid-gap

3)
justify-items
align-items
justify-content
align-content

4)
grid-auto-rows
grid-auto-columns
grid-auto-flow

----ITEM----
1)
grid-row-start		====>	grid-row
grid-row-end
grid-column-start	====>	grid-column
grid-column-end

2)
justify-self
align-self

3)
order

=========================================
1) SCSS, responsive
2) flex box (lession 68)
3) css grid (lession 68)

CODEPEN
https://codepen.io/jonasschmedtmann


============================
9) BOOTSTRAP
============================
3) Bootstrap 3
xs		320-767
sm		768-991
md		992-1199
lg		1200-
container == 1170
modal = in
.hidden = hidden

4) Bootstrap 4
.col-		320-575
.col-sm-	576-767
.col-md-	768-991
.col-lg-	992-1199
.col-xl-	1200-
container == 1140
modal = show
.d-none = hidden
.d-none .d-sm-block .d-sm-none

5) Bootstrap 5
.col-		320-575
.col-sm-	576-767
.col-md-	768-991
.col-lg-	992-1199
.col-xl-	1200-1399
.col-xxl-	1400-
container == container 1140-less then-1400  ==== 1400 gt container 1320px
modal = show
.d-none = hidden
.d-none .d-sm-block .d-sm-none

============================
10) collomn add
============================
.container>.box*12



============================
11) function 3 Type
============================
// function 1
    function my_fun1() {
        return ("THIS IS MY 1st FUNCTION");
    }
    let my_fun_value1 = my_fun1();

    document.getElementById("text12").innerHTML = `1 my function name ${my_fun_value1}`;

    //===============================

    // function 2
    const my_fun2 = function() {
        return ("THIS IS MY 2nd FUNCTION")
    }
    const my_fun_value2 = my_fun2();
    document.getElementById("text13").innerHTML = `2 my function name ${my_fun_value2}`;

    //===============================

    // function 3
    const my_fun3 = () => {
        return ("THIS IS MY 3rd FUNCTION")
    }

    const my_fun_value3 = my_fun3();
    document.getElementById("text14").innerHTML = `3 my function name ${my_fun_value3}`;