r0r-5chach/CSY1018-assignment-1
r0r-5chach
/
CSY1018-assignment-1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

formatting adjustments. project layout started.

This commit is contained in:
jpez 2022-04-04 17:30:50 +01:00
parent 1a76ba36d9
commit 87d0cf2f57
5 changed files with 77 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
home/index.css
View File

@ -135,8 +135,4 @@ main {
main > h1 { main > h1 {
max-width: 20em; max-width: 20em;
}
.hidenav {
display: none;
} }

3
home/index.html
View File

@ -17,6 +17,7 @@
<link rel="stylesheet" href="home/index.css" media="screen"> <link rel="stylesheet" href="home/index.css" media="screen">
<link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)"> <link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
</head> </head>
<body id="clicked"> <body id="clicked">
<nav class="navigation"> <nav class="navigation">
@ -25,7 +26,7 @@
<a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a> <a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a> <a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
<a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a> <a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a>
<a class="arrow right"></a> <a class="arrow"></a>
</nav> </nav>
<main> <main>

48
portfolio/portfolio.css
View File

@ -0,0 +1,48 @@
body {
grid-template-areas:
"nav nav nav"
"main main main"
"footer footer footer";
}
main {
display: grid;
grid-template-rows: auto;
grid-template-areas:
"ardent"
"efron"
"website"
;
}
.project {
background-color: rgba(0, 0, 0, 70%);
color: #e5e5e5;
}
.right {
margin-top: 2em;
margin-left: 40em;
border-top-left-radius: 10em;
border-bottom-left-radius: 10em;
padding-left: 2.5em;
}
.left {
margin-top: 2em;
margin-right: 40em;
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
padding-left: 0.5em;
}
#ardent {
grid-area: ardent;
}
#efron {
grid-area: efron;
}
#website {
grid-area: website;
}

20
portfolio/portfolio.html
View File

@ -25,11 +25,29 @@
<a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a> <a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a> <a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
<a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a> <a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a>
<a class="arrow right"></a> <a class="arrow"></a>
</nav> </nav>
<main> <main>
<a class="shownav" href="portfolio/portfolio.html#clicked"></a> <a class="shownav" href="portfolio/portfolio.html#clicked"></a>
<section class="project left">
<h1 class="title">Ardent</h1>
<img src=""/>
<p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere, odit aut quod quam dolores fuga dolor illum neque, sunt laboriosam consequuntur harum, assumenda id soluta aliquid dolorum ullam deleniti vero.</p>
</section>
<section class="project right">
<h1 class="title">Efron's Dice</h1>
<img src=""/>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo commodi eveniet porro hic saepe ratione adipisci soluta consectetur voluptates id, asperiores voluptatum fugiat reiciendis impedit quasi quae aliquam? Atque, ipsum!</p>
</section>
<section class="project left">
<h1 class="title">Portfolio Website</h1>
<img src=""/>
<p class="description">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere, odit aut quod quam dolores fuga dolor illum neque, sunt laboriosam consequuntur harum, assumenda id soluta aliquid dolorum ullam deleniti vero.</p>
</section>
</main> </main>
<footer> <footer>

13
style/main.css
View File

@ -25,7 +25,8 @@ main {
.navigation { .navigation {
top: 0em; top: 0em;
margin: 0; margin: 0;
margin-right: -24em; grid-area: nav;
width: 80em;
display: grid; display: grid;
grid-template-columns: 20% 20% 20% 20% 20%; grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-areas: "home port blog contact arrow"; grid-template-areas: "home port blog contact arrow";
@ -95,7 +96,7 @@ nav > .link:hover {
} }
.arrow { .arrow {
margin-left: 6em; margin-left: 12em;
margin-top: 1em; margin-top: 1em;
border:0.5em solid #f29602; border:0.5em solid #f29602;
border-width: 0em 0.5em 0.5em 0em; border-width: 0em 0.5em 0.5em 0em;
@ -105,12 +106,10 @@ nav > .link:hover {
padding: 0.5em; padding: 0.5em;
opacity: 1; opacity: 1;
transition: opacity 1s ease-in; transition: opacity 1s ease-in;
}
.right {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.moreInfo { .moreInfo {
position: relative; position: relative;
text-decoration: underline; text-decoration: underline;
@ -147,4 +146,8 @@ nav > .link:hover {
@font-face { @font-face {
font-family: body; font-family: body;
src: url("../assets/fonts/Yomogi-Regular.woff"); src: url("../assets/fonts/Yomogi-Regular.woff");
}
.hidenav {
display: none;
} }