Skip to content

Commit

Permalink
Add shadow on hover for card element closes #5
Browse files Browse the repository at this point in the history
  • Loading branch information
Abdul Azizi authored and Abdul Azizi committed May 2, 2021
1 parent a505b3f commit ec43004
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 78 deletions.
82 changes: 57 additions & 25 deletions assets/css/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,12 @@ body {
.header {
flex: 1;
background-color: silver;
padding: 20px;
}

.wrapper {
display: flex;
height: 100vh;
height: 100%;
background-color: #fff;
padding: 1rem;
text-align: justify;
Expand All @@ -52,32 +53,58 @@ body {
flex: 1;
background-color: #f1f1f1;
font-size: 0.8rem;
padding: 20px;
border-left: 1px solid #888;
z-index: -1;
}

.footer {
flex: 1;
background: steelblue;
background: #999;
color: #fff;
bottom: 0;
padding: 1rem;
font-size: 1rem;
font-weight: lighter;
}

.container div {
padding: 0.1em;
}
.innergrid {
display: grid;
min-height: max-content;
/* grid-template-columns: 60% 40%; */
grid-template-columns: 60% 40%;
grid-template-rows: 100px 50px;
background-color: #f1f1f1;
padding: 1.5vw;
margin: 2vw;
grid-template-rows: auto;
grid-template-areas: "text image";
background-color: #fbedc5;
margin: 1vw;
/* Add shadows to create the "innerGrid or card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.innergrid:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.content {
margin: 25px;
}

.text {
grid-area: text;
margin: 20px;
}

figure {
grid-area: image;
margin: 20px 20px 0 0;
}

img {
max-width: 100%;
padding: 0px;
border-radius: 7px 7px 0 0;
}

Expand All @@ -86,26 +113,16 @@ body {
border-radius: 0 0 7px 7px;
background-color: #d1d1d1;
text-align: justify;
font-size: 0.8em;
color: #00395e;
}

/* z-index: -1; */
.content1 {
flex: 3;
order: 3;
background-color: #fff;
padding: 1rem;
text-align: justify;
z-index: -1;
}

.sidebar1 {
flex: 1;
order: 4;
background-color: #f1f1f1;
.author {
width: 100%;
font-size: 0.8rem;
padding: 20px;
border-left: 1px solid #888;
z-index: -1;
position: relative;
padding-bottom: 25px;
color: #00395e;
}

.footer1 {
Expand All @@ -117,4 +134,19 @@ body {
font-size: 1rem;
font-weight: lighter;
}

a {
color: #00395e;
font-size: 0.8rem;
font-style: oblique;
text-decoration: none;
}

a:hover {
color: #e20707;
}

em {
color: #00395e;
}
}
3 changes: 1 addition & 2 deletions assets/css/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ li a:hover {
font-size: 0.9rem;
background-color: #53a1ff;
color: #000;
transition: 0.3s;
}

.sidebar ul {
Expand All @@ -43,8 +44,6 @@ li a:hover {
}

.sidebar ul > li > a:hover {
color: #000;
background-color: #53a1ff;
font-size: 0.75rem;
padding: 0;
margin: 0;
Expand Down
75 changes: 70 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="assets/css/combined.css" rel="stylesheet" />
<title>Document</title>
<title>Home</title>
</head>
<body>
<div class="container">
Expand All @@ -21,7 +21,7 @@ <h1>Tech-Blog</h1>
</div>
<div class="wrapper">
<div class="main">
<!-- innerGrid start -->
<!-- innerGrid or card elements start -->
<div class="innergrid">
<!-- content -->
<div class="text">
Expand All @@ -38,18 +38,83 @@ <h3>'Strong' evidence found for a new force of nature</h3>
<a href="pages/posts.html#post1">Continue Reading</a>
</div>
<!-- image -->
<div class="image">
<figure>
<img src="assets/images/tech01.jpg" alt="Muon experiment" />
<figcaption>
The findings come from the US Muon g-2 experiment
</figcaption>
</figure>
</div>
<!-- innerGrid start -->

<!-- innerGrid or card elements start -->
<div class="innergrid">
<!-- content -->
<div class="text">
<h3>Nasa's Ingenuity Mars helicopter set for first flight</h3>
<div class="author pull-right">
<b>Author:</b> <em>Rebecca Morelle</em> |
<i>Friday 04/16/2021</i>
</div>
<p>
Nasa is set to make history as it attempts to launch a
helicopter from the surface of Mars. If successful, it would be
the first powered, controlled flight on another planet. The
demonstration should see the Mars-copter - called Ingenuity -
rise to about 3m, hover for roughly 30 seconds, swivel and then
land.
</p>
<a href="pages/posts.html#post2">Continue Reading</a>
</div>
<!-- image -->
<figure>
<img src="assets/images/tech04.jpg" alt="Ingenuity helicopter" />
<figcaption>
A selfie of the Ingenuity helicopter and the Perseverance rover
</figcaption>
</figure>
</div>
<!-- innerGrid start -->

<!-- innerGrid or card elements start -->
<div class="innergrid">
<!-- content -->
<div class="text">
<h3>Nasa chooses SpaceX to build Moon lander</h3>
<div class="author pull-right">
<b>Author:</b> <em>Paul Rincon</em> | <i>Friday 04/16/2021</i>
</div>
<p>
Nasa has chosen Elon Musk's company SpaceX to build a lander
that will return humans to the Moon this decade. This vehicle
will carry the next man and the first woman down to the lunar
surface under the space agency's Artemis programme.
</p>
<a href="pages/posts.html#post3">Continue Reading</a>
</div>
<!-- image -->
<figure>
<img src="assets/images/tech07.jpg" alt="Ingenuity helicopter" />
<figcaption>
Nasa has chosen Elon Musk's company SpaceX to build a lander
</figcaption>
</figure>
</div>
<!-- innerGrid start -->
</div>
<div class="sidebar">1b</div>
<div class="sidebar">
<div class="content">
<h3>Recent Posts</h3>
<ul>
<li><a>New posts</a></li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div>(C) 2021 Tech Blog</div>
<div>Prepared by: Abdul</div>
</div>
<div class="footer">3</div>
</div>
</body>
</html>
84 changes: 38 additions & 46 deletions pages/posts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,64 +5,56 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../assets/css/combined.css" rel="stylesheet" />
<title>Our Daily Posts</title>
<title>Daily Posts</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Tech-Blog</h1>
<div><em>A blog about century technology</em></div>
</div>
<ul class="menu">
<li><a href="../index.html">Home</a></li>
<li><a href="posts.html">Tech-Blog</a></li>
</ul>
<div class="sidebar">
<h2>Top Stories</h2>
<ul>
<li><a href="posts.html#post1">MUONS:'STRONG' EVIDENCE</a></li></br>
<li><a href="posts.html#post2">NASA'S INGENUITY</a></li></br>
<li><a href="posts.html#post3">NASA CHOOSES</a></li></br>
<div class="nav">
<ul class="menu">
<li><a href="../index.html">Home</a></li>
<li><a href="../pages/posts.html">Tech-Blog</a></li>
</ul>
</div>
<div class="content">
<!-- innerGrid start -->
<div class="innergrid" id="post1">
<!-- content -->
<div class="text">
<h3>Muons:'Strong' evidence found for a new force of nature</h3>
<div class="author pull-right">
<b>Published on:</b> <i>Friday 04/16/2021</i>
</div>
<p>
From sticking a magnet on a fridge door to throwing a ball into a
basketball hoop, the forces of physics are at play in every moment
of our lives.
</p>

<div class="author">
<b>Author:</b> <em>Pallab Ghosh</em> | <b>Source:</b>
<em
><a href="https://www.bbc.com/news/56643677"
>BBC News Science</a
></em
>
</div>

<a href="index.html">Back to Homepage</a>
</div>
<!-- image -->
<div class="imgcol">
<div class="card">
<img src="../assets/images/tech01.jpg" alt="Muon experiment"/>
<div class="caption">
<figcaption> The findings come from the US Muon g-2 experiment</figcaption>
</div>
<div class="wrapper">
<div class="main">
<!-- innerGrid or card elements start -->
<div class="innergrid">
<!-- content -->
<div class="text">
<h3>'Strong' evidence found for a new force of nature</h3>
<div class="author pull-right">
<b>Author:</b> <em>Pallab Ghosh</em> | <i>Friday 04/16/2021</i>
</div>
<p>
All of the forces we experience every day can be reduced to just
four categories: gravity, electromagnetism, the strong force and
the weak force. Now, physicists say they have found possible
signs of a fifth fundamental force of nature.
</p>
<a href="pages/posts.html#post1">Continue Reading</a>
</div>
<!-- image -->
<figure>
<img src="../assets/images/tech01.jpg" alt="Muon experiment" />
<figcaption>
The findings come from the US Muon g-2 experiment
</figcaption>
</figure>
</div>
<!-- innerGrid end -->
</div>
<div class="sidebar">
<div class="content">
<h3>Recent Posts</h3>
<ul>
<li><a>New posts</a></li>
</ul>
</div>
<!-- innerGrid end -->
<a href="../index.html"><button class="btn">Back</button></a>
</div>
</div>
<div class="footer">
<div>(C) 2021 Tech Blog</div>
Expand Down

0 comments on commit ec43004

Please sign in to comment.