Archiv-Modus von Basti1012 Lösungspage

Hey Leute, ich habe hier diesen fast fertigen HTML bzw. CSS Script: <a href="https://jsfiddle.net/69f6x8fx/">https://jsfiddle.net/69f6x8fx/</a> Zwei kleine Änderungen fehlen hier noch das ich dies einsetzen kann, die ich aber nicht hinbekommen. 1. Die obere Spalte „Artikelbeschreibung“ und die Galerie sollten gleich breit sein 2. und die Schriftart von den Kästchen ganz unten etwas kräftiger. Freue mich auf eure Antworten!
Code

                                    
                                <!DOCTYPE HTML>
    <html>

    <head>

      <meta charset="utf-8">
      <style>
 #mywrapper main * {
        margin: 0;
        padding: 0;
      }
      
      #mywrapper main,
      header,
      footer {
        width: 100%;
        margin: 0px auto;
        padding: 10px;
        font-family: 'Poiret One';
        line-height: 20px;
        letter-spacing: 1px;
        box-sizing: border-box;
      } 
      
      #mywrapper main {
        background:white;
        width:100%;
      }
      
      #mywrapper header {
        background:orange;
        color: Black;
        padding: 1em;
        width:calc(100% - 1em);
        font-weight: bold;
        text-align: center;
        border:0px solid grey;
      }
        
      #mywrapper section {
        padding: 10px 0;
        text-align: center;
      width:100%;

      }
   
      #mywrapper article {
        text-align: center;
        background:lightgrey;
        padding: 2px;
        margin-right: 10px;
       width:50%;
      }
      
      #mywrapper article h1 {
        font-size: 2vw;
             border: 1px solid grey;
      }
      
      #mywrapper article:last-child {
        margin-right: 0;
      }
      
      #mywrapper article a {
        color: #8B4513;
        font-weight: bold;
      }
      
      #mywrapper .descripe h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.5em;
        width:100%;
      }
      
      #mywrapper h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.5em;
      }
      
      #mywrapper p {
        padding: 10px;
      }
      

      
      #mywrapper footer {
        padding: 10px;
        background: transparent;
        text-align: right;
        color: #8B4513;
        
      }
      
      #mywrapper footer a {
        color: #8B4513;
        text-decoration: none;
        font-family: sans-serif;
      }
 
      
      #mywrapper caption {
        background:lightgrey;
        color: #fff;
        padding: 5px;
        text-align: left;
      }
      
      #mywrapper .gal {
        margin: 5px 0;
        border-top: 2px solid #eee;
        border-bottom: 2px solid lightgrey;
      }
       
      #mywrapper .gal ul {
        list-style: none;
        display: flex;
      }
      
      #mywrapper .gal li {
        width: 30%;
        margin: 1px;
     
        display: flex;
        align-items: center;
      }
      
      #mywrapper .gal a {
        display: block;
        padding: 2px;
        outline: none;
      }
      
      #mywrapper .flex {
        display: flex;
        width:100%;
      }
      
      #mywrapper .descripe {
        padding: 1em;
        text-align: left;
        
       width:100%;
      }
      
      #mywrapper .info {
        background:lightgrey;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        font-family: sans serif; 
      }
      
      #mywrapper .col-66 {
        width: 50%;
      }
      
      #mywrapper .col-34 {
        width: 49%;
      }
      
          #mywrapper .col-38 {
        width: 49%;
      }
      
       #mywrapper #ausen2,
       #mywrapper #ausen5{
        background:orange;
      }
       
      #mywrapper .fa {
        color: black;
      }
      
      #mywrapper .weiss {
        color: #fff;
      }
      
      #mywrapper .none {
        display: none;
      }
      
  @media (max-width: 800px) {
        #mywrapper main,
        #mywrapper header,
        #mywrapper footer,
        section {
          /*width: 100px;*/
        }
        #mywrapper .flex,
        #mywrapper .info,
        #mywrapper .col-66,
        #mywrapper .col-34,
        .gal ul,
        .gal li {
        
          flex-direction: column;
          margin: 5px 0;
          border: none;
          box-sizing: border-box;
        }
      }
      
 
      
      .gal li {
        width: 20%;
      }
 
      li img {
        width: 100%;
        border: 2px solid lightgrey;
      }
 
      
      #mywrapper .flex .col-33 {
        background:lightgrey;
         background:none;
    
      }
      
       #mywrapper .flex .col-38 {
        background:lightgrey;
      }
      
      
      
      * {
 font-weight:900;
        margin: 0;
        padding: 0;
        list-style: none;
        border: none;
        outline: none;
        box-sizing: border-box;
      }
       
      body {
 
        padding: 10px;
        float: left;
        background:white;
  border: 15px solid #999;
      }
      

      #gal {
        float: left;
        height: auto;
        overflow: hidden;
width:100%;
      }
      
      #gal #ausgabe {
   
        width: 500%;
        float: left;
        position: relative;
        left: 0;
     
        -moz-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
      }
      
      #gal a {
        position: relative;
        float: left;
        width: 20%; 
 
      }
      
      #gal img {
        float: left;
        width: 100%;
      }
      
      #ausgabe img {
        width: 20%;
        float: left;
      }
      
      #gal a img {
        padding: 0 0 1px 1px;

      }
      
      #gal a:focus:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 1px;
        bottom: 1px;
            background: rgba(255, 255, 255, .3);
 
      }
      
      #gal a:focus ~ #ausgabe {
        left: -0%;
      }
      
      #gal a + a:focus ~ #ausgabe {
        left: -100%;
      }
      
      #gal a + a + a:focus ~ #ausgabe {
        left: -200%;
      }
      
      #gal a + a + a + a:focus ~ #ausgabe {
        left: -300%
      }

      #gal a + a + a + a +a:focus ~ #ausgabe {
        left: -400%
      }

 
#bild1{
  position:relative;
  top: 30px;
  left: 120px;
  
}

#bild2{
    position:relative;
  top: 0px;
  left: 120px;
}

          
#Sterne{
position:relative;
  width: 190px;
  height: 36px;
}  
        
#Haende{
    position:relative;
  top: 0px;
  left: 0px;
  width: 190px;
  height: 200px;
} 

 #Zahlungsarten{
    position:relative;
  top: 0px;
  left: 0px;
  width: 190px;
  height: 200px;
}
          
 #Versand{
    position:relative;
  top: 0px;
  left: 0px;
  width: 145px;
  height: 153px;
}  
          
      </style>
    </head>

    <body>
      <div id="mywrapper">
        <header>
          <h1>Artikelname</h1></header>
        <main>
          <section class="flex">
            <article class="descripe col-66 ">
              <h3>ARTIKELBESCHREIBUNG</h3>
              <p>Beschreibung</p>
            </article>
            <article class="col-33 info">
            <div>
            
      

                <div id="gal">
                  <a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
             <a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
                 <a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              <a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
             <a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>

                  <div id="ausgabe">
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> 
              <img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> 
               <img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> 
                <img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> 
               <img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> 
                  </div>
                </div>


              </div>
            </article>
          </section>
          <p>
          </p>
          <section class="gal">
            <h1>Artikel die Sie auch interessieren könnten:</h1>
            <p> </p>
            <ul>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              </li>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              </li>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              </li>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              </li>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              </li>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a> 
              </li>
              <li>
                <a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
              </li>
            </ul>
          </section>
          <section class="flex">
            <article class="col-38 " id="ausen1">
              <h3 class="fa fa-5x fa-info-circle"><b>Info</b></h3>
              <p> 
<li>✔ Großes Sortiment </li>
<li>✔ Faire Preise </li>
<li>✔ Kompetenter Kundenservice </li>
<li>✔ Schnelle Reaktion auf Nachrichten </li>
<li>✔ Kombiversand </li>
<li>✔ Rücknahme innerhalb von 30 Tagen </li>
<li>✔ Ausstellen einer Rechnung <br /><br /><br /><br /><br /><br /></li>
              </p> 
            </article>  
            <article class="col-38" id="ausen2">
              <h3 class="fa fa-5x fa-truck"><b>Versand</b></h3>
            <p><strong>Versand am selben Tag</strong><br>
                <p> 
                Bei Bestellungseingang bis <strong>15:45 Uhr </strong>verschicken wir Ihre Bestellung noch am gleichen Werktag.</p>
    <img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> 
            </article> 
             <article class="col-38" id="ausen3">
              <h3 class="fa fa-5x fa-euro"><b>Zahlungsarten</b></h3>
              <p style="text-align:left;margin-right:10px;"></p>
              <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-bank"></i><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> 
            </article>
          </section>
          <section class="flex">
            <article class="col-38" id="ausen4">
              <h3 class="fa fa-5x fa-question-circle ausen"><b>Kontakt</b></h3>
              <p>Wir antworten auf Nachrichten von Montag bis Samstag innerhalb von wenigen Stunden.<p>Haben Sie eine Frage? Senden sie uns eine<a style="display:block;" href="https://contact.ebay.de/ws/eBayISAPI.dll?ShowSellerFAQ&requested=Kopper-24">Nachricht</a></p>
    <img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />          
            </article>
            <article class="col-38" id="ausen5">
              <h3 class="fa fa-5x fa-eye "><b>Ihre Bewertung</b></h3>
              <p><p>Sie sind zufrieden mit Ihrer Bestellung und unserem Service?</p>
<p>Dann freuen wir uns über Ihre positive Bewertung auf unserem eBay-Profil.</p>
Hie finden Sie meine aktuellen <a style="display:block;" href="https://feedback.ebay.de/ws/eBayISAPI.dll?ViewFeedback2&userid=kopper-24">Bewertungen</a> von anderen Käufern.</p>
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </p>
            </article>
            <article class="col-38" id="ausen6">
              <h3 class="fa fa-5x fa-star"><b>Weitere Artikel</b></h3>
              <p>Hier finden Sie noch <a style="display:block;" href="https://www.ebay.de/sch/kopper-24/m.html?_nkw=&_armrs=1&_ipg=&_from=">weitere Artikel</a> von unserem Shop.</p> 
            </article>
          </section>
        </main>
      </div>
    </body>

    </html>
basti1012.bplaced.net

Zwei kleine Korrekturen an dem Script

Code
