-
Notifications
You must be signed in to change notification settings - Fork 1
/
page-2.html
123 lines (114 loc) · 6.1 KB
/
page-2.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="rubics.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no;">
<title>Understanding Rubik Cube</title>
<!--bootstrap css framwork-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<!--jquery cdn-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<!--icons-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<!--bootstrap Javascript-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</head>
<!--NAV BAR-->
<nav class="navbar fixed-top navbar-expand-lg navbar-light " style="background-color:lightyellow;">
<div class="navbar-brand"><b style="color:lightslategrey;">IQ Blaster Presents</b><br><h5
style="color:darkcyan;"> Rubik-Cube Tutorial</h5> </div>
<button id="option" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="page-2.html">Understand Rubik Cube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="rubiktypes.html">Rubik Cube Types</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Learn Particular Cube.
</a>
<div class="dropdown-menu " style="background-color: burlywood;border-radius: 3%;" aria-labelledby="navbarDropdown">
<a class="dropdown-item disabled" href="#">2*2Rubik Cube <p id="com2" style="float: right;">coming soon</p></a>
<a class="dropdown-item " href="cube3.html">3*3Rubik Cube</a>
<a class="dropdown-item disabled" href="#">4*4Rubik Cube <p id="com2" style="float: right;">coming soon</p></a>
<a class="dropdown-item disabled" href="#">5*5Rubik Cube<p id="com1" style="float: right;">coming soon</p></a>
<a class="dropdown-item disabled" href="#">Megamix cube<p id="com2" style="float: right;">coming soon</p></a>
<a class="dropdown-item disabled" href="#">Mirror Cube<p id="com1" style="float: right;">coming soon</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#foo" tabindex="-1" aria-disabled="true">About Us</a>
</li>
</ul>
</div>
</nav>
<body style=" margin-left: 5%;margin-top:25%;">
<h4 >Get to Know Your Cube</h4>
<br>
<p style="font-weight: 400;">On each of the 6 faces, the cube has 3 kinds of stickers:</p>
<ul>
<li>The Center Dot</li>
<li>The 4 Corner Stickers</li>
<li>The 4 Edge Stickers</li>
</ul>
<img id="img2" src="img/dot.jpg" alt="image" height="60%" width="60%">
<img id="im2" src="img/corner.jpg" alt="image" height="60%" width="60%" >
<img id="img2" src="img/edge.jpg" alt="image" height="60%" width="60%" >
<p>In total, there are:</p>
<ul>
<li>6 center dots, 1 color each, at the center of each face.</li>
<li>12 edges, which have 2 colors each, and are in-between the center and corner
dots.</li>
<li>8 corners, which have 3 colors each, and are on the left & right, and top & bottom
of each edge cubie.</li></ul>
<p>There are 20 "cubies" that can be moved around, while the 6 center dots always remain in place.</p>
<p>A cubie is an edge or corner.</p>
<img id="img2" src="img/face.jpg" alt="image" height="60%" width="60%" style="margin-left: 15%;">
<p>A "face" is a side of the cube (9 stickers only). In the picture above you can
see the white face. It is the side of the cube that is always facing you on
the front, no matter what color it is. Its opposite is the back face.</p>
<p>The rules for the faces are the same as the colors:</p>
<ul>
<li>Face (F) & back (B) are on opposite sides of the cube, the front and the back.</li>
<li>Left (L) & right (R) are on the left and right sides of the cube.</li>
<li>Up (U) & down (D) are on the top and bottom of the cube.</li>
</ul>
<h4>Helpful Hint: Cube Color Schemes</h4>
<p>In American models, the following colors are always opposite of each other.</p>
<ul>
<li>Green and Blue</li>
<li>Orange and Red</li>
<li>White and Yellow</li>
</ul>
<h4>How to Read Rubik's Cube Notations</h4>
<p>Rubik's Cube instructions will tell you to rotate to different sides.
So, when the instructions tell you to move up, it means to turn the up side
clockwise 90 degrees (1/4 the way around the top of the cube).
Another way to look at it is to imagine you are looking at the top of the cube
nd you want to turn a hand on a clock from 12 o'clock to 3 o'clock, so you
would turn the top layer to the right one.
<br><br>
<b>Watch below video to get more familier of rubik cube notation. </b>
<br><br>
<iframe id="vid" src="https://www.youtube.com/embed/BJ2Xw-O4lGU" allowfullscreen="allowfullscreen" frameborder="0" height="240" width="100%"></iframe>
<br><br><b>Also See the Picture below:</b></p>
<img id="im3" src="img/cube_dimentions.jpg" height="auto" width="88%" style="margin-left: 6%;" alt="">
</body>
</html>