Skip to content

Commit b6a4ad2

Browse files
cold-magmacold-magma
committed
sentientonion update coming soon
1 parent 4382df3 commit b6a4ad2

File tree

9 files changed

+239
-0
lines changed

9 files changed

+239
-0
lines changed

‎sentientonion/app.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var popper = document.getElementById("popup");
2+
var store = document.getElementById("store");
3+
var inv = document.getElementById("comingsoon");
4+
store.addEventListener("click", clicker);
5+
inv.addEventListener("click", clicker);
6+
function clicker(){
7+
popper.classList.toggle("popactive");
8+
}

‎sentientonion/boatonriver.png‎

1.98 MB
Loading

‎sentientonion/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!--
2+
Author: Amal Nair
3+
Git: @cold-magma
4+
IG: @sentientonion
5+
-->
6+
<!DOCTYPE html>
7+
<html>
8+
<head>
9+
<title>SentientOnion</title>
10+
<meta charset="UTF-8">
11+
<meta name="description" content="sentientonion">
12+
<meta name="keywords" content="art, digitalart, illustration, ">
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
14+
<meta name="author" content="coldmagma">
15+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
16+
<link rel="stylesheet" type="text/css" href="style.css">
17+
</head>
18+
<body>
19+
<header>
20+
<h1 class="mainhead">SENTIENTONION</h1>
21+
<nav>
22+
<a class="navlinks" href="">HOME</a>
23+
<a class="navlinks" href="">ABOUT</a>
24+
<a class="navlinks" href="">CONTACT</a>
25+
<a id="store" class="navlinks">STORE</a>
26+
</nav>
27+
</header>
28+
<div class="content1">I make art. Wanna see some? Scroll down...</div>
29+
<div class="imgdiv">
30+
<div class="slider">
31+
<div id="img1" class="img"></div>
32+
<div id="img2" class="img"></div>
33+
<div id="img3" class="img"></div>
34+
<div id="img4" class="img"></div>
35+
<div id="img5" class="img"></div>
36+
</div>
37+
</div>
38+
<div class="content1">
39+
<p>An artist from bangalore.</p>
40+
<p>Want custom art or commissions? Contact me.</p>
41+
</div>
42+
<div class="content1">
43+
Like that? find more on my instagram.
44+
<div class="igdiv"><a href="https://www.instagram.com/sentientonion/"><img class="insta" src="instagram.png"></a></div>
45+
</div>
46+
<div class="popup" id="popup">
47+
<div id="comingsoon" class="comingsoon">CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE CLICK HERE TO CLOSE</div>
48+
<div class="comingsoonpopup"><p>Coming soon...</p><p>Stay tuned for the update.</p></div>
49+
</div>
50+
<script type="text/javascript" src="app.js"></script>
51+
</body>
52+
</html>

‎sentientonion/instagram.png‎

25.7 KB
Loading

‎sentientonion/ladakh.png‎

8.15 MB
Loading

‎sentientonion/lonelygirl.png‎

19.9 MB
Loading

‎sentientonion/mooncat.png‎

16.1 MB
Loading

‎sentientonion/style.css‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
*{
2+
padding: 0;
3+
margin:0;
4+
}
5+
html{
6+
scroll-behavior: smooth;
7+
}
8+
body{
9+
display: flex;
10+
background:#214a3c;
11+
width: 100%;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: space-around;
15+
overflow-x: hidden;
16+
}
17+
.mainhead{
18+
font-family: Montserrat, sans-serif;
19+
font-size: 32px;
20+
text-align: center;
21+
letter-spacing: 5px;
22+
font-weight: bold;
23+
padding-top:40px;
24+
padding-bottom: 40px;
25+
color: #66ff91;
26+
text-shadow: 1px 1px 1px #40a15c, 2px 2px 1px #40a15c, 3px 3px 1px #40a15c, 4px 4px 1px #40a15c, 5px 5px 1px #40a15c;
27+
transition: all 0.5s ease;
28+
}
29+
.mainhead:hover{
30+
transform: translate(6px,6px);
31+
text-shadow:none;
32+
}
33+
nav{
34+
width: 80vw;
35+
display: flex;
36+
}
37+
.navlinks{
38+
width: 20vw;
39+
font-family: Montserrat, sans-serif;
40+
font-size: 22px;
41+
text-align: center;
42+
text-decoration: none;
43+
letter-spacing: 2px;
44+
font-weight: bold;
45+
color: #66ff91;
46+
transition: all 0.5s ease;
47+
}
48+
.navlinks:hover{
49+
transform: translate(-6px,-6px);
50+
text-shadow: 1px 1px 1px #40a15c, 2px 2px 1px #40a15c, 3px 3px 1px #40a15c, 4px 4px 1px #40a15c, 5px 5px 1px #40a15c;
51+
}
52+
.content1{
53+
width: 80%;
54+
height: 80vh;
55+
display: flex;
56+
flex-direction: column;
57+
justify-content: space-around;
58+
align-items: center;
59+
font-family: Montserrat, sans-serif;
60+
font-size: 20px;
61+
text-align: center;
62+
letter-spacing: 5px;
63+
padding-top:40px;
64+
padding-bottom: 40px;
65+
color: #66ff91;
66+
}
67+
.imgdiv{
68+
width: 60%;
69+
height: 95vh;
70+
display: flex;
71+
align-items: center;
72+
justify-content: space-around;
73+
}
74+
.slider{
75+
width: 500%;
76+
height: 100vh;
77+
display: flex;
78+
animation: slide 30s ease infinite;
79+
}
80+
.img{
81+
width: 50vw;
82+
height: 90vh;
83+
}
84+
#img1{
85+
background: url("uniface.png");
86+
background-size: 100%;
87+
background-repeat: no-repeat;
88+
}
89+
#img2{
90+
background: url("boatonriver.png");
91+
background-size: 100%;
92+
background-repeat: no-repeat;
93+
}
94+
#img3{
95+
background: url("lonelygirl.png");
96+
background-size: 100%;
97+
background-repeat: no-repeat;
98+
}
99+
#img4{
100+
background: url("mooncat.png");
101+
background-size: 100%;
102+
background-repeat: no-repeat;
103+
}
104+
#img5{
105+
background: url("ladakh.png");
106+
background-size: 100%;
107+
background-repeat: no-repeat;
108+
}
109+
.insta{
110+
width: 10%;
111+
border-radius: 50px;
112+
transition: all 1.25s ease;
113+
}
114+
.insta:hover{
115+
background:#40a15c;
116+
}
117+
.popup{
118+
visibility: hidden;
119+
position: absolute;
120+
display: flex;
121+
align-items: center;
122+
justify-content: space-around;
123+
top :0;
124+
left: 0;
125+
width: 100%;
126+
height: 100vh;
127+
opacity: 0;
128+
transition: opacity 0.5s ease;
129+
}
130+
.comingsoon{
131+
width: 100%;
132+
height: 100vh;
133+
top: 0;
134+
left: 0;
135+
position: absolute;
136+
background: black;
137+
opacity: 0.4;
138+
font-family: Montserrat, sans-serif;
139+
font-size: 18px;
140+
text-align: justify;
141+
letter-spacing: 5px;
142+
color: white;
143+
text-transform: rotate(90deg);
144+
font-style: italic;
145+
font-weight: bold;
146+
}
147+
.comingsoonpopup{
148+
background: #214a3c;
149+
width: 40%;
150+
position: absolute;
151+
height: 40vh;
152+
display: flex;
153+
flex-direction: column;
154+
justify-content: space-around;
155+
align-items: center;
156+
font-family: Montserrat, sans-serif;
157+
font-size: 20px;
158+
text-align: center;
159+
letter-spacing: 5px;
160+
padding-top:40px;
161+
padding-bottom: 40px;
162+
color: #66ff91;
163+
border-radius: 50px;
164+
}
165+
@keyframes slide{
166+
0%{
167+
transform: translate(-30%,0);
168+
}
169+
50%{
170+
transform: translate(30%,0);
171+
}
172+
100%{
173+
transform:translate(-30%,0);
174+
}
175+
}
176+
.popactive{
177+
visibility: visible;
178+
opacity: 1;
179+
}

‎sentientonion/uniface.png‎

2.74 MB
Loading

0 commit comments

Comments
 (0)