smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 06:20:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: completed project

Browse source
This commit is contained in:
Smig Tech 2023-09-17 20:25:51 -04:00
parent 26c2498b7e
commit 54bd71c9b5
3 changed files with 114 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
css/styles.css
View file

@ -1,7 +1,7 @@
.header { .header {
padding: 0 170px; padding: 0 170px;
background-color: #2C3639; background-color: #2C3639;
height: 550px; min-height: 450px;
color: #DCD7C9; color: #DCD7C9;
} }
.navbar { .navbar {
@ -11,16 +11,49 @@
margin-bottom: 75px; margin-bottom: 75px;
} }
.navbar h2 {
font-weight: bold;
font-size: 22px;
}
.navbar ul { .navbar ul {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.navbar li {
gap: 15p;
margin: 10px;
}
.header-quote {
font-weight: 900;
font-size: xxx-large;
margin: 0;
}
.container { .container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
align-items: center; align-items: center;
flex-wrap: wrap;
}
.tagline {
align-items: center;
gap: 20px;
}
.tagphoto {
padding: 20px;
height: auto;
max-width: 200px;
}
.tagphoto img {
height: auto;
max-width: 250px;
} }
#skills { #skills {
@ -35,7 +68,7 @@
.cards { .cards {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -48,20 +81,32 @@
} }
.card-photo { .card-photo {
width: 100px; flex-shrink: 0;
color: #2C3639;
/* width: 100px;
height: 100px; height: 100px;
background-color: green; background-color: green; */
} }
.quote { .quote {
height: 400px; height: 400px;
background-color: #3F4E4F; background-color: #3F4E4F;
display: flex;
align-items: center;
color: #DCD7C9;
justify-content: center;
}
.quote-author {
display: flex;
align-content: flex-end;
} }
.quote h1 { .quote h1 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: xx-large;
} }
.contact { .contact {
@ -76,14 +121,41 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 150px; height: 150px;
/* width: 75%; */ background-color: #A27B5C;
color: #DCD7C9;
font-weight: 900;
min-width: 75%;
border-radius: 25px;
} }
.signup {
padding: 10%;
}
.signup-button {
padding: 10%;
}
.signup-button button {
cursor: pointer;
border: 2px solid #2C3639;
padding: 8px 16px;
border-radius: 8px;
text-align: center;
text-decoration: none;
background-color: #2C3639;
color: #DCD7C9;
width: 170px;
}
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #2C3639; background-color: #2C3639;
min-height: 50px;
color: #DCD7C9;
} }
body { body {
@ -91,9 +163,23 @@ body {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-content: space-between; align-content: space-between;
font-family: 'Roboto Flex', sans-serif;
min-height: 98vh; min-height: 98vh;
} }
ul { ul {
list-style-type: none; list-style-type: none;
} }
a {
text-decoration: none;
color: #A27B5C;
font-weight: bolder;
font-size: large;
}
button {
cursor: pointer;
padding: 8px 16px;
border-radius: 8px;
}

31
index.html
View file

@ -3,29 +3,32 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,700;8..144,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" class="cass"> <link rel="stylesheet" href="css/styles.css" class="cass">
<title>Mike Jr</title> <title>Mike Smith </title>
</head> </head>
<body> <body>
<section class="header"> <section class="header">
<div class="navbar"> <div class="navbar">
<h2>Mike Jr</h2> <a href="#"><h2>Mikejr.dev</h2></a>
<ul> <ul>
<li>Blog</li> <li><a href="#">Blog</a></li>
<li>Resume</li> <li><a href="#">Resume</a></li>
<li>GitHub</li> <li><a href="#">GitHub</a></li>
</ul> </ul>
</div> </div>
<div class="container"> <div class="container">
<div class="tagline"> <div class="tagline">
<h1 class="header-quote"> <h1 class="header-quote">
Mike Smith, Jr. Mike Smith - Engineer
</h1> </h1>
Learning in public, building in public, networking, enjoying what he does. Passionate Learning in public, building in public, networking, Developer/Systems Engineer.
</div> </div>
<div class="tagphoto"> <div class="tagphoto">
place-holder <img src="static/rocket-7774875_640.png" alt="coolrocket">
</div> </div>
</div> </div>
</section> </section>
@ -34,25 +37,25 @@
<div class="cards"> <div class="cards">
<div class="card"> <div class="card">
<div class="card-photo"> <div class="card-photo">
<i class="fab fa-linux fa-10x"></i>
</div> </div>
I've done some cool ish I've done some cool ish
</div> </div>
<div class="card"> <div class="card">
<div class="card-photo"> <div class="card-photo">
<i class="fab fa-aws fa-10x"></i>
</div> </div>
I've done some cool ish I've done some cool ish
</div> </div>
<div class="card"> <div class="card">
<div class="card-photo"> <div class="card-photo">
<i class="fab fa-python fa-10x"></i>
</div> </div>
I've done some cool ish I've done some cool ish
</div> </div>
<div class="card"> <div class="card">
<div class="card-photo"> <div class="card-photo">
<i class="fab fa-docker fa-10x"></i>
</div> </div>
I've done some cool ish I've done some cool ish
</div> </div>
@ -61,7 +64,8 @@
<section class="quote"> <section class="quote">
<div class="quote-tag"> <div class="quote-tag">
<h1>I Do stuff with integrty. Thanks</h1> <h1 class="quote-header">“Great things come from hard work and perseverance. No excuses.” </h1>
<p class="quote-author">— Kobe Bryant</p>
</div> </div>
</section> </section>
<section class="contact"> <section class="contact">
@ -78,5 +82,6 @@
<section class="footer"> <section class="footer">
Yeah baby this is some good code Yeah baby this is some good code
</section> </section>
<script src="https://kit.fontawesome.com/24f16b96cf.js" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

BIN
static/rocket-7774875_640.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB