padding and text length

main
suzan 2 years ago
parent db6e652451
commit f1bae3503d

@ -7,24 +7,24 @@
<link href="stylesheet.css" rel="stylesheet"> <link href="stylesheet.css" rel="stylesheet">
</head> </head>
<body> <body>
<h1>gardening cards for lil gardeners</h1> <h1>cards</h1>
<section> <section>
<div class="card"> <div class="card">
<h2>body</h2> <h2>body</h2>
<p class = 'image'><img src='./images/1.jpg'></p> <p class = 'image'><img src='./images/3.jpg'></p>
<p class = 'text'>Some text of this card</p> <p class = 'text'>Some text of this card</p>
</div> </div>
<div class="card"> <div class="card">
<h2>panopticon</h2> <h2>panopticon</h2>
<p class = 'image'><img src='./images/2.png'></p> <p class = 'image'><img src='./images/2.jpg'></p>
<p class = 'text'>The panopticon is a design of institutional building with an inbuilt system of control!</p> <p class = 'text'>The panopticon is a design of institutional building with an inbuilt system of control!</p>
</div> </div>
<div class="card"> <div class="card">
<h2></h2> <h2></h2>
<p class = 'textnoimage'>2. Ilkyaz agini degerlendirmek ve beslemek Genç yazarlarla iletişim kurmak ve İlkyazi tanitmak, <br> davet etmek.Edebiyat ve sanat çevrelerini ortaklaştirmak adina fikir verme ve oluşturma.</p> <p class = 'textnoimage'>been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem lorem lorem lorem</p>
</div> </div>
</section> </section>

@ -2,16 +2,16 @@
"cards" : [{ "cards" : [{
"name" : "body", "name" : "body",
"text" : "Some text of this card", "text" : "Some text of this card",
"image": "1.jpg" "image": "3.jpg"
}, },
{ {
"name" : "panopticon", "name" : "panopticon",
"text" : "The panopticon is a design of institutional building with an inbuilt system of control!", "text" : "The panopticon is a design of institutional building with an inbuilt system of control!",
"image": "2.png" "image": "2.jpg"
}, },
{ {
"name" : "", "name" : "",
"text" : "2. Ilkyaz agini degerlendirmek ve beslemek Genç yazarlarla iletişim kurmak ve İlkyazi tanitmak, <br> davet etmek.Edebiyat ve sanat çevrelerini ortaklaştirmak adina fikir verme ve oluşturma.", "text" : "been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem lorem lorem lorem",
"image": "" "image": ""
}] }]
} }

@ -50,7 +50,7 @@ html = f"""
<link href="stylesheet.css" rel="stylesheet"> <link href="stylesheet.css" rel="stylesheet">
</head> </head>
<body> <body>
<h1>gardening cards for lil gardeners</h1> <h1>cards</h1>
<section> <section>
{ all_cards } { all_cards }
</section> </section>

Binary file not shown.

After

Width:  |  Height:  |  Size: 840 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

@ -10,31 +10,34 @@
position: relative; position: relative;
} }
.card > p.image > img { .card > p.image > img {
width: 80mm; width: 50mm;
height: 80mm; height: 50mm;
position: absolute; position: absolute;
top: 20mm; top: 30mm;
left: 5mm; left: 10mm;
} }
.card > h2{ .card > h2{
position: absolute;
top: 5mm; top: 5mm;
left: 5mm; left: 5mm;
margin: 0; margin: 0;
text-align: center;
padding-top: 5mm;
} }
.card > p.text { .card > p.text {
width: 80mm; width: 50mm;
height: 20mm; height: 50mm;
position: absolute; position: absolute;
top: 95mm; top: 15mm;
left: 5mm; left: 10mm;
text-align: center; text-align: center;
} }
.card > p.textnoimage { .card > p.textnoimage {
width: 80mm; width: 60mm;
height: 20mm; height: 85mm;
position: absolute; position: absolute;
top: 25mm; top: 5mm;
left: 5mm; left: 5mm;
right: 5mm;
text-align: center; text-align: center;
font-size: 8;
} }
Loading…
Cancel
Save