Beginner
Reputation: 21
How do i color the part using css/html in my section
i am really new to css and html coding and my mission right now is to recreate a website design, the website i have to recreate (first page only) is https://smashingconf.com/sf-2020 The part i am currently have problem with is at the part that talks about "What’s Smashing Conference Like?" There is a white line in between the headline and text. https://gyazo.com/7dc51e0ff16fa6552b1e37ddb095155b i am having trouble removing it, coloring the section wont work, because for some reason only the headline is in the secion. When i inspected the source code of original page, the headline is in a different div from others, so that is how i am planning on doing it too. Would like some assistance if possible.
<section class="section2">
<div class="like">
<h1>What’s Smashing Conference Like?</h1>
</div>
<div class="firstBlock">
<div class="left">
<p>
<em>SmashingConf</em>
is a friendly, inclusive event which is focused on real-world problems and solutions.
<strong>
<span class="small-caps">2</span>
days,
<span class="small-caps">1</span>
track
</strong>
,
<span class="small-caps">14</span>
speakers,
<span class="small-caps">300</span>
-
<span class="small-caps">400</span>
attendees and bunch of hands-on workshops.
</p>
<p>
Our speakers rarely show slides: they show
<em>how they work</em>
- their setupo, techniques and shortcuts for getting work done in
<strong>live interactive sessions</strong>
. So expect everything from refactoring and debugging to sketching and redisgn,
<em>live</em>
.
</p>
<p>
<em>SmashingConf</em> is focused on <strong>front-end and UX</strong>, but it covers everything web, be
it interface design or machine learning. That means a <em>packed</em> bundle of diverse, actionable
insights for your work.
</p>
<p>What’s the atmosphere like? Well, take a look at the <a href="https://vimeo.com/227793688">conference
showreel</a>, <a href="https://vimeo.com/smashingmagazine/videos">videos from previous events</a>, and
<a href="https://www.flickr.com/photos/marcthiele/albums">photos</a>.</p>
</div>
<div class="right">
</div>
</div>
</section>
And the css part
.section2{
color: white;
background-color: rgb(9, 42, 53);
}
.like{
background-color: rgb(9, 42, 53);
color: white;
}
.firstblock{
background-color: rgb(9, 42, 53);
}
.speakers{
padding-top: calc(1.5em +3 vh) 3.75em;
padding-left: 3.75em;
padding-right: 3.75em;
padding-bottom: calc(1.5em + 3vh);
}
.left{
padding-left: 20.8px;
padding-right: 20.8px;
line-height: 35.36px;
width: 50%;
height: auto;
float: left;
background-color: rgb(9, 42, 53);
}
Upvotes: 1
Views: 68
Answers (2)
Beginner
Reputation: 21
I just found out inspecting my own page created so far, i have a main div that takes the first section in it with it's css and all, however it takes only up to the H1 the div with information is not included in it. FULL CODE Sorry for it being so messy HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>SmashingConf SF 2020 (November 10–11) — Friendly, inclusive, practical event
for web designers and developers. - SmashingConf SF 2020, November 10—11 </title>
<!--copied from website -->
</head>
<body>
<div class="main">
<div class="background">
<picture>
<img
src="https://d33wubrfki0l68.cloudfront.net/c1c98ee82fdf48d7336ff0e81fb58edce8f6ab3c/8ceaa/images/logo/logo.svg"
class="picture1" alt="First picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/01d39b8f9052067758bba263382663824b716604/80124/images/events/nav/online-workshops.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/122011923c166667a82e110879cb68c36efbb1db/35e97/images/events/nav/freiburg-2020.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/2ab6033bf90bcab710c1c4b4dc86a3389b369e80/341c5/images/events/nav/austin-2020.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/415d6bcc50d0ff005936651006cad3862dfa13bf/096b1/images/events/nav/ny-2020.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/0938f079770a465a5c01fcf9f826b9d0123ee149/fc3dc/images/events/nav/sf-2020-rescheduled.svg"
class="picture2" alt="Secound picture">
</picture>
<nav class="m" role="navigation">
<ul>
<li><a class="active" href="/sf-2020">Home</a></li>
<li><a href="/sf-2020/speakers">Speakers</a></li>
<li><a href="/sf-2020/schedule">Schedule</a></li>
<li><a href="/sf-2020/workshops">Workshops</a></li>
<li><a href="/sf-2020/locations">Locations</a></li>
<li><a href="/sf-2020/sponsors">Partners</a></li>
<li><a href="/sf-2020/registration"><strong>Tickets</strong></a></li>
</ul>
</nav>
<section class="section1">
<div class="apology">
<table>
<tr>
<td>
<p>Unfortunately, due to recommendations from the SF Mayor's office restricting group size, and with
countless
travel bans in place affecting speakers, attendees, and team members, we cannot give you the
conference
experience you expect and deserve. For these, and many more reasons, <b>SmashingConf SF (April 21–22)
is
re-scheduled for November 10–11, 2020.</b></p>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/83ed4a85d70130df5dcbcb93a5370118f898d495/7fa75/images/helpers/sad-cat.svg"
class="picture3" alt="third picture"></td>
</tr>
</table>
</div>
<div class="information">
<table>
<tr>
<td>
<p>
For SmashingConf SF <span class="small-caps">2020</span>
,<b>November 10–11</b>, we’re bringing back two full days packed with front-end, UX
and all that jazz! Live sessions on <b>performance</b>
, accessibility, interface design, copywriting, designing
for emotion, debugging and fancy CSS/JS techniques — and a few surprises along the way. 🎸
</p>
<p>
Feel excited to join, but you think your manager could need just a little bit more persuasion? We’ve
prepared a neat visual Convince Your Boss PDF and a Letter For The Boss Template. Good luck!
🤞🤞🏼🤞🏾
</p>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/0938f079770a465a5c01fcf9f826b9d0123ee149/fc3dc/images/events/nav/sf-2020-rescheduled.svg"
class="picture4" alt="fourth picture"></td>
</tr>
</div>
<div class="speakers">
<table>
<h2 style="color: blue;">Our Smashing Speakers</h2>
<tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/ed619878a72d086fef28c393fcbef985d9f0225b/9a9ff/images/speakers/chris-coyier.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/eb8f2292998adc841060f9139bcc05f14cae15ba/2afd6/images/speakers/whitney-homans.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/1267e40e21e92b8950fc41ef9c173d37b5e72c16/77ec1/images/speakers/phil-hawksworth.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/3c8cc2c2d722d693cb3df63f67053fe8390fc7f8/f9b1f/images/speakers/eva-ferreira.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/346eb539774acb2594af41b257203d1a292e5e16/2d5d4/images/speakers/aarron-walter.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/9d5e8ffda6f4086cb4825d019a78389447a479d1/fa9dc/images/speakers/cassidy-williams.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/daf5eceae9b67999b3228bc90df96803833b8ab3/942f0/images/speakers/kevin-powell.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/dbd2e283f704c650eb82a2af2da08b42a0d1ea10/b1ca8/images/speakers/nathan-curtis.jpg"
class="Personas" alt="fourth picture"></td>
</td>
</tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/1c07d8442f6052a2f2876fff0f029bb8be665169/e41dc/images/speakers/monica-dinculescu.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/126e971632c807a1510e4479322582aa66a486c4/3b08f/images/speakers/graham-mcdonnell.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/ea54f2099057a3630c639bafabc1ec3857eb9fe5/e4264/images/speakers/sara-soueidan.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/c69cefb0d82b404d27b737e2be6c160238abf755/12ac7/images/speakers/marc-edwards.jpg"
class="Personas" alt="fourth picture"></td>
</td>
</tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/47c04c1ce46b5066610cbc9ccfaf8066728b263f/c697e/images/speakers/mystery-sf-2019.png"
class="Personas" alt="fourth picture"></td>
</td>
</table>
</div>
</section>
<section class="section2">
<div class="like">
<h1>What’s Smashing Conference Like?</h1>
</div>
<div class="firstBlock">
<div class="left">
<p>
<em>SmashingConf</em>
is a friendly, inclusive event which is focused on real-world problems and solutions.
<strong>
<span class="small-caps">2</span>
days,
<span class="small-caps">1</span>
track
</strong>
,
<span class="small-caps">14</span>
speakers,
<span class="small-caps">300</span>
-
<span class="small-caps">400</span>
attendees and bunch of hands-on workshops.
</p>
<p>
Our speakers rarely show slides: they show
<em>how they work</em>
- their setupo, techniques and shortcuts for getting work done in
<strong>live interactive sessions</strong>
. So expect everything from refactoring and debugging to sketching and redisgn,
<em>live</em>
.
</p>
<p>
<em>SmashingConf</em> is focused on <strong>front-end and UX</strong>, but it covers everything web, be
it interface design or machine learning. That means a <em>packed</em> bundle of diverse, actionable
insights for your work.
</p>
<p>What’s the atmosphere like? Well, take a look at the <a href="https://vimeo.com/227793688">conference
showreel</a>, <a href="https://vimeo.com/smashingmagazine/videos">videos from previous events</a>, and
<a href="https://www.flickr.com/photos/marcthiele/albums">photos</a>.</p>
</div>
<div class="right">
</div>
</div>
</section>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
css
.picture1{
width: 195px;
height: auto;
}
.picture2{
width: 132px;
height: auto;
border-radius: 11px;
}
.picture3{
width: 176px;
height: 233;
}
.picture4{
width: 350px;
height: 343;
}
img{
outline: 0;
border-radius: 11px;
}
.body{
line-height: 170%;
font-size: calc(1em+ .25vw);
}
.main{
font-size: 100%;
font-family: "Elena",-apple-system,BlinkMacSystemFont,AvenirNext,Avenir,Roboto Slab,"Droid Serif",Segoe UI,Georgia,Times New Roman,serif;
vertical-align: baseline;
background-color: rgba(0, 0, 0, 0);
}
.background{
margin: 0, auto;
margin-top: 0px;
margin-left: 234.078px;
margin-bottom: 0px;
margin-right: 234.078px;
}
.section1{
border-bottom-color: rgb(255, 255, 255);
border-bottom-style: solid;
border-bottom-width: 1px;
color: rgb(51, 51, 51);
line-height: 33.1245px;
padding-left: 73.0688px;
padding-right: 73.0688px;
}
.apology{
margin-bottom: 3rem;
line-height: 1.6em;
float: right;
}
.small-caps {
font-feature-settings: "smcp" 1,"c2sc" 1,"c2sc","c2sc","c2sc";
letter-spacing: 1px;
font-variant: small-caps;
text-transform: lowercase;
}
nav{
float: middle;
}
nav li{
float:left;
}
nav ul{
list-style: none;
}
.active{
background-color: #dbebf7;
}
.topnav a {
float: left;
color: #0168b8;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: rgb(2, 6, 252);
}
.m {
background-color: rgba(0, 0, 0, 0);
background-clip: border-box;
font-size: 19.485px;
font-style: normal;
margin-top: 19.485px;
vertical-align: center;
padding-left: 73.0688px;
padding-right: 73.0688px;
padding-inline-start: 73.0;
}
.m ul{
grid-template-columns: 1fr 1fr 1fr;
}
.Personas {
transition: transform .25s ease-in-out,-webkit-transform .25s ease-in-out;
border-radius: 50%;
transform: rotate(-11deg);
width: 180px;
height: 180px;
}
.Personas:hover {
-webkit-transform: rotate(11deg);
transform: rotate(11deg);
}
h1.section2{
color: white;
background-color: rgb(9, 42, 53);
}
.like{
background-color: rgb(9, 42, 53);
color: white;
margin-bottom: 0px;
}
.firstblock{
color:white;
background-color: rgb(9, 42, 53);
}
.speakers{
padding-top: calc(1.5em +3 vh) 3.75em;
padding-left: 3.75em;
padding-right: 3.75em;
padding-bottom: calc(1.5em + 3vh);
}
.left{
padding-left: 20.8px;
padding-right: 20.8px;
line-height: 35.36px;
width: 50%;
height: auto;
float: left;
background-color: rgb(9, 42, 53);
color:white;
}
Hopefully that will give more understanding of what i have created so far.
Upvotes: 1
rguttersohn
Reputation: 484
H1 has default margins you'll have to override with CSS. That's probably causing the space.
Upvotes: 0
Related Questions
- How to color part of a box
- How to add background-color in a section part?
- Section in HTML & CSS
- CSS for changing display of targeted sections
- Merge Border Colors for a section tag using CSS
- Error in adding background color to section in HTML/CSS
- How do I set colors for specific sections of my background?
- Targeting Section Element in CSS
- Setting one Section of HTML as a Different Background Color
- Working with <section> in CSS