02.CSS/nav.css at main · codingxaryan/02.CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
:root{
  --primary: #0a84ff;
  --primary-600: #0066d6;
  --overlay: rgba(0,0,0,0.45);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Helvetica Neue", "Helvetica On Display", Helvetica, Arial, sans-serif;
}
html,
body {
  height: 100%;
  width: 100%;
}
#main {
  height: 100%;
  width: 100%;
}
#nav{
  width: 100%;
  height: 80px;
  background-color: rgba(128,128,128,0.9);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);
}
#main #center{
  height: 85%;
  width: 100%;
  background-image: url(https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/store-card-40-iphone-17-pro-202509?wid=800&hei=1000&fmt=jpeg&qlt=90&.v=UzBXQnlhUWdraTNvNU1Kb3pEQlpXQjVOVStZaG1ncWFjNXVUZkZ4anVIYlNab1lJcUZwSFVRK1htYlNmZUtPTG54cStVNU5BQmhzbkxYRGxDWUc3R2RBR0JWVHBRN0NKVm11SFZzeU45T2VCTXFJbjVIbEFUN05pTHFFYldZYzg);
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#main #center::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,var(--overlay), var(--overlay));
  pointer-events: none;
}
#center h1{
  font-size: 80px;
  color: white;
  /* padding-left: 50px;
  padding-top: 20px; */
  font-weight: 200;
}
#center h3{
  font-size: 50px;
  color: white;
  /* padding-left: 50px;
  padding-top: 20px; */
  font-weight: 200;
}
#links button{
  background: linear-gradient(180deg,var(--primary),var(--primary-600));
  color: white;
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  margin: 18px 8px;
  box-shadow: 0 8px 18px rgba(10,132,255,0.12);
  transition: transform .16s ease, box-shadow .16s ease;
}
#links button:hover{
  transform: translateY(-3px);
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(10,132,255,0.16);
}

/* small improvements for nav items and responsive behavior */
#nav h3{ color: #fff; margin: 0 10px; font-weight: 500; cursor: default; transition: color .18s, transform .18s; }
#nav h3:hover{ color: #e6f4ff; transform: translateY(-2px); }
#nav i{ color:#fff; font-size:20px; }

@media (max-width:720px){
  #nav h3{ display:none; }
  #center h1{ font-size: clamp(28px, 8vw, 44px); }
  #center h3{ font-size: clamp(18px, 5vw, 30px); }
  #links{ display:flex; flex-direction:column; gap:12px; align-items:center; }
}