Главная » Языки программирования

Blog page html css

Содержание
  1. How to Make A blog Template Design Using HTML CSS
  2. Top 15 CSS Blog Card Design Templates
  3. CSS Blog Card Design:-
  4. 1. Blog Card
  5. 2. Fun with blog cards!
  6. 3. Blog card with hover animation
  7. 4. Blog Posts Card Layout
  8. 5. Blog Card
  9. 6. Hover Blog Cards
  10. 7. Blog Card
  11. 8. Blog Card
  12. 9. Blog Card
  13. 10. Blog Post Item
  14. 11. CSS blog cards
  15. 12. Card UI Responsive Design
  16. 13. Blog Cards
  17. 14. Blog Card
  18. 15. Blog Card
  19. Frontend Development Project — Create a Blog with HTML & CSS

How to Make A blog Template Design Using HTML CSS

hello viewers, in this article I will tell you how to create custom blog template design help of html CSS. this template is very simple and very attractive. you have seen lots of blog template on internet but this different by all. because we are not use a download template design. we create design by your manual coding. you can easily modify this template design to your need according. this blog theme is based on two main colours first one is blue colour and second one is black colour you can see that on this project. colour combination is main part of your template because if your colour choice is not good so that your template design is also not looks good. when you create a web template design two main things you have one is web template fonts and second one is web template colour combination. if you have chased correct colour and fonts. then your web template design looking are very attractive and unique.

Читайте также:  Python full course 12 hours

now you can copy the source code in below and then paste your html document

Blog
  
  • Latest
    • 
  
  • Contact
    • 
  
    • 


    actually want to read
    /*

    Latest stories


    Get our weekly email

    Copy the css code in below and paste your css document

    :root < --main: #7b4ee4 ; --darkblue: #362078; --black: #060606; --white: #e7dff4; >* < margin: 0px; padding: 0px; font-family: system-ui; >.clearfix < clear: both; >header < padding: 20px 0px; box-shadow: 2px 2px 15px var(--black); >.container < width: 1140px; max-width: 100%; margin: 0 auto; >.col-div-6 < width: 50%; float: left; >.logo < font-weight: bold; font-size: 25px; color: var(--black); >.logo span < color: var(--main); >.nav < float: right; >.nav li < list-style: none; float: left; padding: 3px 20px; >.nav li a < text-decoration: none; color: var(--black); >.nav li button < padding: 7px 15px; background: var(--main); color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: -5px; >.banner-section < background: var(--main); height: 400px; overflow: hidden; >.heading < color: var(--white); font-size: 40px; letter-spacing: 1px; margin-top: 14%; >.p1 < color: white; width: 395px; margin-top: 20px; margin-bottom: 20px; letter-spacing: 1px; font-size: 14px; >.input-box < box-shadow: 1px 7px 8px 0px #222121; width: 360px; border-radius: 50%; >.input-box input[type="text"] < padding: 9px; width: 265px; border: none; border-radius: 5px; outline: none; >.input-box button < padding: 10px 27px; border-radius: 0px 5px 5px 0px; border: none; margin-left: -6px; background: var(--darkblue); color: white; cursor: pointer; >.ban-img < width: 250px; margin-bottom:-50px; >.b-img < width: 100%; border-radius: 10px; >.heading1 < margin-top: 20px; color: var(--main); font-size: 14px; text-transform: uppercase; >.blog-heading < font-size: 29px; font-weight: bold; margin-bottom: 20px; color: var(--black); >.text < font-size: 13px; letter-spacing: 1px; color: var(--black); margin-bottom: 20px; >.name < text-transform: uppercase; font-weight: 600; color: #a1a1a1; font-size: 14px; >.lr-box < padding: 10px 20px; >.b-img-1 < width: 100%; height: 160px; border-radius: 10px; margin-top: 7px; >.blog-heading-1 < font-size: 20px; font-weight: bold; margin-bottom: 20px; color: var(--black); >.line < width: 100%; margin-top: 15px; border: none; height: 1px; background: #ddd; >.lr-box:hover < opacity: 0.5; cursor: pointer; >.box-1:hover < opacity: 0.5; cursor: pointer; >.box-2 < width: 28.5%; float: left; margin: 25px; >.box-2:hover < opacity: 0.5; cursor: pointer; >.foot-section < background: var(--main); >.foot-inner < width: 500px; margin: 0 auto; padding: 50px; text-align: center; >.ibox2 < margin: 0 auto; width: 380px; >footer < background:var(--darkblue); padding: 15px; >footer p

    if you have any problem to understand this code then you please watch this video tutorial also

    Источник

    Top 15 CSS Blog Card Design Templates

    Hello Coders! Welcome to the Codewithrandom blog. Here are the Top 15 CSS Blog Card Design Templates using HTML and CSS.

    Here we will walk you through making cards that are information or blog data holding containers that help to store any details related to any topic and related content under one section known as a profile card.

    A Blog card in a more generic sense is defined as a card or multiple piles of cards with each telling a different story through textual data or images or a whole blog making the site more organized and handy.

    Without wasting any time, let’s watch the Top 15 CSS Blog Card Design live preview and source code. Happy exploring and learning!

    master frontend development ebook cover

    Do you want to learn HTML to JavaScript? 🔥

    If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

    CSS Blog Card Design:-

    1. Blog Card

    CSS Blog Card Design

    Code By – Zamaal Azad
    Demo & Download Click Here For Code
    Language Used – HTML, CSS
    External Link / Dependencies No
    Responsive Yes

    Here You Can See How The Above Blog Card Templates Project Depicts The Blog Card Implemented Using HTML And CSS.

    2. Fun with blog cards!

    CSS Blog Card Design

    Code By – Jade Fisher
    Demo & Download Click Here For Code
    Language Used – HTML, CSS, JS
    External Link / Dependencies Yes
    Responsive Yes

    In The Above-Displayed Blog Card Templates Project, We Have For You Fun with blog cards! Using HTML, JS, And CSS.

    3. Blog card with hover animation

    CSS Blog Card Design

    Code By – Josh Mathis
    Demo & Download Click Here For Code
    Language Used – HTML, CSS, JS
    External Link / Dependencies Yes
    Responsive Yes

    Here You Can See How The Above Blog Card Templates Project Depicts The Blog card with hover animation Implemented Using HTML, JS, And CSS.

    4. Blog Posts Card Layout

    CSS Blog Card Design

    In The Above-Displayed Blog Card Templates Project, We Have For you a Blog Posts Card Layout Using HTML And CSS.

    5. Blog Card

    CSS Blog Card Design

    Code By – Dwayne Franco
    Demo & Download Click Here For Code
    Language Used – HTML, CSS
    External Link / Dependencies No
    Responsive Yes

    Here You Can See How The Above Blog Card Templates Project Depicts The Blog Card Implemented Using HTML And CSS.

    6. Hover Blog Cards

    CSS Blog Card Design

    Code By – CJ ~ RD
    Demo & Download Click Here For Code
    Language Used – HTML, CSS
    External Link / Dependencies Yes
    Responsive Yes

    In The Above-Displayed Blog Card Templates Project, We Have For you Hover Blog Cards Using HTML And CSS.

    7. Blog Card

    CSS Blog Card Design

    Here You Can See How The Above Blog Card Templates Project Depicts The Blog Card Implemented Using HTML And CSS.

    8. Blog Card

    CSS Blog Card Design

    In The Above-Displayed Blog Card Templates Project, We Have For you a Blog Card Using HTML And CSS.

    9. Blog Card

    CSS Blog Card Design

    Code By – Lahesh
    Demo & Download Click Here For Code
    Language Used – HTML, CSS
    External Link / Dependencies No
    Responsive Yes

    Here You Can See How The Above Blog Card Templates Project Depicts The Blog Card Implemented Using HTML And CSS.

    10. Blog Post Item

    CSS Blog Card Design

    Code By – Nodws
    Demo & Download Click Here For Code
    Language Used – HTML, CSS, JS
    External Link / Dependencies No
    Responsive Yes

    In The Above-Displayed Blog Card Templates Project, We Have For you a Blog Post Item Using HTML, JS, And CSS.

    11. CSS blog cards

    CSS Blog Card Design

    Code By – Ibraheem Uthman
    Demo & Download Click Here For Code
    Language Used – HTML, CSS
    External Link / Dependencies No
    Responsive Yes

    Here You Can See How The Above Project Depicts The CSS blog cards Implemented Using HTML, And CSS.

    12. Card UI Responsive Design

    CSS Blog Card Design

    Code By – Emre Süslü
    Demo & Download Click Here For Code
    Language Used – HTML, CSS, JS
    External Link / Dependencies Yes
    Responsive Yes

    In The Above-Displayed Blog Card Templates Project, We Have For you a Card UI Responsive Design Using HTML, JS, And CSS.

    13. Blog Cards

    CSS Blog Card Design

    Code By – Puskar Adhikari
    Demo & Download Click Here For Code
    Language Used – HTML, CSS
    External Link / Dependencies No
    Responsive Yes

    Here You Can See How The Above Blog Card Templates Project Depicts The Blog Cards Implemented Using HTML And CSS.

    14. Blog Card

    CSS Blog Card Design

    See the Pen <a href=”https://codepen.io/tterb/pen/KoNzXw”> Blog Card</a> by Brett (<a href=”https://codepen.io/tterb”>@tterb</a>) on <a href=”https://codepen.io”>CodePen</a>.

    Code By – Brett
    Demo & Download Click Here For Code
    Language Used – HTML, CSS
    External Link / Dependencies No
    Responsive Yes

    In The Above-Displayed Blog Card Templates Project, We Have For you a Blog Card Using HTML And CSS.

    15. Blog Card

    CSS Blog Card Design

    Code By – Natalia
    Demo & Download Click Here For Code
    Language Used – HTML, CSS, JS
    External Link / Dependencies Yes
    Responsive Yes

    Here You Can See How The Above Project Depicts The Blog Card Implemented Using HTML, CSS, and JavaScript.

    Hope you like all the Top 15 CSS Blog Card Templates projects, mentioned in this article and that they helped in increasing your understanding of the use of CSS Blog Cards to store blog information be it image, text, or lists under one section to be able to access the particular blog on-demand With a Vast Variety Of Design Options To Choose From.

    In This Blog Post, We Shared with you the Top 15 CSS Blog Card Templates using HTML and CSS with easy-to-implement demo source code available. Hope You Like Our Blog Post And Read Others To Gain Knowledge In Frontend Development. See Our Other Blogs And Gain Knowledge In Front-end Development

    Thank You and Keep Learning!!

    Источник

    Frontend Development Project — Create a Blog with HTML & CSS

    It’s time for you to improve your HTML and CSS skills by creating a blog.

    We just posted a frontend development course on the freeCodeCamp.org YouTube channel that will teach you how to build a blog with HTML and CSS.

    Julio Codes created this course. He has a popular YouTube channel where he posts amazing technical courses.

    thumbnail

    Here are the sections in this course:

    • Intro & demo
    • Setup
    • Header — HTML
    • Base — CSS
    • Header — CSS
    • JavaScript events
    • Search bar — HTML
    • Search bar — CSS
    • JavaScript events continued
    • Featured articles — HTML
    • Featured articles — CSS
    • Quick read — HTML
    • Quick read — CSS
    • SwiperJS
    • Older posts — HTML
    • Older posts — CSS
    • Popular tags — HTML
    • Popular tags — CSS
    • Newsletter — HTML
    • Newsletter — CSS
    • Footer — HTML
    • Footer — CSS
    • Blog post — HTML
    • Blog post — CSS
    • Media queries

    Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch).

    I’m a teacher and developer with freeCodeCamp.org. I run the freeCodeCamp.org YouTube channel.

    If you read this far, tweet to the author to show them you care. Tweet a thanks

    Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

    freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

    Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

    Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

    Источник

    Оцените статью