Beiträge von <aktiv-passiv>

<aktiv-passiv>

Alles klar. Vielen Dank. Hatte es in einem Online Kurs gelernt. Scheint nicht ganz so richtig zu sein. Muss es mir mit dem responsive Design dann nochmal genau anschauen.

<aktiv-passiv>

Die genauen Seiten weiß ich nicht mehr ich habe gegooglet und mich durchgelesen und Youtube Videos zum Thema Grid geschaut. Da wurde es erzählt.

hier der Code zum Grid.

Code

[COLOR=#d4d4d4][FONT=Consolas][COLOR=#6a9955]/* Grid[/COLOR]
[COLOR=#6a9955]–––––––––––––––––––––––––––––––––––––––––––––––––– */[/COLOR]
[COLOR=#d7ba7d].container[/COLOR][COLOR=#d4d4d4] {[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]position[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#ce9178]relative[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]100%[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]max-width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]960px[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]margin[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]0[/COLOR][COLOR=#d4d4d4] [/COLOR][COLOR=#ce9178]auto[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]padding[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]0[/COLOR][COLOR=#d4d4d4] [/COLOR][COLOR=#b5cea8]20px[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]box-sizing[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#ce9178]border-box[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d7ba7d].column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d7ba7d].columns[/COLOR][COLOR=#d4d4d4] {[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]100%[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]float[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#ce9178]left[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#9cdcfe]box-sizing[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#ce9178]border-box[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#6a9955]/* For devices larger than 400px */[/COLOR]
[COLOR=#c586c0]@media[/COLOR][COLOR=#d4d4d4] ([/COLOR][COLOR=#9cdcfe]min-width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]400px[/COLOR][COLOR=#d4d4d4]) {[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].container[/COLOR][COLOR=#d4d4d4] {[/COLOR]
[COLOR=#d4d4d4]    [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]85%[/COLOR][COLOR=#d4d4d4];[/COLOR]
[COLOR=#d4d4d4]    [/COLOR][COLOR=#9cdcfe]padding[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]0[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]}[/COLOR]


[COLOR=#6a9955]/* For devices larger than 550px */[/COLOR]
[COLOR=#c586c0]@media[/COLOR][COLOR=#d4d4d4] ([/COLOR][COLOR=#9cdcfe]min-width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]550px[/COLOR][COLOR=#d4d4d4]) {[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].container[/COLOR][COLOR=#d4d4d4] {[/COLOR]
[COLOR=#d4d4d4]    [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]80%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].columns[/COLOR][COLOR=#d4d4d4] {[/COLOR]
[COLOR=#d4d4d4]    [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]4%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].column:first-child[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].columns:first-child[/COLOR][COLOR=#d4d4d4] {[/COLOR]
[COLOR=#d4d4d4]    [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]0[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].one.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].one.columns[/COLOR][COLOR=#d4d4d4]                    { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]4.66666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].two.columns[/COLOR][COLOR=#d4d4d4]                    { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]13.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].three.columns[/COLOR][COLOR=#d4d4d4]                  { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]22%[/COLOR][COLOR=#d4d4d4];            }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].four.columns[/COLOR][COLOR=#d4d4d4]                   { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]30.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].five.columns[/COLOR][COLOR=#d4d4d4]                   { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]39.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].six.columns[/COLOR][COLOR=#d4d4d4]                    { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]48%[/COLOR][COLOR=#d4d4d4];            }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].seven.columns[/COLOR][COLOR=#d4d4d4]                  { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]56.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].eight.columns[/COLOR][COLOR=#d4d4d4]                  { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]65.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].nine.columns[/COLOR][COLOR=#d4d4d4]                   { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]74.0%[/COLOR][COLOR=#d4d4d4];          }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].ten.columns[/COLOR][COLOR=#d4d4d4]                    { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]82.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].eleven.columns[/COLOR][COLOR=#d4d4d4]                 { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]91.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].twelve.columns[/COLOR][COLOR=#d4d4d4]                 { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]100%[/COLOR][COLOR=#d4d4d4]; [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]0[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].one-third.column[/COLOR][COLOR=#d4d4d4]               { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]30.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].two-thirds.column[/COLOR][COLOR=#d4d4d4]              { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]65.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].one-half.column[/COLOR][COLOR=#d4d4d4]                { [/COLOR][COLOR=#9cdcfe]width[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]48%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#d4d4d4]  [/COLOR][COLOR=#6a9955]/* Offsets */[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-one.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-one.columns[/COLOR][COLOR=#d4d4d4]          { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]8.66666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-two.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-two.columns[/COLOR][COLOR=#d4d4d4]          { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]17.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-three.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-three.columns[/COLOR][COLOR=#d4d4d4]        { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]26%[/COLOR][COLOR=#d4d4d4];            }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-four.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-four.columns[/COLOR][COLOR=#d4d4d4]         { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]34.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-five.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-five.columns[/COLOR][COLOR=#d4d4d4]         { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]43.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-six.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-six.columns[/COLOR][COLOR=#d4d4d4]          { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]52%[/COLOR][COLOR=#d4d4d4];            }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-seven.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-seven.columns[/COLOR][COLOR=#d4d4d4]        { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]60.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-eight.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-eight.columns[/COLOR][COLOR=#d4d4d4]        { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]69.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-nine.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-nine.columns[/COLOR][COLOR=#d4d4d4]         { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]78.0%[/COLOR][COLOR=#d4d4d4];          }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-ten.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-ten.columns[/COLOR][COLOR=#d4d4d4]          { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]86.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-eleven.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-eleven.columns[/COLOR][COLOR=#d4d4d4]       { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]95.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-one-third.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-one-third.columns[/COLOR][COLOR=#d4d4d4]    { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]34.6666666667%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-two-thirds.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-two-thirds.columns[/COLOR][COLOR=#d4d4d4]   { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]69.3333333333%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-one-half.column[/COLOR][COLOR=#d4d4d4],[/COLOR]
[COLOR=#d4d4d4]  [/COLOR][COLOR=#d7ba7d].offset-by-one-half.columns[/COLOR][COLOR=#d4d4d4]     { [/COLOR][COLOR=#9cdcfe]margin-left[/COLOR][COLOR=#d4d4d4]: [/COLOR][COLOR=#b5cea8]52%[/COLOR][COLOR=#d4d4d4]; }[/COLOR]


[COLOR=#d4d4d4]}[/COLOR]


[/FONT][/COLOR]

Alles anzeigen

Okay was heißt das echte Grid-Modell? Also stimmt es nicht das Flex eine art veraltete Version von Grid ist?

<aktiv-passiv>

Arne Drews,

Vielen Dank für die Antwort. Ich habe an mehreren Stellen gelesen dass das arbeiten mit Flexbox nicht so effektiv ist wie mit einem Grid. Daher arbeite ich mit einem vorgefertigten Grid Modell. Wenn die Seite am PC angeschaut wird passt ja auch alle mit dem Grid aber wenn ich auf responsive Design umschalte lassen sich die Grids nicht zentrieren. Was auch gerade Sinn macht wenn ich das so schreibe. Gibt es eine möglichkeit die Grids ab einer bestimmten größe auszuschalten?

LG

<aktiv-passiv>

Guten Abend Zusammen,

ich bin neu in der HTML & CSS Welt und habe eine anfänger Frage. Ich habe meine Seite so gut wie fertiggestellt und bin jetzt dabei das Responsive-Design umzustellen.

Und zwar geht es darum das ich auf meiner Seite ein div Container habe in dem Links mit Logos daneben stehen. Ich würde gerne sowohl die Links als auch die Logos zentrieren. Mit text-align:center; werden allerdings nur die Links zentriert und die Logos bleiben links am Rand stehen. Ich hoffe ich konnte mich verständlich ausdrücken.

Bitte nicht zu hart mit mir sein, es ist mein erstes Projekt

Code

[U][B]HTML Code:[/B][/U]


<div class="container1">
    <div class="container2">
        <div class="row">
            <div class="three columns">
                <a class="links" href="....">
                    <div class="logo1"><i class="...."></i></div>
                    <div class="text1"><p>Text</p></div>
                </a>
            </div>
            <div class="three columns">
                <a class="links" href="....">
                    <div class="logo2"><i class="..."></i></div>
                    <div class="text2"><p>Text</p></div>
                </a>
            </div>
            <div class="three columns">
                <a class="links" href="....">
                    <div class="logo3"><i class="...."></i></div>
                    <div class="text3"><p>Text</p></div>
                </a>
            </div>
            <div class="three columns">
                <a class="links" href="....">
                    <div class="logo4"><i class="....."></i></div>
                    <div class="text4"><p>Text</p></div>
                </a>
            </div>
        </div>
    </div>
</div>






[U][B]CSS Code:[/B][/U]


.text2,
.text3 {
    font-size:120%;
    margin-left:35px;
    margin-top:5px;


    @media (min-width:1085px) {
        font-size:150%;
        margin-left:35px;
        margin-top:5px;
    }
}
.text4 {
    font-size:120%;
    margin-left:35px;
    margin-top:5px;


    @media (min-width:1085px) {
        font-size:150%;
        margin-left:5px;
        margin-top:5px;
    }
}
.text1 {
    font-size:120%;
    margin-left:20px;
    margin-top:5px;


    @media (min-width:1085px) {
        font-size:150%;
        margin-left:120px;
        margin-top:5px;
    }
}
.logo2,
.logo3 {
    float:left;
    font-size:150%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition:         transform .5s ease-in-out;

    @media (min-width:1085px) {
        float:left;
        font-size:200%;
        -webkit-transition: -webkit-transform .5s ease-in-out;
        transition:         transform .5s ease-in-out;
    }
}
.logo4 {
    float:left;
    font-size:150%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition:         transform .5s ease-in-out;
    margin-right:10px;
    margin-left:20px;


    @media (min-width:1085px) {
        float:left;
        font-size:200%;
        -webkit-transition: -webkit-transform .5s ease-in-out;
        transition:         transform .5s ease-in-out;
        margin-right:10px;
        margin-left:20px;

    }
}
.logo1 {
    float:left;
    font-size:150%;
    margin-left:0px;
    margin-bottom:0px;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition:         transform .5s ease-in-out;


    @media (min-width:1085px) {
        float:left;
        font-size:200%;
        margin-left:100px;
        margin-bottom:50px;
        -webkit-transition: -webkit-transform .5s ease-in-out;
        transition:         transform .5s ease-in-out;
    }
}
.logo1:hover,
.logo2:hover,
.logo3:hover,
.logo4:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.links {
    text-decoration:none;
    color:$white;
}
.links:hover {
    text-decoration:underline;
    color:$white;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}

Alles anzeigen

Vielen Dank schon mal.

Beiträge von <aktiv-passiv>

Alle Inhalte des containers zentrieren

Alle Inhalte des containers zentrieren

Alle Inhalte des containers zentrieren

Alle Inhalte des containers zentrieren