box-sizing: border-box;
margin: 0;
padding: 0;
font-family:cursive;
}
.navbar {
background: black;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar-container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar-logo {
background-color: red;
background-image: linear-gradient(to top, rgb(251, 29, 29) 0%, rgb(243, 198, 114) 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-globe {
margin-right: 0.5rem;
}
.navbar-menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar-item {
height: 80px;
}
.navbar-links {
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar-btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #eb3f3f;
color: white;
}
.button:hover {
background: white;
color: #eb3f3f;
transition: all 0.3s ease;
}
.navbar-links:hover {
color: #eb3f3f;
transition: all 0.3s ease;
}
@media screen and (max-width: 960px) {
.navbar-container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar-menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: black;
}
.navbar-menu.active {
background: black;
opacity: 1;
top: 100%;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar-logo {
padding-left: 25px;
}
.navbar-toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: #fff;
}
.navbar-item {
width: 100%;
}
.navbar-links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate( 5%, 20%);
}
.navbar-btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80%;
margin: 0;
}
.navbar-toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
.main {
background-color: black;
}
.main-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 90vh;
background-color: black;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0 50px;
}
.main-content h1 {
font-size: 4rem;
background-color: #eb3f3f;
background-image: linear-gradient(to top, rgb(251, 29, 29) 0%, rgb(243, 198, 114) 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main-content h2 {
font-size: 3rem;
background-color: #eb3f3f;
background-image: linear-gradient(to top, rgb(68, 47, 251) 0%, rgb(47, 192, 245) 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main-content p {
margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
color: white;
}
.main-button {
display:flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background: #eb3f3f;
border: 1px;
border-radius: 4px;
color: white;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
text-decoration: none;
width: 25%;
height: 80px;
}
.main-button p {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
padding-top: 1rem;
padding-bottom: 2rem;
}
.main-button p:hover {
color: #eb3f3f;
}
.main-button a {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
padding-top: 1rem;
padding-bottom: 20px;
}
.main-button a:hover {
font-size: 1rem;
background: #fff;
color: #eb3f3f;
transition: all 0.3s ease;
border-radius: 4px;
height: 50px;
padding: 39px 16px;
}
#main-img {
border-radius: 50%;
width: 450px;
padding: 20px 20px;
}
#family-pic {
display: flex;
justify-content: center;
border-radius: 50%;
width: 100%;
height: 100%;
background-color: black;
}
.about-container {
display: flex;
justify-content: center;
text-align: center;
background: black;
padding: 70px;
}
.about-text {
float: right;
text-align: center;
color: white;
font-size: 2rem;
padding: 10px 20px;
width: 50%;
}
.about-title {
color: blue;
}
.about-info {
width: 100%;
display: flex;
padding: 50px 5px;
padding-bottom: 200px;
}
.about-img {
float: left;
padding: 20px;
width: 450px;
height: 450px;
}
.projects-container {
display: flex;
justify-content: center;
flex-direction: column;
color: black;
padding: 50px;
}
.projects-title {
display: flex;
justify-content: center;
height: 200px;
margin-bottom: 50px;
font-size: 4rem;
color: red;
}
.all-projects {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 100%;
}
.project1 {
display: flex;
justify-content: center;
flex-direction: column;
width: 50%;
height: 50%;
padding: 80px;
color: white;
padding: 0 200px;
}
.weather-website {
display: flex;
justify-content: center;
flex-direction: row;
padding: 10px 125px;
color: white;
width: 480px;
}
#weather-img {
display: flex;
justify-content: center;
height: 500px;
width: 400px;
margin-left: 50px;
}
.project2 {
display: flex;
justify-content: center;
flex-direction: column;
width: 50%;
height: 50%;
color: white;
}
.project3 {
display: flex;
justify-content: center;
flex-direction: column;
width: 50%;
height: 50%;
color: white;
}
.project4 {
display: flex;
justify-content: center;
flex-direction: column;
width: 50%;
height: 50%;
color: white;
}
.contact_info-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
color: white;
padding: 150px;
}
.contact-title {
display: flex;
justify-content: center;
font-size: 3rem;
color: lightskyblue;
}
.phone {
display: flex;
justify-content: center;
font-size: 2rem;
}
.email {
display: flex;
justify-content: center;
font-size: 2rem;
text-decoration: none;
color: white;
}
.linked-in {
display: flex;
justify-content: center;
font-size: 2rem;
}
.linked-in a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luis Delgado</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<!--Navigation Section-->
<nav class="navbar">
<div class="navbar-container">
<a href="/" id="navbar-logo"><i class="fa-solid fa-globe"></i>LUIS DELGADO</a>
<div class="navbar-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar-menu">
<li class="navbar-item">
<a href="index.html" class="navbar-links"> Home </a>
</li>
<li class="navbar-item">
<a href="index.html#about" class="navbar-links"> About </a>
</li>
<li class="navbar-item">
<a href="index.html#project" class="navbar-links"> Projects </a>
</li>
<li class="navbar-btn">
<a href="index.html#contact" class="button"> Contact </a>
</li>
</ul>
</div>
</nav>
<!--Hero Section-->
<div class="main">
<div class="main-container">
<div class="main-content">
<h1>Luis Delgado</h1>
<h2>Web Developer</h2>
<p>Your Next Developer!!</p>
<button class="main-button"><a href="index.html#contact"><p>Contact</p></a></button>
</div>
<div class="main_img-container">
<img src="images/Profile.jpg" alt="profile" id="main-img"/>
</div>
</div>
<div class="about-container" id="about">
<div class="about-text">
<h1 class="about-title">About</h1>
<p class="about-info"> I decided to change my career because I was having financial issues. Needed a career I liked and could help me with better income.</p>
</div>
<div class="about-img">
<img src="images/programmer.jpg" alt="About" id="family-pic"/>
</div>
</div>
<div class="projects-container" id="project">
<div class="projects-title">
<h1>Projects</h1>
</div>
<div class="all-projects">
<div class="project1">
<h2 class="weather-website">Weather App</h2>
<a href="Weather_App/index.html"><img src="images/weather.png" alt="weather" id="weather-img"/></a>
</div>
<div class="project2">
<h2 class="baker-website">Baker Website</h2>
</div>
<div class="project3">
<h2 class="/">calculator</h2>
</div>
<div class="project4">
<h2 class="/">ToDo List</h2>
</div>
</div>
</div>
<div class="contact_info-container">
<div class="contact-title" id="contact">
<h1>Contact</h1>
</div>
<div class="phone">
<p>Phone: (770)652-8008</p>
</div>
<div class="email">
<p>Email: Delgado.luis0@gmail.com</p>
</div>
<div class="linked-in">
<a href="www.linkedin.com/in/luis-delgado-534a84297">
<p>Linked-In: Luis Delgado</p>
</a>
</div>
</div>
</div>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/5f77843efe.js" crossorigin="anonymous"></script>
</body>
</html>