Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changes as per the Mock in 4.1.4 #18

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Changes as per the Mock in 4.1.4 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
226 changes: 117 additions & 109 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,134 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pete Thinkful</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Header section -->
<header>
<h1>Pete Thinkful | Artist</h1>
<nav>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
</header>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Header section -->
<header>
<div class="header-bar">
<h1>Pete Thinkful | Artist</h1>
<nav>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<main>
<div>
<main>
<div>
<!-- About section -->
<article id="about">
<h2>About</h2>
<section>
<h3>Hi! I'm Pete Thinkful</h3>
<div>
<img
class="image-circle"
src="images/pete-thinkful.png"
alt="Pete Thinkful"
/>
</div>
<p>I'm an artist living in Denver, Colorado.</p>
<p>As an artist, I'm interested in:</p>
<ul>
<li>Producing abstract art</li>
<li>Creating street graffiti art</li>
<li>Connecting with like-minded artists</li>
</ul>
<p>
Please feel free to take a look at my website and feel free to
<a href="#contact">contact me</a>.
</p>
</section>
<h2>About</h2>
<!-- Container for horizontally aligning Profile image and intro -->
<div id="about-image-intro">
<div>
<img
class="image-circle"
src="images/pete-thinkful.png"
alt="Pete Thinkful"
/>
</div>
<section>
<h3>Hi! I'm Pete Thinkful</h3>

<section>
<h3>Pete's Background</h3>
<p>
After graduating college, I became an art teacher and worked with
beginners and professionals. I love art and my works have been
featured in major art galleries across the globe.
</p>
<p>
If you're looking to hire an artist or if you're an artist looking
for a collaborator for your next project, please reach out! I'm so
excited to work with other artists to create new art.
</p>
</section>
<p>I'm an artist living in Denver, Colorado.</p>
<p>As an artist, I'm interested in:</p>
<ul>
<li>Producing abstract art</li>
<li>Creating street graffiti art</li>
<li>Connecting with like-minded artists</li>
</ul>
<p>
Please feel free to take a look at my website and feel free to
<a href="#contact">contact me</a>.
</p>
</section>
</div>
<section>
<h3>Pete's Background</h3>
<p>
After graduating college, I became an art teacher and worked with
beginners and professionals. I love art and my works have been
featured in major art galleries across the globe.
</p>
<p>
If you're looking to hire an artist or if you're an artist looking
for a collaborator for your next project, please reach out! I'm so
excited to work with other artists to create new art.
</p>
</section>
</article>

<hr />
<hr/>

<!-- Portfolio section -->
<article id="portfolio">
<h2>Portfolio</h2>
<section>
<h3>Abstract Red</h3>
<div>
<img src="images/abstract-red.png" alt="Abstract Red" />
</div>
<p>
Vaporware wayfarers heirloom neutra disrupt. Activated charcoal
waistcoat scenester hell of.
</p>
</section>
<h2>Portfolio</h2>
<!-- Container for horizontally aligning portfolio items-->
<div class="portfolio-items">
<section>
<h3>Abstract Red</h3>
<div>
<img src="images/abstract-red.png" alt="Abstract Red"/>
</div>
<p class="project-description">
Vaporware wayfarers heirloom neutra disrupt. Activated charcoal
waistcoat scenester hell of.
</p>
</section>

<section>
<h3>Spiral Zany</h3>
<div>
<img src="images/spiral-zany.png" alt="Spiral Zany" />
</div>
<p>
Sriracha portland taxidermy cronut messenger bag, vegan
distillery. Vaporware kickstarter air plant mumblecore food truck.
</p>
</section>
<section>
<h3>Spiral Zany</h3>
<div>
<img src="images/spiral-zany.png" alt="Spiral Zany"/>
</div>
<p class="project-description">
Sriracha portland taxidermy cronut messenger bag, vegan
distillery. Vaporware kickstarter air plant mumblecore food truck.
</p>
</section>

<section>
<h3>Melted Rainbow</h3>
<div>
<img src="images/melted-rainbow.png" alt="Melted Rainbow" />
<section>
<h3>Melted Rainbow</h3>
<div>
<img src="images/melted-rainbow.png" alt="Melted Rainbow"/>
</div>
<p class="project-description">
Edison bulb single-origin coffee snackwave, actually ennui
locavore shabby chic forage.
</p>
</section>
</div>
<p>
Edison bulb single-origin coffee snackwave, actually ennui
locavore shabby chic forage.
</p>
</section>
</article>

<hr />
<hr/>

<!-- Contact section -->
<article id="contact">
<h2>Contact</h2>
<p>
I'd love to hear from you! Please feel free to contact or follow me:
</p>
<ol>
<li>
<a href="">LinkedIn</a>
</li>
<li>
<a href="">Instagram</a>
</li>
<li>
<a href="">Pinterest</a>
</li>
</ol>
<h2>Contact</h2>
<p>
I'd love to hear from you! Please feel free to contact or follow me:
</p>
<ol>
<li>
<a href="">LinkedIn</a>
</li>
<li>
<a href="">Instagram</a>
</li>
<li>
<a href="">Pinterest</a>
</li>
</ol>
</article>
</div>
</main>
</div>
</main>

<!-- Footer section -->
<footer>
<p>© Pete Thinkful. All rights reserved.</p>
</footer>
</body>
<!-- Footer section -->
<footer>
<p>© Pete Thinkful. All rights reserved.</p>
</footer>
</body>
</html>
83 changes: 57 additions & 26 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,108 @@
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Source+Sans+Pro:wght@400&display=swap");

body {
background-color: #eae2b7;
color: #003049;
font-family: "Source Sans Pro", Tahoma, Geneva, Verdana, sans-serif;
padding: 40px;
background-color: #eae2b7;
color: #003049;
font-family: "Source Sans Pro", Tahoma, Geneva, Verdana, sans-serif;
padding: 40px;
}

/* Headings */
h1,
h2,
h3 {
font-family: "Playfair Display", Times, serif;
text-align: center;
font-family: "Playfair Display", Times, serif;
text-align: center;
}

/* Header */
header {
text-align: center;
text-align: center;
}

/* Containers */
div {
background-color: #eae2b7;
margin: auto;
width: 600px;
background-color: #eae2b7;
margin: auto;
width: 600px;
}

article {
padding: 50px 0;
padding: 50px 0;
}

article div {
text-align: center;
width: 100%;
text-align: center;
width: 100%;
}

/* Paragraphs */
p {
line-height: 1.5;
p, ul {
line-height: 1.5;
text-align: left;
}

/* Links */
a:link {
color: #d62828;
color: #d62828;
}

a:hover {
color: #f77f00;
color: #f77f00;
}

nav a {
padding-left: 20px;
padding-left: 20px;
}

/* Images */
img {
width: 100%;
max-width: 200px;
height: auto;
width: 100%;
max-width: 200px;
height: auto;
}

.image-circle {
border: 2px solid #003049;
border-radius: 50%;
border: 2px solid #003049;
border-radius: 50%;
}

/* Footer */
footer {
text-align: center;
footer p {
text-align: center;
}

/* Other page elements */
hr {
border: 1px solid black;
border: 1px solid black;
}

/* Align Header items using flex in row and align content vertically */
.header-bar {
display: flex;
flex-direction: row;
align-items: center;
}

/*Align profile image and intro horizontally*/
#about-image-intro {
display: flex;
flex-direction: row;
}

/*Set font size as per requirement and Align center as per mock*/
.project-description {
font-size: 14px;
text-align: center;
}

/*Horizontally display all portfolio items*/
.portfolio-items {
display: flex;
flex-direction: row;
}

/*Custom spacing between portfolio items*/
div.portfolio-items section {
padding: 0 0 0 2px;
}