+3670 7027 517 kapcsolat.sx1@gmail.com

HTML, JS, CSS
Square4cards

Minimal design

Bemutatkozás
Mindent magunkról
Ez a bemutatkozás oldala ...
Eszközök
Mindent az eszközökről
Ez az eszközök bemutatása ...
Kapcsolat
Kapcsolati útmutató
Ez a Kapcsolat oldal ...
Üzenetek
Üzenetek nekünk
Itt olvashatóak az üzenetek ...

Egyedi CSS design

Bemutatkozás
Mindent magunkról
Ez a bemutatkozás oldala ...
Eszközök
Mindent az eszközökről
Ez az eszközök bemutatása ...
Kapcsolat
Kapcsolati útmutató
Ez a Kapcsolat oldal ...
Üzenetek
Üzenetek nekünk
Itt olvashatóak az üzenetek ...

Forráskódok

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
(function($) {
    // ---------- INIT PAGE -------------
    var sb_slide_time = 500;
    initSquare4cards();

    function initSquare4cards() {

        $('.square4cards').each(function(i) {
            $(this).attr( "id", "square4card_"+i );
            $(this).height( $(this).width() );
        });

        $('.square4cards').find('.s4card').css( {"width": "50%"} );
        $('.s4row').css( "transition-duration", sb_slide_time+"ms" );
        $('.s4card').css( "transition-duration", sb_slide_time+"ms" );
        $('.s4c_title').css( "transition-duration", sb_slide_time+"ms" );
        $('.s4row > div').append( '<div class="opener"><i class="fas fa-lg fa-chevron-circle-down"></i></div>' );
        $('.s4row > div').append( '<div class="closer"><i class="fas fa-lg fa-times-circle"></i></div>' );
        $(".s4row > div .closer").hide();
        $('.s4row > div .s4c_body').hide();

    }

    $(".square4cards .opener").on( "click", function () {

        $(this).closest('.square4cards').find('.s4c_body').hide();
        $(this).closest('.square4cards').find('.s4c_lead').hide( sb_slide_time );
        $(this).closest('.square4cards').find('.closer').hide();
        $(this).closest('.square4cards').find('.opener').hide();
        $(this).hide();
        $(this).parent().find(".closer").show();
        // --- Open selected DIVs ----
        var titleHeight = $(this).parent().find('.s4c_title').css( "height");
        $(this).closest('.s4row').find('.s4card').css( {"width": titleHeight} );
        $(this).closest('.s4row').find('.s4c_title').addClass( "s4c_title_90" );
        $(this).closest('.s4row').find('.s4c_title').css( {"margin-top": "-"+titleHeight} );
        $(this).closest('.square4cards').find('.s4c_title').addClass( "s4c_title_off" );
        $(this).closest('.square4cards').find('.s4c_title').css( {"width": $(this).parent().css( "height")} );
        $(this).closest('.square4cards').find('.s4row').css( {"height": titleHeight} );
        $(this).closest('.s4row').css( {"height": "calc(100% - "+titleHeight+")"} );
        $(this).parent().css( {"width": "100%"} );
        $(this).parent().find('.s4c_title').removeClass( "s4c_title_90" );
        $(this).parent().find('.s4c_title').removeClass( "s4c_title_off" );
        $(this).parent().find('.s4c_title').css( {"margin-top": ""} );
        $(this).parent().find('.s4c_title').css( {"width": ""} );
        $(this).parent().find(".s4c_body").show( sb_slide_time );

    });

    $(".square4cards .closer").on( "click", function () {

        $s4card = $(this).parent();
        $s4card.find(".s4c_body").hide( sb_slide_time );
        $s4card.find(".closer").hide();
        $(this).closest('.square4cards').find('.opener').show();
        $(this).closest('.square4cards').find('.s4c_lead').show( sb_slide_time );
        $(this).closest('.square4cards').find('.s4row').css( {"height": "50%"} );
        $(this).closest('.square4cards').find('.s4card').css( {"width": "50%"} );
        $(this).closest('.square4cards').find('.s4c_title').removeClass( "s4c_title_90 s4c_title_off" );
        $(this).closest('.square4cards').find('.s4c_title').css( {"margin-top": ""} );
        $(this).closest('.square4cards').find('.s4c_title').css( {"width": ""} );

    });

})(jQuery);

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
.square4cards {
    width: 600px;
    display: block;
    margin: auto;
    position: relative;
    overflow: hidden;
    border: 1px solid #0c5460;
}
.s4row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    height: 50%;
}

.s4row {
    display: block;
    transition: height 1s ease-out;
}

.s4row .s4card {
    display: inline-block;
    position: relative;
    align-self: stretch;
    transition: width 1s ease-out;
    border:0px solid #0c5460;
    width: 50%;
}
.s4row .s4card:first-child { border-right-width: 1px; }
.s4row:first-child .s4card { border-bottom-width: 1px; }

.square4cards .opener,
.square4cards .closer {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1rem 8px 0 0;
    cursor: none;
}
.square4cards .opener:hover,
.square4cards .closer:hover {
    cursor: pointer;
}
.square4cards .opener { color: #4b89cc; }
.square4cards .opener:hover { color: #113f76; }
.square4cards .closer { color: #de4224; }
.square4cards .closer:hover { color: #a01f06; }

.square4cards .s4c_title {
    width: 100%;
    padding: 1rem 0.5rem;
    background: rgba(143, 200, 247, 1);
    background: linear-gradient(90deg, rgba(143, 200, 247, 1) 0%, rgba(143, 200, 247, 0) 100%);
    font-size: 1.2rem;
    color: #064486;
    transition: transform 1s ease-out, background 1s ease-out;
}

.square4cards .s4c_title_90 {
    transform: rotate(90deg);
    transform-origin: bottom left;
    width: fit-content;
}

.square4cards .s4c_title_off {
    background: rgba(55, 55, 55, 1);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

.square4cards .s4c_lead {
    padding: 1rem 0.75rem;
    font-size: 120%;
    color: #064486;
    text-transform: capitalize;
}

.square4cards .s4c_body {
    padding: 1rem 0.75rem;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="square4cards">

      <div class="s4row">
        <div class="s4card">
          <div class="s4c_title">Bemutatkozás </div>
          <div class="s4c_lead">Mindent magunkról </div>
          <div class="s4c_body">Ez a bemutatkozás oldala ... </div>
        </div>
        <div class="s4card">
          <div class="s4c_title">Eszközök </div>
          <div class="s4c_lead">Mindent az eszközökről</div>
          <div class="s4c_body">Ez az eszközök bemutatása ... </div>
        </div>
      </div>

      <div class="s4row">
        <div class="s4card">
          <div class="s4c_title">Kapcsolat </div>
          <div class="s4c_lead">Kapcsolati útmutató </div>
          <div class="s4c_body">Ez a Kapcsolat oldal ... </div>
        </div>
        <div class="s4card">
          <div class="s4c_title">Üzenetek </div>
          <div class="s4c_lead">Üzenetek nekünk </div>
          <div class="s4c_body">Itt olvashatóak az üzenetek ... </div>
        </div>
      </div>

</div>