something useful
parent
9fb965cb95
commit
76510967b8
Binary file not shown.
@ -0,0 +1,26 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>flex card</title>
|
||||
<link href="stylesheet.css" rel="stylesheet">
|
||||
<script src="circletype.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
|
||||
<div class="card">
|
||||
<p id="up" class="up">'o ccafè</p>
|
||||
<p id="down" class="down">the coffee</p>
|
||||
<img src='./images/coffee.PNG'>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
<script>
|
||||
new CircleType(document.getElementById("#up")).radius(320);
|
||||
new CircleType(document.getElementById("#down")).dir(-1).radius(320);
|
||||
</script>
|
||||
</html>
|
||||
|
@ -0,0 +1,12 @@
|
||||
{
|
||||
"cards" : [{
|
||||
"name" : "body",
|
||||
"text" : "Some text of this card",
|
||||
"image": "1.png"
|
||||
},
|
||||
{
|
||||
"name" : "panopticon",
|
||||
"text" : "The panopticon is a design of institutional building with an inbuilt system of control!",
|
||||
"image": "2.png"
|
||||
}]
|
||||
}
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,63 @@
|
||||
import os
|
||||
folder = "./images/"
|
||||
#defining as a list
|
||||
images = []
|
||||
titles = []
|
||||
#shows all the images
|
||||
os.listdir(folder)
|
||||
for image in os.listdir(folder):
|
||||
print(image)
|
||||
print(folder + image)
|
||||
print("---")
|
||||
images.append(folder + image)
|
||||
titles.append(image)
|
||||
|
||||
#html
|
||||
counter = 0
|
||||
all_cards = ""
|
||||
|
||||
for image in images:
|
||||
#html image element
|
||||
img = f"<img src='{ image }'>"
|
||||
#img = "<img src="' + image +"'>"
|
||||
|
||||
#define title
|
||||
title = titles[counter]
|
||||
|
||||
#printing to inspect
|
||||
print(img)
|
||||
|
||||
#mini template for card
|
||||
card = f"""
|
||||
<div class="card">
|
||||
<h2>{ title }</h2>
|
||||
<p>{ img }</p>
|
||||
</div>
|
||||
"""
|
||||
#printing to inspect mini template
|
||||
print(card)
|
||||
|
||||
#add it to the all cards variable
|
||||
all_cards = all_cards + card
|
||||
#we add +1 to our counter
|
||||
|
||||
counter = counter + 1
|
||||
html = f"""
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>flex card</title>
|
||||
<link href="stylesheet.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>gardening cards for lil gardeners</h1>
|
||||
<section>
|
||||
{ all_cards }
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
"""
|
||||
with open("cards.html", "w") as output:
|
||||
output.write(html)
|
Binary file not shown.
After Width: | Height: | Size: 3.0 MiB |
@ -0,0 +1,19 @@
|
||||
.card
|
||||
{
|
||||
width: 10cm;
|
||||
height: 10cm;
|
||||
border: solid 1px black;
|
||||
box-shadow: 5px 5px 0px gray;
|
||||
float: left;
|
||||
margin: 2mm;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.card > img {
|
||||
width: calc(100% - 8mm - 8mm);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 8mm;
|
||||
}
|
Loading…
Reference in New Issue