Scribd
Upload
176 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
176 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
We take content rights seriously. If you suspect this is your content, claim it here.
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