Scribd
Upload
154 views

Coding Practice 10 Answers

1. The document contains code for a website footer section with social media icons, contact details, and copyright information. 2. The second part contains code for a portfolio website with a navbar, banner section with the developer's introduction and a contact button. 3. The CSS imports Google fonts and contains styles for the footer, navbar, banner, images and text.

Uploaded by

Kesava
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
154 views

Coding Practice 10 Answers

1. The document contains code for a website footer section with social media icons, contact details, and copyright information. 2. The second part contains code for a portfolio website with a navbar, banner section with the developer's introduction and a contact button. 3. The CSS imports Google fonts and contains styles for the footer, navbar, banner, images and text.

Uploaded by

Kesava
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

1.

vr website footer section

///html code

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-


DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>

<script src="https://kit.fontawesome.com/d1c2ea8b80.js" crossorigin="anonymous"></script>

</head>

<body>

<div class="footersection-bg-container pt-5">

<div class="container">

<div class="row">

<div class="col-12 col-md-4">

<div class="text-center text-md-left">

<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/vr-logo-
img.png" class="footer-section-logo pb-3" />
</div>

<div class="col-12">

<div class="d-flex flex-row justify-content-center justify-content-md-start ">

<div class="footersection-icons">

<i class="fa fa-google icons"></i>

</div>

<div class="footersection-icons">

<i class="fa fa-twitter icons"></i>

</div>

<div class="footersection-icons">

<i class="fa fa-instagram icons"></i>

</div>

<div class="footersection-icons">

<i class="fa fa-linkedin icons"></i>

</div>

</div>

</div>

<div class="col-12 pt-3">

<p class="address text-md-left">37,Ayur Vigyan Nagar,New Delhi,India.</p>

</div>

</div>

<div class="col-6 col-md-4">

<h1 class="contact-details">Contact Us</h1>

<p class="paragraph">

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"


class="bi bi-envelope" viewBox="0 0 16 16">

<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-


2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15
11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0
0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" />

</svg> [email protected]

</p>
<p class="paragraph">

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#959ead"


class="bi bi-telephone" viewBox="0 0 16 16">

<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661


1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033
1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-
2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678
0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29
2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0
0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034
1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-
7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />

</svg> 1234506789

</p>

<p class="paragraph">Rahul</p>

</div>

<div class="col-6 col-md-4">

<h1 class="contact-details">Lets Us Help You</h1>

<p class="paragraph">

100% Purchase Protection

</p>

<p class="paragraph">

Your Account

</p>

<p class="paragraph">Return Center</p>

<p class="paragraph">Help</p>

</div>

</div>

<div class="col-12">

<hr class="hr-line mb-2" />


<p class="last-para pb-5 text-center">

<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor"


class="bi bi-c-circle" viewBox="0 0 16 16">

<path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8.146


4.992c-1.212 0-1.927.92-1.927 2.502v1.06c0 1.571.703 2.462 1.927 2.462.979 0 1.641-.586 1.729-
1.418h1.295v.093c-.1 1.448-1.354 2.467-3.03 2.467-2.091 0-3.269-1.336-3.269-3.603V7.482c0-2.261
1.201-3.638 3.27-3.638 1.681 0 2.935 1.054 3.029 2.572v.088H9.875c-.088-.879-.768-1.512-1.729-
1.512Z" />

</svg>

2020 by Rahul. Created with Bootstrap

</p>

</div>

</div>

</div>

</body>

</html>

///css code
@import url('https://fonts.googleapis.com/css2?
family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+
Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&
family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1
,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,
700;1,700&display=swap');

.footersection-bg-container {

background-color: #19232d;

}
.footer-section-logo {

width: 60px;

height: 50px;

.footersection-icons {

background-color: #202b36;

width: 50px;

height: 50px;

border-radius: 40px;

margin: 5px;

padding-top: 12px;

padding-bottom: 12px;

padding-right: 14px;

padding-left: 14px;

.icons {

color: #5a7184;

font-size: 30px;

.address {

color: #5a7184;

font-size: 15px;

text-align: center;

.contact-details {

color: #5a7184;
font-size: 20px;

font-weight: 500;

.paragraph {

color: #5a7184;

font-size: 18px;

.hr-line {

background-color: white;

.last-para {

color: #5a7184;

font-size: 20px;

font-weight: 500;

font-family: "roboto";

2.Portfolio Website Navbar & Banner Section

///html code

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-


DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="#">

<div class="nav-letter-container">

<h1 class="nav-heading">J.</h1>

</div>

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"


aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#" id="font-color-1">Home</a>

<li class="nav-item">
<a class="nav-link" href="#" id="font-color-2">About me</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#" id="font-color-3">Projects</a>

</li>

<li class="nav-item">

<a class="nav-link" id="font-color-4" href="#">Receant Blogs</a>

</li>

<li class="nav-item">

<a class="nav-link" id="font-color-5" href="#">Terminals</a>

</li>

</ul>

</div>

</nav>

<div class="bottom-bg-container d-flex flex-column justify-content-center">

<div class="container">

<div class="row">

<div class="col-12 col-md-6 order-1 order-md-2">

<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/portfolio-
banner-img.png" class="image-sizing" />

</div>

<div class="col-12 col-md-6 order-2 order-md-1 ml-auto">

<h1 class="introduction-heading">Hey, I am <span class="jenny-css">Jenny</span></h1>

<p class="job-description">I am a Frontend Developer & Mentor</p>

<button class="button-styling">Contact me</button>

</div>

</div>

</div>

</div>

</body>
</html>

///css code

@import url('https://fonts.googleapis.com/css2?
family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+
Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&
family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1
,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,
700;1,700&display=swap');

#font-color-1 {

color: white;

#font-color-2 {

color: white;

#font-color-3 {

color: white;

#font-color-4 {

color: white;

#font-color-5 {

color: white;

}
.nav-heading {

color: white;

font-weight: bold;

padding-left: 15px;

padding-top: 5px;

.nav-letter-container {

height: 60px;

width: 60px;

border-radius: 0px;

border-style: solid;

border-color: #4b6cc1;

.bottom-bg-container {

background-color: #191a1d;

height: 100vh;

margin-left: auto;

.image-sizing {

height: 280px;

width: 280px;

.introduction-heading {

color: white;

font-weight: normal;

font-size: 50px;
}

.jenny-css {

color: #4b6cc1;

.job-description {

color: #9aa5b1;

font-size: 28px;

.button-styling {

color: white;

background-color: #4b6cc1;

border-width: 0px;

border-radius: 8px;

height: 40px;

width: 120px;

You might also like