Skip to content

Commit

Permalink
layout done
Browse files Browse the repository at this point in the history
  • Loading branch information
@VAISHALI-NILE
VAISHALI-NILE committed Mar 21, 2024
0 parents commit 4ac361c
Show file tree
Hide file tree
Showing 11 changed files with 285 additions and 0 deletions.
Binary file added img/git.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/insta.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/leetcode.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/linkedin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/mail.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/myimg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/pr-1-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/white-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/white-bg2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 101 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vaishali-Nile</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-wrapper">
<div class="header">
<div class="logo"> <a class="pr-link" href="">Featured Projects</a></div>
<div class="socials">
<a href="https://www.linkedin.com/in/vaishali-nile/"><img class="icons" src="img/linkedin.png" alt=""></a>
<a href="https://github.com/VAISHALI-NILE"><img class="icons" src="img/git.png" alt=""></a>
<a href="https://www.instagram.com/vai_sh_1513/"><img class="icons" src="img/insta.png" alt=""></a>
<a href="https://leetcode.com/vaish_1513/"><img class="icons" src="img/leetcode.png" alt=""></a>
</div>
</div>
<div class="intro">
<img class="smile-img" src="https://assets-global.website-files.com/64a24a477b774d01d169b819/64a2c39cad4813cad08c1afe_103.svg" alt="">
<img class="arrow" src="https://assets-global.website-files.com/64a24a477b774d01d169b819/64a2c39c985e1e3d89801174_71.svg" alt="">

<div class="first">
<img class="msg-img" src="https://assets-global.website-files.com/64a24a477b774d01d169b819/64a2c8e6bfcebde9108de16e_13.svg" alt="">
<h2>Hi, I'm <span class="name">Vaishali Nile</span></h2> <br>
<div class="intro-cont">A Website Developer</div>
<div class="intro-cont">transforming</div><br>
<div class="intro-cont">problems</div>
<div class="intro-cont">into</div>

<div class="fun intro-cont">fun </div>
<div class="intro-cont">and</div>
<div class="apr intro-cont">approachable</div> <br>
<div class="intro-cont">solutions for all.</div>
</div>
<div class="second">
<div class="study">Currently studying in 3rd year of Engineering</div>
</div>
</div>

<!-- projects -->
<div class="projects">
<div class="pr-1 pr">
<div class="info">
<div class="title-top"> <div class="red-dot"></div> No . <div class="number"> 1 </div> </div>
<div class="title"><h1>Serene Beauty</h1></div>
<div class="tech">
<ul>
<li>E-commerce</li>
<li>Website Design</li>
<li>Development</li>
</ul>
</div>
<div class="discription">
<p>A modern and user-friendly website for Serene Beauty Salon to enhance online visibility, attract new clients, and provide a seamless booking experience.</p>
</div>
<a class="pr-link" href="https://github.com/VAISHALI-NILE/SereneBeauty">View Project</a>
</div>
<div class="pr-img-div"> <img class="pr-img" src="./img/pr-1-img.png" alt=""></div>
</div>


<div class="pr-1 pr">
<div class="info">
<div class="title-top"> <div class="red-dot"></div> No . <div class="number"> 1 </div> </div>
<div class="title"><h1>Serene Beauty</h1></div>
<div class="tech">
<ul>
<li>E-commerce</li>
<li>Website Design</li>
<li>Development</li>
</ul>
</div>
<div class="discription">
<p>A modern and user-friendly website for Serene Beauty Salon to enhance online visibility, attract new clients, and provide a seamless booking experience.</p>
</div>
<a class="pr-link" href="">View Project</a>
</div>
<div class="pr-img-div"> <img class="pr-img" src="./img/pr-1-img.png" alt=""></div>
</div>
</div>
<br>
<br>
<br>
<hr style="width: 50%; font-weight: bold;">

<div class="footer">
<img class="my-img" src="./img/myimg.jpg" alt="">
<div class="contact">
<h2>Let's Connect</h2><img class="arrow-img" src="https://assets-global.website-files.com/64a24a477b774d01d169b819/64a2c39c985e1e3d89801174_71.svg" alt="">
<br>
<div class="conn"><img class="conn-img" src="https://assets-global.website-files.com/64a24a477b774d01d169b819/64a2c39d92e236b2edfb00a2_email.svg" alt=""><a href="">[email protected]</a><br>
</div>
<div class="conn"><img class="conn-img" src="https://assets-global.website-files.com/64a24a477b774d01d169b819/64a2c39d2e996a97aed8574d_linkedin.svg" alt=""><a href="https://www.linkedin.com/in/vaishali-nile/">Vaishali-Nile</a>
</div>
</div>
</div>
</div>
</body>
</html>
184 changes: 184 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&family=Mynerve&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
.scroll-wrapper {
width: 89.5vw;
background-image: linear-gradient(
rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0.6)
),
url("https://assets-global.website-files.com/64a24a477b774d01d169b819/64a25c6b93ad13ce30aa73d1_background-texture.jpg");
height: max-content;
margin: -5px;
padding: 1% 5%;
}
* {
font-family: Figtree, sans-serif;
}
body {
overflow-x: hidden;
}
.header {
display: grid;
grid-template-columns: 3fr 1fr;
}
.icons {
width: 30px;
margin-left: 13px;
float: right;
}
.intro {
font-family: Caveat, sans-serif;
}
.intro h2 {
display: inline-block;
font-family: Figtree, sans-serif;
font-weight: 400;
font-size: 5em;
}

.msg-img {
height: 6em;
position: relative;
top: 1em;
margin-right: 10px;
}
.pr-link {
text-decoration: none;
color: black;
border-bottom: solid 2px gray;
font-size: 1.5rem;
}
.name {
border-bottom: 2px solid;
padding-left: 0.625rem;
padding-right: 1.25rem;
font-family: "Mynerve", cursive;
font-size: 4rem;
font-weight: 400;
}
.intro-cont {
display: inline-block;
font-size: 3.5em;
margin: 5px;
}
.fun {
background-color: #c2e9ec;
font-weight: 500;
}
.smile-img {
position: relative;
top: 27rem;
left: 27rem;
height: 3rem;
z-index: 1;
}
.arrow {
position: relative;
top: 27rem;
left: 50rem;
height: 3rem;
}
.apr {
background-color: #ffd6d0;
font-weight: 500;
}

.second {
margin-top: 5%;
font-size: 1.5em;
}
/* projects */

.projects {
margin-top: 20%;
height: fit-content;
}
.red-dot {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: orange;
margin-right: 15px;
}
.number {
display: inline-block;
width: 5em;
text-align: center;
border-bottom: solid 2px gray;
}
.title > h1 {
font-size: 3em;
font-weight: 400;
}
.tech > ul {
list-style: none;
margin: 0em;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
.tech > ul > li {
display: inline-block;
background-color: rgba(128, 128, 128, 0.228);
margin: 2px;
padding: 7px;
}
.pr-1 {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 35px;
}
.pr-link {
text-decoration: none;
color: black;
}
.pr {
height: 50vh;
width: 80vw;
margin: 30% 7%;
}
.discription > p {
font-size: x-large;
}
.pr-img {
height: 100%;
width: 100%;
}
.footer {
margin: 10%;
display: flex;
justify-content: center;
gap: 50px;
}
.my-img {
height: 200px;
border-radius: 50%;
}
.contact > .conn > a {
color: gray;
font-size: larger;
display: inline-block;
}
.contact > h2 {
display: inline-block;
font-size: xx-large;
font-weight: 500;
}
.arrow-img {
display: inline-block;
position: relative;
top: 1rem;
height: 3rem;
}
.conn-img {
display: inline-block;
height: 30px;
width: 30px;
}
.conn {
display: grid;
grid-template-columns: 1fr 4fr;
}

0 comments on commit 4ac361c

Please sign in to comment.