2fersen > 23.09.2018, 17:02
<!DOCTYPE HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Poiret+One|Varela+Round' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<link rel="stylesheet" href="meinestyles.css">
<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,
header,
footer {
margin: 0px auto;
padding: 10px;
font-family: 'Varela Round';
line-height: 20px;
letter-spacing: 1px;
box-sizing: border-box;
}
#mywrapper main {
background:white;
}
#mywrapper header {
background:white;
color: Black;
padding: 1em;
font-weight: bold;
text-align: center;
border:0px solid grey;
}
#mywrapper section {
padding: 10px 0;
text-align: center;
}
#mywrapper article {
text-align: center;
background: lightgrey;
padding: 2px;
margin-right: 10px;
width:50%;
font-weight: 400; }
#mywrapper article h1 {
font-size: 2vw;
border: 1px solid grey;
}
#mywrapper article a {
color: #8B4513;
font-weight: bold;
}
#mywrapper .descripe h3 {
padding: 10px;
font-weight: bold;
font-size: 1.2em;
}
#mywrapper h3 {
padding: 10px;
font-weight: bold;
font-size: 1.8em;
line-height: 2.0;
}
#mywrapper p {
padding: 10px;
}
#mywrapper footer{
padding: 10px;
background: transparent;
text-align: right;
color: black;}
#mywrapper footer a {
color: brown;
}
#mywrapper caption {
background:lightgrey;
color: #fff;
padding: 5px;
text-align: left;
}
#mywrapper h1 {
background:orange;
padding: 15px;
font-family: 'Poiret One';
}
#mywrapper .gal {
margin: 5px 0;
border-top: 2px solid #eee;
border-bottom: 2px solid lightgrey;
}
#mywrapper .gal ul {
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 {
list-style : none;
width: 49%;
font-weight: 900;
font-family: 'Poiret One';
}
#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: 0px solid lightgrey;
}
#mywrapper .flex .col-33 {
background:lightgrey;
background:none;
}
#mywrapper .flex .col-38 {
background:lightgrey;
}
* {
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
}
body {
padding: 10px;
float: left;
background:white;
}
</style>
</head>
<body>
<div id="mywrapper">
<header>
<p>
</p>
<section class="gal">
<h1>Frisch eingetroffen!</h1>
<p> </p>
<ul>
<p style="width:30%; background: lightgrey"> Artikel 1</p>
<li>
<a href="https://www.ebay.de/itm/253767683811"><img alt="" src="https://kopper-24.de/Bilder/Feiern%20-%20Event%20-%20Veranstaltung/Latex%20Luftballons/Standard/Hauptbild%20-%20mit%20Rand.jpg" width="20%"></a>
</li>
<p style="width:30%; background: lightgrey"><FONT SIZE="5">Artikel 2</FONT> text text text text text text text text text text</p>
<p style="width:30%; background: lightgrey"><FONT SIZE="6">Hallo, ich bin ein Text der Grösse 5</FONT></p>
<li>
<a href="https://www.ebay.de/itm/253767683811"><img alt="" src="https://kopper-24.de/Bilder/Feiern%20-%20Event%20-%20Veranstaltung/Latex%20Luftballons/Standard/Hauptbild%20-%20mit%20Rand.jpg" width="20%"></a>
</li>
</ul>
</section>
</section>
</footer>
</main>
</div>
</body>
</html>
basti1012 > 25.09.2018, 13:11
basti1012 > 25.09.2018, 13:42