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

My Portfolio draft #1130

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

My Portfolio draft #1130

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
250cfaf
trying this again
Feb 22, 2023
18c5c1d
added some stuff
Feb 22, 2023
294db86
Added Musicgit add .
Feb 23, 2023
0378ca6
not sure if it is responsive
Feb 23, 2023
535c24f
fixed the links
Feb 23, 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
9 changes: 9 additions & 0 deletions 1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<Head>


</Head>
<Body>

Hello World
</Body>
9 changes: 9 additions & 0 deletions 2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<Head>


</Head>
<Body>

Hello World
</Body>
9 changes: 9 additions & 0 deletions 3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<Head>


</Head>
<Body>

Hello World
</Body>
148 changes: 147 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,157 @@
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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=Dosis&family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style/index.css">
</head>

<body>

<header>
<div>
<h1>Marie Kirton-Daike</h1>
<h2>大家 マリー</h2>
</div>
<div class="nav">
<nav>
<a class="pink" href="1.html">Home</a>
<a class="purple" href="2.html">About</a>
<a class="blue" href="#contact">Contact</a>
<a class="green" href="#kawaii">Projects</a>
</nav>
</div>
<div class="music">
<audio controls autoplay muted>
<source src="nature-restores-full.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
</div>

</header>
<main>
<div class="intro">
<img class="profilepic"
src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/job144-bee-040e.jpg?w=1200&h=1200&dpr=1&fit=clip&crop=default&fm=jpg&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=a1c0e88e162315c3e729563964aedaaa"
alt="welcome image">
<div class="myname">
<h2>Marie</h2>
<a href="">My Project<br>
プロジェクト
</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat pariatur quos ab magnam <br>iusto
ad
facere quae, molestiae, laboriosam corrupti asperiores sit similique provident accusantium unde
praesentium <br>consequatur hic suscipit?</p>
<p>私の可愛いポートフォリオへようこそ</p>
</div>
</div>

</main>
<section id="kawaii" class="pictures">
<div class="thestuff">

<div class="container">
<img class="image" src="https://wallpapercave.com/wp/wp4588148.png" alt="city night">
<div class="overlay">
<a href="https://www.amazon.com/Elephant-Room-Tamashi-D-ebook/dp/B0BS9ZRKQW/ref=sr_1_1?crid=2O37GQONH1MNX&keywords=the+elephant+in+the+room+tamashi+d&qid=1677118214&sprefix=the+elephant+in+the+room+tamashi+d%2Caps%2C76&sr=8-1" target="_blank">
<div class="text">A Book I've Written</div>
</a>
</div>
</div>

<div class="container">
<img class="image"
src="https://wallpapers.com/images/featured-small/kawaii-purple-vzc13pjmegmxt2ny.webp"
alt="two girls walking with kawaii accessories">
<div class="overlay">
<a
href="https://www.amazon.com/Bitter-Sweet-Book-Short-Anthology-ebook/dp/B09B1X8TC3/ref=sr_1_1?crid=1454HM4NBLWYM&keywords=the+bitter+sweet+book+sam+shorts&qid=1677118273&sprefix=the+bitter+sweet+book+sam+short%2Caps%2C98&sr=8-1" target="_blank">
<div class="text">A Book I've Co-Authored</div>
</a>
</div>
</div>

<div class="container">
<img class="image"
src="https://wallpapers.com/images/high/kawaii-purple-and-pink-houses-0prrj2z7aq9dnrmu.webp"
alt="nighttime in kyoto">
<div class="overlay">
<a href="https://music.apple.com/me/album/black-vans-single/1638736962"target="_blank" >
<div class="text">Music I've Made</div>
</a>
</div>
</div>

<div class="container">
<img class="image"
src="https://wallpapers.com/images/high/kawaii-purple-sky-with-hearts-i6yehd52o4oqu757.webp"
alt="moon in the sky with hearts">
<div class="overlay">
<a href=""><div class="text">TEXT HERE IN CENTER</div></a>
</div>
</div>

</div>
</section>

<!-- everything up is good this stuff below got messed up fix the anchors -->
<section id="kawaii2">
<div class="thestuff2">

<div class="container">
<img class="image"
src="https://wallpapers.com/images/high/kawaii-purple-dreamy-no-face-4pkvowyla4gcl2j2.webp"
alt="kaonashi from sen to chihiro walking through japan town">
<div class="overlay">
<a href=""><div class="text">TEXT HERE IN CENTER</div></a>
</div>
</div>

<div class="container">
<img class="image"
src="https://wallpapers.com/images/high/kawaii-purple-strips-with-fruit-icons-59e4oeldk5ja5kvu.webp"
alt="cute straps with illustrated smily faces on carrots">
<div class="overlay">
<a href=""><div class="text">TEXT HERE IN CENTER</div></a>
</div>
</div>

<div class="container">
<img class="image"
src="https://wallpapers.com/images/high/kawaii-purple-angel-girl-en8nd0uiaqo4zpg2.webp"
alt="illustrated girl with cute backpack in the night with the moon over her">
<div class="overlay">
<a href=""><div class="text">TEXT HERE IN CENTER</div></a>
</div>
</div>

<div class="container">
<img class="image"
src="https://wallpapers.com/images/high/kawaii-purple-sky-over-city-erl7uao2lnrcedup.webp"
alt="moonlight in the night illustrated">
<div class="overlay">
<a href=""><div class="text">TEXT HERE IN CENTER</div></a>
</div>
</div>

</div>


</section>

<footer>
<div>
<h3 class="ending">Like What You See?</h3>
<button id="contact">Contact Me</button>
</div>
</footer>

</body>

</html>
Binary file added nature-restores-full.wav
View file
Open in desktop
Binary file not shown.
160 changes: 159 additions & 1 deletion style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,159 @@
/* Add CSS styling here */
/* Add CSS styling here */
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}




*{
font-family: 'Dosis', sans-serif;
padding: 0;
margin: 0;

}
header{
background-color: black;
padding: 15px;
display: flex;
justify-content: space-between ;
}

h1{
font-size: 2rem ;
color: white;
margin-bottom: 5px;
}
h2{
color: white;
margin-bottom: 5px;

}

nav {
font-size: 2rem;
padding: 15px 0px;
display: flex;


}

nav a{
color: white;
border-radius: 10%;
padding: 3%;
margin-left: 2%;
}

.pink{
background-color: rgba(169, 91, 129, 0.4);

}

.purple{
background-color: rgba(128, 0, 128, 0.4);

}

.blue{
background-color: rgba(17, 103, 103, 0.4);

}

.green{
background-color: rgba(76, 119, 11, 0.4);

}

.profilepic{
border-radius: 5%;
height: 30rem;
width: 30rem;
margin: 5%;
}

.intro{
display: flex;

}
.myname {
text-align: center;
margin: 100px 10px 10px 10px;
font-size: x-large;
}


.thestuff{
display: flex;
margin-left: 20%;
margin-right: 5%;

}
.thestuff2{
display: flex;
margin-left: 5%;
margin-right: 25%;
}


footer{
text-align: center;
}
.ending{
font-size: 3rem;
}

#contact{
font-size: 2rem;
color: white;
background-color: black;
padding: 2%;
}




.container {
position: relative;
width: 50%;
}
.image{
height: 30rem;
width: 20rem;
border-radius: 5%;
margin: 5px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 30rem;
width:20rem;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 140, 186, 0.4);
border-radius: 5%;
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}