I created a test theme from scratch, and i have a few problems with the stylesheet.
This is how my directory looks:
and this is the code:
index.php
`<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>this is a test Carolina WP</title>
<link rel="stylesheet" href="wp-content/themes/carodev/styles.css" />
</head>
<body>
<div>
<h2>Title</h2>
<p>this is a phrase </p>
<img src="ressources/womanicon.png">
</div>
<div class="services-container">
<div class="service">
<div class="service-preview">
<h6>Services</h6>
<h2>Depannage</h2>
autres services <i class="fas fa-chevron-right"></i>
</div>
<div class="service-info">
<div class="progress-container">
<div class="progress"></div>
<span class="progress-text">
Trés demandé
</span>
</div>
<h2>Votre ordinateur <br>
ne marche pas ?</h2>
<button class="btn">Contact-nous</button>
</div>
</div>
</div>
<div class="container">
<img src="./ressources/womanicon.png">
<img src="../womanicon.png">
<img src="../ressources/womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
<img src="womanicon.png">
</div>
</body>
</html>`
style.css
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(45deg, #7175da, #9790F2);
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.service {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 700px;
}
.service h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.service h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.service-preview {
background-color: #2A265F;
color: #fff;
padding: 30px;
max-width: 250px;
}
.service-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.service-info {
padding: 30px;
position: relative;
width: 100%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2A265F;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 66%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}
.btn {
background-color: #2A265F;
border: 0;
border-radius: 50px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 16px;
padding: 12px 25px;
position: absolute;
bottom: 30px;
right: 30px;
letter-spacing: 1px;
}
.container { display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". . ."
". . ."
". . ."
". . .";
}`
The first error that i was getting : ERROR: 404 not found 1:style.css
But when in the url i specify de style.css ex: Localhost:8888/test/style.css it worked.
After that I put the container with pictures, but pictures weren't loading.
And now I have this error:
Please check the WordPress documentation for theme development. As per the document, your file name should be style.css instead of styles.css
After renaming, your stylesheet name your error will solve but this is not the right way to include files.
You need to create a functions.php file in your theme directory. Put the below code into your functions.php file.
<?php
/**
* Proper way to enqueue scripts and styles
*/
function my_theme_enqueue_styles() {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
Then, please add the below code on top of your index.php file for load header template.
<?php
get_header();
?>
Related
I use https://boxicons.com/ to display the 3 icones. I share you here the code.
Except that, I would like to download the icons to keep them in a folder.
Here is the result with uploaded images:
The code is here
I have two problems:
The white color is gone and it is replaced with black.
There is a horizontal line below the image that has disappeared
Do you know how I could get the same result as in the first illustration?
I just changed this
<span class="form__login-text">Our partners</span>
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
In this
<span class="form__login-text">Our partners</span>
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
Thanks
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
.l-form {
position: relative;
height: 100vh;
overflow: hidden;
}
.shape1,
.shape2 {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.shape1 {
top: -7rem;
left: -3.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
}
.shape2 {
bottom: -6rem;
right: -5.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
transform: rotate(180deg);
}
.form {
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
padding: 0 1rem;
}
.form__content {
width: 290px;
}
.form__img {
display: none;
}
.form__title {
font-size: 2rem;
font-weight: 500;
margin-bottom: 2rem;
color: #239CD3;
}
.form__div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin-bottom: 1rem;
padding: 0.25rem 0;
border-bottom: 1px solid #8590AD;
}
.form__div.focus {
border-bottom: 1px solid #8590AD;
}
.form__div.focus .form__icon {
color: red;
}
.form__div.focus .form__label {
top: -1.5rem;
font-size: 0.875rem;
color: red;
}
.form__div-one {
margin-bottom: 3rem;
}
.form__icon {
font-size: 1.5rem;
color: #8590AD;
transition: 0.3s;
}
.form__label {
display: block;
position: absolute;
left: 0.75rem;
top: 0.25rem;
font-size: 0.938rem;
transition: 0.3s;
}
.form__div-input {
position: relative;
}
.form__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.75rem;
font-size: 1.2rem;
color: #8590AD;
transition: 0.3s;
}
.form__button {
width: 100%;
padding: 1rem;
font-size: 0.938rem;
outline: none;
border: none;
margin-bottom: 3rem;
background-color: #239CD3;
color: #fff;
border-radius: 0.5rem;
cursor: pointer;
transition: 0.3s;
}
.form__button:hover {
box-shadow: 0px 15px 36px rgba(0, 0, 0, 0.15);
}
.form__login {
text-align: center;
}
.form__login-text {
display: block;
font-size: 0.938rem;
margin-bottom: 1rem;
color: #239CD3;
}
.form__login-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-right: 1rem;
padding: 0.5rem;
background-color: #8590AD;
color: #fff;
font-size: 1.25rem;
border-radius: 50%;
}
.form__login-icon:hover {
background-color: #239CD3;
}
/*===== MEDIA QUERIS =====*/
#media screen and (min-width: 968px) {
.shape1 {
width: 400px;
height: 400px;
top: -11rem;
left: -6.5rem;
}
.shape2 {
width: 300px;
height: 300px;
right: -6.5rem;
}
.form {
grid-template-columns: 1.5fr 1fr;
padding: 0 2rem;
}
.form__content {
width: 320px;
}
.form__img {
display: block;
width: 700px;
justify-self: center;
}
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="l-form">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="form">
<img src="https://zupimages.net/up/22/33/al0n.png" alt="image" class="form__img" style="width: 70%">
<form class="form__content">
<h1 class="form__title">Login</h1>
<div class="form__div form__div-one">
<div class="form__icon">
<i class='bx bx-user-circle'></i>
</div>
<div class="form__div-input">
<label for="user" class="form__label"></label>
<input type="text" class="form__input" name="user" [(ngModel)]="loginForm.user" placeholder='Username'>
</div>
</div>
<input type="submit" class="form__button" value='Login'>
<div class="form__login">
<span class="form__login-text">Our partners</span>
<!--
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
-->
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
</div>
</form>
</div>
</div>
</body>
</html>
It seems the image you are using has black foreground. You can use .form__login-icon img { filter: invert(1); } to make the foreground white. For the horizontal line use box-shadow: 0 2px #000;. Otherwise use an SVG image and apply the fill color of your choice.
the problem is with the images. those images have black background though they are in PNG format.
You can use online tools, Adobe illustrator or photoshop to remove the background from those images. Or you can use images in SVG format
I have a header with an image that would be the logo and a search bar on the right of it but the search box and the search button don't stick together
.header {
display: flex;
flex-direction: row;
padding-top: 20px;
padding-left: 10px;
background: white;
}
.header h1 {
font-size: 30px;
padding-right: 10px;
width: 30%;
}
#search-bar {
width: 60%;
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#search-button {
width: 10%;
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
<div class="header">
<h1>
<img src="" alt="Company Logo">
</h1>
<form action="search">
<input type="text" id="search-bar" placeholder="Search anything...">
<button type="submit" id="search-button">Search</button>
</form>
</div>
Also, how can I make the search bar and button bigger to the right while still being responsive (not wrapping, just getting smaller)?
.header {
display: flex;
flex-direction: row;
padding-top: 20px;
padding-left: 10px;
background: white;
}
.header h1 {
font-size: 30px;
padding-right: 10px;
width: 30%;
}
#search-bar {
width: 60%;
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#search-button {
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.header form {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<h1><img src="" alt="Company Logo"></h1>
<form action="search">
<input type="text" id="search-bar" placeholder="Search anything...">
<button type="submit" id="search-button">Search</button>
</form>
</div>
</body>
</html>
** You Cat Try With it **
I have created a website for desktop and mobile, and it has to be responsive. My problem is that when I resize the browser all the content gets zoomed out instead of adapting. I also have an issue with the HTML. why is it only taking up 1/3 of the page according to dev tools and when I add width:1100px to my sections it renders the desktop version, but when I take it away it floats to the left side? Why is this happening?
Images of the problem:
Image 1
Image 2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
}
html {
width:100%;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
/* header */
header {
display: flex;
background-color: black;
height: 80px;
min-width: 1100px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
/* Banner */
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
/* About */
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
min-width: 1100px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
/* Join */
.join {
min-height: 600px;
min-width: 1100px;
max-width: 100%;
}
.join-header{
width: 100%;
text-align: center;
margin-top: 150px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
min-width: 1100px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
min-width: 1100px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
/* Footer */
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
min-width: 1100px;
border-top: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./Resources/styles.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="./Resources/Images/banner.png" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="./Resources/Images/whoweare.png" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-1.png" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-2.png" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="./Resources/Images/box-3.png" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="./Resources/Images/person-img.png" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded#peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>#copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>
Some issues I noticed:
The horizontal scrollbar opens when the screen width is reduced after the web page is loaded; This situation is not suitable for responsive design. To avoid this situation, add overflow-x: hidden to the <body> I used the style.
You should use media queries to make a mobile responsive website. In this example I've edited the <img> element to remove it when the page shrinks.
I completely removed the width: 1100px style you added to the elements. You don't need to use this type to give width to the element.
On mobile-responsive websites, <img> elements are displayed on the new line at 100% width; you can implement this idea by using media queries at this stage.
You can visit this link for media query blocks according to the display size of the devices in CSS.
For example, the styles in #media only screen and (max-width: 880px){} are applied when the page size drops below 880px:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: black;
color: white;
line-height: 30px;
width:100%;
overflow-x: hidden;
}
img {
width: 100%;
}
h1 {
font-weight: 700;
font-size: 44px;
margin-bottom: 40px;
line-height: 50px;
}
h3 {
width: 100%;
}
header {
display: flex;
background-color: black;
height: 80px;
justify-content: right;
align-items: center;
margin-bottom: 50px;
border-bottom: 1px solid white;
}
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
.nav-links{
color: white;
font-size: 18px;
}
.banner {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 500px;
width: 100%;
}
.banner-text-container {
max-width: 30%;
font-size: 22px;
}
span {
color: #11cc9e;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 40%;
text-align: center;
padding: 5px;
}
.consultation-link:hover{
background-color: #fff;
}
.about {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 600px;
}
.about-text-container {
max-width: 40%;
font-size: 22px;
margin-left: 20px;
}
.about-img{
width: 400px;
margin-right: 22px;
}
.about-title {
margin-bottom: 40px;
width: 100% !important;
}
.about-us-link{
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 25%;
padding: 5px;
}
.about-us-link:hover{
background-color: #fff;
}
.join {
/* */
}
.join-header{
width: 100%;
text-align: center;
margin-top: 75px;
font-size: 40px;
}
.container-boxes{
position: relative;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 500px;
}
.box {
position: relative;
overflow: hidden;
transition: 0.5s;
height: 200px;
width: 300px;
}
.box:hover{
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, .5);
cursor: pointer;
}
.box .imgBX{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.box .imgBX:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg,rgba(0,0,0.7),#79dbc3);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
.box:hover .imgBX:before {
opacity: 1;
}
.box .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content{
display: flex;
flex-direction: column;
text-align: center;
position: absolute;
top: 20%;
bottom: 40%;
width: 100%;
height: 100%;
z-index: 1;
padding: 20px;
visibility: hidden;
}
.box:hover .content{
visibility: visible;
}
/* Quote section */
.quote-section {
display: flex;
justify-content: center;
max-width: 100%;
min-height: 500px;
}
.quote-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-items: center;
max-width: 50%;
font-size: 22px;
text-align: center;
}
.quote {
line-height: 90px;
font-size: 150px;
font-style: italic;
color: #11cc9e;
text-indent: -37px;
font-weight: 600;
width: 37px;
}
.quote-img{
width: 90px;
margin: 40px auto;
}
.person-name{
color: #ccc;
}
.person-role{
font-size: 17px;
color: #ccc;
}
footer {
text-align: center;
margin-top: 100px;
padding-top: 50px;
max-width: 100%;
min-height: 200px;
border-top: 1px solid #fff;
}
#media only screen and (max-width: 1279px) {
nav ul li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
color: #11cc9e;
}
}
#media only screen and (max-width: 880px){
html{
margin-left: 25px !important;
margin-right: 25px !important;
}
.banner-text-container {
max-width: 100%;
font-size: 20px;
}
img{
display: none;
}
.about-text-container {
max-width: 100% !important;
font-size: 22px;
}
.about-text-container {
margin-left: 0px;
}
.about {
display: inline;
}
.banner {
display: inline;
justify-content: space-around;
width: 100%;
}
.consultation-link{
color: #11cc9e;
text-decoration: none;
margin-bottom: 50px;
font-weight: 900;
display: block;
border: 1px solid white;
max-width: 100%;
text-align: center;
padding: 5px;
}
.about-us-link {
color: #11cc9e;
text-decoration: none;
margin-top: 30px;
font-weight: 900;
display: block;
border: 1px solid white;
text-align: center;
max-width: 100%;
padding: 5px;
}
.join{
display: none;
}
.join-header{
display: none;
}
.quote-section{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codes</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<ink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- insert logo -->
<nav class="nav-links">
<ul>
<li>About</li>
<li>Peer group</li>
<li>Review</li>
</ul>
</nav>
</header>
<section class="banner">
<div class="banner-text-container">
<h1>Build. Grow. <span class="color-Learn">Learn.</span></h1>
<p>Unlock your potential with your peers!, using Blockchain, Fintech or the IT outsourcing company Boosty Labs helps you create an innovative end to end product or augment your team with the right experts.</p>
<a class="consultation-link" href="#">Free consultation </a>
</div>
<div class="banner-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="about">
<div class="about-text-container">
<h2 class="about-title">Who we are</h2>
<p>Here you can find our ,collection of coding, data science and statistics tutorials with examples in R, Python, JavaScript and Python. As you click through, you'll notice that some tutorials have ribbons on their logos - they are part of our free and self-paced online course Data Science for Ecologists and Environmental Scientists! Yellow for the Stats from Scratch stream, blue for Wiz of Data Viz and purple for Mastering Modelling.</p>
<a class="about-us-link" href="#">More about us </a>
</div>
<div class="about-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
</section>
<section class="join">
<h3 class="join-header" >Join a peer group!</h3>
<div class="container-boxes">
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>AI</h3>
<P>Discover The Complete Range Of Artificial Intelligence Solutions.</P>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3 class="frontend-title">Frontend Dev</h3>
<p>Discover The Complete Range Of Frontend Solutions.</p>
</div>
</div>
<div class="box">
<div class="imgBX">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="content">
<h3>Microsoft systems</h3>
<p>Discover The Complete Range Of Microsoft Solutions.</p>
</div>
</div>
</div>
</section>
<section class="quote-section">
<div class="quote-container">
<div class="quote">"</div>
<p class="p-quote">In coded, the progress of the topics and the exercises are really good. It's so nice to practice on good story told tasks. Also if you are stuck, it is nice to have a broad range of coders around in the peer groups that you can get the answers you are looking for.</p>
<div class="quote-img">
<img src="https://via.placeholder.com/400" alt="">
</div>
<div class="person-name">Peter Gangland </div>
<div class="person-role">Director of business dev at <span>Microsoft</span></div>
</div>
</section>
<footer>
<div id="contact">
<h2>
Contact us</h5>
<h5>coded#peers.com</h5>
<h5>831-867-5309</h5>
</div>
<div id="copyright">
<h5>#copyright coded Enterprises 2022</h5>
</div>
</footer>
</body>
</html>
For making your website responsive you need to use media queries. It's like you tell the browser how to style your website in different sizes. I think your problem with your sections might also get solved if you try to make your website responsive.
There is link outside Image, want to make whole div area (image) clickable
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
Tricked some css, but not covering whole area clickable.
.desty_block {position: relative;}
.detail {
position: absolute;
top: 95px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Note: After this post, did some dig and here is css
working example
.desty_block h3 {margin: 0 0 0px 0;}
.desty_block h3 a {
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
z-index: 100;
padding-top: 7rem;
}
.desty_block{position: relative;}
Still doubt if it will work on all device ?
Any idea
Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
}
h1 {
font: inherit;
font-weight: bold;
}
#div6 {
z-index: 3;
position: absolute;
top: 30%;
left: 15%;
width: 150px;
border: 1px dashed #009;
background-color: #ddf;
text-align: center;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<a href="http://google.com">
<img src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg" alt="Avatar" style="width:100%">
<div id="div3">
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</a>
</div>
</div>
</body>
</html>
Wrap the entire div with an anchor tag. Try the following (assuming the desty_block div contains image + text):
<a href="#">
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
</a>
Everything is pretty much ready, the only issue I have is that bottom circle does not want to hide beyond body borders, even though the property is set to hidden. Could anyone take a look at the code and explain it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
<title>Profile card component</title>
</head>
<body>
<div class="gradient-top">
</div>
<div class="gradient-bottom">
</div>
<div class="container">
<!-- BACKGROUND THROUGH CSS -->
<div class="personal">
<div class="background">
<img src="images/bg-pattern-card.svg" alt="">
</div>
<img class ="victor" src="images/image-victor.jpg" alt="personal photo">
<h1>Victor Crest <span>26</span> </h1>
<h2>London</h2>
</div>
<div class="properties">
<div class="followers">
80K
<span class="property">Followers</span>
</div>
<div class="likes">
803K
<span class="property">Likes</span>
</div>
<div class="photos">
1.4K
<span class="property">Photos</span>
</div>
</div>
</div>
</body>
</html>
:root {
font-size: 62.5%;
font-family: "Kumbh Sans", sans-serif;
box-sizing: border-box;
}
body {
background-color: #19a1ae;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
}
/* MAIN CARD SECTION */
.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
border-radius: 20px;
margin-right: 2.5rem;
margin-left: 2.5rem;
box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.1),
-5px -5px 20px 10px rgba(0, 0, 0, 0.1);
}
.personal {
background-color: #ffffff;
}
.personal .victor {
display: inline;
margin-top: -55px;
border: 6px solid #ffffff;
border-radius: 50%;
}
h1 {
color: #2e3349;
}
h1 span {
font-weight: 400;
color: #6b7082;
}
h2 {
font-size: 1.4rem;
font-weight: 400;
color: #6b7082;
padding-bottom: 1em;
}
/* STAT SECTION */
.properties {
display: flex;
justify-content: space-around;
align-items: center;
padding: 1.3em 1em;
background-color: #ffffff;
width: 100%;
font-size: 1.8rem;
font-weight: bold;
color: #2e3349;
border-top: 1px solid #e8e9ec;
}
.property {
display: flex;
flex-direction: column;
color: #6b7082;
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.15em;
padding-top: 0.8em;
}
/* CIRCLES */
.gradient-top {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-top.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
top: -35%;
left: -31.5%;
}
.gradient-bottom {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-bottom.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
bottom: -50%;
right: -31%;
}
}
/* the bottom one causes the problem fsr*/
Repo link: https://github.com/ViyanMd/personal-card
Pages link: https://viyanmd.github.io/personal-card/
The issue was fixed by wrapping the whole content in another div, applying to it properties, that were applied to body before. For some reason the child element started to behave differently and the issue was solved.