Skip to content

Instantly share code, notes, and snippets.

@Shahrozmunir

Shahrozmunir/MediaQurey.css

Last active December 6, 2024 04:56
Show Gist options
  • Save Shahrozmunir/65f1541b7385c4e2615b7a63715a7345 to your computer and use it in GitHub Desktop.
Save Shahrozmunir/65f1541b7385c4e2615b7a63715a7345 to your computer and use it in GitHub Desktop.
Download ZIP
1. Choose suitable code which is not under NDA to share with you via gist. 1. a Edit the comments to my suitable source code
Raw
alefinvest-style.css
/* My Css Overview i have use this css in myclient website for a design to improve UI/UX. */
.path-frontpage .dialog-off-canvas-main-canvas #page-wrapper #page #header #navbar-main .navbar-brand img{
width: 50px;
}
#CollapsingNavbar #block-alefinvest-main-menu li a{
color: #4D4D4D;
font-family: ubuntu;
font-weight: bold;
font-size: 16px;
padding: 0 16px;
}
#CollapsingNavbar #block-alefinvest-main-menu li a:hover{
border-bottom: #0D62FE;
color: #0D62FE;
}
#navbar-main{
background-color: #F5F8FE;
}
/* This is the section i get the id from the drupal classes or ids for applying css on a different sections. */
#block-alefinvest-main-menu{
float: left;
width: 47%;
}
#block-alefinvest-mainnavsearchandbookbutton{
float: left;
width: 50%;
}
#block-alefinvest-mainnavsearchandbookbutton ul{
list-style-type: none;
}
#block-alefinvest-mainnavsearchandbookbutton ul li:nth-of-type(1){
float: left;
padding-right: 75px;
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
padding-top: 17px;
background: url(/alefinvest/themes/bootstrap_barrio/subtheme/images/search_icon.svg);
background-repeat: no-repeat;
background-position: 60% 135%;
background-size: 30px;
}
#block-alefinvest-mainnavsearchandbookbutton ul li:nth-of-type(2){
float: left;
padding-right: 75px;
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
padding-top: 17px;
background: url(/alefinvest/themes/bootstrap_barrio/subtheme/images/global_lang_icon.svg);
background-repeat: no-repeat;
background-position: 60% 135%;
background-size: 30px;
}
#block-alefinvest-mainnavsearchandbookbutton ul li:nth-of-type(3){
float: left;
padding-right: 75px;
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
padding-top: 17px;
background: url(/alefinvest/themes/bootstrap_barrio/subtheme/images/top-login-arrow.svg);
background-repeat: no-repeat;
background-position: 60% 135%;
background-size: 30px;
}
#block-alefinvest-mainnavsearchandbookbutton p{
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
float: left;
width: 22%;
background: #0D62FE;
padding: 14px 18px;
color: #FAFAFA;
border-radius: 4px;
height: 55px;
}
#block-alefinvest-mainnavsearchandbookbutton p:hover{
background-color: white;
color: black;
border: 3px solid #0D62FE;
padding: 14px 18px;
}
#CollapsingNavbar #block-alefinvest-main-menu .menu-item--expanded .dropdown-menu .dropdown-item span{
color: #4D4D4D;
font-family: ubuntu;
font-weight: normal;
font-size: 16px;
padding: 0 16px;
}
#block-alefinvest-topsecondleftaiblock .field--type-text-with-summary{
border: 1px solid gray;
border-radius: 30px;
padding: 16px 40px 1px 33px;
width: 51%;
}
#block-alefinvest-topsecondleftaiblock p:nth-of-type(1){
float: left;
padding-right: 10px;
font-size: 16px;
font-family: ubuntu-medium;
font-weight: normal;
color: gray;
}
#block-alefinvest-topsecondleftaiblock p:nth-of-type(2){
float: left;
padding-right: 10px;
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
color: black;
}
#block-alefinvest-topsecondleftaiblock p:nth-of-type(3){
float: left;
padding-right: 10px;
font-size: 16px;
font-family: ubuntu-medium;
font-weight: normal;
color: gray;
}
#block-alefinvest-topsecondleftaiblock p:nth-of-type(4){
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
color: black;
}
#main-wrapper,
.site-footer,
#page{
background: #FAFAFA;
}
#block-alefinvest-topsecondleftaiblock{
padding: 40px 4px;
}
.views-element-container{
display: none;
}
/* As you can see in this section i have get multiple ids for applying same css on the section where we need. */
#block-alefinvest-animationmainblockbanner p:nth-of-type(1),
#block-alefinvest-animationmainblockbanner p:nth-of-type(2),
#block-alefinvest-animationmainblockbanner p:nth-of-type(3){
font-size: 88px;
line-height: 70px;
color: #212121;
font-weight: bold;
font-family: ubuntu-medium;
}
#block-alefinvest-animationmainblockbanner p:nth-of-type(4){
float: left;
width: 55%;
font-size: 18px;
font-family: ubuntu-medium;
font-weight: normal;
}
#block-alefinvest-animationmainblockbanner p:nth-of-type(7),
#block-alefinvest-animationmainblockbanner p:nth-of-type(8){
float: left;
width: 55%;
font-size: 18px;
font-family: ubuntu-medium;
font-weight: normal;
margin-bottom: 0px;
}
#block-alefinvest-animationmainblockbanner p:nth-of-type(5){
width: 42%;
font-size: 20px;
font-family: ubuntu-medium;
font-weight: bold;
}
#block-alefinvest-animationmainblockbanner p:nth-of-type(6){
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
width: 12%;
background: #0D62FE;
padding: 17px 23px;
color: #FAFAFA;
border-radius: 4px;
height: 55px;
}
#block-alefinvest-animationmainblockbanner p:nth-of-type(6):hover{
background-color: white;
color: black;
border: 3px solid #0D62FE;
padding: 14px 18px;
}
#block-alefinvest-animationmainblockbanner p:nth-of-type(9){
position: absolute;
top: 19pc;
width: 10%;
left: 51pc;
}
#header #navbar-main .navbar-brand{
padding: 0 30px;
}
#block-alefinvest-leadersimagesblock{
padding: 65px 0px;
}
#block-alefinvest-footer ul li span,
#block-alefinvest-footer-2 ul li span,
#block-alefinvest-footer-3 ul li span,
#block-alefinvest-footer-4 ul li span,
#block-alefinvest-footer-5 ul li span{
font-size: 16px;
font-family: ubuntu-medium;
font-weight: bold;
color: #4D4D4D;
}
/* Its use for footer section. */
footer{
border-top: 2px solid gray;
margin: auto;
width: 95%;
}
Raw
index.html
<head>
<meta charset="utf-8">
<!-- <base href="/"> -->
<!-- i have write this code myself for design a home page of a website. -->
<title>OptimizedHTML 5</title>
<meta name="description" content="Startup HTML template OptimizedHTML 5">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Oswald&amp;family=Poiret+One&amp;family=Raleway:wght@200;300;400;700&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="icon" href="images/favicon.png">
<meta property="og:image" content="images/dist/preview.jpg">
<link rel="stylesheet" href="css/app.min.css">
</head>
<!-- By using different tags and an important html sections like container and also i'm focus on the
structure as well. -->
<body>
<div class="outer-container">
<header class="header">
<a href="/" class="logo">
<img src="./images/dist/logo-light.svg" alt="">
</a>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="/success.html" class="nav-link">success stories</a>
</li>
<li class="nav-item">
<a href="/about.html" class="nav-link">About us</a>
</li>
<li class="nav-item">
<a href="/launch.html" class="nav-link">Launch your project</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">careers</a>
</li>
<li class="nav-item">
<a href="/contacts.html" class="nav-link">Contacts</a>
</li>
</ul>
</nav>
</header>
<!-- This section is use or brief container sections for naking multiple boxs according to design. -->
<main class="page_homepage">
<section class="section_hero">
<div class="bg-tdark w-100 py-5">
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="text-orange">Enabling Innovative Solutions</h1>
<h2 class="text-white">Your reliable partner for product development and operations</h2>
</div>
</div>
</div>
</div>
</section>
<section class="section_experts bg-noize">
<div class="container">
<h2>We Are Experts</h2>
<div class="experts_list d-flex justify-content-between mb-5">
<div class="experts_list_item">
<div class="d-flex justify-content-center w-100">
<div class="experts_list_item_image">
<img class="experts_list_item_icon" src="./images/dist/icons/icon-geo.svg" alt="">
<img class="experts_list_item_icon" src="./images/dist/icons/icon-geo-hover.svg" alt="">
</div>
</div>
<h4 class="text-center mb-4"><span class="text-orange">Innovative </span><span class="text-white">Car Sharing
</span><span class="text-orange">Solutions </span></h4>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste odit maxime delectus,
voluptatibus, eligendi repudiandae aspernatur, possimus eius optio consequuntur velit pariatur repellat
mollitia eaque assumenda. Qui quasi aperiam exercitationem.</p>
</div>
<div class="experts_list_item">
<div class="d-flex justify-content-center w-100">
<div class="experts_list_item_image">
<img class="experts_list_item_icon" src="./images/dist/icons/icon-geo.svg" alt="">
<img class="experts_list_item_icon" src="./images/dist/icons/icon-geo-hover.svg" alt="">
</div>
</div>
<h4 class="text-center mb-4"><span class="text-orange">Innovative </span><span class="text-white">Car Sharing
</span><span class="text-orange">Solutions </span></h4>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste odit maxime delectus,
voluptatibus, eligendi repudiandae aspernatur, possimus eius optio consequuntur velit pariatur repellat
mollitia eaque assumenda. Qui quasi aperiam exercitationem.</p>
</div>
<div class="experts_list_item">
<div class="d-flex justify-content-center w-100">
<div class="experts_list_item_image">
<img class="experts_list_item_icon" src="./images/dist/icons/icon-geo.svg" alt="">
<img class="experts_list_item_icon" src="./images/dist/icons/icon-geo-hover.svg" alt="">
</div>
</div>
<h4 class="text-center mb-4"><span class="text-orange">Innovative </span><span class="text-white">Car Sharing
</span><span class="text-orange">Solutions </span></h4>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste odit maxime delectus,
voluptatibus, eligendi repudiandae aspernatur, possimus eius optio consequuntur velit pariatur repellat
mollitia eaque assumenda. Qui quasi aperiam exercitationem.</p>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="/" class="btn btn-primary">
discover our success
</a>
</div>
</div>
</section>
<section class="section_advantages bg-noize">
<div class="container">
<br>
<h2>Our Advantages</h2>
<br>
<div class="d-flex justify-content-center pb-5">
<div class="d-flex font-white align-items-center justify-content-center" style="width: 400px; height: 400px; background: black; border: 1px solid white;">
In design
</div>
</div>
</div>
</section>
<section class="section_results bg-noize py-5">
<div class="container">
<h2 class="mb-5 pb-3">Key Company Results</h2>
</div>
<div class="bg-gray w-100 bg-shadow-top-bot bg-noize py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-3">
<div class="presentation_item">
<div class="presentation_item_icon">
<div class="presentation_item_icon_container1">
<div></div>
</div>
<div class="presentation_item_icon_container2">
<div></div>
</div>
<div class="presentation_item_icon_container3">
<div></div>
</div>
</div>
<div class="presentation_item_content">
<span class="text-orange presentation_item_content_number">11+</span>
<span class="text-white presentation_item_content_title">Years</span>
<span class="text-gray bg_noize presentation_item_content_subtitle">of driving experience</span>
</div>
</div>
</div>
<div class="col-3">
<div class="presentation_item">
<div class="presentation_item_icon">
<div class="presentation_item_icon_container1">
<div></div>
</div>
<div class="presentation_item_icon_container2">
<div></div>
</div>
<div class="presentation_item_icon_container3">
<div></div>
</div>
</div>
<div class="presentation_item_content">
<span class="text-orange presentation_item_content_number">11+</span>
<span class="text-white presentation_item_content_title">Years</span>
<span class="text-gray bg_noize presentation_item_content_subtitle">of driving experience</span>
</div>
</div>
</div>
<div class="col-3">
<div class="presentation_item">
<div class="presentation_item_icon">
<div class="presentation_item_icon_container1">
<div></div>
</div>
<div class="presentation_item_icon_container2">
<div></div>
</div>
<div class="presentation_item_icon_container3">
<div></div>
</div>
</div>
<div class="presentation_item_content">
<span class="text-orange presentation_item_content_number">11+</span>
<span class="text-white presentation_item_content_title">Years</span>
<span class="text-gray bg_noize presentation_item_content_subtitle">of driving experience</span>
</div>
</div>
</div>
<div class="col-3">
<div class="presentation_item">
<div class="presentation_item_icon">
<div class="presentation_item_icon_container1">
<div></div>
</div>
<div class="presentation_item_icon_container2">
<div></div>
</div>
<div class="presentation_item_icon_container3">
<div></div>
</div>
</div>
<div class="presentation_item_content">
<span class="text-orange presentation_item_content_number">11+</span>
<span class="text-white presentation_item_content_title">Years</span>
<span class="text-gray bg_noize presentation_item_content_subtitle">of driving experience</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="background-image: url('../images/dist/backgrounds/mapWorldShades.png');" class="section_launch bg-carbon bg-animate-slide bg-shadow-inset-top bg-noize py-5">
<div class="container small">
<h2 class="mb-5">Launch your project</h2>
<!-- i have use js with this html file as well you can see it at the end of the file. -->
<div class="section_launch_content bg-blur">
<h3 class="text-orange mb-4">Ready to innovate?</h3>
<p class="text-white">Follow our easy steps to partner with 6-Systems and drive forward together!</p>
<a href="/" class="btn btn-primary mt-4">Launch with us</a>
<img class="position-absolute section_launch_content_image" src="./images/dist/cyberglobe.png" alt="">
</div>
</div>
</section>
</main>
<!-- This is footer section we just need a picture in the footer so that why i am adding only picture only in footer.-->
<footer class="footer">
<img src="./images/dist/logo-light.svg" alt="">
</footer>
</div>
<script src="js/app.min.js"></script>
</body>
Raw
index.js
// I just use this some code of js for the some animation that i need in the home page.
const words = [
'Word 1',
'Word 2',
'Word 3',
'Word 4',
'Word 5',
];
function animateWords() {
const randomDelay = Math.floor(Math.random() * 1000) + 2000; // Delay between 2 to 3 seconds
if (words.length > 0) {
const word = words.shift();
console.log(word);
setTimeout(animateWords, randomDelay);
}
}
setTimeout(animateWords, 5000);
Raw
MediaQurey.css
/* This is the code that i am using for responsive design for mobile design purpose. */
@media only screen and (max-width: 1080px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@import url('https://rsms.me/inter/inter.css');
@font-face {
font-family: "kanit";
src: url(./fonts/Kanit-Light.woff) format("woff");
}
/* Head start */
.main-container{
width: 1920px;
height: 80px;
background-color: #092455;
padding-left: 33px;
}
body{
margin: 0%;
}
.inner-email a{
color: #FFF;
margin-left: 12px;
text-decoration: none;
overflow: hidden;
font-size: 12px;
font-weight: 400;
line-height: 14.52px;
font-family: 'Inter', sans-serif;
}
.email-info{
float: left;
margin-left: 33px;
margin-right: 33px;
margin-top: 33px;
margin-bottom: 28px;
}
.social-links{
float: right;
width: 34%;
margin-top: 33px;
margin-bottom: 25px;
margin-right: 33px;
}
.social-links img{
padding-left: 11px;
}
/* Head End */
/* Logo Section Start */
.logo{
}
.menu{
height: 57px;
padding-top: 33px;
width: 94;
font-family: kanit;
}
li{
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu a{
text-decoration: none;
float: left;
padding-left: 15px;
color: #000000;
}
.logo-part{
width: 40%;
height: 80px;
padding: 15px;
margin-left: 33px;
padding-left: 33px;
overflow: hidden;
float: left;
}
.ul i{
padding-left: 15px;
}
/* Logo section end */
/* Banner Section Start */
.banner{
background-image: url("./images/banner.png");
background-size: 100%;
height: 521px;
overflow: hidden;
display: inline-block;
width: 100%;
text-align: center;
}
.banner-container{
overflow: hidden;
display: inline-block;
width: 100%;
}
.banner input{
border: 0px;
border-radius: 20px;
width: 685px;
height: 43px;
margin-top: 33px;
}
.banner p{
font-size: 66px;
margin: 0;
padding-top: 33px;
margin-top: 106px;
color: #FFFFFF;
}
.search-part{
position: relative;
width: 50%;
margin: auto;
}
/* Banner Section End*/
/* <!-- Science Section Start --> */
/* .science-section{
background-image: url("./images/Rectangle\ 6.png");
height: 1277px;
width: 1920px;
}
.science-image h2{
font-size: 64px;
margin: 0;
color: white;
font-weight: bolder;
font-family: kanit;
}
.science-image{
background-image: url("./images/anda.png");
} */
/* <!-- Science Section Start --> */
.science-container{
background-image: url("./images/Rectangle\ 9.png");
height: 1294px;
padding-top: 45px;
margin: auto;
width: 100%;
position: relative;
}
.science-image{
font-family: kanit;
margin: 0;
font-size: 0;
margin-top: 46px;
padding-top: 45px;
font-family: kanit;
}
.science-image h2{
font-size: 96px;
padding-top: 50px;
width: 64%;
margin: auto;
margin-top: auto;
margin-top: 50px;
}
.sci-para p{
margin: 33px;
font-size: 20px;
color: #878787;
font-family: kanit;
}
.sci-image{
color: #333333;
font-size: 14px;
width: 28.1%;
float: left;
font-family: kanit;
margin: 0 17px;
}
.sci-image-p{
color: #878787;
}
.three-container .button{
position: absolute;
left: 5.5%;
width: 50px;
background: white;
height: 34px;
text-align: center;
border-radius: 8px;
padding-top: 16px;
bottom: 36%;
border: 1px solid #BBBBBB;
}
.button-2{
position: absolute;
right: 6.5%;
border: 1px solid gray;
width: 50px;
height: 34px;
text-align: center;
padding-top: 15px;
background-color: #FFF;
border-radius: 8px;
bottom: 36%;
}
.sci-image > img{
width: 100%;
}
.three-container{
width: 87%;
margin: auto;
overflow: hidden;
}
.sci-info{
background: #fff;
padding: 0 14px;
border-radius: 0 0 15px 15px;
margin-top: -19px;
}
.msg-part{
text-align: center;
font-size: 20px;
overflow: hidden;
border: 1px solid #2E3192;
margin: auto;
width: 18%;
border-radius: 20px;
height: 65px;
margin-top: 33px;
color: #333333;
position: absolute;
top: 84%;
left: 40%;
}
.fb-part{
position: absolute;
bottom: 3%;
right: 0%;
}
/* <!-- Science Section End--> */
/* Footer-Start */
.footer{
width: 100%;
height: 610px;
background-color: #000000;
position: relative;
}
.text{
color: white;
padding-top: 17px;
padding-left: 33px;
margin-left: 33px;
font-family: kanit;
overflow: hidden;
}
.sub{
font-size: 20px;
font-family: kanit;
color: #BBBBBB;
}
.info-id{
color: white;
padding: 33px;
margin-left: 33px;
margin-top: 33px;
}
.social-media{
color: white;
margin-left: 33px;
padding-left: 33px;
}
.home-icone-ftr p{
float: left;
margin: 4px 9px;
}
.home-icone-ftr img{
float: left;
position: absolute;
left: 37px;
}
.phone-icone-ftr img{
float: left;
position: absolute;
left: 37px;
}
.phone-icone-ftr p{
float: left;
margin: 5px 11px;
}
.social-media{
overflow: hidden;
display: inline-block;
}
.phone-icone-ftr{
overflow: hidden;
margin-top: 31px;
display: inline-block;
}
.left-side-bar {
width: 40%;
float: left;
}
.search{
padding-top: 33px;
padding-left: 33px;
margin-top: 13px;
}
.right-ftr{
width: 60%;
float: right;
}
#ftr-search{
width: 375px;
height: 27px;
float: left;
margin-bottom: 33px;
padding-bottom: 16px;
}
.send-icon{
padding-top: 5px;
}
.icon-outer{
width: 9%;
float: left;
text-align: center;
background-color: #2E3192;
height: 42px;
padding-top: 6px;
}
.bottom-border{
padding-top: 33px;
overflow: hidden;
width: 100%;
margin-top: 33px;
padding-bottom: 16px;
}
.bottom{
color: white;
width: 30%;
padding: 33px;
padding-top: 33px;
margin-top: 33px;
}
.link{
color: white;
text-decoration: none;
font-size: 20px;
font-family: kanit;
}
/* <!-- Footer End --> */
}
Raw
option-1.md

We're interested in understanding how you code and what drives your decisions while coding. To understand this, could you send us a short snippet of code (100 to 500 lines) that you wrote with your explanations of what it does or solves and why you decided to code it this way. You can put them in a Github Gist, Github repository, PasteBin or a Google Doc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment