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+
<htmllang="en">
2+
<head>
3+
<metacharset="UTF-8" />
4+
<metahttp-equiv="X-UA-Compatible" content="IE=edge" />
5+
<metaname="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>theArt</title>
7+
<linkrel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<!-- Navbar -->
11+
<nav>
12+
<ul>
13+
<li><ahref="">HuXn</a></li>
14+
</ul>
15+
16+
<divclass="burger">
17+
<span></span>
18+
<span></span>
19+
<span></span>
20+
</div>
21+
</nav>
22+
<!-- End Navbar -->
23+
24+
<header>
25+
<h1class="main-headings">
26+
WHAT <br/>
27+
IS CALLED ART?
28+
</h1>
29+
<pclass="primary-headings">
30+
Art, also called (to distinguish it from other art forms) visual art, a
31+
<spanclass="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+
<sectionclass="section-three">
64+
<h1class="main-headings">7 TYPES OF ART</h1>
65+
<pclass="primary-headings">
66+
The seven different art forms are
67+
<spanclass="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+
<divclass="list">
77+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="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+
<divclass="about-company">
133+
<divclass="container">
134+
<h1>About</h1>
135+
<p>News & Blog</p>
136+
<p>Features</p>
137+
<p>About Us</p>
138+
</div>
139+
<divclass="container">
140+
<h1>Company</h1>
141+
<p>How We Work?</p>
142+
<p>Capital</p>
143+
<p>Security</p>
144+
</div>
145+
<divclass="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+
@importurl("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");
9+
@importurl("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+
navul{
30+
margin-left:5rem;
31+
list-style: none;
32+
}
33+
34+
lia{
35+
text-decoration: none;
36+
color:#000;
37+
}
38+
39+
nav .burger{
40+
margin-right:5rem;
41+
cursor: pointer;
42+
}
43+
44+
nav .burgerspan{
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:2px10px;
71+
font-weight: bold;
72+
}
73+
/* Header End */
74+
75+
/* Main Start */
76+
main{
77+
margin:04rem;
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 .itemh1{
104+
font-size:2rem;
105+
color:rgb(53,53,53);
106+
margin-left:1rem;
107+
}
108+
109+
.section-threeimg{
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-containerh1{
129+
font-size:4rem;
130+
font-family:var(--main-font);
131+
margin-bottom:20px;
132+
}
133+
134+
footer .logo-containerp{
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 .containerh1{
153+
margin-bottom:50px;
154+
}
155+
156+
.about-company .containerp{
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-threeimg{
184+
margin:0;
185+
}
186+
}

0 commit comments

Comments
(0)