Skip to content

Commit f357784

Browse files
devvsakibdevvsakib
committed
2 parents c0e0f3e + 9c1a8fa commit f357784

5 files changed

Lines changed: 302 additions & 33 deletions

File tree

‎spacetourismwebsite/starter-code/assets/css/technology.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
body {
2+
background: url(../technology/background-technology-desktop.jpg);
3+
background-repeat: no-repeat;
4+
background-size: cover;
5+
overflow: hidden;
6+
color: var(--white);
7+
}
8+
9+
.feature-section {
10+
margin-top: 50px;
11+
}
12+
.feature-section .row {
13+
display: flex;
14+
align-items: center;
15+
}
16+
17+
.row h5 {
18+
color: var(--white);
19+
margin-bottom: 30px;
20+
font-weight: 400;
21+
text-transform: uppercase;
22+
font-family: var(--h5font);
23+
font-size: var(--h5);
24+
letter-spacing: var(--space);
25+
}
26+
.row h5 span {
27+
font-family: var(--h5font) !important;
28+
font-weight: 500;
29+
margin-right: 10px;
30+
font-size: var(--h5) !important;
31+
}
32+
33+
.mt {
34+
margin-top: 50px;
35+
}
36+
37+
.left_content {
38+
display: flex;
39+
align-items: center;
40+
margin: 0 !important;
41+
width: auto !important;
42+
}
43+
44+
.techTabBtn {
45+
height: 250px;
46+
display: flex;
47+
flex-direction: column;
48+
justify-content: space-between;
49+
}
50+
.techTabBtn li {
51+
text-align: center;
52+
line-height: 60px;
53+
color: black;
54+
width: 60px;
55+
height: 60px;
56+
border-radius: 50%;
57+
border: 1px solid rgba(208, 214, 249, 0.6784313725);
58+
color: white;
59+
cursor: pointer;
60+
}
61+
.techTabBtn :first-child {
62+
color: black;
63+
background: white;
64+
}
65+
66+
.tech_content {
67+
padding-left: 80px;
68+
margin-right: 0;
69+
}
70+
.tech_content h5 {
71+
color: rgba(208, 214, 249, 0.6784313725) !important;
72+
margin-bottom: 5px;
73+
}
74+
.tech_content .subHeading {
75+
text-transform: uppercase;
76+
color: rgba(208, 214, 249, 0.6784313725);
77+
font-size: var(--h6);
78+
font-family: var(--hfont);
79+
letter-spacing: var(--subh1space);
80+
}
81+
.tech_content .mainHeading {
82+
text-transform: uppercase;
83+
margin-bottom: 20px;
84+
color: white;
85+
font-family: var(--hfont);
86+
font-size: var(--h3);
87+
}
88+
.tech_content .paraDes {
89+
width: 430px;
90+
line-height: 27px !important;
91+
font-weight: 200 !important;
92+
font-family: var(--h5font);
93+
font-size: 18px;
94+
letter-spacing: 1px;
95+
}
96+
97+
#techImg {
98+
width: 400px;
99+
position: absolute;
100+
right: 0 !important;
101+
top: 30%;
102+
}/*# sourceMappingURL=technology.css.map */

‎spacetourismwebsite/starter-code/assets/css/technology.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spacetourismwebsite/starter-code/assets/css/technology.scss‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
body {
2+
background: url(../technology/background-technology-desktop.jpg);
3+
background-repeat: no-repeat;
4+
background-size: cover;
5+
overflow: hidden;
6+
color: var(--white);
7+
}
8+
9+
.feature-section {
10+
margin-top: 50px;
11+
12+
.row {
13+
display: flex;
14+
align-items: center;
15+
}
16+
}
17+
18+
.row h5 {
19+
color: var(--white);
20+
margin-bottom: 30px;
21+
font-weight: 400;
22+
text-transform: uppercase;
23+
font-family: var(--h5font);
24+
font-size: var(--h5);
25+
letter-spacing: var(--space);
26+
27+
span {
28+
font-family: var(--h5font) !important;
29+
font-weight: 500;
30+
margin-right: 10px;
31+
font-size: var(--h5) !important;
32+
}
33+
}
34+
35+
.mt {
36+
margin-top: 50px;
37+
}
38+
39+
.left_content {
40+
display: flex;
41+
align-items: center;
42+
margin: 0 !important;
43+
width: auto !important;
44+
}
45+
46+
.techTabBtn {
47+
height: 250px;
48+
display: flex;
49+
flex-direction: column;
50+
justify-content: space-between;
51+
52+
li {
53+
text-align: center;
54+
line-height: 60px;
55+
color: black;
56+
width: 60px;
57+
height: 60px;
58+
border-radius: 50%;
59+
border: 1px solid #d0d6f9ad;
60+
color: white;
61+
cursor: pointer;
62+
}
63+
64+
:first-child {
65+
color: black;
66+
background: white;
67+
}
68+
}
69+
70+
.tech_content {
71+
padding-left: 80px;
72+
margin-right: 0;
73+
74+
h5 {
75+
color: #d0d6f9ad !important;
76+
margin-bottom: 5px;
77+
}
78+
79+
.subHeading {
80+
text-transform: uppercase;
81+
color: #d0d6f9ad;
82+
font-size: var(--h6);
83+
font-family: var(--hfont);
84+
letter-spacing: var(--subh1space);
85+
}
86+
87+
.mainHeading {
88+
text-transform: uppercase;
89+
margin-bottom: 20px;
90+
color: white;
91+
font-family: var(--hfont);
92+
font-size: var(--h3);
93+
}
94+
95+
.paraDes {
96+
width: 430px;
97+
line-height: 27px !important;
98+
font-weight: 200 !important;
99+
font-family: var(--h5font);
100+
font-size: 18px;
101+
letter-spacing: 1px;
102+
}
103+
}
104+
105+
#techImg {
106+
width: 400px;
107+
position: absolute;
108+
right: 0 !important;
109+
top: 30%;
110+
}

‎spacetourismwebsite/starter-code/assets/js/technology.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const dot = document.querySelectorAll('.tabBtn'),
2+
tabImg = document.getElementById('techImg'),
3+
subHeading = document.querySelector('.subHeading'),
4+
mainHeading = document.querySelector('.mainHeading'),
5+
paraDes = document.querySelector('.paraDes');
6+
7+
8+
9+
// Fetch data from JSON
10+
url = "./data.json"
11+
fetch(url)
12+
.then(res => res.json())
13+
.then(
14+
data => {
15+
mainHeading.innerText = data.technology[0].name
16+
paraDes.innerText = data.technology[0].description
17+
tabImg.src = `${data.technology[0].images.portrait}`;
18+
dot.forEach(el => {
19+
el.addEventListener('click', () => {
20+
el.classList.toggle("mkWhite")
21+
const tabVal = el.value
22+
tabImg.src = `${data.technology[tabVal].images.portrait}`;
23+
mainHeading.innerText = data.technology[tabVal].name
24+
paraDes.innerText = data.technology[tabVal].description
25+
})
26+
})
27+
}
28+
)
29+
.catch(function (err) {
30+
console.log(err);
31+
});
32+
// Get all tab acccess
33+
34+
// fetch("./data.json").then(res => res.json())
35+
// .then(data => {
36+
// data = data.crew[0].name
37+
// dot.forEach(el => {
38+
// el.addEventListener('click', () => {
39+
// const tabVal = el.value
40+
41+
// console.log(tabVal);
42+
// })
43+
// })
44+
// })
45+
46+
47+
48+
49+
50+
51+
52+
53+
// tab_nav.forEach(el => {
54+
// el.addEventListener('click', () => {
55+
// val = el.value;
56+
// if (val == 1) {
57+
// desHead.innerHTML = '1'
58+
// }
59+
// else if (val == 2) {
60+
// desHead.innerHTML = '2'
61+
// }
62+
// else if (val == 3) {
63+
// desHead.innerHTML = '3'
64+
// }
65+
// else {
66+
// desHead.innerHTML = '4'
67+
68+
// }
69+
70+
// })
71+
72+
// })

‎spacetourismwebsite/starter-code/technology.html‎

Lines changed: 17 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
99
<title>Frontend Mentor | Space tourism website</title>
1010
<link rel="stylesheet" href="assets/css/style.css">
11-
<link rel="stylesheet" href="assets/css/destination.css">
11+
<link rel="stylesheet" href="assets/css/technology.css">
1212
</head>
1313

1414
<body>
@@ -34,46 +34,30 @@
3434
</section>
3535
<section class="container feature-section">
3636
<div class="row">
37-
<h5><span>01</span> pick your destination</h5>
38-
<div class="col-md-6 col-sm-6">
37+
<h5><span>03</span> spacce launch 101</h5>
38+
<div class="mt col-md-8 col-sm-8">
3939
<div class="left_content">
40-
<img id="tabImg" src="./assets/destination/image-moon.webp" alt="">
40+
<div class="techTabBtn">
41+
<li class="tabBtn" value="0">1</li>
42+
<li class="tabBtn" value="1">2</li>
43+
<li class="tabBtn" value="2">3</li>
44+
</div>
45+
<div class="tech_content">
46+
<h5>the terminology...</h5>
47+
<h4 class="subHeading"></h4>
48+
<h2 class="mainHeading"></h2>
49+
<p class="paraDes"></p>
50+
</div>
4151
</div>
4252
</div>
43-
<div class="col-md-6 col-sm-6">
53+
<div class="col-md-4 col-sm-4">
4454
<div class="right_content">
45-
<div class="tab-nav">
46-
<li class="tab" value="0"><a href="#"><span></span> moon</a></li>
47-
<li class="tab" value="1"><a href="#"><span></span> mars</a></li>
48-
<li class="tab" value="2"><a href="#"><span></span> europa</a></li>
49-
<li class="tab" value="3"><a href="#"><span></span> titan</a></li>
50-
</div>
51-
<div class="tab-header">
52-
<span class="des-head">Moon</span>
53-
</div>
54-
<div class="tab-description">
55-
<p class="des-para">See our planet as you’ve never seen it before. A perfect relaxing trip away
56-
to help regain perspective and come back refreshed. While you’re there, take in some history
57-
by visiting the Luna 2 and Apollo 11 landing sites.</p>
58-
</div>
59-
<hr>
60-
<div class="tab-details">
61-
<div>
62-
<p>AVG. distance</p>
63-
<h5 class="des-dis">384,400 KM</h5>
64-
</div>
65-
<div>
66-
<p>EST. travel</p>
67-
<h5 class="des-time">3 days</h5>
68-
</div>
69-
</div>
55+
<img id="techImg" src="" alt="">
7056
</div>
7157
</div>
7258
</div>
7359
</section>
7460

75-
76-
<script src="./assets/js/destination.js"></script>
61+
<script src="./assets/js/technology.js"></script>
7762
</body>
78-
7963
</html>

0 commit comments

Comments
 (0)