Category: Web Design

October 6, 2019

How to Design a Simple Contact Form by HTML/CSS

In this tutorial you will learn how to design a very simple contact form by HTML/CSS. This is really very simple design. If you are expert please ignore it. In the next tutorial I...

Web Design

October 8, 2018

Hello Universe!

All Time Hasan I just want to say that hello universe. We are going to create our website for learning website design and development. I’m really so excited that today I’m going to create...

body{font-family:Arial,sans-serif;font-size:1rem;}@media only screen and (min-width: 720px){.nav > li{font-size:1rem;}}::selection{background-color:#1a73e8;}::-moz-selection{background-color:#1a73e8;}a,a>span.hu-external::after,.themeform label .required,#flexslider-featured .flex-direction-nav .flex-next:hover,#flexslider-featured .flex-direction-nav .flex-prev:hover,.post-hover:hover .post-title a,.post-title a:hover,.sidebar.s1 .post-nav li a:hover i,.content .post-nav li a:hover i,.post-related a:hover,.sidebar.s1 .widget_rss ul li a,#footer .widget_rss ul li a,.sidebar.s1 .widget_calendar a,#footer .widget_calendar a,.sidebar.s1 .alx-tab .tab-item-category a,.sidebar.s1 .alx-posts .post-item-category a,.sidebar.s1 .alx-tab li:hover .tab-item-title a,.sidebar.s1 .alx-tab li:hover .tab-item-comment a,.sidebar.s1 .alx-posts li:hover .post-item-title a,#footer .alx-tab .tab-item-category a,#footer .alx-posts .post-item-category a,#footer .alx-tab li:hover .tab-item-title a,#footer .alx-tab li:hover .tab-item-comment a,#footer .alx-posts li:hover .post-item-title a,.comment-tabs li.active a,.comment-awaiting-moderation,.child-menu a:hover,.child-menu .current_page_item > a,.wp-pagenavi a{color:#1a73e8;}input[type="submit"],.themeform button[type="submit"],.sidebar.s1 .sidebar-top,.sidebar.s1 .sidebar-toggle,#flexslider-featured .flex-control-nav li a.flex-active,.post-tags a:hover,.sidebar.s1 .widget_calendar caption,#footer .widget_calendar caption,.author-bio .bio-avatar:after,.commentlist li.bypostauthor > .comment-body:after,.commentlist li.comment-author-admin > .comment-body:after{background-color:#1a73e8;}.post-format .format-container{border-color:#1a73e8;}.sidebar.s1 .alx-tabs-nav li.active a,#footer .alx-tabs-nav li.active a,.comment-tabs li.active a,.wp-pagenavi a:hover,.wp-pagenavi a:active,.wp-pagenavi span.current{border-bottom-color:#1a73e8 !important;}.sidebar.s2 .post-nav li a:hover i,.sidebar.s2 .widget_rss ul li a,.sidebar.s2 .widget_calendar a,.sidebar.s2 .alx-tab .tab-item-category a,.sidebar.s2 .alx-posts .post-item-category a,.sidebar.s2 .alx-tab li:hover .tab-item-title a,.sidebar.s2 .alx-tab li:hover .tab-item-comment a,.sidebar.s2 .alx-posts li:hover .post-item-title a{color:#dd5044;}.sidebar.s2 .sidebar-top,.sidebar.s2 .sidebar-toggle,.post-comments,.jp-play-bar,.jp-volume-bar-value,.sidebar.s2 .widget_calendar caption{background-color:#dd5044;}.sidebar.s2 .alx-tabs-nav li.active a{border-bottom-color:#dd5044;}.post-comments::before{border-right-color:#dd5044;}.search-expand,#nav-topbar.nav-container{background-color:#1a73e8;}@media only screen and (min-width: 720px){#nav-topbar .nav ul{background-color:#1a73e8;}}.is-scrolled #header .nav-container.desktop-sticky,.is-scrolled #header .search-expand{background-color:#1a73e8;background-color:rgba(26,115,232,.9);}.is-scrolled .topbar-transparent #nav-topbar.desktop-sticky .nav ul{background-color:#1a73e8;background-color:rgba(26,115,232,.95);}#header{background-color:#fff;}@media only screen and (min-width: 720px){#nav-header .nav ul{background-color:#fff;}}#header #nav-mobile{background-color:#1a73e8;}.is-scrolled #header #nav-mobile{background-color:#1a73e8;background-color:rgba(26,115,232,.9);}#footer-bottom{background-color:#222;}body{background-color:#f3f6fb;}::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:20px;}::-webkit-scrollbar-thumb{background:lightgray;border-radius:20px;box-shadow:0px 2px 5px 1px #000 inset;}.main-inner{background-image:none !important;background-color:#f3f6fb !important;}.main-inner.nitro-lazy{background-image:none !important;}.content{background-color:#fff;}.site-title a{color:inherit;}.site-description{color:inherit;}.sidebar .sidebar-content,.sidebar .sidebar-toggle{background-color:transparent;}.page-title{background-color:#f3f6fb;border:1px solid #eee;}#nav-topbar .nav li a{font-weight:500;letter-spacing:1px;color:#fff;}#nav-topbar .nav li.current-menu-item>a{font-weight:700;background-color:#fff;color:#1a73e8;}#header .pad,#footer-bottom .pad{padding-left:0;padding-right:0;}.widget>h3{font-size:18px;}.widget,.widget a{font-size:16px;}.entry dd,.entry p{line-height:35px;text-align:justify;}.single-blog-step-title{color:#1a73e8;font-weight:bold !important;}.single-blog-btn a{background-color:#1a73e8;color:#fff;font-weight:bold;letter-spacing:1px;border-radius:3px !important;transition:1s;}.single-blog-btn a:hover{background-color:#0b3b7b;}.wpcf7-form-control-wrap input,.wpcf7-form-control-wrap textarea{border:1px solid lightgray !important;padding:12px !important;width:100%;box-sizing:border-box;font-size:18px;}.wpcf7-form-control-wrap input:focus,.wpcf7-form-control-wrap textarea:focus{box-shadow:0 5px 20px rgba(0,0,0,.15) !important;background-color:#fff !important;border:1px solid lightgray !important;outline:none !important;}.wpcf7-validation-errors{color:red;}.wpcf7-mail-sent-ok{color:green;}@media (max-width: 575px){.entry dd,.entry p{line-height:30px;font-size:16px;text-align:left;}}

Category: Web Design

How to Design a Simple Contact Form by HTML/CSS

Hello Universe!

Recent Posts

Categories