Artistic

Mini Project
Artistic Website
Group Members
Ashutosh Sahni
Aman Mishra
Lucky Yadav
Index
1. Abstract
2. Introduction
3. System Requirements
4. Data Flow Diagram (DFD) / Block Diagram
5. Snapshot of Webpage
6. Snapshot of Code
7. Pros & Cons
8. Future Updates
9. References
10. Thank You!
2
Abstract
Artistic website is about the web art gallery. Usually people visit Art
Gallery, see various artworks and may or may not purchase the
artwork. Same concept is applied to website also. Users can look at
the artwork from anywhere using their smart devices and can make
purchases also.
Website will contain link to different pages which may include,
Home Page, Explore Page, Artists Page, Profile Page, etc.
For every artwork post, user will be able to like the art, comment on
it share it or save it for later and can also buy the artwork.
Users will be able to see profile of various artists and their artwork.
3
Introduction
An art gallery is a room or a building in which visual art is displayed. In
Western cultures from the mid-15th Century, a gallery was any long, narrow
covered passage along a wall, first used in the sense of a place for art in the
1590s. The Long gallery in Elizabethan and Jacobean houses served many
purposes including the display of art. Historically, art is displayed as
evidence of status and wealth, and for religious art as objects of ritual or the
depiction of narratives. The first galleries were in the palaces of the
aristocracy, or in churches. As art collections grew, buildings became
dedicated to art, becoming the first art museums.
Among the modern reasons art may be displayed are aesthetic enjoyment,
education, historic preservation, or for marketing purposes. The term is used
to refer to establishments with distinct social and economic functions, both
public and private. Institutions that preserve a permanent collection may be
called either "gallery of art" or "museum of art". If the latter, the rooms where
art is displayed within the museum building are called galleries. Art galleries
that do not maintain a collection are either commercial enterprises for the sale
of artworks, or similar spaces operated by art cooperatives or non-profit
organizations. As part of the art world, art galleries play an important role in
maintaining the network of connections between artists, collectors, and art
experts that define fine art.
4
System Requirements
● As it is a website, so it will run on any modern browser

● Minimum of 1 GB RAM is enough
● Browser should support JavaScript
● Internet connection should be atleast 1mbps
5
Data Flow Diagram
6
Snapshots of Webpage
Snapshot of Home Page
7
Snapshot of Explore Page
8
Snapshot of Artists Page
9
Snapshots of Code
Code Snippet of profile
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Artistic.com | Sign-in</title>
<link rel="stylesheet" type="text/css"
href="styles.css" />
</head>
<body>
<main>
<header>
<h1>WELCOME TO ARTISTIC</h1>
</header>
<form action="#">
<label for="name">
<input type="text" id="email"
placeholder="Enter email" />
</label>
<br />
<label for="password">
<input type="password" id="password"
placeholder="Enter password" />
</label>
<br />
<label for="sumbit">
<input type="submit" class="submit"
value="SIGN IN" />
</label>
<br />
<label for="sumbit">
<input type="submit" class="create-
account" value="CREATE ACCOUNT" />
</label>
</form>
</main>
</body>
</html>
10
Code Snippet for profile styles.css
:root {
--bg: #4d4d4d;
--fg: #f8f8f8;
--heading-color: #f1e35e;
}
body {
font-family: 'Microsoft New Tai Lue';
background-color: var(--bg);
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
sans-serif;
}
* {
box-sizing: border-box;
}
h1 {
color: var(--heading-color);
font-weight: lighter;
}
input {
background-color: inherit;
color:var(--heading-color);
border: .7px solid var(--heading-color);
width: 315px;
padding:11px;
margin:3px;
}
.submit {
background-color: var(--heading-color);
color:var(--bg);
padding:11px;
border-radius: 1px;
width:fit-content;
margin-top: 13px;
cursor:pointer;
}
.create-account {
11
color:var(--heading-color);
padding:11px;
border-radius: 1px;
width:fit-content;
margin-top: 3px;
cursor: pointer;
}
main {
display: block;
width:max-content;
margin-left:auto;
margin-right: auto;
}
p {
color:var(--fg);
}
a {
color:var(--fg);
font-weight: bold;
}
12
Code snippets of home.html
<nav>
<div class="start">
<a href="#">Artistic.com</a>
</div>
<div class="mid">
<a href="#">HOME</a>
<a href="#">EXPLORE</a>
<a href="#">ARTISTS</a>
</div>
<div class="end">
<a href="#">PROFILE</a>
</div>
</nav>
<header>
<div class="header-content">
<h1 class="artists-heading">ARTISTS</h1>
<p class="header-para">Have a glimps at thousands
of artists.</p>
<p class="header-para">visit their profile</p>
<p class="header-para">Follow, if yuo like the
artwork.</p>
</div>
</header>
<main>
<h1 class="main-heading">POPULAR</h1>
<div class="container">
<div class="profile">
<img src="../images/sample 1.jpg"
class="profile-pic" alt="Profile Picture" /> <br />
Tom Lee
</div>
</div>
<h1 class="main-heading">ALL ARTISTS</h1>

<div class="container">
Larry
</div>
13
Siara Ben
</div>
</div>
</main>
<footer>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
</footer>
Code snipets of Home page style
nav {
display: grid;
grid-template-columns: auto auto auto;
position:fixed;
width:100%;
height: max-content;
}
a {
text-decoration: none;
color:var(--fg);
text-align: center;
padding:15px 20px;
display: inline-block;
transition:.3s;
}
.mid {
text-align: center;
}
.end {
text-align: right;
}
14
a:hover {
background-color: var(--fg);
color:var(--bg);
transition: .3s;
}
header {
background-image: url('../images/bg1.jpg');
height:100%;
display: flex;
background-size: cover;
}
.header-content {
margin-top:18%;
margin-left:10%;
}
.artists-heading {
background-color: #B9A582;
font-size: xxx-large;
padding:5px 8px;
width:max-content;
border:3px solid var(--bg);
}
.header-para {
background-color:#B9A582;
width:max-content;
padding:4px;
}
main {
display: flex;
flex-direction: column;
}
.main-heading {
color:#B9A582;
width: max-content;
padding:7px;
}
.container {
15
display: flex;
flex-direction: row;
text-align: center;
}
.profile-pic {
width:150px;
border-radius: 50%;
margin:0px 20px;
}
footer {
padding:50px;
color:var(--fg);
width:100%;
text-align: center;
margin-top:22px;
}
16
Pros and Cons
Pros
• Users will be able to explore the thousands of collection artworks, all at
their fingertips.
• As it is a website, so it is accessible to everyone, 24x7.
• Website is simple and easy to use.
• Website is responsive so you will be able to use it on your phone, tablet
or desktop with no problem.
• As it is a website, it will be regularly maintained and will get good
updates in future.
• Purchasing and selling artwork will be hassle free. Just few clicks and
you will get the job done!
• You can easily search for artist, or look for a particular category of art
you are interested in. And even you can short the arts by rating or
popularity.
Cons
• Server issues can occur
• Website crash can be a problem
• It cannot give the experience of real world art gallery
17
Future Updates
• Currently, the website has an old fashioned design, which will be

redesigned in future.
• There are lot of features missing and will be added in future.
18
References
• Images used in project is taken from Google Images search result
• Social Media icons used on website is taken from fontawesome.com
19
Thank You!
20

Artistic

Uploaded by

Copyright:

Available Formats

You might also like

Artistic

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Artistic

Uploaded by

Copyright:

Available Formats

Mini Project

● As it is a website, so it will run on any modern browser

Snapshot of Home Page

<h1 class="main-heading">ALL ARTISTS</h1>

Code snipets of Home page style

• Currently, the website has an old fashioned design, which will be

You might also like