I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it.
I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it.
Perhaps this solution can be of assistance
.message-box {
display: table;
width: 100%;
}
.message-box .wrapper {
max-width: 375px;
display: flex;
}
.message-box .wrapper .content {
box-shadow: 1px 1px 4px 1px #00000063;
display: inline-block;
padding: 25px 15px;
border-radius: 4px;
margin-left: 20px;
}
.message-box .wrapper .content a{
text-decoration: none;
display: table;
width: 100%;
cursor: pointer;
}
.message-box .wrapper .content label {
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
color: #007bff;
padding-bottom:5px;
display:block;
}
.message-box .wrapper .content p {
margin: 0;
text-transform: f;
font-size: 14px;
text-transform: uppercase;
font-family: sans-serif;
color: gray;
}
.message-box .wrapper .icon-wrapper {
position: relative;
overflow: hidden;
}
.message-box .wrapper .icon-wrapper span {
width: 30px;
height: 30px;
background: #007bff;
border-radius: 100px;
display: table;
}
.message-box .wrapper .icon-wrapper span i {
display: table-cell;
vertical-align: middle;
color: #fff;
text-align: center;
font-size: 12px;
}
.message-box .wrapper .icon-wrapper:after {
content: '';
position: absolute;
height: 100%;
width: 4px;
background: #dee2e6;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 25px;
top: 0;
z-index: -1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="message-box">
<div class="wrapper">
<div class="icon-wrapper">
<span>
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="content">
<a href="#" class="">
<label>info on online learning</label>
<p>during the pandemic, online education is essential</p>
</a>
</div>
</div>
</div>
</body>
</html>Within my Javascript code, I am working with an array of Calendar objects. Each Calendar object contains an array of CalendarEvent objects. Every CalendarEvent object holds properties for Date and Name. I am looking to determine if a specific date exist ...
I integrated a jQuery popup feature on my website to display messages. Now, I am looking to implement a redirect to another page when the user clicks a button within the jQuery popup. However, I am unsure of how to achieve this. <script type="text/ja ...
In my bootstrap navbar, I have the following menu items: Home | About | Contact I'm looking to assign the active class to each menu item based on the current angular route. Specifically, how can I set class="active" when the angular route is at # ...
I am looking to apply multiple filters to an array based on certain conditions defined by toggling switches. The issue arises when toggling two or more switches simultaneously, resulting in an empty array. My goal is to retrieve an array containing the tru ...
I'm experimenting with changing the eye color based on visitor count. It works perfectly fine on static posts in my Blogger, but it fails to update the eye color properly on my homepage according to the set numeric values. Instead of displaying differ ...
I am trying to calculate the total value by adding a fixed price with another value entered in a text input field. Here is the HTML code snippet: <%= f.text_field :hoursclass, id:"txt_hours" %> And here is the JS code snippet: $(function() { va ...
I'm experiencing an issue where I have Node.js v0.12.0 installed with Karma on my OS X Yosemite, but when I try to run my test task using Gulp, it just hangs as shown in the picture. It seems like PhantomJS is not starting. Interestingly, the same cod ...
I have a form that I want to use to send and insert the values into my database. After the values are inserted, I would like to clear the input fields of the form and display a success message. Here's an example of how I would like it to look: Clear ...
I am currently working on implementing form validation for a React form that I have developed. The process involves using an onChange event to update the state with the value of each text field, followed by an onBlur validation function which checks the va ...
I have a small web app that I built using Vue and Netlify functions. Everything works perfectly when deployed in production, but I encounter issues when trying to use 'netlify dev' for local development. The calls to the netlify function are fail ...
Just to clarify, I came across a similar question on Stack Overflow before posting this. However, the answer there was not clear to me and my query is slightly different. Thus, I am hoping for a more straightforward explanation. The Express Generator sets ...
I am attempting to iterate through an array of months nested within an array of 'years' in order to calculate a count for each month using a custom angular filter. Initially, I set up the structure I will be looping through in the first while loo ...
I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...
I am currently working on implementing a notifications feature using bootstrap popover. The issue I am facing is that after a user clicks on a notification, it should be removed. However, for some reason, it requires two clicks to actually remove the notif ...
How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...
Coming from a background in c# and c++, I am facing some confusion with a particular situation. Within the scope of my function, I am creating a new object before pushing it into an 'array'. Strangely, when I create the new object, it appears to ...
Greetings! I am currently working on two separate Wordpress websites with different domains and I am attempting to pass some values from one site to the other using ajax. However, I am facing an issue. Even though the URL works fine when directly entered ...
I am facing an issue with routing between two components and passing data from the first to the second without sending the parameter in the URL. The problem arises when I refresh the page and the query params are lost. <p className={styles.jobname}& ...
UPDATE: Problem solved! I managed to find a solution and have updated my sandbox with the fix! REVISION: After some investigation, I have identified that the issue lies within this specific line of code in the autocomplete... isOptionEqualToValue={(option ...
Is there a way to create a toggle feature in Angular.JS that will open and close a div when clicked on the same div again? Currently, it opens the div when clicked but I want it to also close the div when clicked again. <a ng-href ng-click="openAccordi ...