Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 97be8cd

Browse files
The Art Landing Page
1 parent 837f9ef commit 97be8cd

File tree

2 files changed

+340
-0
lines changed

2 files changed

+340
-0
lines changed

‎96. 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>

‎96. 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)

AltStyle によって変換されたページ (->オリジナル) /