Inital layout complete, will add content next

This commit is contained in:
emma 2024-11-04 19:24:35 -05:00
commit 88e48a39dc
2 changed files with 115 additions and 0 deletions

62
index.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>rainydaydev</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<main>
<header>
<h1>rainyday.dev</h1>
<h2>A site showcasing the work and love of the web from emma</h2>
</header>
<section class="professional-projects">
<!-- projects from sites that are geared towards professional development will go here -->
<h3 class="section-header">Skill based practical projects</h3>
<p class="section-description">Projects here are from sites like <a href="https://www.frontendmentor.io" target="_blank">Frontend Mentor</a>
and are practical and technical in nature, encouraging growth through completing challenging projects</p>
<h4 class="section-links">Front End Mentor</h4>
<ul class="links">
<li></li>
</ul>
</section>
<section class="course-projects">
<!-- Projects here will be from course based work -->
<h3 class="section-header">Course projects</h3>
<p class="section-description">Projects here are those completed from online courses like freeCodeCamp or The Odin Project</p>
<h4 class="section-links">freeCodeCamp Responsive Web Design course</h4>
<ul class="links">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="small-web-projects">
<!-- projects made with a small web focus will be placed here -->
<h3 class="section-header">Small web focused projects</h3>
<p class="section-description">This section is largely made up of personal projects for the small web. It may in the future contain projects
aimed at helping others who also take part in the small web
</p>
<h4 class="section-links">Personal small web projects</h4>
<ul class="links">
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="links">
<!-- contains links to things like github, freeCodeCamp profile, etc -->
<h3 class="section-header">Places you can find what I'm working on</h3>
<ul class="links">
<li></li>
<li></li>
</ul>
</section>
</main>
</body>
</html>

53
style/style.css Normal file
View File

@ -0,0 +1,53 @@
:root {
--grey: #eeeeee;
}
*, ::before, ::after {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
body {
height: 100vh;
width: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--grey);
}
h1 {
margin: 1rem;
font-size: 2rem;
}
h2 {
margin: 1rem;
font-size: 1.5rem;
}
section {
margin: 1rem;
}
.section-header {
margin: 0.75rem;
margin-left: 0;
font-size: 1.25rem;
}
.section-links {
margin: 0.75rem;
margin-left: 0;
font-size: 1.1rem;
}
.links {
list-style-type: none;
}