Skip to content

Instantly share code, notes, and snippets.

@stanwmusic

stanwmusic/index.html

Created February 7, 2021 23:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stanwmusic/c0aeb49484a5bdd778c04e325806f577 to your computer and use it in GitHub Desktop.
Save stanwmusic/c0aeb49484a5bdd778c04e325806f577 to your computer and use it in GitHub Desktop.
Download ZIP
practice portfolio
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' contents='width=device-width, initial-scale=1.0'>
<meta charset='UTF-8'>
<title>Fcc: Personal Portfolio</title>
</head>
<body>
<header>
<nav id="navbar">
<div class='navigation'>
<div><a href='#welcome-section' class="box">About</a></div>
<div><a href='#projects' class="box">Work</a></div>
<div><a href='#contact' class="box">Contact</a></div>
</div>
</nav>
</header>
<main>
<div id='welcome-section'>
<div id='name'>
<h1>Tahmina Khanam (Luna)</h1>
<h1 class='welcome'> Front End Web Developer </h1>
<h2 class='upside-down'>Front End Web Developer</h2>
</div>
</div>
<div id='projects'>
<div>
<h2 class='work-title'> These are some of my projects... </h2>
</div>
<div class='project-holder'>
<div class='project-tile'>
<div class='name-project'><a href='https://codepen.io/TK-Luna/full/ewZBda' class='project-hover' title='Click to view project' target='_blank'>Technical Documentation Page</a> </div>
<a href='https://codepen.io/TK-Luna/full/ewZBda' target='_blank' class='image-holder1' title='View Project'>
<img class='image-project' src='https://lh3.googleusercontent.com/mDJcm8QUfKBYvxspv4CEaHsT7RKM9MFDyACaVxtYJjZxf1VLhpBE0Jo_yZeCwbKZkpzrhYAaFZB4nxrxY3XK3q7n7hzXCP0XYSc3dx0WZDlSqIiMyXrUVZiI5ZBgBHLgwuT52ZeeCg=w2400'>
</a>
</div>
<div class='project-tile'>
<div class='name-project'>
<a href='https://codepen.io/TK-Luna/full/OJyqgeG' class='project-hover' title='Click to view project' target='_blank'>Product Launching Page</a>
</div>
<a href='https://codepen.io/TK-Luna/full/OJyqgeG' target='_blank' class='image-holder1' title='View Project'>
<img class='image-project' src='https://lh3.googleusercontent.com/KbWwAqAzMBTZYiqMHHwxwsPRLAV2kYKASdoNsuf-GD6IQT4LG2JpZwzuXT99iLYP7WaRDvLY72zDwRjYgPk1M5ogrEKj1jQKJmDtzsz5lxt7YYWLAtHjdUY2DYwBM5Axh7aQ2kEltA=w2400'></a>
</div>
<div class='project-tile'>
<div class='name-project'><a href='https://codepen.io/TK-Luna/full/YbLEYd' class='project-hover' title='Click to view project' target='_blank'>Survey Form</a> </div>
<a href='https://codepen.io/TK-Luna/full/YbLEYd' target='_blank' class='image-holder' title='View Project'>
<img class='image-project' src='https://lh3.googleusercontent.com/vzvS6Tr57DN4mW0n1XsIzD1yxGyx8x68DkhWhmWX_MEJL5C07SPRNWBaJMaK9JrQpNQQZZyf3dNxqONOjnaT3MsG05wPYqGpGu8mkvuzszTCaboIEZ6TvUc0sLQuf76xMCpf1FTO2Q=w2400'></a>
</div>
<div class='project-tile'>
<div class='name-project'> <a href='https://codepen.io/TK-Luna/pen/QRMwrK' class='project-hover' title='Click to view project' target='_blank'>Tribute Page</a> </div>
<a href='https://codepen.io/TK-Luna/pen/QRMwrK' target='_blank' class='image-holder' title='View Project'>
<img class='image-project' src='https://lh3.googleusercontent.com/8m2lj3JelvSCF6cpovjPhOx4eRQsjmV490O8QPTM5ULc6M8fmvk28O2Fug5RqCw6DHAqcNx9-lVoy909PaxrcqJbXWFNr4aRUr5uoI0NcesHkx-X1-PHRygZOxiPJYnNMl6mNcS0bw=w2400'>
</a>
</div>
</div>
</div>
<div id='contact'>
<h2 class='contact-title'>Follow me on these platforms...</h2>
<div class='icons'>
<div class='profile-link-img'>
<a href='https://twitter.com/home' title='twitter' class='link' target="_blank"> <img class='twitter' src='https://lh3.googleusercontent.com/uzkV1Q-IkYfKbnIo-rUVULwu6Yow53auPR68xWCinS5yskdkLFoCBOzAc17TiB2cVvwsjJqItNu0MlFeFTUYr091onD_6nxDt0Zcq5N2vCsnGgIvuIdOt5cfIY1XVpB7GqiX_5HlUA=w2400'></a>
</div>
<div class='profile-link-img'>
<a href='https://www.instagram.com/lunarorbit19/' title='Instagram' target='_blank'><img class='insta' src="https://lh3.googleusercontent.com/dvGVg6TZ-Z3XvT2SbsO_YXKlID7BcU95v9e5uXei2fmEW_Da6d8fzUu3aOXRr5mR5Ad3I8TYqR4abt8BvcbUPAAKlrOdcuROWRuwAEQVjHRC8lLCnUh3o66ntk4oQ5H3G0M7d-tpIw=w2400"></a>
</div>
<div class='profile-link-img'>
<a href='https://www.freecodecamp.org/fccb9a753b0-4fc3-41ca-942d-58f040d347f0' target='_blank' title='Free Code Camp' id='profile-link'><img class='fcc' src='https://lh3.googleusercontent.com/r5OU59im-ibAEoGPVpRmhfWdSWJGDhZ9JZ2nz1LHfOxJReC6BlgO7rLWKTkjMOjqLKTHy9uqXv0bfgoP7hqRe5Y1u2vU5JBBZbmvIcFnX407nrFkeDclYcA5rXTQqy9qypA5cIBGXQ=w2400'></a></div>
<div class='profile-link-img'>
<a href='https://github.com/' title='Github' id='profile-link' target='_blank'><img class='github' src='https://lh3.googleusercontent.com/Yd0tKOupV-eqfc4VdLcG0eoKFXYACpMR8sxAwJN3UjbbVoQISq20v_i19_t_BRqyrEiYC3UDBK9YeQyiJTPELOS2Me95EJ4XWtwYYeZU5BIG7KaS6d7tVj79XC8hepBwPWuDVteDUw=w2400'></a></div>
</div>
</div>
</main>
</body>
</html>
Raw
style.css
body {
margin: 0 auto;
background: black;
font-family: sans-serif;
color: aliceblue;
text-align: center;
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background: black;
}
::-webkit-scrollbar-thumb {
background-image: url("https://lh3.googleusercontent.com/nZzt8xGmqIXZqfdujsP6dNjelHQpsd21f28-_r4nmC50ARcHhv-ZAOdwVrI0weAR_k2voAx942jqvnJZSnXUVNL7Qum620k1mjxE7DQhJXJFi2TZW9W-K9DdG8MlLatPARK6n5O3OQ=s20-p-k");
border-radius: 15px;
box-shadow: 0px 0px 30px #03b6fc;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* background: -webkit-linear-gradient(45deg, white, aqua, blue);
border-radius: 15px;
}*/
::-webkit-scrollbar-thumb:hover {
background: -webkit-linear-gradient(45deg, black, #03b6fc, black);
box-shadow: 0px 0px 4px white;
}
h1 {
font-size: 40px;
color: rgba(3, 182, 252, 0.8);
padding: 10px;
}
#welcome-section {
height: 100vh;
margin: 0px;
display: flex;
justify-content: center;
}
#name {
padding: 200px;
}
.welcome {
font-size: 30px;
background-image: -webkit-linear-gradient(45deg, white, white, white);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
animation: text-anime 1s 2s linear infinite;
margin-top: 50px;
}
@keyframes text-anime {
0% {
background-image: -webkit-linear-gradient(45deg, white, white, white);
}
25% {
background-image: -webkit-linear-gradient(
10deg,
rgba(255, 255, 255, 0.1),
white,
white
);
}
50% {
background-image: -webkit-linear-gradient(
10deg,
white,
rgba(255, 255, 255, 0.1),
white
);
}
75% {
background-image: -webkit-linear-gradient(
10deg,
white,
white,
rgba(255, 255, 255, 0.1)
);
}
/*
50%{
background-image: -webkit-linear-gradient(45deg, white, white, rgba(255, 255, 255, 0.1));
}*/
100% {
background-image: -webkit-linear-gradient(45deg, white, white, white);
}
}
.upside-down {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5)
);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-transform: scale(1, -0.6) skewX(-50deg) skewY(-2deg);
font-size: 30px;
animation: text-anime-shadow 1s 2s linear infinite;
margin-top: -42px;
margin-left: 40px;
}
@keyframes text-anime-shadow {
0% {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5)
);
}
25% {
background-image: -webkit-linear-gradient(
10deg,
black,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5)
);
}
50% {
background-image: -webkit-linear-gradient(
10deg,
rgba(255, 255, 255, 0.5),
black,
rgba(255, 255, 255, 0.5)
);
}
75% {
background-image: -webkit-linear-gradient(
10deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5),
black
);
}
/*50%{
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5), black);
}*/
100% {
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5)
);
}
}
#navbar {
display: flex;
background: rgba(0, 0, 0, 0.7);
height: 80px;
margin: 0px 0px 0px 0px;
position: fixed;
width: 100%;
color: #03b6fc;
flex-shrink: 1;
}
.navigation {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-items: center;
margin-left: 60%;
}
.box:hover {
box-shadow: 1px 1px 10px #03b6fc;
color: aliceblue;
}
.box {
font-size: 20px;
padding: 15px;
margin: 15px;
transition: box-shadow 400ms ease-in-out, font-size 400ms ease-in-out;
box-shadow: 3px 6px 10px #03b6fc;
display: flex;
flex-shrink: 1;
}
#projects {
height: 1600px;
width: 100%;
background: rgba(255, 255, 255, 0.4);
overflow: hidden;
display: flex;
flex-direction: column;
}
.project-holder {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
}
h2 {
padding: 20px;
margin: 50px auto;
}
h3 {
padding: 30px;
font-size: 30px;
color: white;
}
.project-tile {
justify-content: center;
height: 600px;
width: 400px;
background: rgba(0, 0, 0, 0.8);
display: grid;
grid-template-rows: 20% 80%;
grid-gap: 20px;
margin: 10px auto;
padding: 5px;
overflow: hidden;
box-shadow: 10px 10px 8px rgba(0, 0, 0, 1);
}
.image-project {
max-height: 65%;
max-widht: 30%;
display: flex;
flex-shrink: 1;
}
.image-holder {
max-height: 65%;
width: 52%;
margin: 5px auto;
display: flex;
justify-content: center;
align-items: center;
transition: border, box-shadow 500ms ease-in-out;
}
.image-holder:hover {
border-radius: 10px;
box-shadow: 0px 1px 30px #03b6fc;
border: 2px solid #03b6fc;
}
.image-holder1 {
max-height: 85%;
width: 65%;
margin: 5px auto;
display: flex;
justify-content: center;
align-items: center;
transition: border, box-shadow 300ms ease-in-out;
}
.image-holder1:hover {
border-radius: 10px;
box-shadow: 0px 1px 30px #03b6fc;
border: 2px solid #03b6fc;
}
a {
text-decoration: none;
color: #03b6fc;
font-size: 24px;
}
.name-project {
display: flex;
justify-content: center;
align-items: center;
}
.project-hover {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
margin: 10px;
padding: 15px;
border-bottom: 2px solid aliceblue;
transition: border, box-shadow 300ms ease-in-out;
}
.project-hover:hover {
border: 2px solid #03b6fc;
border-radius: 10px;
box-shadow: 3px 6px 10px #03b6fc;
}
.profile-link-img {
height: 100px;
width: 100px;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
border-radius: 50%;
transition: transform 500ms ease-in-out;
padding: 20px;
display: flex;
flex-shrink: 1;
align-items: center;
justify-content: center;
}
.profile-link-img:hover {
border: 2px solid #03b6fc;
box-shadow: 0px 0px 10px #03b6fc;
transform: rotateY(180deg);
}
#contact {
height: 500px;
width: 100%;
display: grid;
grid-template-rows: 20% 80%;
}
.icons {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 40px;
justify-contents: center;
align-items: center;
margin: 20px auto;
padding: 10px;
}
.twitter {
max-height: 60%;
max-width: 60%;
margin-top: 5px;
color: white;
}
.insta {
max-height: 60%;
max-width: 60%;
margin-top: 5px;
}
.fcc {
max-height: 70%;
max-width: 70%;
}
.github {
max-height: 100%;
max-width: 100%;
margin-right: 10px;
}
.contact-title {
color: rgba(3, 182, 252, 0.8);
padding: 70px;
}
.work-title {
color: rgba(3, 182, 252, 1);
padding: 40px;
font-size: 30px;
}
@media screen and (max-width: 600px) {
.box {
font-size: 10px;
padding: 5px;
margin: 5px;
}
#name {
padding: 100px;
}
h1 {
font-size: 14px;
padding: 1px;
margin-top: 50px;
}
.welcome {
font-size: 8px;
margin-top: 10px;
}
.upside-down {
font-size: 8px;
margin-top: -20px;
margin-left: 10px;
}
#projects {
height: 3000px;
}
.project-holder {
display: grid;
grid-template-columns: 1fr;
grid-gap: 50px;
}
.image-holder1 {
max-height: 85%;
max-width: 85%;
margin: 5px auto;
display: flex;
justify-content: center;
align-items: center;
transition: border, box-shadow 300ms ease-in-out;
}
#contact {
height: 800px;
width: 100%;
display: grid;
grid-template-rows: 20% 80%;
}
.icons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 40px;
}
}
@media screen and (max-width: 1000px) and (min-width: 601px) {
.box {
font-size: 15px;
padding: 10px;
margin: 10px;
}
#name {
padding: 100px;
margin-top: 20px;
}
h1 {
font-size: 30px;
padding: 5px;
margin-top: 50px;
}
.welcome {
font-size: 16px;
margin-top: 0px;
}
.upside-down {
font-size: 16px;
margin-top: -25px;
margin-left: 22px;
}
#projects {
height: 3000px;
width: 100%;
background: rgba(255, 255, 255, 0.4);
overflow: hidden;
display: flex;
flex-direction: column;
}
.project-tile {
justify-content: center;
height: 600px;
width: 400px;
background: rgba(0, 0, 0, 0.8);
display: grid;
grid-template-rows: 20% 80%;
grid-gap: 20px;
margin: 10px auto;
padding: 5px;
overflow: hidden;
box-shadow: 10px 10px 8px rgba(0, 0, 0, 1);
}
.project-holder {
display: grid;
grid-template-columns: 1fr;
grid-gap: 50px;
}
.name-project {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 1;
}
.image-holder {
max-height: 65%;
width: 50%;
margin: 5px auto;
padding: 10px;
flex-shrink: 1;
display: flex;
justify-contents: center;
align-items: center;
transition: border, box-shadow 500ms ease-in-out;
}
.image-holder1 {
max-height: 85%;
width: 65%;
margin: 5px auto;
display: flex;
justify-content: center;
align-items: center;
transition: border, box-shadow 300ms ease-in-out;
}
#contact {
height: 800px;
width: 100%;
display: grid;
grid-template-rows: 20% 80%;
}
.icons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 40px;
}
/*
a {
text-decoration: none;
color: #03b6fc;
font-size: 24px;
}
*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment