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

Merge pull request #3 from jpez-development/blog_page 

Blog page
This commit is contained in:
Joshua Perry 2022-04-13 18:21:59 +01:00 committed by GitHub
parent e84fff4b33 4be4cffc90
commit 844e233849
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 124 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
blog/blog.css
View File

@ -0,0 +1,71 @@
.blog_post {
background-color: rgba(0, 0, 0, 80%);
margin-left: 10em;
min-width: 25em;
padding-left: 1em;
padding-right: 1em;
border-radius: 2em;
}
.blog_image {
max-width: 10em;
}
.blog {
display: grid;
grid-template-columns: repeat(3, 2fr);
gap: 1em;
}
.blog_post#first:focus-within {
transform: scale(180%, 180%) translate(20em, 6em);
transition: transform 60ms;
}
.blog_post#second:focus-within {
transform: scale(180%, 180%) translate(0em, 6em);
transition: transform 60ms;
}
.blog_post#third:focus-within {
transform: scale(180%, 180%) translate(-20em, 6em);
transition: transform 60ms;
}
.blog_post#fourth:focus-within {
transform: scale(180%, 180%) translate(20em, -13em);
transition: transform 60ms;
}
.blog_post#fifth:focus-within {
transform: scale(180%, 180%) translate(0em, -13em);
transition: transform 60ms;
}
.blog_post#sixth:focus-within {
transform: scale(180%, 180%) translate(-20em, -13em);
transition: transform 60ms;
}
.blog_post:focus-within > button.arrow {
transform: rotate(45deg);
transition: transform 1s;
}
.blog_post:focus-within {
z-index: 100;
}
button.arrow {
background-color: transparent;
margin: 0;
transform: rotate(225deg);
transition: transform 1s;
}

51
blog/blog.html
View File

@ -28,8 +28,57 @@
<a class="arrow right"></a>
</nav>
<main>
<main id="open">
<a class="shownav" href="blog/blog.html#clicked"></a>
<section class="blog">
<section class="blog_post" id="first">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="second">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="third">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="fourth">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="fifth">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="sixth">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
</section>
</main>
<footer>

6
style/mobile.css
View File

@ -50,8 +50,8 @@ main {
width: 1.25em;
display: block;
position: fixed;
border-top: 0.2em solid white;
border-bottom: 0.2em solid white;
border-top: 0.2em solid #f29602;
border-bottom: 0.2em solid #f29602;
}
.hidenav {
@ -74,7 +74,7 @@ main {
position: absolute;
width: 1.25em;
margin-top: 0.3em;
border-top: 0.2em solid white;
border-top: 0.2em solid #f29602;
}
#clicked .shownav {