I'm new to website developement. I'm trying to get my embbeded twitch player to use it's parent full width. The height seems so work just fine, but whilst using the d-flex class from bootstrap it makes the player extremly thin.
Please watch my code here:
https://jsfiddle.net/Sagan_owl/nwvt2ag8/3/
Don't mind the player error message, that's expected
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brams 225</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="./main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
</head>
<body>
<main class="container-fluid">
<div class="row corps">
<div class="col-lg-2 bg-warning">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Donations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Professionnel</a>
</li>
</ul>
</div>
<div class="col-lg-10 d-flex flex-column">
<div class="row d-flex align-items-stretch section2-haut bg-success">
<div class="col-lg-12 d-flex align-self-center justify-content-center">
<div id="twitch-embed"></div>
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: "100%",
channel: "monstercat",
// only needed if your site is also embedded on embed.example.com and othersite.example.com
parent: ["embed.example.com", "othersite.example.com"]
});
</script>
</div>
</div>
<div class="row section2-bas bg-info ">
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-9eaaa5a0-b00a-4475-bc6a-c6b5930bae48"
class="img-fluid" alt="twitter img not found">
</div>
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-1deed596-2b7e-4781-9628-e3a82b4cc9c2"
class="img-fluid" alt="twitter img not found">
</div>
<div class="col-lg-4 mt-auto text-center">
<img src="https://panels-images.twitch.tv/panel-18340583-image-f0ce67ba-5a55-4aa6-8d94-b628ebac530a"
class="img-fluid" alt="twitter img not found">
</div>
</div>
</div>
</div>
</main>
</body>
</html>
----------
main{
height: 100vh;
}
.corps{
height: 100vh;
}
.section2-haut{
height: 80vh;
}
.section2-bas{
height: 20vh;
}
You need to set the dimensions on the parent div
https://jsfiddle.net/pu5rhtxo/
#twitch-embed {
width: 100%;
}
In this example I set some CSS on the parent Div
Also fixed the parent in the JS script tags so the player actually worked
Related
Trying to align my footer icons but I can't seem to center the first 2 images. The bootstrap icons center fine, but the first 2 images don't. I have tried doing things like align-items-center, justify-content-center, text-center, etc.
using bootstrap v5.3.0-alpha-1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="container" style="color: black;">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<span class="mb-3 mb-md-0 text-muted">© 2022 Company, Inc</span>
</div>
<ul class="nav justify-content-center">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Team</li>
<li class="nav-item">Pricing</li>
</ul>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao-pass">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" class="opensea_icon" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://opensea.io/collection/ozdao">
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png" style="height: 16px; width: 16px;" />
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://twitter.com/xxx">
<i class="bi bi-twitter"></i>
</a>
</li>
<li class="ms-3">
<a class="text-muted" href="https://t.me/xxx">
<i class="bi bi-telegram"></i>
</a>
</li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
The vertical-align property on your images is different than the bootstrap icons:
If you inspect the bootstrap icon, you'll see there is:
vertical-align: -.125em;
Try to add the same vertical-align to your images.
I have been trying for hours to get my navbar to fill the width of the screen but I have had no luck. I have tried setting padding to 0, !important, width 100% but nothing is working. Any help would be appreciated.
.carousel-item {
height: 100vh;
min-height: 300px;
}
.navbar-nav a {
font-size: 18px;
}
.navbar-nav {
text-align: center;
background-color: #bfd9d7;
width: 100%;
padding: 0%;
}
.w-100 {
height: 100vh;
}
<!doctype html>
<html lang="en">
<head>
<title>Scot Living</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Furniture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dining</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bedroom</a>
</li>
</ul>
</div>
</nav>
<div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="First slide" class="d-block w-100" src="Pictures/bedroom.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated bounceInRight" style="animation-delay: 1s">Bedroom</h5>
<p class="animated bounceInLeft" style="animation-delay: 2s">Bedroom Furniture</p>
<p class="animated bounceInRight" style="animation-delay: 3s">Shop Bedroom</p>
</div>
</div>
<div class="carousel-item">
<img alt="Second slide" class="d-block w-100" src="Pictures/diningroom.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated slideInDown" style="animation-delay: 1s">Dining Room</h5>
<p class="animated fadeInUp" style="animation-delay: 2s">Dining room furniture</p>
<p class="animated zoomIn" style="animation-delay: 3s">Shop Dining</p>
</div>
</div>
<div class="carousel-item">
<img alt="Third slide" class="d-block w-100" src="Pictures/carpet.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated zoomIn" style="animation-delay: 1s">Flooring</h5>
<p class="animated fadeInLeft" style="animation-delay: 2s">Wide range of flooring</p>
<p class="animated zoomIn" style="animation-delay: 3s">Shop Flooring</p>
</div>
</div>
</div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" data-slide="next"
href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
</div>
<!-- Optional JavaScript -->
<script type="text/javascript" src='script.js'>
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to get the blue navbar to fill out to the edge of the screen on both sides:
remove the padding from <nav class="navbar navbar-expand-lg navbar-light fixed-top border "> via p-0 class.
It becomes : <nav class="navbar navbar-expand-lg navbar-light fixed-top border p-0">
aside note : w-100 is already a bs4 classname and sets width to 100% , not sure it is a good idea to add height:100vh to it , use a custom classname for a custom style ;) .
Add this to your CSS-Code:
* {
margin: 0;
padding: 0;
}
When you have added this, everything should no longer have so much distance.
If it doesn't work then please let me know.
Did you add this code snippet at the top of CSS
*{
margin : 0;
padding: 0;
}
Remove padding form "navbar"
.navbar {
padding: 0;
}
So for a school project im making a website but whenever I use container and container-fluid no matter what I use i have these empty spaces on the side and I have no clue how to fix them so i came here for help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" id="nav">
<div class="row">
<div class="col-xl-12">
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I do hope I can find help here and thanks in advance!
Bootstrap adds in some spacing by default to container and container-fluid classes. To remove these, you can specify you want no padding / margin on each item by adding a class using the format {property}{sides}-{size} where size is 0.
For example, to remove padding you can add a p-0 class. You can also remove a specific side:
pt-0 top
pr-0 right
pb-0 bottom
pb-0 left
Similarly, to remove margin you can add a m-0 class.
For more info on spacing, check out: https://getbootstrap.com/docs/4.0/utilities/spacing/
To remove these default spacing use bootstrap grid classes can be removed with .no-gutters.
Here is an example
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
For more information: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Not sure what you mean by white spaces, you might want to define with an image. If you mean that your body doesn't fill the page, the problem is nested containers. See comments below.
<body>
<!-- This container is going to "add space" to your sides. -->
<div class="container" id="nav">
<div class="row">
<!-- This will fill all 12 columns on XL viewport,
but the columns are inside the parent container. -->
<div class="col-xl-12">
<!-- This will go to the limits of the parent container above. -->
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
Please see the following code. I just want to center content with a footer that appears at the bottom, all of which is inside a background cover image. I've tried doing this with Bootstrap4 containers as well as d-flex configurations, all of which has been an abysmal fail. :(
Presently I'm using two columns that are stacked on top of each other but it doesn't work when you make the screen smaller in height. I'm hoping for the proper way to do this by actually centering content using the entire screen while maintaining a footer.
Also see here for a working demo: https://jsfiddle.net/m05heusn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>t-rex</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!-- bootstrap4 css should load first to be available globally -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js" integrity="sha384-vGq6VlJ/rGDK5hwCZhgtrb5j4nOanwgWgBSe9anrJGQHqCgkBo45u6lAxlVR0U+Q"
crossorigin="anonymous"></script>
<style>
html,
body {
font-family: 'Josefin Sans', sans-serif;
height: 100%;
}
#cover {
background-attachment: scroll;
background-image: url('http://source.unsplash.com/9euUL1nE9aA/1920x1080');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=xyz"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'xyz');
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light afixed-top py-4">
<div class="container">
<a class="navbar-brand" href="#">
t-rex
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div> <!-- navMenu -->
</div> <!-- container -->
</nav>
<div id="cover" class="h-100">
<div class="container-fluid h-100">
<div class="row h-100 text-center">
<div class="col-12 align-self-center text-center">
<div class="display-1 d-none d-sm-block">
t-rex
</div>
<div class="display-3 d-block d-sm-none">
t-rex
</div>
</div>
<div class="col-12 align-self-end p-2">
<div class="d-none d-sm-block text-right">
Copyright © 2018 t-rex. All rights reserved.
</div>
<div class="small d-block d-sm-none text-center">
Copyright © 2018 t-rex. All rights reserved.
</div>
</div>
</div>
</div>
</div>
<!-- cover
<script src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT "
crossorigin="anonymous "></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "
crossorigin="anonymous "></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "
crossorigin="anonymous "></script>
</body>
</html>
In this code block there is "text-right" class:
<div class="d-none d-sm-block text-right">Copyright © 2018 t-rex. All rights reserved.</div>
So, change it to "text-center".
I am trying to figure out why my container is overlapping my header when it comes to the small screen section. My goal is for the container (and all the contents inside of it) to be underneath my header on the page. It works perfectly for the extra small screen part, but the small screen is where it all goes wrong. I am just beginning my journey into bootstrap so please ignore my sloppy code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="css/grid-system-test.css">
</head>
<body>
<header>
<div class="d-sm-none"> <!-- Navbar is only viewable on extra small screens -->
<div class="white-block">
<img class="comp-logo mx-auto d-block" src="img/logo.png" alt="company logo">
</div>
<nav class="text-center">
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
<div class="col-12">
<ul class="nav xs-nav">
<li class="nav-item">
<a class="nav-link" href="#"><p>SERVICES</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>WORK</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>BLOG</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>CONTACT</p></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-sm-block"> <!------------------------ NAVBAR FOR SMALL SCREEN STARTS HERE -------------------------->
<nav class="white-bg text-center small-nav">
<ul class="nav justify-content-center">
<li class="small-nav-item">
<a class="small-nav-link" href="#">SERVICE</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">WORK</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#"><img class="comp-logo comp-logo-small" src="img/logo.png"></a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">BLOG</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
</nav>
</div>
</header>
<!-------------------------------------------- CONTAINER STARTS HERE -------------------------------------------------->
<div class="container-fluid text-center">
<h2>VISUAL DESIGN & WEB DEVELOPMENT</h2>
<h4 class="park-city-text">FROM PARK CITY, UTAH</h4>
<div class="row">
<div class="col-6">
<div class="circle-big red-bg ml-4">
<h6 class="text-light center-txt">DESIGN</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big orange-bg mr-4">
<h6 class="text-light center-txt">DEVELOP</h6>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="circle-big green-bg ml-4 circle-margin-top">
<h6 class="text-light center-txt">SUPPORT</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big blue-bg mr-3 circle-margin-top">
<h6 class="text-light center-txt">HOST</h6>
</div>
</div>
</div>
<!-- end of circle images -->
<p class="selectW">SELECTED WORK</p>
<img class="ipad rounded" src="img/apple-ipad.jpg" alt="apple on ipad">
<div class="row">
<div class="col-6">
<p class="float-left ml-3">FEATURED PROJECT</p>
</div>
<div class="col-6">
<div class="circle-sm red-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm orange-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm green-bg small-circle-text float-right mr-2"><p class="font-weight-bold">S</p></div>
<div class="circle-sm blue-bg small-circle-text float-right mr-2"><p class="font-weight-bold">H</p></div>
</div>
</div>
</div>
</body>
</html>