Skip to content

Commit

Permalink
Jashwanth/Icon
Browse files Browse the repository at this point in the history
  • Loading branch information
Jashwanth-rit committed Oct 18, 2024
1 parent fc66ed7 commit d32c8ba
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 2 deletions.
128 changes: 128 additions & 0 deletions src/app/components/header/header.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -350,3 +350,131 @@ p.text-indigo-100 {
font-size: 2rem;
margin-bottom: 1rem;
}
/* Styling for header and logo */
header {
background-color: #333; /* Dark background */
padding: 15px 0;
}

.container {
display: flex;
align-items: center;
justify-content: space-between;
}

.logo {
display: flex;
align-items: center;
}

.logo img {
width: 70px; /* Adjust size as needed */
height: 70px;
margin-right: 10px; /* Space between logo and text */
border-radius: 50%; /* Makes the logo round */
transition: transform 0.3s ease-in-out;
}

.logo img:hover {
transform: scale(1.1); /* Slight zoom on hover */
}

.logo a {
color: #fff;
font-size: 24px;
font-weight: bold;
text-decoration: none;
transition: color 0.3s ease-in-out;
}

.logo a:hover {
color: #4CAF50; /* Greenish hover effect */
}

/* Responsive adjustments */
@media (max-width: 768px) {
.logo a {
font-size: 20px;
}

.logo img {
width: 100px;
height: 100px;
}
}
/* Header and navigation styling */
header {
background-color: #333;
padding: 15px 0;
}

.container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}

/* Logo link outside the div */
.logo-link {
position: absolute;
left: 15px;
display: flex;
align-items: center;
}

.logo-link img {
width: 100px;
height: 100px;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}

.logo-link img:hover {
transform: scale(1.1);
}

/* Styling the logo text */
.logo a {
color: #fff;
font-size: 24px;
font-weight: bold;
text-decoration: none;
margin-left: 60px; /* Space to avoid overlap with the image */
}

.logo a:hover {
color: #4CAF50;
}

/* Menu icon and navigation links styling */
.menu-icon {
display: none; /* Adjust for mobile if needed */
}

.nav-links a {
color: #fff;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: #4CAF50;
}

/* Responsive layout */
@media (max-width: 768px) {
.logo a {
font-size: 20px;
}

.logo-link img {
width: 30px;
height: 30px;
}

.menu-icon {
display: block;
}
}
5 changes: 5 additions & 0 deletions src/app/components/header/header.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,12 @@
<body>
<header>
<nav class="container">
<!-- <a href="#hero" class="logo-link">
<img src="../../../../public/Icon.jpg" alt="Logo">
</a> -->
<div class="logo">

<img src="https://img.freepik.com/free-vector/wireframe-connecting-earth-sphere_1284-52863.jpg?w=740&t=st=1729246267~exp=1729246867~hmac=94824360aa23edc006545118dac0d6c47ef0b21728346613e6e2403dc3a4e88b" alt="Logo">
<a href="#hero">GraphExplorer Pro</a>
</div>
<div class="menu-icon" id="menu-icon">
Expand Down
Binary file added src/app/components/header/img/icon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
<title>EccomPRJ - Real-Time Collaboration</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />

<link rel="icon" type="image/png" sizes="32x32" href="https://img.freepik.com/free-vector/human-group-connecting-topology-concept-background-design_1017-53324.jpg?w=826&t=st=1729248294~exp=1729248894~hmac=3865b1d5630a5be3b7c74044d086d128aeb23412766f39a882e977845f837603">
<style>
.scrollToTop {
position: fixed;
Expand Down

0 comments on commit d32c8ba

Please sign in to comment.