How I built a conference web page with Bootstrap 4 and CSS properties
David
Posted on December 3, 2020
In this post, I will show you how I built an online website for a conference using Bootstrap and CSS properties.
I did it according to the specifications of the HTML/CSS capstone project given at Microverse.
Microverse offers an online, full-time, Full Stack software development program that trains you to become a software developer for no upfront cost. Microverse believes that learning should be accessible to everyone, no matter where you live. Their methodology uses remote collaborative learning and mastery learning so students worldwide can learn together and support one another. You can learn more by visiting their website.
Ok, let's go back to the main subject of this post.
Project specifications
We have to build an online website for a conference (in my case, I chose an HTML/CSS Bootcamp). I had to follow the design given by Cindy in Behance. Here is what the design should look like:
Even though I built 3 pages for the project, I will just show how to build the first page: the welcome page.
You can find the Github repository here.
Initialization
Let's initialize our project. First, let's add all the things we need in the head. Feel free to structure your project in your own way (folder for your styles and your assets).
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>HTML/CSS Bootcamp</title>
<link rel="icon" href="https://img-a.udemycdn.com/course/240x135/3380132_0287_2.jpg?FyhZmUoQPie5OnRsiTnyOZsiC_sIEow_xOT0VH5Mm79l7I8ZOuTxapTAeMQbvhXfITlHKUVsAq4DpFELGnXU97g-ccpNYdMGSX6efVHZeZ2Az8cx3bjR9FwHzK1WqzIr">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/d86848cfe0.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
As you can see, the most important here is the Bootstrap setup and the external CSS file. Feel free to add any font family you want. In my case, I used Lato and Cocogoose.
Navbars
Ok, now let's build the navbars. We have two navbars: one with the social media links and the other one with the logo and links to the other pages.
<body>
<header>
<!--navbars-->
<div class="d-none d-md-block">
<nav class="navbar navbar-expand-sm bg-dark-custom text-white pt-0 pb-0">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
English
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
My Page
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Logout
</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-white text-dark pt-0 pb-0">
<a class="navbar-brand p-0 m-0" href="./index.html">
<figure class="logo m-0">
<img class="img-fluid" src="https://img-a.udemycdn.com/course/240x135/3380132_0287_2.jpg?FyhZmUoQPie5OnRsiTnyOZsiC_sIEow_xOT0VH5Mm79l7I8ZOuTxapTAeMQbvhXfITlHKUVsAq4DpFELGnXU97g-ccpNYdMGSX6efVHZeZ2Az8cx3bjR9FwHzK1WqzIr" alt="Logo">
</figure>
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item pr-4 pl-4">
<a class="nav-link red" href="./index.html">
Home
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./about.html">
About
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./tickets.html">
Tickets
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Join
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Sponsor
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
News
</a>
</li>
<li class="nav-item pr-4 pl-4 red campaign">
<a class="nav-link" href="#">
Dashboard
</a>
</li>
</ul>
</nav>
</div>
</header>
</body>
Welcome section
Let's add the welcome section. In this section, we will add the event title and its description.
We'll use a .jumbotron that is used usually to add information that will grab the attention of the user. It is recommended to use it for zones like the first section of your website homepage.
<section class="container-fluid jumbotron slider mb-0 pl-0 pr-0">
<div class="row">
<!--bars for small screens-->
<div class="pt-0 nav-small d-block d-md-none navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent1">
<i class="fas fa-bars"></i>
</div>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item pr-4 pl-4">
<a class="nav-link red" href="./index.html">
Home
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./about.html">
About
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="./tickets.html">
Tickets
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Join
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
Sponsor
</a>
</li>
<li class="nav-item pr-4 pl-4">
<a class="nav-link" href="#">
News
</a>
</li>
<li class="nav-item pr-4 pl-4 red campaign">
<a class="nav-link" href="#">
Dashboard
</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
<div class="welcome-text col-12 pt-5 mt-5">
<h3 class="text-left red">"Hello World!"</h3>
<h1 class="image-effect text-uppercase text-left font-weight-bold red">HTML/CSS Bootcamp</h1>
</div>
<div class="col-12 mt-4 mb-4">
<p class="p-4 welcome-description">
HTML and CSS for Beginners course
will give your all the knowledge you need
to master HTML and CSS easily and quickly.
Free tutorial
</p>
</div>
<div class="event-date col-12">
<h2 class="font-weight-bold mb-3">Start now</h2>
<p>@ Microverse, the school for remote developers</p>
</div>
</div>
</section>
Add also these CSS properties for customizing the event title text (especially by adding the little background effect), and the background of the section.
.image-effect {
background-image: linear-gradient(rgba(236, 82, 66, 0.5), rgba(236, 82, 66, 0.5)), url(https://images.unsplash.com/photo-1570126646281-5ec88111777f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=725&q=80);
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
.nav-small {
font-size: 3rem;
top: 15%;
left: 5%;
}
.campaign {
border: 5px solid #ec5242;
}
.slider {
background: #f8f8f8;
background-image: linear-gradient(rgba(248, 248, 248, 0.7), rgba(248, 248, 248, 1)), url("https://images.unsplash.com/photo-1570126646281-5ec88111777f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=725&q=80");
background-size: cover;
}
.slider-about {
background: #f8f8f8;
background-image: linear-gradient(rgba(248, 248, 248, 0.7), rgba(248, 248, 248, 1));
background-size: cover;
}
.red {
color: #ec5242;
}
.bg-red {
background-color: #ec5242;
}
.bg-dark-light-custom {
background-color: rgba(143, 143, 143, 0.5);
}
.bg-dark-custom {
background-color: #272a31;
}
.welcome-description {
background-color: #f7f7f7;
border: 2px solid #fff;
}
The main program section
Here is the HTML code for this section.
<section class="container-fluid main-program text-white">
<div class="row pt-3 mb-5">
<div class="col-12">
<h3 class="text-center section-title">Main program</h3>
<hr class="hr-title">
</div>
</div>
<div class="row program justify-content-center">
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-chalkboard-teacher text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Exhibition
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-chalkboard-teacher text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Exhibition
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="far fa-comments text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Forum
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-laptop text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
Workshop
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="col-12 col-md-2 pr-0 pl-0 program-block-parent">
<div class="program-block text-center row mb-5 p-4 bg-dark-light-custom">
<div class="col-sm-2 col-12 col-md-12 pr-0 pl-0">
<i class="fas fa-atom text-white"></i>
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0 red section-subtitle">
CC Ignite
</div>
<div class="col-sm-5 col-12 col-md-12 pr-0 pl-0">
6 hours on-demand video. You can listen to the speakers from
various countries
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-12 text-center">
<a href="#" class="text-white cta btn rounded-0 bg-red pr-5 pl-5 pt-4 pb-4">
Join CC Global Summit 2020
</a>
</div>
</div>
</div>
</section>
Add these CSS properties for adding a border when there is a hover effect on each block, and for the background of the section.
.main-program {
background-image: linear-gradient(rgba(40, 43, 50, 0.9), rgba(40, 43, 50, 0.9)), url("https://images.assetsdelivery.com/compings_v2/floralset/floralset1905/floralset190500161.jpg");
background-size: cover;
}
.main-program i {
font-size: 3rem;
}
.program-block:hover {
border: 2px solid #fff;
}
The featured speakers' section
For this section, when we are on small screens (width <= 600px), we will show just 3 speakers and hide the other speakers in a toggle button ("More"), as shown in the following picture:
Here is the HTML code:
<section class="container-fluid featured-speakers text-dark bg-white">
<div class="row pt-3 mb-5">
<div class="col-12">
<h3 class="text-center section-title">Featured speakers</h3>
<hr class="hr-title">
</div>
</div>
<div class="row speakers">
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/davidcomics.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author1.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author4.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author2.png" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/davidcomics.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-none d-md-block">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author3.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
</div>
<div class="col-12 text-center mb-5 border d-block d-md-none">
<a data-toggle="collapse" data-target="#demo" href="#" class="text-uppercase btn rounded-0 pr-5 pl-5 pt-2 pb-2">
More <i class="fas fa-angle-down red"></i>
</a>
</div>
<div id="demo" class="collapse d-md-none row">
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author4.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author2.png" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/davidcomics.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="row mb-5 p-4 bg-white">
<div class="col-3 speaker-block pr-0 pl-0">
<img class="img-fluid rounded speaker-avatar" src="./assets/images/author3.jpg" alt="Speaker">
</div>
<div class="col-9 speaker-block pr-0 pl-4">
<h3 class="mb-1 section-title font-weight-bold">David YAO</h3>
<p class="red font-italic">Full Stack Web Developer</p>
<hr class="hr-speakers ml-0 mb-3">
<p>3 years of experience as Software Developer in Laravel, Symfony and ReactJS. Looking for new opportunities</p>
</div>
</div>
</div>
</div>
</section>
Feel free to change the images with what you want.
Add these CSS properties for handling the images:
.speaker-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
The partners' section
For this section, I could have used only grid bootstrap classes, but I wanted to use flex properties, and media queries. So I did it:
<section class="container-fluid partners-section text-white bg-dark-custom">
<div class="row pt-3 mb-3">
<div class="col-12">
<h3 class="text-center section-title">Partner</h3>
<hr class="hr-title">
</div>
</div>
<div class="partners">
<figure>
<img src="https://lh3.googleusercontent.com/proxy/FTbAIu2pEpk729jvah3twJTyNCuhr93S8ZjxPZvQEDkqWnMKyQBNBwRFSnloONly8fd-LI_gOQnQxO_dmDvfo46mP5x6bSwHznqURtfc6IuPAvW_lhs" alt="Partner">
</figure>
<figure>
<img src="https://lh3.googleusercontent.com/proxy/GVeJqWHGcVu_Sf4BiFDyqu7mD_Q3iGM_a9bIiHO9GnTrP7TrAnbrfTZDymSvuNs4Cpb55lxlsv6q8UXfYNZN8ILbD9HsN0WU6eOusrlOR6hrgao_Qrw" alt="Partner">
</figure>
<figure>
<img src="https://seattlecentralnewmedia.com/minjungyoon/wp-content/uploads/sites/312/2018/12/2000px-Naver_Logotype.svg_-1024x185.png" alt="Partner">
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Daum_Kakao_wordmark_-_2014.svg/1280px-Daum_Kakao_wordmark_-_2014.svg.png" alt="Partner">
</figure>
<figure>
<img src="https://i.pinimg.com/originals/ce/c0/5a/cec05a890ea942b3cd3f946f2e2c6433.png" alt="Partner">
</figure>
</div>
</section>
Add these CSS properties for the flex alignment, and some adjustments with the media queries
.partners {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: auto;
}
.partners figure {
margin: 2rem;
}
.partners img {
filter: contrast(5);
}
@media screen and (max-width: 767px) {
.partners {
width: 90%;
}
.program .section-subtitle {
font-size: 1.2rem;
text-align: center;
}
.program i {
font-size: 2rem;
}
}
@media screen and (max-width: 320px) {
tr {
display: flex;
flex-wrap: wrap;
width: 100%;
}
td {
display: block;
width: 50%;
text-align: center;
}
td[colspan] {
width: 100%;
}
th {
width: 100%;
}
.hr-speakers {
display: none;
}
.speakers .row,
#demo .row {
display: block;
text-align: center;
}
.speaker-block {
margin: auto;
}
}
Don't forget to wrap the program, speaker, and partner sections into a <main></main> tag.
Finally, let's do the footer.
The footer
Pretty simple, right? Here is the HTML code.
<footer class="container-fluid p-4 bg-light">
<div class="row">
<div class="col-6">
<figure>
<img class="img-fluid" src="./assets/images/creative.jpg" alt="Creative Common">
</figure>
</div>
<div class="col-6">
<p>2020 Creative Commons Korea <br>
Some Rights Reserved </p>
</div>
</div>
</footer>
That's it! Normally, at the end you should have something similar to the following:
💖 💪 🙅 🚩
David
Posted on December 3, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related