updated design and files
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 99 KiB |
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>alba's art</title>
|
||||
<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="skills.css"/>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="index.html">
|
||||
<h2 id="home">
|
||||
◄ HOME
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<div id="my-name">
|
||||
|
||||
<h1>
|
||||
art <br>
|
||||
& customs
|
||||
</h1>
|
||||
|
||||
<!-- <a href="index.html">
|
||||
<img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
|
||||
</a> -->
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="my-skills">
|
||||
|
||||
<h2> WHAT I DO </h2>
|
||||
|
||||
<li>
|
||||
<a href="https://madhubani.nic.in/handicraft/">
|
||||
madhubani
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.123rf.com/history-print-design/">
|
||||
print design
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://suswanachowdhury.com/capsule/">
|
||||
commisioned work
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="linkture">
|
||||
<ul id="my-features">
|
||||
|
||||
<!-- <h2>
|
||||
HOW I DO IT </h2>
|
||||
|
||||
<li>
|
||||
Illustrator </li>
|
||||
|
||||
<li>
|
||||
InDesign
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Acrylic Painting
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul id="my-links"> -->
|
||||
<h2> EXPLORE </h2>
|
||||
<li>
|
||||
<a href="Coloring Pages by Alba Rajanibala.pdf" target="_blank" alt="Coloring Sheets by Alba Rajanibala">
|
||||
<img src="coloring.png" alt="Coloring Sheets by Alba Rajanibala" id="madhu" height="165px">
|
||||
</a>
|
||||
|
||||
<a href="sitar.jpg" target="_blank" alt="Sitar by Alba Rajanibala">
|
||||
<img src="sitar.jpg" alt="Sitar by Alba Rajanibala" id="sitar" height="165px">
|
||||
</a>
|
||||
|
||||
<a href="charity2.pdf" target="_blank" alt="Shakti by Alba Rajanibala">
|
||||
<img src="charity.jpg" alt="Shakti by Alba Rajanibala" id="charity" height="165px">
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
designed and developed by alba rajanibala
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>alba's work</title>
|
||||
<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="skills.css"/>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="index.html">
|
||||
<h2 id="home">
|
||||
◄ HOME
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<div id="my-name">
|
||||
|
||||
<h1>
|
||||
strategy <br>
|
||||
& consulting
|
||||
</h1>
|
||||
|
||||
<!-- <a href="index.html">
|
||||
<img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
|
||||
</a> -->
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="my-skills">
|
||||
|
||||
<h2> WORKED AT </h2>
|
||||
|
||||
<li>
|
||||
<a href="https://www.razorfish.com/" alt="Razorfish Publicis Groupe" target="_blank">
|
||||
razorfish @ Publicis
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.mccannny.com/" alt="McCann New York" target="_blank">
|
||||
McCann New York @ IPG
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.groupsjr.com" alt="Group SJR" target="_blank">
|
||||
Group SJR @ WPP
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="linkture">
|
||||
<ul id="my-features">
|
||||
|
||||
<h2>
|
||||
WHAT I DO </h2>
|
||||
|
||||
<li>
|
||||
analytics & reporting </li>
|
||||
|
||||
<li>
|
||||
go-to-market strategy
|
||||
</li>
|
||||
|
||||
<li>
|
||||
product & .com strategy
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul id="my-links">
|
||||
<h2> EXPLORE </h2>
|
||||
<li>
|
||||
<a href="http://linkedin.com/in/albarajanibala" alt="Alba Rajanibala LinkedIn" target="_blank">
|
||||
<img src="linkedin.png" alt="Coloring Sheets by Alba Rajanibala" id="madhu" height="165px">
|
||||
</a>
|
||||
|
||||
<a href="Alba Rajanibala Resume.pdf" alt="Alba Rajanibala Resume" target="_blank">
|
||||
<img src="resume.png" alt="Sitar by Alba Rajanibala" id="sitar" height="165px">
|
||||
</a>
|
||||
|
||||
<a href="mailto:alba.rajanibalaa@gmail.com" target="_blank">
|
||||
<img src="email.png" alt="Shakti by Alba Rajanibala" id="charity" height="165px">
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
designed and developed by alba rajanibala
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 103 KiB |
@@ -0,0 +1,238 @@
|
||||
@keyframes AnimationName {
|
||||
0%{background-position:0% 90%}
|
||||
50%{background-position:100% 5%}
|
||||
100%{background-position:0% 90%}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
src: url(PlayfairDisplay-Regular.otf);
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: myFirstFont;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, black, #444444);
|
||||
background-size: 100% 600%;
|
||||
animation: AnimationName 8s ease infinite;
|
||||
/* background-color:black; */
|
||||
cursor: url("sparkle.png"), auto;
|
||||
height: 100vh;
|
||||
padding:6rem;
|
||||
}
|
||||
|
||||
#my-name {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
#my-photo {
|
||||
width:250px;
|
||||
height:250px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#my-photo:hover {
|
||||
opacity: 100;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#linkture{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family:Playfair Display;
|
||||
font-size:200px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 100;
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 6rem;
|
||||
color:rgb(112, 111, 111);
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style:none;
|
||||
padding:0;
|
||||
line-height: 2;
|
||||
font-family: lora;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-family:'Lora';
|
||||
letter-spacing: .25rem;
|
||||
line-height:2.5;
|
||||
color:rgb(112, 111, 111);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: url("sparkle2.png"), auto;
|
||||
color:rgb(112, 111, 111);
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color:black;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 10rem;
|
||||
padding-right: 5rem;
|
||||
font-family:'lora';
|
||||
font-style: italic;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color:rgb(112, 111, 111);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top:3rem;
|
||||
margin-bottom: 3rem;
|
||||
width: fit-content;
|
||||
font-family:'Glacial Indifference';
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
background-color:rgb(94, 92, 92);
|
||||
color:balck;
|
||||
line-height: initial;
|
||||
padding:.5rem;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#home:hover{
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1440px) {
|
||||
|
||||
/* POSITIONING */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: calc(100vh - 8rem);
|
||||
padding:8rem 16rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#my-name, #linkture, footer {
|
||||
flex-direction: row;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#my-name h1, #my-links, #my-features {
|
||||
flex:1;
|
||||
}
|
||||
|
||||
#linkture {
|
||||
margin-top: 3rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#my-photo {
|
||||
width: 310px;
|
||||
height:310px;
|
||||
}
|
||||
|
||||
h1 a {
|
||||
cursor: url("sparkle2.png"), auto;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
color:#d9e021;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
#my-photo:hover {
|
||||
opacity: 100;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* FONT FORMAT */
|
||||
|
||||
h1 {
|
||||
font-size:200px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
margin-block-end:0;
|
||||
line-height: 1;
|
||||
letter-spacing: .2rem;
|
||||
font-style: PlayfairDisplay;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin:0;
|
||||
letter-spacing:2px;
|
||||
font-size:12px;
|
||||
padding:3px;
|
||||
background-color:rgb(134, 134, 134);
|
||||
color:balck;
|
||||
}
|
||||
|
||||
#my-skills li {
|
||||
font-size: 24px;
|
||||
margin-top: .8rem;
|
||||
font-style: none;
|
||||
}
|
||||
|
||||
#my-links li {
|
||||
font-size: 24px;
|
||||
margin-top:1rem;
|
||||
position:top;
|
||||
}
|
||||
|
||||
#my-features li {
|
||||
font-size: 24px;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-family:'lora';
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
text-align: justify;
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
|
||||
footer:hover {
|
||||
color:#d9e021;
|
||||
cursor: url("sparkle2.png"), auto;
|
||||
}
|
||||
|
||||
#home h2:hover{
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
img#madhu:hover, img#sitar:hover, img#charity:hover {
|
||||
opacity: 100;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: scale(1.1);
|
||||
cursor: url("sparkle2.png"), auto;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color:black;
|
||||
}
|
||||
}
|
||||
@@ -2,248 +2,95 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Alba Rajanibala</title>
|
||||
<title>alba r.</title>
|
||||
<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="index.css"/>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79359868-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-79359868-2');
|
||||
</script>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
body {background: linear-gradient(36deg, #c2ca00, #d079d3, #dbff57);
|
||||
background-size: 600% 600%;
|
||||
animation: AnimationName 8s ease infinite;
|
||||
cursor: url('pointerb.png'), auto;
|
||||
}
|
||||
|
||||
@keyframes AnimationName {
|
||||
0%{background-position:0% 90%}
|
||||
50%{background-position:100% 5%}
|
||||
100%{background-position:0% 90%}
|
||||
}
|
||||
|
||||
|
||||
#section-a, #section-b, #section-c {
|
||||
display:flex;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
#my-name {
|
||||
width: 800px;
|
||||
padding-top: 120px;
|
||||
padding-left: 300px;
|
||||
padding-bottom: 80px;
|
||||
font-family: Georgia;
|
||||
font-size: 90px;
|
||||
font-kerning: auto;
|
||||
line-height:1.2;
|
||||
letter-spacing: 3px
|
||||
}
|
||||
|
||||
#my-photo {
|
||||
flex:1;
|
||||
padding-right: 300px;
|
||||
padding-left: 300px;
|
||||
padding-top:100px;
|
||||
}
|
||||
|
||||
img {
|
||||
width:300px;
|
||||
height:300px;
|
||||
object-fit:cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#section-title {
|
||||
font-family:"Glacial Indifference";
|
||||
font-size:13px;
|
||||
font-weight:bold;
|
||||
padding-left: 300px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#highlight{
|
||||
background-color:black;
|
||||
color:white;
|
||||
width:fit-content;
|
||||
height:16px;
|
||||
}
|
||||
|
||||
#my-skills {
|
||||
padding-left: 300px;
|
||||
width:fit-content;
|
||||
font-family: Lora;
|
||||
font-size: 30px;
|
||||
line-height: 2.5;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
#my-name:hover {
|
||||
color:whitesmoke;
|
||||
font-family:"Helvetica";
|
||||
cursor: url('pointerb.png'), auto;
|
||||
}
|
||||
|
||||
#hilit:hover {
|
||||
font-family:"Helvetica";
|
||||
color:white;
|
||||
cursor: url('pointerb.png'), auto;
|
||||
}
|
||||
|
||||
#my-links {
|
||||
width: 300px;
|
||||
padding-left: 300px;
|
||||
padding-top:20px;
|
||||
font-family: Lora;
|
||||
font-size:20px;
|
||||
font-style: italic;
|
||||
line-height: 2.5;
|
||||
text-decoration:none;
|
||||
color:black;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color:black;
|
||||
cursor: url('pointerb.png'), auto;
|
||||
}
|
||||
|
||||
#designotw {
|
||||
align-content: flex-start;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
#my-extras {
|
||||
padding-top: 20px;
|
||||
padding-left:58px;
|
||||
font-family: Lora;
|
||||
font-size:20px;
|
||||
font-style: italic;
|
||||
line-height: 2.5;
|
||||
text-decoration:none;
|
||||
color:black;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
flex:1;
|
||||
width: 400px;
|
||||
text-align: right;
|
||||
padding-top:137px;
|
||||
padding-right: 300px;
|
||||
font-family:"lora";
|
||||
font-size:15px;
|
||||
font-weight:bold;
|
||||
font-style: italic;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="section-a">
|
||||
|
||||
<div class="title-tag" id="my-name">
|
||||
Alba <br>
|
||||
Rajanibala <br>
|
||||
<div id="my-name">
|
||||
|
||||
</div>
|
||||
<h1>
|
||||
alba r. <br>
|
||||
</h1>
|
||||
|
||||
<div id="my-photo">
|
||||
|
||||
<img src="my-photo.jpg" alt="Alba Rajanibala" height="350", width="350">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="section-title"> <div id="highlight">
|
||||
ASK ME ABOUT
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="my-skills">
|
||||
|
||||
<a href="https://linkedin.com/in/albarajanibala" target="_blank">
|
||||
<div id="hilit">
|
||||
strategy consulting <br>
|
||||
</div>
|
||||
<a href="index.html">
|
||||
<img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
|
||||
</a>
|
||||
<div id="hilit">
|
||||
information design <br/>
|
||||
</div>
|
||||
<div id="hilit">
|
||||
customs by alba <br/> <br>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="my-skills">
|
||||
|
||||
<div id="section-b">
|
||||
<h2> HELLO </h2>
|
||||
|
||||
<div id="section-title"> <div id="highlight">
|
||||
MORE
|
||||
</div>
|
||||
</div>
|
||||
<li>
|
||||
thanks for visiting. <br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<div id="section-title">
|
||||
<div id="designotw">
|
||||
<div id="highlight">
|
||||
DESIGN OF THE WEEK
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div id="section-c">
|
||||
<div id="my-links">
|
||||
<a href="Alba Rajanibala Resume.pdf" target="_blank">
|
||||
<div id="hilit">
|
||||
resume
|
||||
</div>
|
||||
|
||||
<div id="linkture">
|
||||
<ul id="my-features">
|
||||
|
||||
<h2>
|
||||
HERE'S WHAT I DO
|
||||
</h2>
|
||||
|
||||
<li id="sc">
|
||||
<a href="consulting.html">
|
||||
strategy & consulting
|
||||
</a> </li>
|
||||
<li id="id">
|
||||
<a href="art.html">
|
||||
art & customs
|
||||
</a></li>
|
||||
<li id="ca">
|
||||
<a href="otherthings.html">
|
||||
& some other things
|
||||
</a>
|
||||
<div id="hilit">
|
||||
portfolio
|
||||
</div>
|
||||
<div id="hilit">
|
||||
customs
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul> -->
|
||||
|
||||
<!-- <ul id="my-links">
|
||||
<h2>
|
||||
WHAT ELSE I DO
|
||||
</h2>
|
||||
<li>
|
||||
<a href="https://www.chromewatchparty.com" target="_blank">
|
||||
helping launch Chrome WatchParty
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="shop.rajanibala.com" target="_blank">
|
||||
creating some Custom Art
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://stealingfirebook.com/" target="_blank">
|
||||
updating my resume
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul> -->
|
||||
|
||||
<footer>
|
||||
designed and developed by alba rajanibala
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="my-extras">
|
||||
<div id="hilit">
|
||||
<a href="https://xkcd.com/832/" target="_blank"></a>
|
||||
week of may 31
|
||||
</a>
|
||||
</div>
|
||||
<div id="hilit">
|
||||
<a href="https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~200375~3001080?" target="_blank">
|
||||
week of may 24
|
||||
</a>
|
||||
</div>
|
||||
<div id="hilit">
|
||||
<a href="https://www.instagram.com/p/B92bg5ClPNf/" target="_blank">
|
||||
week of may 17
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
designed & developed by alba rajanibala
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Alba Rajanibala</title>
|
||||
<link rel="shortcut icon" href="tabicon.jpg" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="skills.css"/>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2 id="home">
|
||||
<a href="index.html">
|
||||
◄ HOME
|
||||
</a></h2>
|
||||
|
||||
<div id="my-name">
|
||||
|
||||
<h1>
|
||||
information <br>
|
||||
design
|
||||
</h1>
|
||||
|
||||
<!-- <a href="index.html">
|
||||
<img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
|
||||
</a> -->
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="my-skills">
|
||||
|
||||
<h2> WHAT I DO </h2>
|
||||
|
||||
<li>
|
||||
data visualization
|
||||
</li>
|
||||
<li>
|
||||
information design
|
||||
</li>
|
||||
<li>
|
||||
storytelling
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="linkture">
|
||||
<ul id="my-features">
|
||||
|
||||
<h2>
|
||||
HOW I DO IT </h2>
|
||||
|
||||
<li>
|
||||
<a href="https://public.tableau.com/en-us/gallery/?tab=viz-of-the-day&type=viz-of-the-day" target="_blank">
|
||||
Tableau</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://www.adobe.com/products/illustrator.html" target="_blank">
|
||||
Illustrator
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://www.adobe.com/products/indesign.html" target="_blank">
|
||||
InDesign
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul id="my-links">
|
||||
<h2> INSPIRATION </h2>
|
||||
<li>
|
||||
<a href="https://monachalabi.com/" target="_blank">
|
||||
Mona Chalabi
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="http://giorgialupi.com/" target="_blank">
|
||||
Giorgia Lupi
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://www.davidrumsey.com/luna/servlet/view/search?q=author=%22Rand%20McNally%20and%20Company%22&sort=Pub_List_No_InitialSort,Pub_Date,Pub_List_No,Series_No" target="_blank">
|
||||
John B Sparks
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
designed and developed by alba rajanibala
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 68 KiB |
@@ -0,0 +1,82 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>about alba</title>
|
||||
<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="skills.css"/>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="index.html">
|
||||
<h2 id="home">
|
||||
◄ HOME
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<div id="my-name">
|
||||
|
||||
<h1>
|
||||
& some <br>
|
||||
other things
|
||||
</h1>
|
||||
|
||||
<!-- <a href="index.html">
|
||||
<img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
|
||||
</a> -->
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="my-skills">
|
||||
|
||||
<h2> WORKING ON </h2>
|
||||
|
||||
<li>
|
||||
<a href="Gandhi's Vision by Alba Rajanibala.jpg" alt="Gandhi by Alba Rajanibala" target="_blank">
|
||||
information design
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Chrome WatchParty - Summary by Alba.pdf" alt="Chrome WatchParty" target="_blank">
|
||||
chrome watchparty
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Coloring Photos by Alba Rajanibala.pdf" alt="Photographs by Alba RajanibalaR" target="_blank">
|
||||
recoloring photos
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="linkture">
|
||||
<ul id="my-features">
|
||||
<h2> EXPLORE </h2>
|
||||
<li>
|
||||
<a href="Gandhi's Vision by Alba Rajanibala.jpg" alt="Gandhi by Alba Rajanibala" target="_blank">
|
||||
<img src="Gandhi's Vision by Alba Rajanibala.jpg" alt="Gandhi's Vision by Alba Rajanibala" id="madhu" height="165px">
|
||||
</a>
|
||||
|
||||
<a href="http://chromewatchparty.com" alt="Chrome Watch Party" target="_blank">
|
||||
<img src="cwp.png" alt="Chrome WatchParty" id="sitar" height="165px">
|
||||
</a>
|
||||
|
||||
<a href="Coloring Photos by Alba Rajanibala.pdf" alt="Coloring Photos by Alba Rajanibala" target="_blank">
|
||||
<img src="balcony-by-alba-rajanibala-02.jpg" alt="Balcony by Alba Rajanibala" id="charity" height="165px">
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
designed and developed by alba rajanibala
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 340 KiB |
|
After Width: | Height: | Size: 820 KiB |
@@ -0,0 +1,236 @@
|
||||
@keyframes AnimationName {
|
||||
0%{background-position:0% 90%}
|
||||
50%{background-position:100% 5%}
|
||||
100%{background-position:0% 90%}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Playfair Display;
|
||||
src: url(PlayfairDisplay-Regular.otf);
|
||||
}
|
||||
|
||||
div {
|
||||
font-family: myFirstFont;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, black, #444444);
|
||||
background-size: 100% 600%;
|
||||
animation: AnimationName 8s ease infinite;
|
||||
cursor: url("sparkle.png"), auto;
|
||||
height: 100vh;
|
||||
padding:6rem;
|
||||
}
|
||||
|
||||
#my-name {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
#my-photo {
|
||||
width:250px;
|
||||
height:250px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#my-photo:hover {
|
||||
opacity: 100;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#linkture{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family:Playfair Display;
|
||||
font-size:100px;
|
||||
font-weight: 100;
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 6rem;
|
||||
color:rgb(112, 111, 111);
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style:none;
|
||||
padding:0;
|
||||
line-height: 2;
|
||||
font-family: lora;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-family:'Lora';
|
||||
letter-spacing: .25rem;
|
||||
line-height:2.5;
|
||||
color:rgb(112, 111, 111);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: url("sparkle2.png"), auto;
|
||||
color:rgb(112, 111, 111);
|
||||
}
|
||||
|
||||
a h2 {
|
||||
color:black;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 10rem;
|
||||
padding-right: 5rem;
|
||||
font-family:'lora';
|
||||
font-style: italic;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
letter-spacing: .2rem;
|
||||
color:rgb(112, 111, 111);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top:3rem;
|
||||
margin-bottom: 3rem;
|
||||
width: fit-content;
|
||||
font-family:'Glacial Indifference';
|
||||
font-weight: bold;
|
||||
font-size: 35px;
|
||||
background-color:rgb(94, 92, 92);
|
||||
color:balck;
|
||||
line-height: initial;
|
||||
padding:.5rem;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#home:hover{
|
||||
background-color:#d9e021;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1440px) {
|
||||
|
||||
/* POSITIONING */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: calc(100vh - 8rem);
|
||||
padding:8rem 16rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#my-name, #linkture, footer {
|
||||
flex-direction: row;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#my-name h1, #my-links, #my-features {
|
||||
flex:1;
|
||||
}
|
||||
|
||||
#linkture {
|
||||
margin-top: 3rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#my-skills {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
h1 a {
|
||||
cursor: url("sparkle2.png"), auto;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
color:#d9e021;
|
||||
font-style: italic;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
|
||||
#my-photo:hover {
|
||||
opacity: 100;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* FONT FORMAT */
|
||||
|
||||
h1 {
|
||||
font-size:100px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
margin-block-end:0;
|
||||
line-height: 1;
|
||||
padding-top: 2rem;
|
||||
letter-spacing:3px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin:0;
|
||||
letter-spacing:2px;
|
||||
font-size:14px;
|
||||
padding:3px;
|
||||
background-color:rgb(134, 134, 134);
|
||||
color:balck;
|
||||
}
|
||||
|
||||
#my-skills li {
|
||||
font-size: 28px;
|
||||
margin-top: .8rem;
|
||||
font-style: none;
|
||||
}
|
||||
|
||||
#my-links li {
|
||||
font-size: 20px;
|
||||
margin-top:1rem;
|
||||
position:top;
|
||||
}
|
||||
|
||||
#my-features li {
|
||||
font-size: 20px;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-family:'lora';
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
text-align: justify;
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
|
||||
footer:hover {
|
||||
color:#d9e021;
|
||||
}
|
||||
|
||||
#home h2:hover{
|
||||
background-color:#d9e021;
|
||||
cursor: url("sparkle2.png"), auto;
|
||||
}
|
||||
|
||||
img#madhu:hover, img#sitar:hover, img#charity:hover {
|
||||
opacity: 100;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color:black;
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 720 B |
|
After Width: | Height: | Size: 633 B |
|
After Width: | Height: | Size: 1009 B |