A Pen by AlicjaHelenaM on CodePen.
Last active
April 12, 2020 14:38
-
-
Save Alicja-code/e9fa468dbaa3a53732f08502f6ba3898 to your computer and use it in GitHub Desktop.
FCC: Personal Portfolio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Project objectives https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage --> | |
<!-- based on example provided by FCC https://codepen.io/freeCodeCamp/full/zNBOYG --> | |
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> | |
<link | |
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" | |
rel="stylesheet" | |
/> | |
<!-- nav-bar --> | |
<nav id="navbar" class="nav"> | |
<ul class="nav-list"> | |
<li> | |
<a href="#welcome-section">About</a> | |
</li> | |
<li> | |
<a href="#projects">Work</a> | |
</li> | |
<li> | |
<a href="#contact">Contact</a> | |
</li> | |
</ul> | |
</nav> | |
<!-- welcome --> | |
<section id="welcome-section" class="welcome-section"> | |
<h1>Hello World!</h1> | |
<h3>My name is Alicja and I'm a FreeCodeCamp student</h3> | |
</section> | |
<!-- projects --> | |
<section id="projects" class="projects-section"> | |
<h2 class="projects-section-header">These are some of my FCC projects</h2> | |
<div class="projects-grid"> | |
<a | |
href="https://codepen.io/AlicjaHelenaM/full/BaNbRZB" | |
target="_blank" | |
class="project-tile" | |
> | |
<img | |
class="project-image" | |
src="https://i.postimg.cc/7PBGVQRS/Tribute-Page.jpg" | |
alt="project" | |
/> | |
<p class="project-title"> | |
Tribute Page | |
</p> | |
</a> | |
<a | |
href="https://codepen.io/AlicjaHelenaM/full/poJBORQ" | |
target="_blank" | |
class="project-tile" | |
> | |
<img | |
class="project-image" | |
src="https://i.postimg.cc/ncgs89pz/Survey-Form.jpg" | |
alt="project" | |
/> | |
<p class="project-title"> | |
Survey Form | |
</p> | |
</a> | |
<a | |
href="https://codepen.io/AlicjaHelenaM/full/MWwdVZQ" | |
target="_blank" | |
class="project-tile" | |
> | |
<img | |
class="project-image" | |
src="https://i.postimg.cc/G2KB6Mmw/Product-Landing-Page.jpg" | |
alt="project" | |
/> | |
<p class="project-title"> | |
Product Landing Page | |
</p> | |
</a> | |
<a | |
href="https://codepen.io/AlicjaHelenaM/full/LYVKdNd" | |
target="_blank" | |
class="project-tile" | |
> | |
<img | |
class="project-image" | |
src="https://i.postimg.cc/vHc1StRk/Technical-Documentation.jpg" | |
alt="project" | |
/> | |
<p class="project-title"> | |
Technical Documentation | |
</p> | |
</a> | |
</div> | |
</section> | |
<!-- contact --> | |
<section id="contact" class="contact-section"> | |
<div class="contact-section-header"> | |
<h2>Let's get in touch...</h2> | |
</div> | |
<div class="contact-links"> | |
<a | |
id="profile-link" | |
href="https://github.com/AlicjaHelenaM" | |
target="_blank" | |
class="btn contact-details" | |
><i class="fab fa-github"></i> GitHub</a | |
> | |
<a | |
href="https://codepen.io/AlicjaHelenaM" | |
target="_blank" | |
class="btn contact-details" | |
><i class="fab fa-codepen"></i> CodePen</a | |
> | |
<a | |
href="https://www.freecodecamp.org/fcc0135505b-688e-4d0e-8c35-4923facb6616" | |
target="_blank" | |
class="btn contact-details" | |
><i class="fab fa-free-code-camp"></i> FreeCodeCamp</a | |
> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Project objectives https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage */ | |
/* based on example provided by FCC https://codepen.io/freeCodeCamp/full/zNBOYG */ | |
@import url('https://fonts.googleapis.com/css?family=Exo'); | |
/* general */ | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
html { | |
box-sizing: border-box; | |
font-size: 62.5%; | |
scroll-behavior: smooth; | |
} | |
@media (max-width: 50em) { | |
html { | |
font-size: 50%; | |
} | |
} | |
body { | |
font-family: 'Exo'; | |
font-size: 1.8rem; | |
font-weight: 400; | |
line-height: 1.4; | |
color: white; | |
} | |
a { | |
text-decoration: none; | |
color: white; | |
} | |
section { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
text-align: center; | |
width: 100%; | |
height: 100vh; | |
padding: 0 2rem; | |
background-repeat: no-repeat; /* Do not repeat the image */ | |
background-size: cover; /* Resize the background image to cover the entire container */; | |
} | |
/* nav-bar */ | |
.nav { | |
position: fixed; | |
width: 100%; | |
background: rgba(255,255,255, 0.3); | |
box-shadow: 0 1px 0 rgba(255,255,255, 0.6); | |
} | |
.nav-list { | |
display: flex; | |
margin-left: 3rem; | |
list-style: none; | |
} | |
.nav-list a { | |
display: block; | |
font-size: 2.2rem; | |
padding: 1.8rem; | |
} | |
.nav-list a:hover { | |
color: purple; | |
font-weight: 600; | |
background-color: yellow; | |
} | |
/* welcome */ | |
.welcome-section { | |
background-image: | |
url("https://www.lefthudson.com/wp-content/uploads/2019/11/geometric-background-hd-new-network-connection-background-hd-dark-geometric-abstract-backdrop-1-for-you-of-geometric-background-hd.jpg"); | |
} | |
.welcome-section > h1 { | |
font-size: 6rem; | |
font-weight: 700; | |
} | |
.welcome-section > h3 { | |
font-size: 2.5rem; | |
font-weight: 10; | |
font-style: italic; | |
color: white; | |
} | |
/* projects */ | |
.projects-section { | |
text-align: center; | |
padding: 12rem 2rem; | |
background-image: url("https://i.ytimg.com/vi/sAt4DKjig6k/maxresdefault.jpg"); | |
} | |
@media (max-width: 75em) { | |
.projects-section { | |
padding: 22rem 2rem;} | |
} | |
.projects-section-header { | |
max-width: 700px; | |
margin: 0 auto 2rem auto; | |
font-size: 4.2rem; | |
font-weight: 700; | |
} | |
.projects-grid { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
grid-gap: 4rem; | |
width: 100%; | |
max-width: 1280px; | |
margin: 0 auto; | |
margin-bottom: 6rem; | |
} | |
.project-image { | |
display: block; | |
width: 100%; | |
height: 200px; | |
margin-bottom: 15px; | |
object-fit: cover; | |
} | |
.project-tile { | |
background: rgba(255,255,255, 0.3); | |
font-size: 2rem; | |
padding: 2rem 0.5rem; | |
} | |
.project-title:hover { | |
color: pink; | |
transform: translateY(5px); | |
transition: transform 0.4s; | |
} | |
/* contact */ | |
.contact-section { | |
background-image: | |
url("https://www.lefthudson.com/wp-content/uploads/2019/11/geometric-background-hd-beautiful-hot-glowing-geometric-background-hd-for-motion-graphics-for-you-of-geometric-background-hd.jpg"); | |
} | |
.contact-section-header > h2 { | |
font-size: 6rem; | |
font-weight: 700; | |
} | |
.contact-links { | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
max-width: 980px; | |
margin-top: 4rem; | |
flex-wrap: wrap; | |
} | |
@media (max-width: 50em) { | |
.contact-links { | |
max-width: 100px; | |
} | |
} | |
.btn { | |
font-size: 2.5rem; | |
padding: 1rem 2rem; | |
} | |
.btn:hover { | |
transform: translateY(8px); | |
transition: transform 0.4s; | |
color: yellow; | |
} | |
.btn:active { | |
color: purple; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment