Skip to content

Commit cd112a5

Browse files
rmametrmamet
committed
Make responisive section with animations
1 parent d9f7ca7 commit cd112a5

File tree

3 files changed

+274
-53
lines changed

3 files changed

+274
-53
lines changed

‎responsive-extra.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* Code to insert circular label label to show how responsive code is working on lower right */
2+
main::before {
3+
position: fixed;
4+
bottom: 2px;
5+
right: 2px;
6+
color: #efefef;
7+
border-radius: 50%;
8+
width: 45px;
9+
height: 45px;
10+
font-family: Helvetica, sans-serif;
11+
font-size: 8pt;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
}
16+
17+
/* BEGIN MOBILE RULES */
18+
@media only screen and (max-width: 768px) {
19+
/* Code for mobile phones only: */
20+
21+
/* Mobile label */
22+
main::before {
23+
content: "Mobile";
24+
background-color: #c8787888;
25+
}
26+
/* End mobile label */
27+
}
28+
29+
/* BEGIN MEDIUM WIDTH RULES */
30+
@media only screen and (min-width: 768px) and (max-width: 1399px) {
31+
/* Code for medium width and bigger : */
32+
33+
/* Laptop label */
34+
main::before {
35+
content: "Laptop";
36+
background-color: #45454588;
37+
}
38+
/* End laptop label */
39+
}
40+
41+
/* BEGIN WIDE SCREEN RULES */
42+
@media only screen and (min-width: 1400px) {
43+
/* Code for wide screen only */
44+
45+
/* Widescreen label */
46+
main::before {
47+
content: "Wide";
48+
background-color: #00438888;
49+
}
50+
/* End widescreen label */
51+
}

‎responsive.css‎

Lines changed: 71 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,75 @@
11
/* Code for all screen sizes */
22

3-
/* BEGIN MOBILE RULES */
4-
@media only screen and (max-width: 768px) {
5-
/* Code for mobile phones only: */
6-
7-
/* Mobile label */
8-
main::before {
9-
content: "Mobile";
10-
background-color: #c8787888;
11-
}
12-
/* End mobile label */
13-
}
14-
15-
/* BEGIN MEDIUM WIDTH RULES */
16-
@media only screen and (min-width: 768px) and (max-width: 1399px) {
17-
/* Code for medium width and bigger : */
18-
19-
/* Laptop label */
20-
main::before {
21-
content: "Laptop";
22-
background-color: #45454588;
23-
}
24-
/* End laptop label */
25-
}
26-
27-
/* BEGIN WIDE SCREEN RULES */
28-
@media only screen and (min-width: 1400px) {
29-
/* Code for wide screen only */
30-
31-
/* Widescreen label */
32-
main::before {
33-
content: "Wide";
34-
background-color: #00438888;
35-
}
36-
/* End widescreen label */
37-
}
38-
39-
/* BACK TO CODE FOR ALL SIZES */
40-
41-
/* Code to insert circular label label to show how responsive code is working on lower right */
42-
main::before {
43-
position: fixed;
44-
bottom: 2px;
45-
right: 2px;
46-
color: #efefef;
47-
border-radius: 50%;
48-
width: 45px;
49-
height: 45px;
50-
font-family: Helvetica, sans-serif;
51-
font-size: 8pt;
3+
* {
4+
flex-wrap: wrap;
5+
}
6+
7+
@font-face {
8+
font-family: CloisterBlack;
9+
src: url(CloisterBlackLight.ttf);
10+
}
11+
12+
header > * {
13+
text-align: start !important;
14+
}
15+
16+
h1,
17+
h2 {
18+
font-family: CloisterBlack;
19+
color: black;
20+
}
21+
22+
p,
23+
figcaption {
24+
font-family: serif;
25+
font-size: 10px;
26+
/* text-align: center; */
27+
}
28+
29+
details > summary:hover {
30+
cursor: pointer;
31+
}
32+
33+
details > summary {
34+
transition: all 1s ease-in-out;
35+
font-family: CloisterBlack;
36+
color: black;
37+
font-size: 16px;
38+
background-color: none;
39+
}
40+
41+
.sec-grid {
5242
display: flex;
53-
align-items: center;
54-
justify-content: center;
43+
/* grid-auto-flow: column; */
44+
}
45+
img {
46+
display: block;
47+
margin: auto;
48+
}
49+
p,
50+
figcaption {
51+
text-align: center;
52+
}
53+
54+
details > section {
55+
transition: all 1s ease-in-out;
56+
opacity: 0;
57+
overflow: hidden;
58+
height: 0;
59+
background-color: none;
60+
}
61+
details[open] > section {
62+
transition: all 1s ease-in-out;
63+
opacity: 1;
64+
height: auto;
65+
background-color: lightgray;
66+
}
67+
68+
details[open] > summary {
69+
background-color: lightslategray;
70+
font-size: 26px;
71+
}
72+
73+
details {
74+
text-align: center;
5575
}

‎responsive.html‎

Lines changed: 152 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,162 @@
66
<meta name="viewport" content="width=device-width" />
77
<title>Responsive Design</title>
88
<link href="responsive.css" rel="stylesheet" type="text/css" />
9+
<link href="responsive-extra.css" rel="stylesheet" type="text/css" />
910
</head>
1011

1112
<body>
1213
<main>
13-
<!-- start your design here -->
14-
responsive
14+
<header>
15+
<h1>Shakespeare's Tragedies</h1>
16+
<summary>Everybody Dies.</summary>
17+
<p>Original Concept by Cam Magee <br> Original Design by Caitlin S Griffin</p>
18+
<p>Web Design by R. Mamet</p>
19+
</header>
20+
<main class="main-design">
21+
<details>
22+
<summary>Romeo and Juliet</summary>
23+
<section class="sec-grid r-and-j">
24+
<figure>
25+
<img src="deaths/m-stabbed.jpg">
26+
<figcaption>Mercutio is Stabbed</figcaption>
27+
</figure>
28+
<figure>
29+
<img src="deaths/m-stabbed.jpg">
30+
<figcaption>Tybalt is Stabbed</figcaption>
31+
</figure>
32+
<figure>
33+
<img src="deaths/m-stabbed.jpg">
34+
<figcaption>Paris is Stabbed</figcaption>
35+
</figure>
36+
<figure>
37+
<img src="deaths/m-poison-self.jpg">
38+
<figcaption>Romeo Poisons Himself</figcaption>
39+
</figure>
40+
<figure>
41+
<img src="deaths/w-stabbed-self.jpg">
42+
<figcaption>Juliet Stabs Herself</figcaption>
43+
</figure>
44+
<figure>
45+
<img src="deaths/w-heartbreak.jpg">
46+
<figcaption>and Lady Montague dies of a Broken Heart</figcaption>
47+
</figure>
48+
</section>
49+
</details>
50+
<details>
51+
<summary>Hamlet</summary>
52+
<section class="sec-grid">
53+
54+
<figure>
55+
<img src="deaths/m-stabbed-poisoned.jpg">
56+
<figcaption>Hamlet is Stabbed and Poisoned</figcaption>
57+
</figure>
58+
<figure>
59+
<img src="deaths/m-stabbed-poisoned.jpg">
60+
<figcaption>Claudius is Stabbed and Poisoned</figcaption>
61+
</figure>
62+
<figure>
63+
<img src="deaths/m-stabbed-poisoned.jpg">
64+
<figcaption>Laertes is Stabbed and Poisoned</figcaption>
65+
</figure>
66+
<figure>
67+
<img src="deaths/m-stabbed-curtain.jpg">
68+
<figcaption>Polonius is Stabbed through a curtain</figcaption>
69+
</figure>
70+
<figure>
71+
<img src="deaths/w-poisoned.jpg">
72+
<figcaption>Gertrude is Poisoned</figcaption>
73+
</figure>
74+
<figure>
75+
<img src="deaths/mm-beheaded.jpg">
76+
<figcaption>Rosencrantz and Guildenstern are Beheaded</figcaption>
77+
</figure>
78+
<figure>
79+
<img src="deaths/w-drown.jpg">
80+
<figcaption>and Ophelia Drowns</figcaption>
81+
</figure>
82+
</section>
83+
</details>
84+
<details>
85+
<summary>Othello</summary>
86+
<section class="sec-grid">
87+
<figure>
88+
<img src="deaths/w-stabbed.jpg">
89+
<figcaption>Emilia is Stabbed</figcaption>
90+
</figure>
91+
<figure>
92+
<img src="deaths/m-stabbed.jpg">
93+
<figcaption>Riderugi is Stabbed</figcaption>
94+
</figure>
95+
<figure>
96+
<img src="deaths/m-stabbed-self.jpg">
97+
<figcaption>Othello Stabs Himself</figcaption>
98+
</figure>
99+
<figure>
100+
<img src="deaths/w-pillow.jpg">
101+
<figcaption>and Desdemona is Smothered by a Pillow</figcaption>
102+
</figure>
103+
</section>
104+
</details>
105+
<details>
106+
<summary>Macbeth</summary>
107+
<section class="sec-grid">
108+
<figure>
109+
<img src="deaths/m-stabbed.jpg">
110+
<figcaption>Duncan is Stabbed</figcaption>
111+
</figure>
112+
<figure>
113+
<img src="deaths/mm-stabbed.jpg">
114+
<figcaption>Duncan's Guards are Stabbed</figcaption>
115+
</figure>
116+
<figure>
117+
<img src="deaths/m-stabbed.jpg">
118+
<figcaption>Banquo is Stabbed</figcaption>
119+
</figure>
120+
<figure>
121+
<img src="deaths/fam-stabbed.jpg">
122+
<figcaption>the MacDuff Family is Stabbed</figcaption>
123+
</figure>
124+
<figure>
125+
<img src="deaths/m-stabbed.jpg">
126+
<figcaption>Young Siward is Stabbed</figcaption>
127+
</figure>
128+
<figure>
129+
<img src="deaths/m-beheaded.jpg">
130+
<figcaption>Macbeth is Beheaded</figcaption>
131+
</figure>
132+
<figure>
133+
<img src="deaths/w-sleep.jpg">
134+
<figcaption>and Lady Macbeth dies from Lack of Sleep</figcaption>
135+
</figure>
136+
</section>
137+
</details>
138+
<details>
139+
<summary>Antony and Cleopatra</summary>
140+
<section class="sec-grid">
141+
<figure>
142+
<img src="deaths/m-shame.jpg">
143+
<figcaption>Enobarbus dies of Shame</figcaption>
144+
</figure>
145+
<figure>
146+
<img src="deaths/m-stabbed-self.jpg">
147+
<figcaption>Antony Stabs Himself</figcaption>
148+
</figure>
149+
<figure>
150+
<img src="deaths/w-poisoned-self.jpg">
151+
<figcaption>Charmian Poisons Herself</figcaption>
152+
</figure>
153+
<figure>
154+
<img src="deaths/w-drop.jpg">
155+
<figcaption>Iras Drops Dead</figcaption>
156+
</figure>
157+
<figure>
158+
<img src="deaths/w-snake.jpg">
159+
<figcaption>and Cleopatra dies from a Snakebite</figcaption>
160+
</figure>
161+
</section>
162+
</details>
163+
164+
</main>
15165
</main>
16166
</body>
17167

0 commit comments

Comments
 (0)