rajukottedi/portfolio.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

created components, routing and applied styles

Browse Source
This commit is contained in:
Bangara Raju Kottedi
2024-04-15 15:26:22 +05:30
parent 00d7c75564
commit edd2798581
69 changed files with 4006 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blog/blog.component.html
+183
View File
@@ -0,0 +1,183 @@
<article class="blog" data-page="blog">
<header>
<h2 class="h2 article-title">Blog</h2>
</header>
<section class="blog-posts">
<ul class="blog-posts-list">
<li class="blog-post-item">
<a href="#">
<figure class="blog-banner-box">
<img src="./assets/images/blog-1.jpg" alt="Design conferences in 2022" loading="lazy">
</figure>
<div class="blog-content">
<div class="blog-meta">
<p class="blog-category">Design</p>
<span class="dot"></span>
<time datetime="2022-02-23">Fab 23, 2022</time>
</div>
<h3 class="h3 blog-item-title">Design conferences in 2022</h3>
<p class="blog-text">
Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
</p>
</div>
</a>
</li>
<li class="blog-post-item">
<a href="#">
<figure class="blog-banner-box">
<img src="./assets/images/blog-2.jpg" alt="Best fonts every designer" loading="lazy">
</figure>
<div class="blog-content">
<div class="blog-meta">
<p class="blog-category">Design</p>
<span class="dot"></span>
<time datetime="2022-02-23">Fab 23, 2022</time>
</div>
<h3 class="h3 blog-item-title">Best fonts every designer</h3>
<p class="blog-text">
Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.
</p>
</div>
</a>
</li>
<li class="blog-post-item">
<a href="#">
<figure class="blog-banner-box">
<img src="./assets/images/blog-3.jpg" alt="Design digest #80" loading="lazy">
</figure>
<div class="blog-content">
<div class="blog-meta">
<p class="blog-category">Design</p>
<span class="dot"></span>
<time datetime="2022-02-23">Fab 23, 2022</time>
</div>
<h3 class="h3 blog-item-title">Design digest #80</h3>
<p class="blog-text">
Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.
</p>
</div>
</a>
</li>
<li class="blog-post-item">
<a href="#">
<figure class="blog-banner-box">
<img src="./assets/images/blog-4.jpg" alt="UI interactions of the week" loading="lazy">
</figure>
<div class="blog-content">
<div class="blog-meta">
<p class="blog-category">Design</p>
<span class="dot"></span>
<time datetime="2022-02-23">Fab 23, 2022</time>
</div>
<h3 class="h3 blog-item-title">UI interactions of the week</h3>
<p class="blog-text">
Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.
</p>
</div>
</a>
</li>
<li class="blog-post-item">
<a href="#">
<figure class="blog-banner-box">
<img src="./assets/images/blog-5.jpg" alt="The forgotten art of spacing" loading="lazy">
</figure>
<div class="blog-content">
<div class="blog-meta">
<p class="blog-category">Design</p>
<span class="dot"></span>
<time datetime="2022-02-23">Fab 23, 2022</time>
</div>
<h3 class="h3 blog-item-title">The forgotten art of spacing</h3>
<p class="blog-text">
Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</a>
</li>
<li class="blog-post-item">
<a href="#">
<figure class="blog-banner-box">
<img src="./assets/images/blog-6.jpg" alt="Design digest #79" loading="lazy">
</figure>
<div class="blog-content">
<div class="blog-meta">
<p class="blog-category">Design</p>
<span class="dot"></span>
<time datetime="2022-02-23">Fab 23, 2022</time>
</div>
<h3 class="h3 blog-item-title">Design digest #79</h3>
<p class="blog-text">
Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.
</p>
</div>
</a>
</li>
</ul>
</section>
</article>
src/app/blog/blog.component.scss
+80
View File
@@ -0,0 +1,80 @@
.blog-posts { margin-bottom: 10px; }
.blog-posts-list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.blog-post-item > a {
position: relative;
background: var(--border-gradient-onyx);
height: 100%;
box-shadow: var(--shadow-4);
border-radius: 16px;
z-index: 1;
}
.blog-post-item > a::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: var(--eerie-black-1);
z-index: -1;
}
.blog-banner-box {
width: 100%;
height: 200px;
border-radius: 12px;
overflow: hidden;
}
.blog-banner-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-1);
}
.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
.blog-content { padding: 15px; }
.blog-meta {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 7px;
margin-bottom: 10px;
}
.blog-meta :is(.blog-category, time) {
color: var(--light-gray-70);
font-size: var(--fs-6);
font-weight: var(--fw-300);
}
.blog-meta .dot {
background: var(--light-gray-70);
width: 4px;
height: 4px;
border-radius: 4px;
}
.blog-item-title {
margin-bottom: 10px;
line-height: 1.3;
transition: var(--transition-1);
}
.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
.blog-text {
color: var(--light-gray);
font-size: var(--fs-6);
font-weight: var(--fw-300);
line-height: 1.6;
}
src/app/blog/blog.component.spec.ts
+23
View File
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BlogComponent } from './blog.component';
describe('BlogComponent', () => {
let component: BlogComponent;
let fixture: ComponentFixture<BlogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [BlogComponent]
})
.compileComponents();
fixture = TestBed.createComponent(BlogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/blog/blog.component.ts
+10
View File
@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-blog',
templateUrl: './blog.component.html',
styleUrl: './blog.component.scss'
})
export class BlogComponent {
}