Skip to content

Commit a76ec44

Browse files
HuXn-WebDevHuXn-WebDev
committed
The Art Landing Page
1 parent 58165f0 commit a76ec44

File tree

2 files changed

+340
-0
lines changed

2 files changed

+340
-0
lines changed

‎93. The Art/index.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>theArt</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<!-- Navbar -->
11+
<nav>
12+
<ul>
13+
<li><a href="">HuXn</a></li>
14+
</ul>
15+
16+
<div class="burger">
17+
<span></span>
18+
<span></span>
19+
<span></span>
20+
</div>
21+
</nav>
22+
<!-- End Navbar -->
23+
24+
<header>
25+
<h1 class="main-headings">
26+
WHAT <br />
27+
IS CALLED ART?
28+
</h1>
29+
<p class="primary-headings">
30+
Art, also called (to distinguish it from other art forms) visual art, a
31+
<span class="bg-gray"> visual object or experience </span> consciously
32+
created through an expression of skill or imagination.
33+
</p>
34+
</header>
35+
36+
<main>
37+
<img
38+
src="https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=745&q=80"
39+
class="img"
40+
/>
41+
<img
42+
src="https://images.unsplash.com/flagged/photo-1572392640988-ba48d1a74457?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
43+
class="img"
44+
/>
45+
<img
46+
src="https://images.unsplash.com/photo-1588571590924-433cc2020a12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
47+
class="img"
48+
/>
49+
<img
50+
src="https://images.unsplash.com/photo-1495462911434-be47104d70fa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
51+
class="img"
52+
/>
53+
<img
54+
src="https://images.unsplash.com/photo-1579783901586-d88db74b4fe4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=748&q=80"
55+
class="img"
56+
/>
57+
<img
58+
src="https://images.unsplash.com/photo-1579783901837-c78c2310be05?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=804&q=80"
59+
class="img"
60+
/>
61+
</main>
62+
63+
<section class="section-three">
64+
<h1 class="main-headings">7 TYPES OF ART</h1>
65+
<p class="primary-headings">
66+
The seven different art forms are
67+
<span class="bg-gray">
68+
Painting, Sculpture, Literature, Architecture, Theater, Film, and
69+
Music
70+
</span>
71+
. However, back in the day, the seven different art forms were called
72+
the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic,
73+
Geometry, Astronomy, and Music.
74+
</p>
75+
76+
<div class="list">
77+
<div class="item">
78+
<h1>PAINTING</h1>
79+
<img
80+
src="https://images.unsplash.com/photo-1579965342575-16428a7c8881?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=762&q=80"
81+
/>
82+
</div>
83+
<div class="item">
84+
<h1>SCULPTURE</h1>
85+
<img
86+
src="https://images.unsplash.com/photo-1637666505754-7416ebd70cbf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
87+
/>
88+
</div>
89+
<div class="item">
90+
<h1>LITERATURE</h1>
91+
<img
92+
src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
93+
/>
94+
</div>
95+
<div class="item">
96+
<h1>ARCHITECTURE</h1>
97+
<img
98+
src="https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2020&q=80"
99+
/>
100+
</div>
101+
<div class="item">
102+
<h1>CINEMA</h1>
103+
<img
104+
src="https://images.unsplash.com/photo-1604975701397-6365ccbd028a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
105+
/>
106+
</div>
107+
<div class="item">
108+
<h1>MUSIC</h1>
109+
<img
110+
src="https://images.unsplash.com/photo-1598547535077-26d10ae80496?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=781&q=80"
111+
/>
112+
</div>
113+
<div class="item">
114+
<h1>THEATER</h1>
115+
<img
116+
src="https://images.unsplash.com/photo-1578920568769-3c1b145bc9ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
117+
/>
118+
</div>
119+
</div>
120+
</section>
121+
122+
<footer>
123+
<div class="logo-container">
124+
<h1>Logo</h1>
125+
<p>
126+
Lorem Ipsum is simply dummy text of the printing and typesetting
127+
industry. Lorem Ipsum has been the industry's standard dummy text ever
128+
since the 1500s.
129+
</p>
130+
</div>
131+
132+
<div class="about-company">
133+
<div class="container">
134+
<h1>About</h1>
135+
<p>News & Blog</p>
136+
<p>Features</p>
137+
<p>About Us</p>
138+
</div>
139+
<div class="container">
140+
<h1>Company</h1>
141+
<p>How We Work?</p>
142+
<p>Capital</p>
143+
<p>Security</p>
144+
</div>
145+
<div class="container">
146+
<h1>Support</h1>
147+
<p>FAQs</p>
148+
<p>Support</p>
149+
<p>Contact Us</p>
150+
</div>
151+
</div>
152+
</footer>
153+
</body>
154+
</html>

‎93. The Art/style.css‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
/* Fonts */
8+
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");
9+
@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap");
10+
11+
/* Basic */
12+
body {
13+
background-color: #ebeae9;
14+
}
15+
16+
html {
17+
font-family: "Open Sans", sans-serif;
18+
}
19+
20+
nav {
21+
display: flex;
22+
justify-content: space-between;
23+
align-items: center;
24+
color: #fff;
25+
padding: 20px;
26+
margin-bottom: 5rem;
27+
}
28+
29+
nav ul {
30+
margin-left: 5rem;
31+
list-style: none;
32+
}
33+
34+
li a {
35+
text-decoration: none;
36+
color: #000;
37+
}
38+
39+
nav .burger {
40+
margin-right: 5rem;
41+
cursor: pointer;
42+
}
43+
44+
nav .burger span {
45+
height: 4px;
46+
border: 2px solid black;
47+
margin: 4px;
48+
background: #000;
49+
}
50+
51+
header {
52+
margin: 6rem;
53+
}
54+
55+
.main-headings {
56+
width: 50%;
57+
font-size: 3rem;
58+
}
59+
60+
.primary-headings {
61+
width: 50%;
62+
margin-top: 3rem;
63+
font-size: 1.5rem;
64+
line-height: 30px;
65+
}
66+
67+
.bg-gray {
68+
background: rgb(53, 53, 53);
69+
color: #fff;
70+
padding: 2px 10px;
71+
font-weight: bold;
72+
}
73+
/* Header End */
74+
75+
/* Main Start */
76+
main {
77+
margin: 0 4rem;
78+
display: flex;
79+
flex-wrap: wrap;
80+
margin: 40px;
81+
}
82+
83+
main .img {
84+
width: 50%;
85+
}
86+
87+
/* SECTION THREE START */
88+
.section-three {
89+
margin-left: 5rem;
90+
}
91+
92+
.section-three .primary-headings {
93+
margin-bottom: 10rem;
94+
}
95+
96+
.list {
97+
display: flex;
98+
flex-wrap: wrap;
99+
justify-content: center;
100+
align-items: center;
101+
}
102+
103+
.section-three .item h1 {
104+
font-size: 2rem;
105+
color: rgb(53, 53, 53);
106+
margin-left: 1rem;
107+
}
108+
109+
.section-three img {
110+
width: 400px;
111+
height: 500px;
112+
margin: 50px;
113+
}
114+
/* SECTION THREE END */
115+
116+
/* FOOTER START */
117+
footer {
118+
background: var(--primary-color);
119+
margin-top: 10rem;
120+
display: flex;
121+
flex-wrap: wrap;
122+
justify-content: space-around;
123+
align-items: center;
124+
height: 100vh;
125+
color: #fff;
126+
}
127+
128+
footer .logo-container h1 {
129+
font-size: 4rem;
130+
font-family: var(--main-font);
131+
margin-bottom: 20px;
132+
}
133+
134+
footer .logo-container p {
135+
max-width: 400px;
136+
font-family: sans-serif;
137+
line-height: 25px;
138+
}
139+
140+
footer .about-company {
141+
display: flex;
142+
flex-wrap: wrap;
143+
justify-content: center;
144+
align-items: center;
145+
}
146+
147+
footer .about-company .container {
148+
margin-right: 40px;
149+
margin-top: 20px;
150+
}
151+
152+
.about-company .container h1 {
153+
margin-bottom: 50px;
154+
}
155+
156+
.about-company .container p {
157+
font-family: sans-serif;
158+
margin-bottom: 20px;
159+
}
160+
161+
footer {
162+
height: 100vh;
163+
background: rgb(43, 43, 43);
164+
}
165+
166+
@media screen and (max-width: 740px) {
167+
header .main-headings {
168+
width: 100%;
169+
}
170+
header .primary-headings {
171+
width: 100%;
172+
font-size: 1.5rem;
173+
}
174+
175+
.section-three .main-headings {
176+
width: 100%;
177+
}
178+
.section-three .primary-headings {
179+
width: 100%;
180+
font-size: 1.5rem;
181+
}
182+
183+
.section-three img {
184+
margin: 0;
185+
}
186+
}

0 commit comments

Comments
 (0)