My CV webpage with CSS and HTML
Index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sagnik Bhattacharjee</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Merienda&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat+Alternates&family=Sacramento&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
</head>
<body>
<div class="topcontainer">
<img class="topcld" src="images/cloud.png" alt="cloud-img">
<h1>I'm Sagnik.</h1>
<p class="ps"><h2>A <span class="web">pro</span>grammer</h2></p>
<img class="cld" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
<div class="profile">
<img class="profilepic" src="images/profile.png" alt="Sagnik Profile pic">
<h2>Hello.</h2>
<p class="intro">I am an Engineering student, UI/UX designer and a Web Developer.
I do indulge myself in gaming,photography and music aswell. </p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="coding" src="images/coding.png" alt="coding-pic">
<h3 class="topic">Design and Development</h3>
<p>I am currently learning UI/UX development and Web development.I want to work as a freelancer full-time in the future. Do reach me out on email for work, currently i'm working for free.</p>
</div>
<div class="skill-row">
<img class="photography" src="images/photography.png" alt="photography-pic">
<h3 class="topic">Photography and Editing</h3>
<p>I am an enthusiast of Photography and love taking Photographs. Do follow me on Instagram to see more from me. Reach me out on email and send pictures and i will edit them for free.</p>
</div>
<div class="skill-row">
<img class="music" src="images/guitar.png" alt="guitar-pic">
<h3 class="topic">Music</h3>
<p>I love listening to music in my spare time as it calms my body and soothes my mind. I have great playlists for every occasion up on Spotify.Do check out my account linked below.</p>
</div>
<div class="skill-row">
<img class="gaming" src="images/gaming.png" alt="gaming-pic">
<h3 class="topic">Gaming</h3>
<p>Gaming has been my first hobby and probably the one that I'm best at.Dont believe me? Add me on Discord and let's decide by playing a 1vs1 deathmatch on GTA online.</p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>If you need a friend,a web developer,a photographer or an editor</h3>
<p class="contact-message">Love gaming and history more than me?
Let's talk about the new Assassin's creed game!</p>
<a class="button" href="mailto:sagnik.bhattacharjee099@gmail.com"><b>Contact Me</b></a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.instagram.com/_s.a.g.n.i.k_/"><strong>Instagram</strong></a>
<a class="footer-link" href="https://twitter.com/bhattsagnik"><strong>Twitter</strong></a>
<a class="footer-link" href="https://discord.gg/PBJWURk"><strong>Discord</strong></a>
<p class="credits">© 2020 Sagnik Bhattacharjee.</p>
</div>
</body>
</html>
styles.css:
body{
margin: 0;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
}
.ps{
font-family: 'Merienda', cursive;
color: #66bfbf;
font-weight: normal;
}
h1{
font-size: 5.625rem;
margin: 50px auto 0 auto;
font-family: 'Sacramento', cursive;
color: #66bfbf;
display: inline-block;
}
h2{
font-size: 2.5rem;
font-family: 'Montserrat Alternates', sans-serif;
color: #66bfbf;
}
h3{
font-family: 'Montserrat Alternates', sans-serif;
color: #11999E;
}
.topcontainer{
background-color: #eaf6f6;
width: 100%;
padding-top: 120px;
position: relative;
}
.web{
text-decoration: underline;
}
.cld{
position: absolute;
left: 300px;
bottom: 300px;
}
.topcld{
position: absolute;
right: 300px;
top: 50px;
}
.profilepic{
width: 25%
}
.coding{
width: 25%;
float: left;
margin-right: 30px;
position: relative;
bottom: 12px;
}
.music{
width: 25%;
float: left;
margin-right: 30px;
position: relative;
bottom: 12px;
}
.photography{
width: 25%;
float: right;
margin-left: 30px;
position: relative;
bottom: 15px;
}
.gaming{
width: 25%;
float: right;
margin-left: 30px;
position: relative;
bottom: 12px;
}
.footer-link{
color: #11999E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.2rem;
text-decoration: none;
text-align: center;
margin: 10px 20px;
}
.skill-row{
margin: 100px auto 100px auto;
width: 50%;
text-align: left;
line-height: 1.5;
}
.topic{
text-align: left;
}
.profile{
width: 50%;
margin:auto;
margin-bottom: 100px;
}
.button{
color: #66bfbf;
font-family: 'Sacramento', cursive;
font-size: 2.2rem;
text-decoration: none;
text-align: center;
margin: 5px;
}
.button:hover{
color:#274fa1;
}
.bottom-container{
margin-top: 50px;
padding-top: 50px;
padding-bottom: 50px;
background-color: #66bfbf;
text-align: center;
}
.contact-me{
line-height: 2;
width: 50%;
margin: auto;
}
.credits{
font-family: 'Source Sans Pro', sans-serif;
color: #eaf6f6;
font-size: 0.75rem;
padding: 20px 0px;
}
hr{
display: inline-block;
margin: auto;
width: 10%;
border-style: none;
border-color: #eaf6f6;
border-width: 8px;
border-top-style: dotted;
}
.footer-link:hover{
color: #eaf6f6;
}
.intro{
width: 50%;
margin: auto;
}
.contact-message{
width: 40%;
margin: 40px auto 60px;
}
Images:
Comments
Post a Comment