CopyCat

Copy your next website

Fluid Tailwind Bootstrap5 Simple Statisch Vorgänge Zusätze

Fluid (width: 80%, max-width:1100px)

Ideen aus Conquering Responsive Layouts verwendet. 

<header>
    <div="container"></div>
</header>
<section>
    <div="container"></div>
</section>
<section>
    <div="container"></div>
    <div class="container row">        
        <div class="col"></div>
        ...
        <div class="col"></div>
    </div>
</section>

Color Scheme

background: #ffffff
color: 
rgba(0,0,0,0.6);
primary:
#23424A
secondary: 
#38CFD9
background: #ffffff
color: 
rgba(0,0,0,0.6);
primary:
#f4eed9
secondary: 
#385c55
background: #824936
color: 
#222c2a
primary:
#222c2a
secondary: 
#f3eed9
background: #cce6ff
color: 
#1c2b33
primary:
#ffffff
secondary: 
#0064e0
zurück

Fluid with Tailwind (width: 80%, max-width:1100px)

    <header class="header1">
        <div="container1"></div>
    </header>
    <section class="section1">
        <div="container1"></div>
    </section>
    <section class="section1">
        <div class="container1 block sm:flex">        
            <div class="w-full sm:flex-1"></div>
            ...
            <div class="w-full sm:flex-1"></div>
        </div>
    </section>
zurück

Bootstrap 5

<div="container">
     ...        
</div>
<div="container">
    <div class="row">        
        <div class="col"></div>
        ...
        <div class="col"></div>
    </div>
</div>
zurück

Simple

<div="container">
     ...        
</div>
zurück

Statisch

<div="container">
    <header>...</header>        
    <main>        
      <section>...</section>        
      ...        
      <section>...</section>        
    </main>                     
</div>
zurück

Vorgänge

Zwei Divs nebeneinander 

.container {
    @display: flex;@
    flex-wrap: wrap;
}

Webseite horizontal und vertikal zentrieren

@html, body{ 
    height: 100%;@
    margin:0;
    padding:0;
}

body{
    @display: flex;@       
}

page{
    margin: auto;
}

Inhalt horizontal und vertikal zentrieren

@.centered {    
    display: flex;
    align-items: center;
    justify-content: center;        
}
@



In the middle.

Next line.

Button einrasten

    


@@
    
<script>
function buttonInset(button) {
  @cssToggleClass@(button,
  "buttonInset");
}        
</script>

PreFormat: Div als <pre> verwenden mit möglichen Formatierungen

    
.preFormat {
    white-space: pre; 
    overflow: auto; 
}        

 
    Hallo 
       Eingerückt
           Eingerückt

PreHTML: In <pre> HTML-Tags nicht ausführen

    
<pre class="preHTML"> 
    Hallo
        <b>Eingerückt</b>
        @<b@>Eingerückt und Fett@</b@>            
</pre>

<script>
...
makePreHTML()
</script>

Abschnitt aufklappen

... zurück

Zusätze

DesktopFirst: MediaQuery für mobile ergänzen

    
/* desktop first */
/* Add at the end of styles! */

@media (max-width: 600px) {
    .w-50 {
        width:100%;
    }

    .row {
        display:block;
    }

    .col {
        width:100%;
    }
}

Buttons

Copy now
Copy now
zurück