so basically i have this lets get fit button, but when i hover over it or click it, it doesnt change cursor or lead to index.html, idk why its not working
.btn {
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: -2px;
}
.cta-btn {
font-size: 1.2rem;
background-color: #ca5558;
padding: .9rem 1.8rem;
color: #fff;
border-radius: 3rem;
transition: background-color .5s;
}
a.cta-btn:hover,
a.cta-btn:focus {
color: black;
background-color: #c94246;
}
<section class="hero" id="hero">
<div class="container">
<h2 class="sub-headline">
<span class="first-letter">W</span>orkouts
</h2>
<div class="headline-description">
<div class="single-animation">
<h5>Made simpler.</h5>
Let's Get Fit
</div>
</div>
</div>
</section>
I don't know why it isn't working but when I ran it it works. I did not change any of the code from your answer, apart from placing a <section> which was closed but not created.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.btn{
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: -2px;
}
.cta-btn{
font-size: 1.2rem;
background-color: #ca5558;
padding: .9rem 1.8rem;
color: #fff;
border-radius: 3rem;
transition: background-color .5s;
}
a.cta-btn:hover,
a.cta-btn:focus{
color: black;
background-color: #c94246 ;
}
</style>
</head>
<body>
<section>
<div class="container">
<h2 class="sub-headline">
<span class="first-letter">W</span>orkouts
</h2>
<div class="headline-description">
<div class="single-animation">
<h5>Made simpler.</h5>
Let's Get Fit
</div>
</div>
</div>
</section>
</body>
</html>
Related
I have this issue with my CSS where I have lots of content in my HTML but in my browser, in the responsive version it won't scroll anymore, in other words, it stops when there is more content to display. How can I prevent that from occurring? It's been happening for quite some time now. Here is my HTML and CSS code I will add the full code.
p.s. what I mean is that in the developer tools in chrome in order to view the website on different devices it stops in the about section it does not show my javascript skills.
<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">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto+Slab:wght#100&display=swap"
rel="stylesheet">
<title>Portfolio</title>
</head>
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 100px;
background-color: #111;
padding: 0 5px;
}
header .logo-link {
}
header .logo-link .logo-img {
width: 100px;
height: 100px;
}
header .box {
display: inline-block;
float: right;
}
header .box .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
}
nav {
display: none;
position: absolute;
right: 0;
top: 100px;
width: 45%;
height: 40%;
background-color: #111;
padding-bottom: 20px;
}
nav .ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav .ul .li {
margin-top: 30px;
padding: 0 15px;
padding-bottom: 15px;
}
nav .ul li .li-a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page {
background-color: #111;
width: 100%;
height: 100vh;
}
.landing-page .title {
margin: 0 0 20px 2px;
color: #fff;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page .name {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
padding-left: 15px;
}
.landing-page h3 {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
margin: 10px 0 0;
padding-left: 15px;
padding-top: 20px;
}
.landing-page .mission {
color: #fff;
margin-top: 20 0 0px;
font-size: 18px;
padding-top: 20px;
line-height: 18px;
}
.landing-page .check-out {
border: 1px solid #fff;
color: #fff;
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 200px;
margin-left: 80px;
margin-top: 50px;
}
#about {
background-color: #111;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
#about .bar .skill,
p {
color: #fff;
font-size: 18px;
}
#about .bar {
width: 100%;
background-color: #ddd;
}
#about .bar .skill {
text-align: right;
padding-top: 10px;
}
#about .bar p {
text-align: left;
}
<body>
<header class="header">
<img src="img/logo.png" alt="" class="logo-img">
<div class="box">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</header>
<nav class="nav">
<ul class="ul">
<li class="li">About</li>
<li class="li">Projects</li>
<li class="li">Contact</li>
</ul>
</nav>
<section class="landing-page">
<h1 class="title">Hello world! My name is</h1>
<h2 class="name"> Jorge Artaza. </h2>
<h3>I am a Full Stack Developer</h3>
<p class="mission">My mission is to develop lightning fast website, apps, games, and software that are user friendly.</p>
<p class="check-out">Check out my <br> Portfolio <span>▼</span></p>
</section>
<section id="about">
<div class="img-about">
<img src="" alt="">
<h2>Who am I?</h2>
<p>I am a self taught developer. My interest started at a young age and started to create from that point onward. When I am not developing I am working out or relaxing.</p>
</div>
<p class="my-skills">My Skills</p>
<div class="bar">
<div class="skill ">
<p>HTML</p>
80%
</div>
</div>
<div class="bar">
<div class="skill">
<p>CSS</p>
80%
</div>
</div>
<div class="bar">
<div class="skill js">
<p>JavaScript</p>
70%
</div>
</div>
</section>
</body>
Here is the solution, you need to put that in the head, for the site adjust for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here:
<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>
If you want know more: Meta viewport - Mozilla
Also, i will recomend you make some changes on your code:
1 - Remove the heights 100vh and put a fix hight for you components, like 500px, 400px. Examples: height: 300px;;
2 - Your code is like a puzzle, put a background-color in your body, not in the components, if you want that the entire page has a black background-color;
3 - Put the sections inside of a main(father element), with that you can use the flex box for adjust your code;
4 - There is on Youtube some great videos about do a better header, i realy don't like this float:righ, because it can bring some problems for you code, like messing the positions of the others elements;
6 - Use the media queries for a better display on the mobile devices, as well - Media Queries | Media Queries - Mozilla
Exemple about the sections:
<main class="main">
<section></section>
<section></section>
</main>
I will recomend this video about the header, because is the only i have watched in english, but you can have an idea: Header video
I have 3 rows with text and on hover I want the text on the right side to change and the background color of that text as well. For some reason I can't make it work.
HTML
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">A string is a series of characters.</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">A number can be written with,or without decimals.</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">A boolean can be either true or false.</div>
</div>
</div>
JSFiddle link:
see here
The result that I want to get to is this one: enter image description here
After viewing your image description, I edited your code a little bit. Hope it will fulfill your expectation.
I just add a span tag in your description.
and added/modified some CSS.
Change details:
body {
display: flex;
justify-content: center;
}
.container {
font-family: 'Red Hat Mono', monospace;
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
width: 600px;
height: 600px;
}
.row {
display: flex;
background-color: rgb(178, 236, 205);
padding: 10px 0px 10px 15px;
border-radius: 50px;
margin: 15px 15px 15px 20px;
}
.content {
font-size: 1.2em;
flex:1;
font-weight: bold;
}
.description {
display: flex;
justify-content: right;
font-family: 'Lato', 'sans-serif';
color: rgb(189, 132, 27);
font-size: 0.95em;
margin-right: 20px;
font-weight: bold;
}
.row:hover .description{
background-color: rgb(80, 231, 150);
color: red;
margin-right: 0px;
margin-top: -9px;
margin-bottom: -9px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
font-size: 0.95em;
font-family: 'Lato', 'sans-serif';
}
.row:hover .description > span{
margin-top: 9px;
margin-right: 20px;
margin-left: 10px
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght#400;600&display=swap" rel="stylesheet">
<title>Tema 10</title>
<body>
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">
<span>A string is a series of characters.</span>
</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">
<span>A number can be written with,or without decimals.</span>
</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">
<span>A boolean can be either true or false.</span>
</div>
</div>
</div>
</body>
</html>
Please update CSS to. You are setting font size 0 that is causing an issue
.row:hover .description {
color: rgb(0, 31, 150);
background-color: rgb(0, 1, 0);
}
My button is in line with the flex-box,
Elements should be stacked on top of one another in a column, right?
I am making a timer, so there is a row, in which there are two columns.
In one column there is an image and in the other, there is a heading, a flexbox(which contains four rectangles), and a button.
Now, I want my button to be below my timer, but it is in line with it.
HTML
<!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>Stiks</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container hero">
<div class="row">
<div class="portal col-md-12 col-lg-5">
<img class="img-fluid" src="../assets/download (10).jpg">
</div>
<div class="col-md-12 col-lg-7 align-self-center">
<h2><b>Timer</b></h2>
<div class="d-inline-flex flex-nowrap">
<div class="rect">
<span class="days"></span>
<p>Days</p>
</div>
<div class="rect">
<span class="hours"></span>
<p>Hours</p>
</div>
<div class="rect">
<span class="minutes"></span>
<p>Minutes</p>
</div>
<div class="rect">
<span class="seconds"></span>
<p>Seconds</p>
</div>
</div>
<button class="btn-main" type="button">Start</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
CSS
:root{
--yellow: #fff189;
--grey: #444444;
--off-white: #e6e6e6;
--blue: #047db1;
--pink: #6b093d;
--green: #ccf0a9;
--black: #000000;
}
h1{
font-size: 4.2em;
}
h2{
font-size: 1.75em;
}
*{
font-family: 'Poppins', sans-serif;
}
.section{
padding-right: 5vw;
padding-left: 5vw;
padding-bottom: 3em;
padding-top: 3em;
}
/*------------------------------------hero section------------------------------------*/
.hero{
min-height: 100vh;
background-color: var(--yellow);
}
.timer{
margin-bottom: 1em;
}
.rect{
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding: 0.2em;
border-radius: 0.5em;
text-align: center;
color: var(--off-white);
background-color: var(--blue);
height: 6.5em;
width: 8em;
min-width: 0;
}
.rect h1{
font-size: 2.25em;
font-weight: 700;
}
.btn-main{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
border-style: none;
font-size: 1.1em;
border-radius: 00.5em;
background-color: var(--pink);
color: var(--off-white);
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-right: 1.8em;
padding-left: 1.8em;
}
.btn-main:hover{
background-color: var(--grey);
}
Add display: block; css in .btn-main class.
visit : https://jsfiddle.net/ktv1frwu/
I tested your code according to browser's width it changes to inline and sometime below those boxes.
Fix it by adding
display : block in your .btn-main class
.btn-main{
display:block;
}
I want to go to the about section without needing to link to another .html file. Originally, I tried a href = "About.html" but when clicking on the About Button it just links to that page ignoring the index.html page where all the main content is. Next, I tried a href = #About which did nothing when the about button was pressed.
section{
padding: 39px 0;
}
.container{
width: 100%;
max-width: 1225px;
margin: 0 auto;
padding: 0 24px;
}
.headline-description h5{
color: #ffffff;
font-size: 30px;
font-weight: 100;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 4px;
}
.Content{
width: 100%;
background-color: bisque;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
}
.about-button{
text-decoration: none;
color: #225522;
border: 1px solid #225522;
padding: 10px 50px;
font-size: 20px;
transition: all 1s;
}
.the-life-of-a-chef{
background-color: #2255cc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHEF</title>
<link rel="stylesheet" href="asdf.css">
</head>
<body>
<section class="Content" id="Content">
<div class="container">
<!--Website Name-->
<h1 class="headline">C H E F</h1>
<div class="headline-description">
<div class="seperator">
<!--Underline Chef / Cutlery Icon in middle-->
<div class="line line-left"></div>
<div class="cutlery"><i class="fa fa-cutlery"></i></div>
<div class="line line-right"></div>
</div>
<h5>Life of a chef</h5>
About
</div>
</div>
</section>
</body>
</html>
<section class="the-life-of-a-chef">
<div class="container">
<div class="rest-button">
<div class="Lorem-text">
<div class="LifeOfChefHeadline">
<h2 class="AboutHeadline">
<span class="About">About</span>
</h2>
<h1 class="headline headline-gold">The Life Of A Chef</h1>
</div>
Just add id="About" to the section you want to scroll to.
See example here: https://jsfiddle.net/ud3k2ztv/
I'm new to html/css and I know this has been asked many times before but the answers didn't help / could not comprehend them. I assume it has something do to with the way I arranged the page in on the html side. Thanks
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div.img {
opacity: 0.3;
border-radius: 44px background-color:#555;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Let Go</title>
</head>
<body>
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
</body>
</html>
Do the radius on the image, not the element that contains it. Also, you are missing a semi-color before you set the background color
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div img {
opacity: 0.3;
border-radius: 44px;
background-color:#555;
}
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
TWo mistakes: The selector has to be div.img img to affect the image itself, and there was a semicollon missing:
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div.img img {
opacity: 0.3;
border-radius: 44px;
background-color: #555;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Let Go</title>
</head>
<body>
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
</body>
</html>