Skip to content

Commit

Permalink
Merge pull request #17 from melvinsantanac/master
Browse files Browse the repository at this point in the history 
Master
  • Loading branch information
@melvinsantanac
melvinsantanac authored Apr 7, 2024
2 parents 3acbbcd + 0adfe2f commit 4a092a5
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 16 deletions.
79 changes: 65 additions & 14 deletions assets/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ a {
align-items: center;
justify-content: center;
height: 100svh;
width: 100vw;
background-image: url(/assets/img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
Expand All @@ -41,51 +42,52 @@ a {
display: block;
position: absolute;
background: black;
opacity: 0.8;
width: 100vw;
height: 100svh;
opacity: 0.9;
width: 100%;
height: 100%;
top: 0;
}

.__coverPage-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
height: 50%;
height: 100%;
width: 50%;
z-index: 1000;
text-align: center;
opacity: 0.9;
padding: 1em;
}

.__coverPage-content h1 {
font-size: 4em;
font-size: 3.2rem;
color: #f9a825;
opacity: 0.8;
}

.__coverPage-content h2 {
font-size: 2.2em;
font-size: 2em;
margin-bottom: 1.5em;
}

.__coverPage-content h3 {
font-size: 1.6em;
font-size: 1.1em;
margin-bottom: 0.8em;
text-transform: uppercase;
opacity: 0.7;
}

.__coverPage-content p {
font-size: 0.95em;
margin-bottom: 1.5em;
line-height: 1.5;
opacity: 0.7;
}

.socialMedia {
margin-top: 1em;
}

.socialIcon {
margin-right: 10px;
opacity: 0.7;
Expand All @@ -111,7 +113,8 @@ a {

.projectsListTitle {
margin-top: 2em;
font-size: 1.5rem !important;
margin-bottom: 0.5em;
font-size: 1.3rem !important;
text-transform: capitalize;
}

Expand All @@ -125,25 +128,36 @@ a {
.btn-projects {
background-color: white;
color: #333333;
font-weight: bold;
padding: 1em;
width: 250px !important;
transition: all 0.3s;
border: 2px solid transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}

.btn-projects:hover {
background-color: lightgray;
color: #1b1b1b;
background-color: #f9a825;
color: white;
border-color: #1b1b1b;
}

@media screen and (min-width: 321px) and (max-width: 1023px) {
@media only screen and (max-width: 1023px) {
.__coverPage-content {
width: 100%;
}

.__coverPage-content h1 {
font-size: 2.8rem;
}

.__coverPage-content h2 {
font-size: 2rem;
}

.projectsList {
flex-direction: column;
row-gap: 1em;
Expand All @@ -154,3 +168,40 @@ a {
width: 100% !important;
}
}
@media only screen and (max-width: 1023px) and (orientation: landscape) {
.__coverPage-content h1 {
font-size: 1.7rem;
}

.__coverPage-content p {
font-size: 0.8rem;
}

.__coverPage-content h2 {
font-size: 1.2rem;
margin-bottom: 1em;
}

.__coverPage-content h3 {
font-size: 0.9rem;
}

.__coverPage-content a {
font-size: 0.8rem;
}

.socialIcon i {
font-size: 15px;
}

.projectsList {
flex-direction: row;
column-gap: 1em;
}

.projectsListTitle {
margin-top: 1.5em !important;
margin-bottom: 0.1em;
font-size: 1.2rem !important;
}
}
2 changes: 1 addition & 1 deletion assets/styles/style.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion index.min.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Site under construction</title><link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"><link rel="stylesheet" href="assets/styles/style.min.css"></head><body><div class="coverPage"><div class="__coverPage-content"><h1>Melvin Santana</h1><h2>FrontEnd Developer</h2><h3>We are building something <strong>GREAT!</strong></h3><p>Building <strong>nice, clean and user friendly web projects</strong> that connects with the end user, taking care of details, <strong>writing semantic html code, also applying programming good practices</strong> are my main concerns.</p><div class="socialMedia"><a class="socialIcon" href="https://www.github.com/in/melvinsantanac" target="_blank" rel="noreferrer noopener"><i class="fa-github-in"></i></a> <a class="socialIcon" href="mailto:mascueto@gmail.com" target="_blank" rel="noreferrer noopener"><i class="fas fa-envelope"></i></a> <a class="socialIcon" href="https://www.facebook.com/melvinsantanac" target="_blank" rel="noreferrer noopener"><i class="fab fa-facebook-f"></i></a> <a class="socialIcon" href="https://www.linkedin.com/in/melvinsantanac" target="_blank" rel="noreferrer noopener"><i class="fab fa-linkedin-in"></i></a></div><p class="projectsList">practice projects</p><div><a class="btn-projects" href="https://todolist.melvinsantana.com/">MASC ToDo List</a> <a class="btn-projects" href="https://404-not-found-devchallengesio.melvinsantana.com/">404 Not Found Challenge</a></div></div></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Site under construction</title><link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"><link rel="stylesheet" href="assets/styles/style.min.css"></head><body><div class="coverPage"><div class="__coverPage-content"><h1>Melvin Santana</h1><h2>FrontEnd Developer</h2><h3>We are building something <strong>GREAT!</strong></h3><p>Building <strong>nice, clean and user friendly web projects</strong> that connects with the end user, taking care of details, <strong>writing semantic html code, also applying programming good practices</strong> are my main concerns.</p><div class="socialMedia"><a class="socialIcon" href="https://github.com/melvinsantanac" target="_blank" rel="noreferrer noopener"><i class="fab fa-github"></i></a> <a class="socialIcon" href="https://www.linkedin.com/in/melvinsantanac" target="_blank" rel="noreferrer noopener"><i class="fab fa-linkedin"></i></a> <a class="socialIcon" href="https://twitter.com/melvinsantanac" target="_blank" rel="noreferrer noopener"><i class="fab fa-twitter"></i></a> <a class="socialIcon" href="https://www.facebook.com/melvinsantanac" target="_blank" rel="noreferrer noopener"><i class="fab fa-facebook"></i></a> <a class="socialIcon" href="mailto:mascueto@gmail.com" target="_blank" rel="noreferrer noopener"><i class="fas fa-envelope"></i></a></div><p class="projectsListTitle">practice projects</p><div class="projectsList"><a class="btn-projects" target="_blank" href="https://todolist.melvinsantana.com/">MASC ToDo List</a> <a class="btn-projects" target="_blank" href="https://404-not-found-devchallengesio.melvinsantana.com/">404 Not Found Challenge</a></div></div></div></body></html>

0 comments on commit 4a092a5

Please sign in to comment.