Thank you @chrisdavidmills for the hint about using border-radius
, I had the same doubt as @maurodibert and that gave me the answer
About github, I think it would be a good idea to make a long project with all our assessments uploaded to our github personal page, maybe aside of the main content of the course (in order to not make the course dependant of third party services). Or a bunch of them, the most challenging for example.
Anyway, this is my code
article{
background: url(top-image.png) no-repeat top;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.2 ), rgba(255, 255, 255, 0.1) 33%, rgba(255, 255, 255, 0.1) 66%, rgba(0, 0, 0, 0.2)),
url(top-image.png) no-repeat top,
url(bottom-image.png) no-repeat bottom,
white;
border-top: 1mm solid red;
border-bottom: 1mm solid red;
}
h1 {
background: url(logo.png) no-repeat center;
border-radius: 64px;
border: thin solid white;
/* filter: drop-shadow(4px 4px 3px black); */
box-shadow: 4px 4px 4px black;
}
and the live preview. It ended up being almost the same as the css of the finished example provided by chris; the only difference is that I centered the logo so the white border around it looked equally thick.
Edit: Somehow in my first attempt my message got blocked for using github links (that’s why I put the code instead) and even worse , all my previous messages in the past assessment got marked as spam immediately after and got hidden. What a let down!! It discourages me to write comments and I’ve just started.
Edit 2: It’s all right now .