Time used: 2 hours
Total time: appr. 4 hours
(I will need to use a time tracker to be more accurate with the time used from now on, it will be interesting too see when the fullstack path is finished how much time I have used).
CSS
I went through (almost the whole section) of the business card section. The task was to create a business card that give a short presentation of who you are, and you are encouraged to be creative here.
During this session we went through; flex box, websafe fonts, inheritance and justify-content.
I have alot of thoughts on how the business card could look like, and there is a ton online, where I can see the source code (HTML, CSS and JS) but that is cheating. It is the easiest thing in the world to copy code from another and paste it, but I wouldn't understand it so I am taking my time here..
Right now I want to create a hover-function which changes my profile picture when hovering over the picture, but I can't figure it out and it is getting late. 2 hours on this session is very long but I have been troubleshooting this for at least half the time, and I haven't managed to find out why.
Perhaps since the src of the image is written in the HTML code and the background-image I want to change it with is written in the CSS-code? Stupid thought maybe!? I am still trouble shooting and refuse to use ChatGPT.
Here is a snippet of the business card (pretty boring):
I used linear gradient for the background color. I have forgotten my previous knowledge, my previous business card was much cooler then this.
I will continue troubleshooting tomorrow.
Below is the CSS code (I couldn't paste the HTML code, it didn't show up as code, why..?)
body {
margin: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.avatar {
width: 150px;
border-radius: 80px;
background-image: url(images/profilepicture.jpg);
}
.avatar:hover {
background-image: url(images/Festningen.jpg);
width: 150px;
height: 50px;
border-radius: 80px;
}
.card {
width: 400px;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: space-around;
text-align: center;
background: linear-gradient(grey, darkgrey);
color: white;
}
.locationparagraph {
font-size: 10px;
color: grey;
}

Top comments (0)