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

London 10 - Elena Barker - HTML/CSS - Coursework - Week 4 #286

Open
ElenaBarker wants to merge 2 commits into
base: master
Choose a base branch
from
Open

London 10 - Elena Barker - HTML/CSS - Coursework - Week 4 #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77987e8
Basic HTML written
ElenaBarker May 9, 2023
221906a
added more HTML and CSS, styled header
ElenaBarker May 10, 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
113 changes: 113 additions & 0 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,116 @@
/* Add your CSS here */

/* Dont' forget to link this file to your HTML in the <head> */


/* ### 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 */



body {
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 140px 800px 200px;
}

header {
display: flex;
align-items: center;
justify-content: space-between;
height: 100px;
padding: 8px 40px;
margin-bottom: 30px;
}

header a {
text-decoration: none;
padding: 10px;
}

.title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
line-height: 0%;
margin-top: 16px;
}

.box {
background-color: #0150FD;
width: 16px;
height: 16px;
margin-right: 16px;
margin-left: 16px;
align-self: center;
}

.name {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 25px;

}

.portfolio-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 400px;
height: 500px;
background-color:#F4ECE6;



}

.portfolio-card img {
width: 130px;
border-radius: 50%;
}

.social-media-nav img {
width: 1.3rem;
padding: 0.5rem;
border-radius: 0%;
}

.first-button {
background-color: #0150FD;
color: #FFF;
align-self: center;
justify-content: center;
font-size: 15px;
font-weight: 300;
width: 135px;
height: 35px;
border-radius: 35px;
border: none;
}

.second-button {
background-color: #FFF;
color: #000;
align-self: center;
justify-content: center;
font-size: 15px;
font-weight: 300;
width: 135px;
height: 35px;
border-radius: 35px;
border: 1px solid #000;

}









81 changes: 79 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,94 @@
<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="stylesheet" href="css/main.css">
<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=Poppins:wght@600&display=swap" rel="stylesheet">
<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=Poppins:wght@600&family=Quicksand:wght@300&display=swap"
rel="stylesheet">

<title>Responsive grid project</title>
</head>

<body>
<header>
<div class="title">
<div class="box"></div>
<h2 class="name"> Maya Nelson</h2>
<p> / PROJECT MANAGER</p>
</div>
<nav class="header-navbar">
<a href="#">ABOUT ME</a>
<a href="#">RESUME</a>
<a href="#">PROJECTS</a>
<a href="#">CONTACT</a>
</nav>
</header>
<main>
<div class="portfolio-card">
<img src="https://static.wixstatic.com/media/2e2a49_bd3a1599bc1b4265a01b2754b99b8536~mv2_d_5760_3840_s_4_2.jpeg/v1/crop/x_2703,y_43,w_2199,h_2205/fill/w_205,h_205,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/AdobeStock_230407429.jpeg" alt="profile picture" class="profile-picture">
<p class="name"><b>Maya<br /> Nelson</b></p>
<p>PROJECT MANAGER</p>
<nav class="social-media-nav">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQNgmZb41ZiFtUCgddb3AdTG4UNzEK1NxMb-CWQq3evg&s" href="" alt="Facebook">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGUFcw0s8YBIQTPwoT_fj36ZXnh4FeXRn6Y6vD1Wqlkw&s" href=""
alt="Twitter">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB4agyICe43CkiIUMGzBJzwl43cT30Eucp2c3yE3TpSQ&s" href=""
alt="Linkedin">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRDO0Sb6V0D7ME7aqA4_Ldu0CIU5L8XIHzP7nqaXqOJA&s" href=""
alt="Instagram">

<!-- Add your markup here -->
</nav>
</div>
<div class="left-container"></div>
<div class="main-content">
<h1><b>Hello</b></h1>
<h3>Here's who I am & what I do</h3>
<button class="first-button">RESUME</button>
<button class="second-button">PROJECTS</button>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to
add your own content and make changes to the font.</p>
<p>I’m a great place for you to tell a story and let your users know a little more about you.</p>
</div>
</main>
<footer>
<p>© 2035 by Maya Nelson.<br />
Powered and secured by Wix</p>
<div class="footer-contacts">
<div>
<p><b>Call</b></p>
<p>123-456-7890</p>
</div>
<div>
<p><b>Write</b></p>
<p>info@mysite.com</p>
</div>
<div>
<p><b>Follow</b></p>
<nav class="social-media-nav-footer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQNgmZb41ZiFtUCgddb3AdTG4UNzEK1NxMb-CWQq3evg&s"
href="" alt="Facebook">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGUFcw0s8YBIQTPwoT_fj36ZXnh4FeXRn6Y6vD1Wqlkw&s"
href="" alt="Twitter">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB4agyICe43CkiIUMGzBJzwl43cT30Eucp2c3yE3TpSQ&s"
href="" alt="Linkedin">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRDO0Sb6V0D7ME7aqA4_Ldu0CIU5L8XIHzP7nqaXqOJA&s"
href="" alt="Instagram">

</nav>
</div>
</div>


<p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p></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>

</html>