Skip to content

Commit ac9c367

Browse files
bu7maydAbdubu7maydAbdu
committed
Hero section
1 parent 0b94ef3 commit ac9c367

File tree

9 files changed

+444
-275
lines changed

9 files changed

+444
-275
lines changed

‎package-lock.json

+152-104
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Card.astro

+57-62
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,76 @@
11
---
22
export interface Props {
3-
title: string;
4-
body: string;
5-
href: string;
3+
title: string;
4+
body: string;
5+
href: string;
66
}
77
88
const { href, title, body } = Astro.props;
99
---
1010

1111
<li class="link-card">
12-
<a href={href}>
13-
<h2>
14-
{title}
15-
<span>&rarr;</span>
16-
</h2>
17-
<p>
18-
{body}
19-
</p>
20-
</a>
12+
<a href={href}>
13+
<h2>
14+
{title}
15+
<span>&rarr;</span>
16+
</h2>
17+
<p>
18+
{body}
19+
</p>
20+
</a>
2121
</li>
2222
<style>
23-
:root {
24-
--link-gradient: linear-gradient(
25-
45deg,
26-
#4f39fa,
27-
#da62c4 30%,
28-
var(--color-border) 60%
29-
);
30-
}
23+
:root {
24+
--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
25+
}
3126

32-
.link-card {
33-
list-style: none;
34-
display: flex;
35-
padding: 0.15rem;
36-
background-image: var(--link-gradient);
37-
background-size: 400%;
38-
border-radius: 0.5rem;
39-
background-position: 100%;
40-
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
41-
}
27+
.link-card {
28+
list-style: none;
29+
display: flex;
30+
padding: 0.15rem;
31+
background-image: var(--link-gradient);
32+
background-size: 400%;
33+
border-radius: 0.5rem;
34+
background-position: 100%;
35+
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
36+
}
4237

43-
.link-card > a {
44-
width: 100%;
45-
text-decoration: none;
46-
line-height: 1.4;
47-
padding: 1em 1.3em;
48-
border-radius: 0.35rem;
49-
color: var(--text-color);
50-
background-color: white;
51-
opacity: 0.8;
52-
}
38+
.link-card > a {
39+
width: 100%;
40+
text-decoration: none;
41+
line-height: 1.4;
42+
padding: 1em 1.3em;
43+
border-radius: 0.35rem;
44+
color: var(--text-color);
45+
background-color: white;
46+
opacity: 0.8;
47+
}
5348

54-
h2 {
55-
margin: 0;
56-
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
57-
}
49+
h2 {
50+
margin: 0;
51+
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
52+
}
5853

59-
p {
60-
margin-top: 0.75rem;
61-
margin-bottom: 0;
62-
}
54+
p {
55+
margin-top: 0.75rem;
56+
margin-bottom: 0;
57+
}
6358

64-
h2 span {
65-
display: inline-block;
66-
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
67-
}
59+
h2 span {
60+
display: inline-block;
61+
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
62+
}
6863

69-
.link-card:is(:hover, :focus-within) {
70-
background-position: 0;
71-
}
64+
.link-card:is(:hover, :focus-within) {
65+
background-position: 0;
66+
}
7267

73-
.link-card:is(:hover, :focus-within) h2 {
74-
color: #4f39fa;
75-
}
68+
.link-card:is(:hover, :focus-within) h2 {
69+
color: #4f39fa;
70+
}
7671

77-
.link-card:is(:hover, :focus-within) h2 span {
78-
will-change: transform;
79-
transform: translateX(2px);
80-
}
72+
.link-card:is(:hover, :focus-within) h2 span {
73+
will-change: transform;
74+
transform: translateX(2px);
75+
}
8176
</style>

‎src/components/NavBar.astro

+46-34
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,67 @@
11
---
2-
import logo from "../img/etrologo.svg";
2+
import logo from '../img/etrologo.svg'
33
---
44

55
<header class="header">
6+
67
<div class="container">
7-
<div class="logo">
8+
<!-- <div class="logo">
89
<a href="/">
910
<img src={logo} alt="" />
1011
</a>
11-
</div>
12+
</div> -->
1213
<nav>
1314
<ul>
1415
<li><a href="/">Home</a></li>
1516
<li><a href="/docs">Docs</a></li>
1617
<li><a href="/blog">Blog</a></li>
1718
<li><a href="/">GitHub</a></li>
19+
20+
21+
1822
</ul>
1923
</nav>
2024
</div>
2125
</header>
2226

2327
<style>
24-
.header {
25-
position: sticky;
26-
height: 70px;
27-
background: var(--color-primary);
28-
font-family: "Roboto", sans-serif;
29-
}
30-
31-
.header .container {
32-
height: 100%;
33-
display: flex;
34-
align-items: center;
35-
justify-content: space-between;
36-
padding: 0 20px;
37-
}
38-
39-
.header img {
40-
height: 50px;
41-
vertical-align: middle;
42-
}
43-
44-
.header nav ul {
45-
display: flex;
46-
}
47-
48-
.header nav ul li {
49-
padding: 0 10px;
50-
}
51-
52-
.header nav ul li a {
53-
color: #fff;
54-
}
28+
.header {
29+
position: absolute;
30+
height: 70px;
31+
top: 0;
32+
width: 100vw;
33+
/* background: var(--color-primary); */
34+
background: transparent;
35+
font-family: 'Roboto', sans-serif;
36+
z-index: 3000;
37+
}
38+
39+
.header .container {
40+
height: 100%;
41+
display: flex;
42+
align-items: center;
43+
/* justify-content: space-between; */
44+
justify-content: center;
45+
46+
padding: 0 20px;
47+
}
48+
49+
.header img {
50+
height: 50px;
51+
vertical-align: middle;
52+
}
53+
54+
.header nav ul {
55+
display: flex;
56+
}
57+
58+
.header nav ul li {
59+
padding: 0 10px;
60+
margin: 0 50px ;
61+
}
62+
63+
.header nav ul li a {
64+
color: #fff;
65+
}
5566
</style>
67+

0 commit comments

Comments
 (0)