Skip to content

Commit 995b28b

Browse files
melsiirmelsiir
committed
added call of duty like menu
1 parent d496eb2 commit 995b28b

27 files changed

+844
-166
lines changed

‎box/style.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap');
22
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald&display=swap');
33
* {
4-
font-family: fantasy;
4+
font-family: fantasy;
55
}
66

77
.box {
@@ -21,8 +21,8 @@
2121
p {
2222
font-size: 8em;
2323
position: absolute;
24-
top: -130px;
25-
left: 90px;
24+
top: -95px;
25+
left: 85px;
2626
color: white;
2727
opacity: 0.5;
2828
font-family: Oswald;

‎call-of-duty/bh.jpg

1.41 MB
Loading

‎call-of-duty/images/img1.jpg

664 KB
Loading

‎call-of-duty/images/img2.jpg

446 KB
Loading

‎call-of-duty/images/img3.jpg

581 KB
Loading

‎call-of-duty/images/img4.jpg

454 KB
Loading

‎call-of-duty/img1.jpg

664 KB
Loading

‎call-of-duty/img2.jpg

446 KB
Loading

‎call-of-duty/img3.jpg

581 KB
Loading

‎call-of-duty/img4.jpg

454 KB
Loading

‎call-of-duty/index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title></title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="feature">
12+
<img src="./images/img1.jpg" class="feature-img" alt="">
13+
<div class="content">
14+
<h3>Awesome animals</h3>
15+
<a href="#" class="cta">Discover more</a>
16+
17+
</div>
18+
19+
</div>
20+
<div class="feature">
21+
<img src="./images/img2.jpg" class="feature-img" alt="">
22+
<div class="content">
23+
<h3>Awesome animals</h3>
24+
<a href="#" class="cta">Discover more</a>
25+
26+
</div>
27+
28+
</div>
29+
<div class="feature">
30+
<img src="./images/img3.jpg" class="feature-img" alt="">
31+
<div class="content">
32+
<h3>Awesome animals</h3>
33+
<a href="#" class="cta">Discover more</a>
34+
35+
</div>
36+
37+
</div>
38+
<div class="feature">
39+
<img src="./images/img4.jpg" class="nfl feature-img" alt="">
40+
<div class="content">
41+
<h3>Awesome animals</h3>
42+
<a href="#" class="cta">Discover more</a>
43+
44+
</div>
45+
46+
</div>
47+
48+
</div>
49+
<script src="main.js"></script>
50+
</body>
51+
</html>

‎call-of-duty/main.js

Whitespace-only changes.

‎call-of-duty/style.css

+63
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎call-of-duty/style.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎call-of-duty/style.scss

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
2+
3+
4+
body {
5+
height: 100vh;
6+
margin: 0;
7+
background: black url('./bh.jpg');
8+
color: white;
9+
font-family: Poppins;
10+
overflow: hidden;
11+
}
12+
13+
.container {
14+
display: grid;
15+
grid-template-columns: repeat(4, 1fr);
16+
height: 100vh;
17+
margin: 0;
18+
}
19+
20+
21+
22+
23+
24+
.feature {
25+
26+
display: grid;
27+
height: 100vh;
28+
place-items:center;
29+
overflow: hidden;
30+
position: relative;
31+
border: 1px solid rgba(255,255,255,.1);
32+
33+
&:hover a {
34+
opacity: 1;
35+
}
36+
37+
&:hover .feature-img {
38+
opacity: 1;
39+
transform: scale(1);
40+
}
41+
42+
&:hover .content {
43+
transform: scale(1.3);
44+
transform-origin: left 50%;
45+
}
46+
47+
.content {
48+
width: 70%;
49+
margin: 0 auto;
50+
transition: transform .3s;
51+
}
52+
53+
54+
.feature-img {
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
z-index: -1;
59+
opacity: 0;
60+
transform: scale(1.2);
61+
transition: transform 5s, opacity .3s;
62+
}
63+
}
64+
65+
66+
67+
a {
68+
background: white;
69+
color: black;
70+
text-decoration: none;
71+
padding: .3em .7em;
72+
font-weight: bold;
73+
text-transform: uppercase;
74+
/* font-size: 3rem; */
75+
opacity: 0;
76+
transition: opacity .3s;
77+
78+
}
79+
80+
81+
82+
// @media only screen and (min-width: 300px) {
83+
// .feature h3 {
84+
// font-size: 10px;
85+
// }
86+
//
87+
// a {
88+
// font-size:7px;
89+
// }
90+
// }

‎form/anim/index.html

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<html>
2+
<body>
3+
<div class="container">
4+
<!-- Example 1: Changing Color -->
5+
<div class="green-square green-red-alternate"></div>
6+
<!-- Example 2: Moving across the screen -->
7+
<div class="black-circle vertical-alternate-fast"></div>
8+
<!-- Example 3: On hover, changing color-->
9+
<div class="green-rounded-square color-transition"></div>
10+
</div>
11+
</body>
12+
</html>
13+
<style>
14+
.container {
15+
display: flex;
16+
flex-direction: row;
17+
overflow: hidden;
18+
}
19+
/* Example 1: Changing Color */
20+
.green-square {
21+
width: 200px;
22+
height: 200px;
23+
background-color: green;
24+
}
25+
.green-red-alternate {
26+
animation-name: to-red;
27+
animation-duration: 3s;
28+
animation-iteration-count: infinite;
29+
animation-direction: alternate;
30+
}
31+
@keyframes to-red {
32+
from {
33+
background-color: green;
34+
}
35+
to {
36+
background-color: red;
37+
}
38+
}
39+
/* Example 2: Moving across the screen */
40+
.black-circle {
41+
width: 200px;
42+
height: 200px;
43+
border-radius: 100%;
44+
background-color: black;
45+
}
46+
/* Example 2a: Moving horizontal slowly */
47+
.horizontal-alternate {
48+
animation-name: left-to-right;
49+
animation-duration: 3s;
50+
animation-iteration-count: infinite;
51+
animation-direction: alternate;
52+
}
53+
@keyframes left-to-right {
54+
from {
55+
margin-left: 0%;
56+
}
57+
to {
58+
margin-left: 100%;
59+
}
60+
}
61+
/* Example 2b: Moving vertically quickly */
62+
.vertical-alternate-fast {
63+
animation-name: top-to-bottom;
64+
animation-duration: 1s;
65+
animation-iteration-count: infinite;
66+
animation-direction: alternate;
67+
}
68+
@keyframes top-to-bottom {
69+
from {
70+
margin-top: 0%;
71+
}
72+
to {
73+
margin-top: 100%;
74+
}
75+
}
76+
/* Example 3: Animation on hover */
77+
.green-rounded-square {
78+
width: 200px;
79+
height: 200px;
80+
background-color: green;
81+
border-radius: 1em;
82+
}
83+
.color-transition:hover {
84+
animation-name: to-red;
85+
animation-duration: 3s;
86+
animation-iteration-count: infinite;
87+
animation-direction: alternate;
88+
}
89+
</style>

‎form/anim/main.js

Whitespace-only changes.

‎form/anim/style.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
* {
2+
3+
}
4+
5+

‎form/index.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!--Main body of form-->
2+
<form>
3+
<!--Contact section of the form-->
4+
<div class="form-elements">
5+
<fieldset>
6+
<legend><h2>Contact Information</h2></legend>
7+
<label for="name">Full Name</label>
8+
<input id="name" aria-label="name" type="text" name="name" placeholder="This
9+
field is required" required>
10+
<label for="email">Email Address</label>
11+
<input id="email" aria-label="email" type="email" name="email"
12+
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="This field is required"
13+
required>
14+
<label for="phone-number">Phone Number</label>
15+
<input id="phone-number" aria-label="phone-number" type="tel"
16+
name="phone-number" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="xxx-xxx-xxxx"
17+
placeholder="(xxx)xxx-xxxx">
18+
<label for="address">Street Address</label>
19+
<input id="address" aria-label="address" type="text" name="address"
20+
placeholder="1234 Elm Street">
21+
<label for="city">City</label>
22+
<input id="city" aria-label="city" type="text" name="city" placeholder="Haven">
23+
<!--Select and its corresponding options and label-->
24+
<label for="state">State</label>
25+
<select id="state" aria-label="state" name="state">
26+
<option value="" disabled selected >Choose State</option>
27+
<option>Ohio</option>
28+
<option>Michigan</option>
29+
<option>New York</option>
30+
<option>Florida</option>
31+
</select>
32+
<label for="postal-code">Postal Code</label>
33+
<input id="postal-code" aria-label="postal-code" type="text" name="postal-code"
34+
placeholder="xxxxx">
35+
</fieldset>
36+
<!--Newsletter section of the form.-->
37+
<fieldset id="newsletter">
38+
<legend><h2>Newsletter</h2></legend>
39+
<p>Select the newsletters you would like to recieve.</p>
40+
<!--Checkboxes-->
41+
<input id="html" aria-label="html" type="checkbox" name="html">
42+
<label for="html">Html Newsletter</label>
43+
<input id="css" aria-label="css" type="checkbox" name="css">
44+
<label for="css">Css Newsletter</label>
45+
<input id="jscript" aria-label="jscript" type="checkbox" name="javascript">
46+
<label for="jscript">Javascript Newsletter</label>
47+
<p>Newsletter format prefernce.</p>
48+
<!--Radio buttons-->
49+
<input id="html-format" aria-label="html-format" type="radio"
50+
name="format-choice" value="html">
51+
<label for="html-format">Html</label>
52+
<input id="plain-text" aria-label="plain-text" type="radio" name="format-choice"
53+
value="plain-text">
54+
<label for="plain-text">Plain Text</label>
55+
<p>Other topics you'd like to hear about.</p>
56+
<!--Textarea and label-->
57+
<label for="message"></label>
58+
<textarea id="message" aria-label="message" name="message"
59+
placeholder="Type your messaage here."></textarea>
60+
</fieldset>
61+
<button type="submit">Submit</button>
62+
</div class="form-elements">
63+
</form>

‎form/main.js

Whitespace-only changes.

‎form/style.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
* {
2+
3+
}
4+
5+

0 commit comments

Comments
 (0)