Skip to content

Commit 21d6254

Browse files
RakibRahmanRakibRahman
committed
Responsive website with media queries
1 parent d6dfe25 commit 21d6254

File tree

2 files changed

+210
-0
lines changed

2 files changed

+210
-0
lines changed

‎CSS-Media-Queries/responsive-demo.css

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400&display=swap");
2+
3+
body {
4+
margin: 0;
5+
font-family: Montserrat;
6+
}
7+
.flex-container {
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
background: rgb(11, 175, 240);
12+
}
13+
.flex-container .logo {
14+
margin-left: 16px;
15+
}
16+
.logo a {
17+
text-decoration: none;
18+
color: #0df17f;
19+
}
20+
.navigation {
21+
list-style: none;
22+
margin-left: auto;
23+
display: inline-flex;
24+
}
25+
.navigation li {
26+
margin-right: 16px;
27+
}
28+
.navigation li a {
29+
letter-spacing: 2px;
30+
text-decoration: none;
31+
font-weight: 600;
32+
color: crimson;
33+
}
34+
header {
35+
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
36+
url("https://images.unsplash.com/photo-1473968512647-3e447244af8f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
37+
height: 100vh;
38+
background-repeat: no-repeat;
39+
background-size: cover;
40+
background-position: center;
41+
display: grid;
42+
place-content: center;
43+
text-align: center;
44+
color: #0df17f;
45+
46+
font-family: Montserrat;
47+
}
48+
header h1 {
49+
font-size: 4em;
50+
font-weight: 400;
51+
margin-bottom: 0;
52+
}
53+
button {
54+
display: inline-block;
55+
line-height: 40px;
56+
padding: 0.3em 0.5em;
57+
-webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
58+
0 1px 3px rgba(0, 0, 0, 0.08);
59+
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
60+
background: #fff;
61+
border: none;
62+
border-radius: 0.5em;
63+
font-size: 1.5em;
64+
font-weight: 100;
65+
text-transform: uppercase;
66+
letter-spacing: 0.025em;
67+
color: cyan;
68+
outline: none;
69+
justify-self: center;
70+
}
71+
main {
72+
background: coral;
73+
display: flex;
74+
flex-direction: column;
75+
align-items: center;
76+
}
77+
#cards {
78+
background: whitesmoke;
79+
max-width: 1200px;
80+
display: flex;
81+
margin-top: 2em;
82+
}
83+
#cards section {
84+
padding: 4em;
85+
}
86+
#cards section:nth-of-type(2) {
87+
border-left: 2px dashed chartreuse;
88+
}
89+
#cards a {
90+
text-decoration: none;
91+
color: #0df17f;
92+
}
93+
.pic {
94+
width: 150px;
95+
height: 150px;
96+
object-fit: cover;
97+
border-radius: 25px;
98+
}
99+
100+
@media screen and (max-width: 900px) {
101+
.flex-container {
102+
flex-direction: column;
103+
}
104+
.navigation {
105+
display: flex;
106+
width: 100vw;
107+
justify-content: space-around;
108+
}
109+
110+
header {
111+
height: 50vh;
112+
}
113+
header h1 {
114+
font-size: 3em;
115+
}
116+
header h2 {
117+
font-size: 1em;
118+
}
119+
}
120+
@media screen and (max-width: 600px) {
121+
.flex-container {
122+
display: grid;
123+
place-items: center;
124+
}
125+
.navigation {
126+
flex-direction: column;
127+
align-items: center;
128+
justify-items: center;
129+
}
130+
.navigation li::before {
131+
content: "🎐";
132+
position: absolute;
133+
padding-right: 0;
134+
margin-left: -1em;
135+
color: #f00;
136+
}
137+
.navigation li {
138+
text-align: center;
139+
width: 100%;
140+
padding: 5px 9px 5px 1em;
141+
border-bottom: 1px solid rgb(230, 6, 6);
142+
}
143+
.navigation li a {
144+
color: whitesmoke;
145+
font-weight: 600;
146+
}
147+
.navigation li:hover {
148+
background: tomato;
149+
filter: opacity(85%);
150+
}
151+
#cards {
152+
flex-direction: column;
153+
font-size: 2ch;
154+
}
155+
#cards h3 {
156+
color: cornflowerblue;
157+
}
158+
#cards a {
159+
color: crimson;
160+
}
161+
#cards section:nth-of-type(2) {
162+
border-left: none;
163+
border-top: 2px dashed chartreuse;
164+
}
165+
}

‎CSS-Media-Queries/responsive-demo.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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>Responsive Demo</title>
7+
<link rel="stylesheet" href="responsive-demo.css">
8+
</head>
9+
<body>
10+
<div class="flex-container">
11+
<h1 class="logo"><a href="#">Brand</a></h1>
12+
<ul class="navigation">
13+
<li><a href="#">Home</a></li>
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Blog</a></li>
16+
<li><a href="#">Demo</a></li>
17+
<li><a href="#">Contact</a></li>
18+
</ul>
19+
</div>
20+
<header>
21+
<h1>Change Your Life</h1>
22+
<h2>Sign Up Today For Your Free Drone</h2>
23+
<button>Get Started</button>
24+
</header>
25+
26+
<main>
27+
<h2>Learn More About All This Stuff</h2>
28+
<section id="cards">
29+
<section>
30+
<img class="pic" src="https://images.unsplash.com/photo-1527977966376-1c8408f9f108?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=800&q=80" alt="">
31+
<h3>Always Improving</h3>
32+
<p>Cactus is an always-improving toolchain that gains new features every month. Our world-class engineering team constantly iterates upon every facet of the Cactus stack. And from Cactus Pay to Cactus ID, building on Cactus means you get early access to the latest technologies.</p>
33+
<a href="blah">Learn More Here &rarr;</a>
34+
</section>
35+
<section>
36+
<img class="pic" src="https://images.unsplash.com/photo-1602526214925-4fedda6a53df?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
37+
<h3>Global Scale</h3>
38+
<p>Cactus is an always-improving toolchain that gains new features every month. Our world-class engineering team constantly iterates upon every facet of the Cactus stack. And from Cactus Pay to Cactus ID, building on Cactus means you get early access to the latest technologies.</p>
39+
<a href="blah">Keep Reading Here &rarr;</a>
40+
</section>
41+
</section>
42+
43+
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)