Skip to content

Commit 26526bc

Browse files
Shreekant-04Shreekant-04
committed
technical-documentation-page added
1 parent 53a0b89 commit 26526bc

File tree

14 files changed

+428
-0
lines changed

14 files changed

+428
-0
lines changed

‎3dRotation/1.txt

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background-color: #000;
8+
}
9+
10+
.scene {
11+
perspective: 1000px;
12+
}
13+
14+
.carousel {
15+
width: 150px;
16+
height: 250px;
17+
position: relative;
18+
transform-style: preserve-3d;
19+
animation: rotate 10s infinite linear;
20+
}
21+
22+
.poster {
23+
position: absolute;
24+
width: 100%;
25+
height: 100%;
26+
background-size: cover;
27+
background-position: center;
28+
border-radius: 10px;
29+
30+
}
31+
32+
.carousel .poster:nth-child(1) {
33+
transform: rotateY(0deg) translateZ(400px);
34+
}
35+
36+
.carousel .poster:nth-child(2) {
37+
transform: rotateY(51deg) translateZ(400px);
38+
}
39+
40+
.carousel .poster:nth-child(3) {
41+
transform: rotateY(102deg) translateZ(400px);
42+
}
43+
44+
.carousel .poster:nth-child(4) {
45+
transform: rotateY(154deg) translateZ(400px);
46+
}
47+
48+
.carousel .poster:nth-child(5) {
49+
transform: rotateY(205deg) translateZ(400px);
50+
}
51+
.carousel .poster:nth-child(6) {
52+
transform: rotateY(260deg) translateZ(400px);
53+
}
54+
.carousel .poster:nth-child(7) {
55+
transform: rotateY(311deg) translateZ(400px);
56+
}
57+
58+
@keyframes rotate {
59+
from {
60+
transform: rotateY(0deg);
61+
}
62+
to {
63+
transform: rotateY(360deg);
64+
}
65+
}

‎3dRotation/images/image1.jpg

42.9 KB
Loading

‎3dRotation/images/image2.jpg

45.6 KB
Loading

‎3dRotation/images/image3.jpg

45.2 KB
Loading

‎3dRotation/images/image4.jpg

24.5 KB
Loading

‎3dRotation/images/image5.jpg

20.4 KB
Loading

‎3dRotation/images/image6.jpg

36.1 KB
Loading

‎3dRotation/images/image7.jpg

22.3 KB
Loading

‎3dRotation/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>3D Rotating Posters</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="scene">
11+
<div class="carousel">
12+
<div
13+
class="poster"
14+
style="background-image: url('./images/image1.jpg')"
15+
></div>
16+
<div
17+
class="poster"
18+
style="background-image: url('./images/image2.jpg')"
19+
></div>
20+
<div
21+
class="poster"
22+
style="background-image: url('./images/image3.jpg')"
23+
></div>
24+
<div
25+
class="poster"
26+
style="background-image: url('./images/image4.jpg')"
27+
></div>
28+
<div
29+
class="poster"
30+
style="background-image: url('./images/image5.jpg')"
31+
></div>
32+
<div
33+
class="poster"
34+
style="background-image: url('./images/image6.jpg')"
35+
></div>
36+
<div
37+
class="poster"
38+
style="background-image: url('./images/image7.jpg')"
39+
></div>
40+
</div>
41+
</div>
42+
</body>
43+
</html>

‎3dRotation/style.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background-color: #000;
8+
}
9+
.scene {
10+
perspective: 1000px;
11+
}
12+
13+
.carousel {
14+
width: 150px;
15+
height: 250px;
16+
position: relative;
17+
transform-style: preserve-3d;
18+
animation: rotate 10s infinite linear;
19+
}
20+
21+
.poster {
22+
position: absolute;
23+
width: 100%;
24+
height: 100%;
25+
background-size: cover;
26+
background-position: center;
27+
border-radius: 10px;
28+
}
29+
.carousel .poster:nth-child(1) {
30+
transform: rotateY(0deg) translateZ(400px);
31+
}
32+
.carousel .poster:nth-child(2) {
33+
transform: rotateY(51deg) translateZ(400px);
34+
}
35+
.carousel .poster:nth-child(3) {
36+
transform: rotateY(102deg) translateZ(400px);
37+
}
38+
39+
.carousel .poster:nth-child(4) {
40+
transform: rotateY(154deg) translateZ(400px);
41+
}
42+
43+
.carousel .poster:nth-child(5) {
44+
transform: rotateY(205deg) translateZ(400px);
45+
}
46+
.carousel .poster:nth-child(6) {
47+
transform: rotateY(260deg) translateZ(400px);
48+
}
49+
.carousel .poster:nth-child(7) {
50+
transform: rotateY(311deg) translateZ(400px);
51+
}
52+
53+
@keyframes rotate {
54+
from {
55+
transform: rotateY(0deg);
56+
}
57+
to {
58+
transform: rotateY(360deg);
59+
}
60+
}

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,5 +213,10 @@
213213
<td><a href="feedback-ui">Feedback-ui</a></td>
214214
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/feedback-ui/">Link</a></td>
215215
</tr>
216+
<tr>
217+
<td>41</td>
218+
<td><a href="technical-documentation-page">Technical Documentation Page</a></td>
219+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/technical-documentation-page/">Link</a></td>
220+
</tr>
216221
</tbody>
217222
</table>

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,13 @@
302302
<a href="./feedback-ui/" target="_blank">Link</a>
303303
</td>
304304
</tr>
305+
<tr>
306+
<td>41</td>
307+
<td>Technical Documentation Page</td>
308+
<td>
309+
<a href="./feedback-ui/" target="_blank">Link</a>
310+
</td>
311+
</tr>
305312
</tbody>
306313
</table>
307314
</body>

‎technical-documentation-page/index.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Technical Documentation</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<nav id="navbar">
11+
<header>Technical Documentation</header>
12+
<a class="nav-link" href="#Introduction">Introduction</a>
13+
<a class="nav-link" href="#HTML_Basics">HTML Basics</a>
14+
<a class="nav-link" href="#CSS_Basics">CSS Basics</a>
15+
<a class="nav-link" href="#JavaScript_Basics">JavaScript Basics</a>
16+
<a class="nav-link" href="#Advanced_Topics">Advanced Topics</a>
17+
<a class="nav-link" href="#Conclusion">Conclusion</a>
18+
</nav>
19+
<main id="main-doc">
20+
<section id="Introduction" class="main-section">
21+
<header>Introduction</header>
22+
<p>
23+
Technical documentation is essential for understanding how to use and
24+
implement technology effectively. It helps developers understand the
25+
intricacies of a particular technology. Documentation can include
26+
tutorials, API documentation, and code examples.
27+
</p>
28+
<p>Good documentation should be clear, concise, and comprehensive.</p>
29+
<code>console.log('Hello, world!');</code>
30+
<p>
31+
Providing well-structured documentation aids in the learning process
32+
and ensures consistent usage of the technology.
33+
</p>
34+
<ul>
35+
<li>Introduction to concepts</li>
36+
<li>Detailed explanations</li>
37+
<li>Code examples</li>
38+
</ul>
39+
</section>
40+
<section id="HTML_Basics" class="main-section">
41+
<header>HTML Basics</header>
42+
<p>
43+
HTML stands for HyperText Markup Language. It is used to create the
44+
structure of web pages. An HTML document is made up of a series of
45+
elements.
46+
</p>
47+
<p>
48+
Elements can have attributes that provide additional information.
49+
Common HTML elements include headings, paragraphs, and links.
50+
</p>
51+
<code>&lt;h1&gt;This is a heading&lt;/h1&gt;</code>
52+
<p>
53+
HTML elements are nested within each other to form a hierarchy,
54+
defining the structure of the web page.
55+
</p>
56+
<ul>
57+
<li>Headings</li>
58+
<li>Paragraphs</li>
59+
<li>Links</li>
60+
</ul>
61+
</section>
62+
<section id="CSS_Basics" class="main-section">
63+
<header>CSS Basics</header>
64+
<p>
65+
CSS stands for Cascading Style Sheets. It is used to style and layout
66+
web pages. CSS can control the color, font, spacing, and layout of
67+
HTML elements.
68+
</p>
69+
<p>
70+
Styles are defined using rules that specify which elements to style
71+
and how to style them.
72+
</p>
73+
<code>body { font-family: Arial, sans-serif; }</code>
74+
<p>
75+
CSS selectors are used to select the HTML elements to be styled. They
76+
can be based on element name, class, id, and other attributes.
77+
</p>
78+
<ul>
79+
<li>Selectors</li>
80+
<li>Properties</li>
81+
<li>Values</li>
82+
</ul>
83+
</section>
84+
<section id="JavaScript_Basics" class="main-section">
85+
<header>JavaScript Basics</header>
86+
<p>
87+
JavaScript is a programming language used to create dynamic and
88+
interactive web content. It can be used to manipulate HTML and CSS.
89+
JavaScript code is run by the browser.
90+
</p>
91+
<p>
92+
JavaScript can respond to user actions, such as clicks and keypresses.
93+
</p>
94+
<code
95+
>document.getElementById('demo').innerHTML = 'Hello,
96+
JavaScript!';</code
97+
>
98+
<p>
99+
JavaScript can interact with the Document Object Model (DOM) to
100+
dynamically update the content of web pages.
101+
</p>
102+
<ul>
103+
<li>Variables</li>
104+
<li>Functions</li>
105+
<li>Events</li>
106+
</ul>
107+
</section>
108+
<section id="Advanced_Topics" class="main-section">
109+
<header>Advanced Topics</header>
110+
<p>
111+
Advanced web development topics include working with frameworks and
112+
libraries, handling asynchronous operations, and optimizing
113+
performance.
114+
</p>
115+
<p>
116+
Understanding these concepts is crucial for building modern, efficient
117+
web applications.
118+
</p>
119+
<code
120+
>async function fetchData() { const response = await
121+
fetch('https://api.example.com/data'); }</code
122+
>
123+
<p>
124+
Popular frameworks and libraries include React, Angular, and Vue.js.
125+
</p>
126+
<ul>
127+
<li>Frameworks</li>
128+
<li>Asynchronous JavaScript</li>
129+
<li>Performance optimization</li>
130+
</ul>
131+
</section>
132+
<section id="Conclusion" class="main-section">
133+
<header>Conclusion</header>
134+
<p>
135+
Understanding the basics of HTML, CSS, and JavaScript is essential for
136+
web development. Good technical documentation helps developers learn
137+
and implement these technologies effectively.
138+
</p>
139+
<p>
140+
Always keep documentation up to date as technology evolves. Continuous
141+
learning and adaptation are key to staying relevant in the field of
142+
web development.
143+
</p>
144+
<code>&lt;!-- End of documentation --&gt;</code>
145+
<ul>
146+
<li>HTML creates structure.</li>
147+
<li>CSS styles the structure.</li>
148+
<li>JavaScript adds interactivity.</li>
149+
<li>Documentation is crucial.</li>
150+
<li>Keep learning and improving.</li>
151+
</ul>
152+
</section>
153+
</main>
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)