Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London10_StellaDelMar-Rodriguez_HTML-CSS-Coursework-Week4 #287

Open
Stelladelmar wants to merge 5 commits into
base: master
Choose a base branch
from
Open

London10_StellaDelMar-Rodriguez_HTML-CSS-Coursework-Week4 #287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de41d5d
-
Stelladelmar May 11, 2023
5c28ec5
nav fixed
Stelladelmar May 12, 2023
d4d8f7a
footer started
Stelladelmar May 13, 2023
5ef37f3
HEADER FOOTER STYLE
Stelladelmar Jun 2, 2023
c8e17ba
minor css
Stelladelmar Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}
134 changes: 133 additions & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,135 @@
/* Add your CSS here */
/*
Fonts
Headings: Poppins - Semi-bold 600
https://fonts.google.com/specimen/Poppins
Body: Quicksand - Light 300
https://fonts.google.com/specimen/Quicksand

Colors
Dark beige: #E6DACD
Light beige: #F4ECE6
Royal blue: #0150FD
Black: #000
White: #FFF */
/* Add your CSS here */
/* Dont' forget to link this file to your HTML in the <head> */

header {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
background-color: white;
color: #000;
padding: 50x;
display: flex;
justify-content: center;
}
.fixed-nav {
display: flex;
font-weight: bold;
justify-content: space-between;
padding: 3%;

}
.nav-left{
display: flex;
justify-content: left;
margin-top: 10%;
font-family: "Poppins";

}
.nav-left p {
font-weight: lighter;
}


.nav-right {
display: flex;
justify-content:space-evenly;
margin-top: 10%
}
.nav-right a {
text-decoration: none;
justify-content: right;
color: #0050FF;
font-size: 15px;
padding:2%;
font-family: Poppins;
}


body {
background-color:#E6DACD;

/* font-family: 'Quicksand', sans-serif; */
}







/* footer {
background-color: white;
padding:50px;


} */
.footer-container {
/* position: fixed; */

/* float: left; */
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center;
}
.row{
}
.the-number{
position: fixed;
left: 0;
bottom: 0;
float:left;
width: 25%;
/* width: 100%; */
background-color: white;
color: black;
text-align: left;

}
.tlf {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center;

}
.number {
float:left;
width: 25%;
/* position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center; */

}
/* .email {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center;

} */
43 changes: 43 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,58 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Add a link to your custom CSS here -->
<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=Quicksand&display=swap" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/main.css">
<title>Responsive grid project</title>
</head>

<body>
<header>
<div class="fixed-nav">
<div class="nav-lef">
<h1>Maya Nelson</h1><p>/PROJECT MANAGER</p>
</div>
</div>

<div class="nav-right">

<a href="#">ABOUT&nbsp;ME </a>
<a href="#">RESUME </a>
<a href="#">PROJECTS </a>
<a href="#">CONTACT </a>

</div>
</header>
<!-- Add your markup here -->
<main>

</main>
<footer>
<div class="footer-container">
<div class="tlf">
<p>Call</p>
<div class="the-number">
<p>123-456-7890</p>
</div>
<div class="email">
<p>maya@email.com</p>

<p class="website-owner">This website design was created by Wix.com, and is used here for strictly educational purposes.</p>

<!-- <div class="tlf">
<p>Call</p>
<div class="the-number"></div>
<p>123-456-7890</p>
</div>
<div class="email">
<p>maya@email.com</p> -->

</div>

</footer>
<!-- Please leave this in to credit the creators of this design -->
<p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p>
</body>
Expand Down