I’m a beginner and I wanted to replicate this site as a personal project: https://olhauzhykova.com/
I want the header section to remain the same size while the title changes. Also could anyone suggest how I can animate a top-down flip everytime the title changes?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="webcss.css">
<script src="webjs.js"></script>
</head>
<body>
<div class="header">
<div class="logo"><img src="C:UsersengarDesktopWebsite 2logo.png"></div>
<h1 class="title">Data Analyst</h1>
<h1 class="title hidden">Mentor</h1>
<h1 class="title hidden">Musician</h1>
<h1 class="title hidden">Tech Enthusiast</h1>
</div>
</body>
</html>
CSS:
.header {
background-color: #f1f1f1;
padding: 10px 40px; /* Change the padding value to adjust the width */
border-radius: 20px; /* Round all corners */
position: fixed;
top: 2vh;
left: 2vw;
z-index: 999;
transition: all 0.3s ease-in-out;
display: flex;
align-items: center;
}
.logo {
display: inline-block;
margin-right: 10px;
border: 2px solid #333;
border-radius: 50%;
height: 50px;
width: 50px;
transition: all 0.3s ease-in-out;
}
img {
max-width: 100%;
max-height: 150%;
}
.title {
display: inline-block;
font-size: 24px;
margin: 0;
font-weight: bold;
white-space: nowrap;
transition: all 0.3s ease-in-out;
}
.title.hidden {
display: none; /* hide hidden titles */
}
.header:hover {
transform: scale(1.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.header:hover .logo {
transform: rotate(360deg);
}
.header:hover .title {
margin-left: 10px;
}
.title.hidden {
display: none;
}
JAVASCRIPT
.header {
background-color: #f1f1f1;
padding: 10px 40px; /* Change the padding value to adjust the width */
border-radius: 20px; /* Round all corners */
position: fixed;
top: 2vh;
left: 2vw;
z-index: 999;
transition: all 0.3s ease-in-out;
display: flex;
align-items: center;
}
.logo {
display: inline-block;
margin-right: 10px;
border: 2px solid #333;
border-radius: 50%;
height: 50px;
width: 50px;
transition: all 0.3s ease-in-out;
}
img {
max-width: 100%;
max-height: 150%;
}
.title {
display: inline-block;
font-size: 24px;
margin: 0;
font-weight: bold;
white-space: nowrap;
transition: all 0.3s ease-in-out;
}
.title.hidden {
display: none; /* hide hidden titles */
}
.header:hover {
transform: scale(1.05);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.header:hover .logo {
transform: rotate(360deg);
}
.header:hover .title {
margin-left: 10px;
}
.title.hidden {
display: none;
}
It would be great if you could suggest tutorials too!