Skip to content

Commit 0781e9d

Browse files
MarokhmalaMarokhmala
committed
added second page
footer has some responsive issues
1 parent 33bf030 commit 0781e9d

4 files changed

Lines changed: 142 additions & 22 deletions

File tree

‎about.html‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
/>
1414
</head>
1515
<body>
16-
<header>
16+
<header class="page-about">
1717
<div class="nav-bar">
1818
<div class="logo">
1919
<img src="assets/nerv 1.svg" alt="NERV Logo" />
@@ -39,16 +39,21 @@
3939
</div>
4040
</div>
4141

42-
<div class="welcome">
43-
<h1>Discover how technology came so far with us</h1>
44-
<p>Make your life more easy with our cyberware implants</p>
45-
<div class="button-dl">
46-
<button class="prpl-bt">DISCOVER NOW</button>
47-
<button class="wht-bt">LEARN MORE</button>
48-
</div>
42+
<div class="welcome-about">
43+
<p>When creating your character for the first time in Cyberpunk 2077, you must choose a story background for yourself. There are three different life path options that you can pick. These origin stories are Nomad, Streetkid, and Corpo. Each origin story starts your game off in a different location and introduces you to Night City from a completely different angle. Even afterward, your life path will continue to shape how you experience Cyberpunk.Therefore, this decision gives you an entirely separate introduction, setting, and side story throughout Cyberpunk 2077</p>
44+
<button>LEARN MORE</button>
4945
</div>
5046
</header>
5147

48+
<section class="aboutpage-sect1">
49+
<h3>What are we planning for the future?</h3>
50+
51+
<div class="abtpage-main-prt">
52+
<p>When creating your character for the first time in Cyberpunk 2077, you must choose a story background for yourself. There are three different life path options that you can pick. These origin stories are Nomad, Streetkid, and Corpo. Each origin story starts your game off in a different location and introduces you to Night City from a completely different angle. Even afterward, your life path will continue to shape how you experience Cyberpunk.Therefore, this decision gives you an entirely separate introduction, setting, and side story throughout Cyberpunk 2077</p>
53+
<button>LEARN MORE</button>
54+
</div>
55+
</section>
56+
5257
<footer>
5358
<div class="footer-pt">
5459
<div class="foot-logo-text">

‎assets/page-about-background.png‎

2.29 MB
Loading

‎assets/section-background-cybercity.png‎

2.36 MB
Loading

‎styles.css‎

Lines changed: 129 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,24 @@ header {
6868
letter-spacing: 0%;
6969
}
7070

71+
@media (max-width: 1130px) {
72+
.nav-bar {
73+
flex-direction: column;
74+
gap: 30px;
75+
align-items: start;
76+
}
77+
78+
.nav-wrapper {
79+
flex-direction: column;
80+
gap: 25px;
81+
}
82+
83+
.nav-bar nav ul {
84+
flex-direction: column;
85+
gap: 25px;
86+
}
87+
}
88+
7189
.bar-cart {
7290
display: flex;
7391
gap: 25px;
@@ -91,18 +109,6 @@ header {
91109
padding-left: 39px;
92110
}
93111

94-
@media (max-width: 1000px) {
95-
.nav-wrapper {
96-
flex-wrap: wrap;
97-
justify-content: center;
98-
}
99-
100-
.nav-bar {
101-
justify-content: center;
102-
gap: 20px;
103-
}
104-
}
105-
106112
.welcome {
107113
position: absolute;
108114
max-width: 1081px;
@@ -245,6 +251,8 @@ footer {
245251
display: flex;
246252
justify-content: space-between;
247253
gap: 50px;
254+
max-width: 650px;
255+
min-height: 210px;
248256
}
249257

250258
.foot-column-wrap h3 {
@@ -276,8 +284,8 @@ footer {
276284
.nav-col,
277285
.sup-col,
278286
.part-col {
279-
width: 184px;
280-
height: 210px;
287+
max-width: 184px;
288+
min-height: 210px;
281289
gap: 25px;
282290
}
283291

@@ -683,3 +691,110 @@ left: 998.34px; */
683691
letter-spacing: 0%;
684692
margin-top: 24px;
685693
}
694+
695+
/* about page */
696+
697+
.page-about {
698+
background-image: url(assets/page-about-background.png);
699+
background-size: cover;
700+
color: #ffffff;
701+
background-position: center;
702+
height: 100vh;
703+
position: relative;
704+
}
705+
706+
.welcome-about {
707+
position: absolute;
708+
/* top: clamp(100px, 20vh, 235px); */
709+
top: clamp(120px, 18vw, 235px);
710+
left: clamp(300px, calc(70vw - 180px), 852px);
711+
display: flex;
712+
flex-direction: column;
713+
margin-right: 30px;
714+
}
715+
716+
.welcome-about p {
717+
color: #ffffff;
718+
font-weight: 400;
719+
font-style: Regular;
720+
font-size: 18px;
721+
line-height: 38.9px;
722+
letter-spacing: 0%;
723+
max-width: 465px;
724+
min-height: 467px;
725+
margin-bottom: 48px;
726+
}
727+
728+
.welcome-about button {
729+
color: #ffffff;
730+
background-color: #7e10b3;
731+
padding-top: 13px 33px;
732+
gap: 10px;
733+
height: 48px;
734+
width: 194px;
735+
border: none;
736+
font-weight: 700;
737+
font-style: Bold;
738+
font-size: 18px;
739+
line-height: 100%;
740+
letter-spacing: 0%;
741+
}
742+
743+
.aboutpage-sect1 {
744+
display: flex;
745+
flex-direction: column;
746+
max-width: 1440px;
747+
height: 1074px;
748+
margin-bottom: 130px;
749+
}
750+
751+
.aboutpage-sect1 h3 {
752+
color: #ffffff;
753+
font-weight: 700;
754+
font-style: Bold;
755+
font-size: 24px;
756+
line-height: 100%;
757+
letter-spacing: 0%;
758+
text-transform: uppercase;
759+
margin-left: 119px;
760+
margin-bottom: 90px;
761+
}
762+
763+
.abtpage-main-prt {
764+
display: flex;
765+
flex-direction: column;
766+
max-width: 1440px;
767+
min-height: 955px;
768+
background-image: url(assets/section-background-cybercity.png);
769+
background-position: center;
770+
}
771+
772+
.abtpage-main-prt p {
773+
color: #ffffff;
774+
max-width: 465px;
775+
min-height: 467px;
776+
margin-top: 195px;
777+
margin-left: 119px;
778+
margin-bottom: 50px;
779+
font-weight: 400;
780+
font-style: Regular;
781+
font-size: 18px;
782+
line-height: 38.9px;
783+
letter-spacing: 0%;
784+
}
785+
786+
.abtpage-main-prt button {
787+
color: #ffffff;
788+
width: 194px;
789+
height: 48px;
790+
padding: 13px 33px;
791+
cursor: pointer;
792+
border: none;
793+
background-color: #7e10b3;
794+
margin-left: 119px;
795+
font-weight: 700;
796+
font-style: Bold;
797+
font-size: 18px;
798+
line-height: 100%;
799+
letter-spacing: 0%;
800+
}

0 commit comments

Comments
 (0)