This is my first ever question on the forum sorry if it is unprofessional hopefully i can learn from my mistakes on this post!!
I put the question in the title but if you have any questions feel free to ask below THANK YOU! for the help!
My Code
html {
font-family: Arial, sans-serif;
}
html,
body {
background-color: #67B177;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
background-color: #4B574E;
}
...
...
</html>I made some adjustments to the code you provided, and you can view the updated version below:
Here is the modified HTML:
<div class="wrapper">
<div class="wrapper_nav">
<div class="nav_left">
<div class="text">
<div class="text2">
<a href="#" class="text2">HOME</a>
<a href="#" class="text2">EXPERIENCE</a>
<a href="#" class="text2">CONTACT</a>
<a href="#" class="text2">ABOUT</a>
<a href="#" class="text3">LOGIN</a>
</div>
</div>
</div>
</div>
</div>
<div class="section1">
<h2>BUSINESS</h2>
</div>
<div class="section2">
<div class="object">
<a href="#">
<img src="https://dummyimage.com/200x200/4b574e/ffffff.png" height="200">
<a class="textone"><b>EXPERIMENTAL</b></a>
</a>
</div>
<div class="object">
<a href="#">
<img src="https://dummyimage.com/200x200/4b574e/ffffff.png" height="200">
<a class="textone"><b>FAST</b></a>
</a>
</div>
<div class="object">
<a href="#">
<img src="https://dummyimage.com/200x200/4b574e/ffffff.png" height="200">
<a class="textone">INNOVATIVE</a>
</a>
</div>
</div>
<div class="section3">
<h3>FREELANCE WORK</h3>
</div>
Modified CSS:
html{
font-family: Arial,sans-serif;
}
html, body{
background-color:#67B177;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
background-color: #4B574E;
}
.wrapper_nav{
display:grid;
width: auto;
height: 50px;
}
.wrapper_nav a{
text-decoration: none;
color: white;
padding: 0 1em;
font-size: 30px;
}
.nav_left{
text-align: left;
margin-left: 10%;
margin-top: 0.4em;
}
.nav_right{
float: right;
}
.text{
color: darkslategray;
}
.wrapper_body{
}
.section1{
text-align: center;
}
.section3{
text-align: center;
display: block;
padding-top: 50px;
clear: both;
overflow: hidden;
}
h2{
font-family:helvetica;
font-size: 64px;
text-decoration:none;
color:beige;
margin-top: 50px;
margin-bottom: 50px;
}
h3{
font-size: 64px;
text-decoration: none;
color: beige;
margin-top: 00;
margin-bottom: 150px;
}
.text2:hover{
color: darkgray;
}
.text3:hover{
color:#67B177;
}
p{
color: beige;
font-family: sans-serif;
font-size: 16px;
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}
a{
text-decoration: none;
}
.textone{
font-family:sans-serif;
color: beige;
display: block;
margin-top: 15px;
text-align:center;
}
.imageone{
margin-bottom: 50px;
}
.textone:hover{
color: #4B574E;
}
imagegrid{
display: grid;
}
.section2{
width: 900px;
margin: 0px auto;
}
.object{
float: left;
padding: 0 50px;
}
View the updated code on Codepen https://codepen.io/mehdiyatrib/full/mMOVQK
Currently, I am dynamically loading text into a div. However, I am encountering an issue where the content below this div is constantly shifting depending on the loaded text. Is there a way to restrict the space allocated to the div with the dynamic conte ...
In my email management system, I utilize a v-data-table to organize emails. When a user clicks on a row, a popup displaying the email details appears. Desired Feature: I am looking to have the rows marked as "readed" (either bold or not bold) after th ...
When I activate the sidebar by clicking the menu button, it remains fixed in position until the first scroll. However, if I interact with the sidebar by clicking on it, the button resets and goes back to the top of the page. This issue seems to only occur ...
I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom ...
In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows: <table class="display table table-bordered table-striped w-100 tables" ...
CONTEXT: I am aiming to display a list of States initially. There are two options: either clicking on a state will reveal the respective cities, or using the search box will filter cities across all states - clearing the search will hide everything. ISSU ...
I'm trying to set it up so that when you hover over an image, the opacity decreases by half. I know I must be making a simple mistake here, but I just can't figure out what it is. Any suggestions would be greatly appreciated. http://jsfiddle.net ...
As a UX Designer looking to enhance my coding skills, I must admit my code may not be perfect. Please bear with me as I navigate through this process. I am in the process of revamping my portfolio website. The original seamless grid was created using a Ma ...
On my webpage, I have buttons that are generated dynamically using PHP from a MySQL table. Each button is wrapped in an anchor tag and when clicked, it triggers a Javascript function to carry out multiple tasks. One of these tasks requires extracting the ...
I've implemented some CSS with JQuery, as seen in this JSFiddle. However, I'm having trouble increasing the width and height of the green circle to be slightly larger than the gray circle (referred to as the main circle) which is positioned at a ...
I am having trouble displaying a PHP variable in Javascript; Below is the code I am using: <script type="text/javascript> $(document).ready(function (){ var n=<?php echo json_encode($count)?>; for(var i=0;i<n;i++){ var div ...
I have a Wordpress-based web project in progress at the following link: The current setup of the post thumbnails grid on the website was done with the assumption that all thumbnails will be the same height. However, I am looking to modify it so that the t ...
During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML cod ...
Whenever I try to access a PHP file on MAMP, I keep getting a 404 error message. The error reads: "The requested URL /‘welcome.php’ was not found on this server." Oddly enough, both the HTML and PHP files work perfectly fine when accessed via localho ...
Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...
Hi there, I am looking to make some changes to a JavaScript code that will switch out a fixed image depending on the user's scrolling behavior. For example, when the page loads, the image should be displayed on the right side. As the user scrolls down ...
Currently, I am working on my project using Laravel 5. I retrieve some integer values from a database and use them to create square divs in HTML. Below is the current output of my work. https://i.stack.imgur.com/sy2ru.png You may notice that there is spa ...
I'm having an issue with my login page. After implementing Ajax code for the reset password feature, the dropdown menu on the login page doesn't work properly when wrong details are entered and the page reloads. I've tried using the $(' ...
My current challenge involves two overlapping images. I am looking for a solution where clicking on the back image will bring it forward. I prefer a simple method that is also mobile-friendly since I am using Bootstrap for responsiveness. What suggestions ...
I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...